...
PDA

Doesn't go further than first div..

shlagish
03-15-2005, 12:34 AM
I'm sorry, but this title is the best I could find..
Here is my situation:
I want a script that offers multiple alternatives for a paragraph.
I decided to create a script that would search for all divs with the class of 'hasAlt' and hide all but the first p in these divs. The script would also add an image that, when clicked, makes the next paragraph visible and hides the current paragraph. Is this clear?

So, I got everything working, but I still have a slight problem:
If I put nothing but my <div class='hasAlt'>content</div>, it works wonderfully. But if I put any other div, it doesn't work. To be more precise, it only works if this special div is the first div of the document. So if I have two of these divs, the first one works, but the second doesn't. I really don't know why, and this is what I would like you to help me find out.
Here is my comlete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Alternate Text</title>
<style type="text/css">
<!--

.hasAlt p { border: 1px solid #000;
border-width: 1px 0 0 1px;
padding: 8px;
}
.getAltLink { cursor: pointer;
float: right;
position: relative;
top: -16px;
right: -8px;
border: 1px solid #000;
}

-->
</style>
<script type="text/javascript">
<!--

function hasAttr(obj,attr){

var result=false;
if(obj.getAttributeNode(attr).value){
result=obj.getAttributeNode(attr).value;
}
return result;
}

function altText(){

var divs=document.getElementsByTagName('div'), i;
for(i=0;i<divs.length;i++){
if(hasAttr(divs[i],'class').match('hasAlt')){
var ps=divs[i].getElementsByTagName('p'), j;
for(j=0;j<ps.length;j++){
var img=document.createElement('img');
img.setAttribute('onclick','alter('+i+','+j+')');
img.setAttribute('class','getAltLink');
img.setAttribute('src','../images/alt.gif');
img.setAttribute('alt','Get alternate explanation');
img.setAttribute('title','Get alternate explanation');
ps[j].insertBefore(img,ps[j].firstChild);
ps[j+1].style.display='none';
}
}
}
}

function alter(a,b){

var divs=document.getElementsByTagName('div');
var ps=divs[a].getElementsByTagName('p');
ps[b].style.display='none';
if(b!=ps.length-1){
ps[b+1].style.display='block';
} else {
ps[0].style.display='block';
}
}
window.onload=altText;


-->
</script>
</head>
<body>

<div class="hasAlt">
<p>Short Text.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="hasAlt">
<p>Short</p>
<p>Medium. Medium. Medium. Medium. Medium. Medium. </p>
<p>Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. </p>
</div>

</body>
</html>


It seems that the loop I put in stops at the first div. It doesn't go see the others..
What do you think?
Thanks for any help :)
shlagish
03-16-2005, 01:52 AM
Sorry, but this needs a bump.

I'm not getting answered. If it's because the question isn't clear, please tell me.
glenngv
03-16-2005, 03:03 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Alternate Text</title>
<style type="text/css">
<!--

.hasAlt p { border: 1px solid #000;
border-width: 1px 0 0 1px;
padding: 8px;
}
.getAltLink { cursor: pointer;
float: right;
position: relative;
top: -16px;
right: -8px;
border: 1px solid #000;
}

-->
</style>
<script type="text/javascript">
<!--

function hasAttr(obj,attr){

var result=false;
if(obj.getAttributeNode(attr).value){
result=obj.getAttributeNode(attr).value;
}
return result;
}

function altText(){

var divs=document.getElementsByTagName('div'), i;
for(i=0;i<divs.length;i++){
if(hasAttr(divs[i],'class').match('hasAlt')){
var ps=divs[i].getElementsByTagName('p'), j;
for(j=0;j<ps.length;j++){
var img=document.createElement('img');
img.i = i;
img.j = j;
img.onclick = function(){alter(this.i,this.j)};
img.setAttribute('class','getAltLink');
img.setAttribute('src','../images/alt.gif');
img.setAttribute('alt','Get alternate explanation');
img.setAttribute('title','Get alternate explanation');
ps[j].insertBefore(img,ps[j].firstChild);
if (j>0) ps[j].style.display='none';
}
}
}
}

function alter(a,b){

var divs=document.getElementsByTagName('div');
var ps=divs[a].getElementsByTagName('p');
ps[b].style.display='none';
if(b!=ps.length-1){
ps[b+1].style.display='block';
} else {
ps[0].style.display='block';
}
}
window.onload=altText;


-->
</script>
</head>
<body>

<div class="hasAlt">
<p>Short Text.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy

dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy

dog.</p>
</div>
<div class="hasAlt">
<p>Short</p>
<p>Medium. Medium. Medium. Medium. Medium. Medium. </p>
<p>Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long.

Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long.

Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. </p>
</div>

</body>
</html>
glenngv
03-16-2005, 03:19 AM
You will get inconsistent results for some attributes across all browsers so I suggest you use img.attribute = value instead of img.setAttribute. And in case of class name, use img.className=value;
shlagish
03-16-2005, 03:23 AM
Iterestingly enough, I have just this second found a solution :)
But I would appreciate an explanation of your modification.
here is my solution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Alternate Text</title>
<style type="text/css">
<!--

.hasAlt p { border: 1px solid #000;
background: #ffc;
padding: 8px;
}
.getAltLink { cursor: pointer;
float: right;
position: relative;
top: -16px;
right: -10px;
border: 1px solid #000;
}

-->
</style>
<script type="text/javascript">
<!--

function hasAttr(obj,attr){

var result=false;
if(obj.getAttributeNode(attr).value){
result=obj.getAttributeNode(attr).value;
}
return result;
}

function altText(){

var divs=document.getElementsByTagName('div'), i;
for(i=0;i<divs.length;i++){
if(hasAttr(divs[i],'class').match('hasAlt')){
var ps=divs[i].getElementsByTagName('p'), j;
for(j=0;j<ps.length;j++){
var img=document.createElement('img');
img.setAttribute('onclick','alter('+i+','+j+')');
img.setAttribute('class','getAltLink');
img.setAttribute('src','../images/alt.gif');
img.setAttribute('alt','Get alternate paragraph');
img.setAttribute('title','Get alternate paragraph');
ps[j].insertBefore(img,ps[j].firstChild);
if(j<ps.length-1){
ps[j+1].style.display='none';
}
}
}
}
}

function alter(a,b){

var divs=document.getElementsByTagName('div');
var ps=divs[a].getElementsByTagName('p');
ps[b].style.display='none';
if(b!=ps.length-1){
ps[b+1].style.display='block';
} else {
ps[0].style.display='block';
}
}
window.onload=altText;


-->
</script>
</head>
<body>

<div class="hasAlt">
<p>Short Text.</p>

<p>The quick brown fox jumped over the lazy dogs.</p>
<p>The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. </p>
</div>
<div class="hasAlt">
<p>Short</p>
<p>Medium. Medium. Medium. Medium. Medium. Medium. </p>
<p>Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. </p>

</div>

</body>
</html>

The way to make all other than the first paragraph be hidden is essencially the same. Yours is kind of simpler, so I'll go for that. but I don't really understand what this does:

img.i = i;
img.j = j;
img.onclick = function(){alter(this.i,this.j)};

In this part of my code:

window.onload=altText;

should I use this instead?

window.onload = function(){ altText() };

What's the difference?

Thanks a lot for your reply :)
glenngv
03-16-2005, 03:49 AM
event handlers are not strings unlike the normal html attributes. The cross-browser way is:

object.onevent = function;

If the function has no parameter, you just assign the function name without () as you did in window.onload. But if there are parameters, you assign the handler to an anonymous function that calls the named function with parameters.

object.onevent = function(){theFunction(param)};

In the case of

img.onclick = function(){alter(this.i,this.j)};

I used custom attributes which I also named i and j because when I use the local variables i and j,

img.onclick = function(){alter(i,j)};

the onclick handler picks the last value of i and j in all the images. It needs to get the corresponding values based from the iteration in the loop. The only quick solution I can think of is by using custom attributes. There are issues, though, regarding the use of custom attributes, please read it here (http://www.codingforums.com/showthread.php?t=52093).
shlagish
03-16-2005, 04:21 AM
It's not like I'm writing an html custum attribute:

<img i="2" />

so I think I should be okay..

My conclusion:
If I have parameters, use function() { myFunc('attr'); }
otherwise, use myFunc;

Is that right?
glenngv
03-16-2005, 04:46 AM
It's not like I'm writing an html custum attribute:

<img i="2" />

so I think I should be okay..
Essentially you're doing like that even when you do it programmatically.

My conclusion:
If I have parameters, use function() { myFunc('attr'); }
otherwise, use myFunc;
Is that right?
Yeah, that's right.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum