Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question previousSibling question

    I am experimenting with the previousSibling command.

    I am trying to bold the text within a paragraph when a link is checked.
    I have tried two different times to figure this out as shown below, and neither works.
    One method returns 'undefined' and other other returns 'null'

    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Highlight Paragraph </title>
    <style type="text/css">
      .wt_normal { font-weight: normal; }
      .wt_bold   { font-weight:bold; }
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    
    // Following from: http://snipplr.com/view.php?codeview&id=3557
    function getPrevious(el) {
      function isIgnorable(node) {
    // is a comment or contains only whitespace
        return (node.nodeType == 8 || /^[\t\n\r ]+$/.test(node.data));
      }
      var prev = el;
      while (prev = prev.previousSibling) {
        if (!isIgnorable(prev)) break;
      }
      return prev;
    }
    // above does not work correctly as return is "undefined"
    
    
    // Following from: http://www.w3schools.com/dom/prop_element_previoussibling.asp
    //check if the previous sibling node is an element node
    function get_previoussibling(n) {
      x=n.previousSibling;
      while (x.nodeType!=1) { x=x.previousSibling; }
      return x;
    }
    // above does not work correctly as error is "x returns null"
    
    
    function bolden(el) {
      var prev = getPrevious(el);                 // returns undefined
    //  var prev = get_previoussibling(el);       // returns null
      alert(prev.innerHTML);                      // for testing purposes
      prev.className = 'wt_bold';
    }
    //]]>
    </script>
    
    </head>
    <body>
    <p class="wt_normal">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    <p class="wt_normal">
    Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    <p class="wt_normal">
    Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    </body>
    </html>
    Once I figure out one, I think I should be able to reverse the process and return the text to normal.

    Is anyone else having as much trouble understanding this concept as I am?

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    The paragraph has two childnodes, a textnode and a link. So the previousSibling of the link is the textnode, which is ignored by the function. Then it tries to move on to the previousSibling of the textnode. Which doesn't exist. So it returns undefined/null. If you want to get the paragraph move the link outside of the paragraph, or use the parentNode property.

  • Users who have thanked Goos for this post:

    jmrker (12-22-2011)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Almost ...

    Quote Originally Posted by Goos View Post
    The paragraph has two childnodes, a textnode and a link. So the previousSibling of the link is the textnode, which is ignored by the function. Then it tries to move on to the previousSibling of the textnode. Which doesn't exist. So it returns undefined/null. If you want to get the paragraph move the link outside of the paragraph, or use the parentNode property.
    Thank you 'Goos'. That makes a bit more sense, but I'm still missing something.
    Here's what I tried next. It does give me the alert message of the current className (wt_normal),
    but then it just dies without changing to the wt_bold className.

    I do feel like I'm homing in on the solution. Am I getting closer?

    In my instruction: p=el.parentNode;
    Is 'p' now a pointer to the <p> element
    or is it something else and the <p> to be referenced differently as a Node?

    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Highlight Paragraph </title>
    <style type="text/css">
      .wt_normal { font-weight: normal; }
      .wt_bold   { font-weight:bold; }
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function bolden(el) {
      var p = el.parentNode;
      alert('parent classname: '+p.className);
      p.className = 'wt_bold';
    }
    
    //]]>
    </script>
    
    </head>
    <body>
    <p class="wt_normal">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    <p class="wt_normal">
    Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    <p class="wt_normal">
    Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    </body>
    </html>

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by jmrker View Post
    I do feel like I'm homing in on the solution. Am I getting closer?
    Your revised code does work for me. What browser are you using?

    Btw, your doctype is off.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by venegal View Post
    Your revised code does work for me. What browser are you using?

    Btw, your doctype is off.
    I was developing the script at work on an iMac using FF browser.
    Now I am at home and using a HP also running FF.

    It works fine at home, so I'm not going nuts anymore (nor anyless).
    I will check on the work computer on Monday ... maybe a reboot will help (?)

    And yes, the doctype is only use that way during testing.
    It will be corrected before I use the script for real.

    Thanks again to 'Goos' and to you for checking it on a different machine.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    I have played with the script a bit more
    and added the capability to highlight and un-highlight the text areas.

    I also show it has the same effect on <tags> other than <p>.

    Seems to be working fine at this stage. I'll keep apprised of future checks.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Highlight Paragraph </title>
    <style type="text/css">
      .wt_normal { background-Color:#ffffff; }
      .wt_bold   { background-Color:#ffff00; }
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function bolden(el) {
      var p = el.parentNode;
      var tmp;
      if (p.className == 'wt_normal') {
        tmp = 'wt_bold';
    	el.innerHTML = '<span style="font-size: 10px;">[normal...]</span';
      } else {
        tmp = 'wt_normal'; 
    	el.innerHTML = '<span style="font-size: 10px;">[ bold ... ]</span'; 
      }
      p.className = tmp;
    }
    
    //]]>
    </script>
    
    </head>
    <body>
    <p class="wt_normal">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    <blockquote class="wt_normal" style="width:400px">
    Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </blockquote>
    
    <p class="wt_normal">
    Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.
    <a href="#" onclick="bolden(this)"><span style="font-size: 10px;">[ bold ... ]</span></a>
    </p>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    Philip M (12-22-2011)

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up Resolved...

    I've continued to play with the sibling logic and came up with this JS/CSS solution.
    It defaults to all FAQ questions and answers being shown if JS is disabled.

    Clicking on the question, makes the answer appear.
    Clicking again OR on the newly displayed answer causes the area to become hidden again.
    Appears to work on both PC and iMac FF browsers. Untested on others at this time.

    Seem to be getting easier with the help of the forum members.

    Code:
    <html>
    <head>
    <title> Paragraph Links </title>
    
    <style type="text/css">
    .para {
        font-family:monospace;
        font-size:12px;
        width:320px; 
    /*    border:1px solid blue; */
    }
    /* .para p { display:none; } */
    .para p { display:block; }
    </style>
    
    <script type="text/javascript">
    
    function get_nextsibling(n) {
      x=n.nextSibling;
      while (x.nodeType!=1) { x=x.nextSibling; }
      return x;
    }
    
    function show(info) { // alert(info.innerHTML);
      var p = get_nextsibling(info);  // alert(p.innerHTML);
      var tmp = p.style.display;
      if ((tmp == 'none') || (tmp == '')) { p.style.display = 'block'; }
                                     else { p.style.display = 'none'; }
      return false;
    }
    function hide(info) {
      var tmp = info.style.display;
      if ((tmp == 'block') || (tmp == '')) { info.style.display = 'none'; }
                                      else { info.style.display = 'block'; }
      return false;
    }
    
    
    window.onload = function() {
      var tmp;
      var sel = document.getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
    	if (sel[i].className == 'para') { 
    	  tmp = get_nextsibling(get_nextsibling(sel[i].firstChild));
    	  tmp.style.display = 'none';
        }
      }
    }
    
    </script>
    
    </head>
    <body>
    
    <h1> Paragraph Links </h1>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 1</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 2</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. </p>
    
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 3</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt.</p>
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 4</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus. </p>
    
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 5</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 6</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. </p>
    
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 7</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. </p>
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 8</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aenean posuere ligula vitae urna malesuada adipiscing. Maecenas est eros, iaculis in vulputate.</p>
    
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 9</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aliquam ultrices aliquet elementum. Ut vitae semper mauris.</p>
    </div>
    
    <div class='para'>
     <a href="#" onclick="return show(this)">Paragraph 10</a>
     <p onclick="hide(this)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt</p>
    
    </div>
    
    </body>
    </html>
    I cannot find the button to mark this thread 'RESOLVED'.


  •  

    Posting Permissions

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