-
DOM question
I am looking to create a dynamic text section on my website...
what I currently have is this:
<span id="hidden"><a href="#" onClick="hidden_text()">(Read More)</a></span>
and:
function hidden_text(){
var hidden = document.getElementById('hidden');
hidden.firstChild.nodeValue='New text goes here';
}
but for some reason this just doesn't work, it doesn't error or anything.
I have tried this:
hidden.replaceChild='New text goes here';
to no avail either... however
<span id="hidden">ABC <a href="#" onClick="hidden_text()">(Read More)</a></span>
goes from:
ABC (Read More)
to
New text goes here (Read More)
effectively the same results with:
<span id="hidden"><a href="x.cfm">ABC</a> <a href="#" onClick="hidden_text()">(Read More)</a></span>
To ensure that there isn't some issue with change the link used to trigger the change.
so yeah... any ideas would be appreciated.
cheers,
catch
-
Hi
I also would have expected this to work. A more careful analysis
revealed that the corresponding nodeType is incompatible with the
"nodeValue" - attribute.
Let me elaborate:
Case: <span id="hidden"><a href=...>: document.getElementById("hidden").firstChild.nodeType == 1,
ie. of type "element-node" (in particular an "a"-element). Valid
attributes thus are "href", "name", "target", ... as per
document.getElementById("hidden").firstChild.href etc.
However, I do not see how to change the "(Read More)" directly.
Case: <a id="a_hidden" href="#" ...>: document.getElementById("a_hidden").firstChild.nodeType == 3,
ie. of type "text-node". Here, nodeValue is defined. Thus a working example:
Code:
function hidden_text(){
document.getElementById('a_hidden').firstChild.nodeValue='(already read)';
}
<span id="hidden"><a id="a_hidden" href="#" onClick="hidden_text()" target="_blank">(Read More)</a></span>
Cheers
-
Ok... so now I have another related issue:
document.getElementById('hidden').firstChild.nodeValue="Text\non\nseperate\nlines";
Shows one the same line, with what looks like tabs between the words. Clearly I cannot use <br> as it won't render.
\r shows the same behavior... how does one go about inserting line breaks into dynamic text?
cheers,
catch
-
What about the literal return?
document.getElementById('hidden').firstChild.nodeValue="Text
on
seperate
lines";
Just a suggestion. I would test it myself but I don't know how you're using it.
-
That breaks the script completely.
cheers,
catch
-
I found this:
http://www.irt.org/script/1752.htm
IE seems to not follow this, it works in firefox though. You probably don't want to use the <pre> tag around it anyway.
Weird that it's so hard to have linebreaks here.
-
That sorta works... but it creates a new problem...
It doesn't seem possible to set the width for a pre element... and it'll just streach whatever it is in to not break lines.
meh... I've fixed it... did the width manually with line breaks and then shored up the CSS so that font size definitions are comprehensive... just incase someone has their browser set to a non-default font size.
thanks for the help. :)
cheers,
catch
-
In case you were curious to see the end result... basically I have a section on my site that contains sections of large amount of text on a single page. To make this page easily summarized, much of the text is hidden by default, users can click a (read more) link to show the full text and then hit a close link to hide it again when they are done.
First I have this in the web page:
Code:
Summary Text<br>
<pre id="hidden">... <a href="#" onClick="show_text()" id="a_hidden" onMouseOver="window.status='Show Extended Summary';return true" onMouseOut="window.status='';return true">(Extended Summary)</a></pre>
Nothing too significant here
And this in the JavaScript file:
Code:
if (navigator.appName=="Microsoft Internet Explorer"){
var nl='\r';
}else{
var nl='\n';
}
function show_text(){
document.getElementById('hidden').firstChild.nodeValue=nl+"Full extended summary text"+nl+"that must have line breaks inserted manually"+nl+"so it doesn't mess up the formatting"+nl;
document.getElementById('a_hidden')["onclick"]=new Function('hide_text()');
document.getElementById('a_hidden')["onmouseover"]=new Function("window.status='Close Extended Summary';return true;");
document.getElementById('a_hidden').firstChild.nodeValue='(Close)';
return false;
}
function hide_text(){
document.getElementById('hidden').firstChild.nodeValue='... ';
document.getElementById('a_hidden')["onclick"]=new Function('show_text()');
document.getElementById('a_hidden')["onmouseover"]=new Function("window.status='Show Extended Summary';return true;");
document.getElementById('a_hidden').firstChild.nodeValue='(Extended Summary)';
return false;
}
The little bit with the \n vs. \r is required because MSIE uses a different new line char than other browsers. It is also important to note that I used getElementById('a_hidden')["blah"]= rather than getElementById('a_hidden').setAttribute("blah","value")... because the latter seems less supported (though more correct).
Also, I used Funtion("blah") rather than just "blah" because the show_text() and window.status are function calls, but when you define them at the start they don't need to be explicitly called as such, however inserting them later messes up the script flow or something... and doesn't work.
and lastly I have PRE id=hidden defined in my CSS doc as so:
Code:
#hidden{
color: rgb(51,51,51);
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
}
The padding and margin settings are nice, since I didn't want heaps of empty space on either side of the pre... the rest just ensures that the text isn't totally out of place.
Thanks for all the help.
cheers,
catch
