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 8 of 8
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Doesn't go further than first div..

    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:
    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
    Shawn

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, but this needs a bump.

    I'm not getting answered. If it's because the question isn't clear, please tell me.
    Shawn

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.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>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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;

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Iterestingly enough, I have just this second found a solution
    But I would appreciate an explanation of your modification.
    here is my solution
    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;
       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:
    Code:
        img.i = i;
        img.j = j;
        img.onclick = function(){alter(this.i,this.j)};
    In this part of my code:
    Code:
    window.onload=altText;
    should I use this instead?
    Code:
    window.onload = function(){ altText() };
    What's the difference?

    Thanks a lot for your reply
    Last edited by shlagish; 03-16-2005 at 03:25 AM.
    Shawn

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It's not like I'm writing an html custum attribute:
    Code:
    <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?
    Shawn

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    It's not like I'm writing an html custum attribute:
    Code:
    <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.


  •  

    Posting Permissions

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