...

View Full Version : previousSibling question



jmrker
12-21-2011, 08:31 PM
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'



<!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? :confused:

Goos
12-21-2011, 09:17 PM
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.

jmrker
12-21-2011, 10:45 PM
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?



<!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>

venegal
12-21-2011, 11:24 PM
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.

jmrker
12-22-2011, 02:51 AM
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.
:thumbsup:

jmrker
12-22-2011, 03:16 AM
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.
:thumbsup:



<!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>

jmrker
12-23-2011, 04:50 PM
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. :thumbsup:



<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'.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum