DOM question
Results 1 to 8 of 8

Thread: DOM question

  1. #1
    Banned
    Join Date
    May 2003
    Posts
    1,004

    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

  2. #2
    Senior Member
    Join Date
    Mar 2004
    Posts
    557
    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: &lt;span id="hidden"&gt;<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: &lt;a id="a_hidden" href="#" ...&gt;: 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)';
    }
    
    &lt;span id="hidden"&gt;&lt;a id="a_hidden" href="#" onClick="hidden_text()" target="_blank"&gt;(Read More)&lt;/a&gt;&lt;/span&gt;
    Cheers
    If the only tool you have is a hammer, you tend to see every problem as a nail.
    (Abraham Maslow, Psychologist, 1908-70)

  3. #3
    Banned
    Join Date
    May 2003
    Posts
    1,004
    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 &lt;br&gt; as it won't render.

    \r shows the same behavior... how does one go about inserting line breaks into dynamic text?

    cheers,

    catch

  4. #4
    Elite Hacker
    Join Date
    Mar 2003
    Posts
    1,407
    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.

  5. #5
    Banned
    Join Date
    May 2003
    Posts
    1,004
    That breaks the script completely.

    cheers,

    catch

  6. #6
    Elite Hacker
    Join Date
    Mar 2003
    Posts
    1,407
    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 &lt;pre&gt; tag around it anyway.

    Weird that it's so hard to have linebreaks here.

  7. #7
    Banned
    Join Date
    May 2003
    Posts
    1,004
    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

  8. #8
    Banned
    Join Date
    May 2003
    Posts
    1,004
    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&lt;br&gt;
    &lt;pre id="hidden"&gt;... &lt;a href="#" onClick="show_text()" id="a_hidden" onMouseOver="window.status='Show Extended Summary';return true" onMouseOut="window.status='';return true"&gt;(Extended Summary)&lt;/a&gt;&lt;/pre&gt;
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

 Security News

     Patches

       Security Trends

         How-To

           Buying Guides