SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    looping through divs on a page

    hi,

    i am using the following function to expand and collapse a div on the page. this works fine. however, i need to adapt the function to cater for multiple divs on the same page.

    i have ensured in my php script which generates the host html, that my img and div tag ids are numbered sequentially.

    my question is how do i loop through the page in javascript to ascertain how many divs i have and then react accordingly in the function?

    Code:
    function toggleMe(targetDiv){
    			
    		collapseImg = "/layout/clubnme/butt_collapse.gif";
    		expandImg = "/layout/clubnme/butt_expand.gif"
      		var e=document.getElementById(targetDiv);
     			if(!e)return true;
      			if(e.style.display=="none"){
        			e.style.display="block"
        			document.getElementById('toggleimg').src= collapseImg;
        			
      					} 
      					else {
        				
      					e.style.display="none";
      						document.getElementById('toggleimg').src= expandImg;
      					}
      				
      					return true;
    			}
    many thanks for any replies.

    lukemack.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi lukemack,

    Here's the basic idea:
    Code:
    var ele, num = 1;
    while (1) {
      ele = document.getElementById('idPrefix' + num);
      if (!ele) break;
      else {
        // do something with 'ele'
      }
      ++num;
    }

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukemack
    hi,

    i am using the following function to expand and collapse a div on the page. this works fine. however, i need to adapt the function to cater for multiple divs on the same page.

    i have ensured in my php script which generates the host html, that my img and div tag ids are numbered sequentially.

    my question is how do i loop through the page in javascript to ascertain how many divs i have and then react accordingly in the function?

    Code:
    function toggleMe(targetDiv){
    			
    		collapseImg = "/layout/clubnme/butt_collapse.gif";
    		expandImg = "/layout/clubnme/butt_expand.gif"
      		var e=document.getElementById(targetDiv);
     			if(!e)return true;
      			if(e.style.display=="none"){
        			e.style.display="block"
        			document.getElementById('toggleimg').src= collapseImg;
        			
      					} 
      					else {
        				
      					e.style.display="none";
      						document.getElementById('toggleimg').src= expandImg;
      					}
      				
      					return true;
    			}
    many thanks for any replies.

    lukemack.
    Assuming the numbering starts at 0, this may work:
    Code:
    for(var i=0, id; document.getElementById( id=("divName"+i) ) ; i++)
     toggleMe(id);

  4. #4
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the replies. is there a way of counting the divs on the page with specific ids?

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logic Ali, that's a very slick solution!

  6. #6
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you explain how it integrates with the existing function and where the toggleMe(id) call is made?

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukemack
    thanks for the replies. is there a way of counting the divs on the page with specific ids?
    Again if they start at 0:
    Code:
    for(var i=0; document.getElementById( "divName"+i ); i++)
    ;
    
    // Value of i represents # of divs found.

  8. #8
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i am doing the following but the expand and collapse images are not toggling as they were previously with my single div:

    Code:
    function toggleMe(targetDiv){
    			
    				collapseImg = "/layout/clubnme/butt_collapse.gif";
    				expandImg = "/layout/clubnme/butt_expand.gif"
      				var e=document.getElementById(targetDiv);
     					if(!e)return true;
      					if(e.style.display=="none"){
        					e.style.display="block"
        					document.getElementById('toggleimg').src= collapseImg;
        			
      					} 
      					else {
        					
      				e.style.display="none";
      				for(var i=0, id; document.getElementById(( id="toggleimg"+i )); i++){
    ;				
      						document.getElementById(id).src= expandImg;
      						}
      						
      					}
      				
      					return true;
    			}

  9. #9
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi. thanks again for the replies. however, i can;t get this working. as far as I can tell, getElementbyId will only return one element, not an array of elements. also, in a for loop, i would expect the condition to look for like:

    (i=0; i meets some criteria; i++) whereas yours doesn;t do that.


    any chance someone could take another look at this?

    thanks,

    lukemack.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukemack
    hi. thanks again for the replies. however, i can;t get this working. as far as I can tell, getElementbyId will only return one element, not an array of elements. also, in a for loop, i would expect the condition to look for like:

    (i=0; i meets some criteria; i++) whereas yours doesn;t do that.
    That's exactly what it does. The criteria is that the returned value from document.getElementById should not be null (or anything that evaluates to false).
    It would help to see all of your code to see exactly what's supposed to happen. Can you confirm that the elements referred to by the IDs toggleimage+n are image tags and not divs.

  11. #11
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi - thanks for persisting!

    the html looks like this:

    Code:
    <div id="bandLinks0" style="display:none">band link</div></ul></div><div id="dateFooter">Add gig to diary<img src ="pink_arrow.gif"alt=""/> </div><div id ="giglist"><ul><div id ="dateHeader">10 Nov 2006</div><li > James Morrison <img id="toggleimg1"src="/layout/clubnme/butt_expand.gif" onClick = "return toggleMe('bandLinks1')" />
    
    </li>
    <div id="bandLinks1" style="display:none">band link</div></ul></div><div id="dateFooter">Add gig to diary<img src ="pink_arrow.gif"alt=""/> </div><div id ="giglist"><ul><div id ="dateHeader">11 Nov 2006</div><li > Cerys Matthews <img id="toggleimg2"src="butt_expand.gif" onClick = "return toggleMe('bandLinks2')" />
    </li>
    <div id="bandLinks2" style="display:none">band link</div></ul></div><div id="dateFooter">Add gig to diary<img src ="pink_arrow.gif"alt=""/> </div><div id ="giglist"><ul><div id ="dateHeader">12 Nov 2006</div><li > Filthy Dukes <img id="toggleimg3"src="butt_expand.gif" onClick = "return toggleMe('bandLinks3')" />
    </li>
    so i'm trying to target the img tags with ids 'toggleimg'

    the expand / collapse action works but the images do not toggle. i have tried the following (and lots of variations using your code):

    Code:
    			function toggleMe(targetDiv){
    			
    				collapseImg = "/layout/clubnme/butt_collapse.gif";
    				expandImg = "/layout/clubnme/butt_expand.gif";
    				
      				var e=document.getElementById(targetDiv);
      				
     					if(!e)return true;
      					if(e.style.display=="none"){
        					e.style.display="block";
        					document.getElementById('toggleimg').src= collapseImg;
        			
      					} 
      					else {
        					
      						e.style.display="none";
    						
      						for (i=1; i<10;i++){
      						test = document.getElementById('toggleimg'+i)
      						test.src= expandImg;
      						}
    
      						
      					}
      				
      					return true;
      					
    			}

  12. #12
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukemack
    Code:
    document.getElementById('toggleimg').src=
    Where is 'toggleimg'?

  13. #13
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have the image in your html. Logic Ali has provided a really great toggle function, put in image and this will work great for you.

    Here is what i use (I will be implementing Logic ALi's toggle function instead of what i have, will post it as soon as it is done) . Please pay special attention to the name of the img and the content div tag id.

    Code:
    <div>
    <a href="javascript:showhideOnClick('divNAME1')">
    	<img border="0" src="btn_action_minus.gif" alt="toggle" name="picNAME1"></a> My Header
    <div> 
    <div id="divNAME1">MY CONTENT</div>
    when i need to show hide the content div programatically at load time i call the function as (if you are always showing your content then you don't have to do this):
    Code:
    <script language="javascript">
    <!--
    showhideWhileLoading('NAME1',0); //1 is to show, 0 is to not show
    //-->
    </script>
    i have placed my 2 functions showhideOnClick and showhideWhileLoading in the js file.

    here are those 2
    Code:
     
    //show hide blocks
    var picShowHideMinus = new Image();
    var picShowHidePlus = new Image();
    picShowHideMinus.src = 'btn_action_minus.gif';
    picShowHidePlus.src = 'btn_action_plus.gif';
    function showhideWhileLoading(CAT,nShow){
    var objCat = document.getElementById('div'+CAT);
    var objPic = document.getElementById('pic'+CAT);
    // n = 0 = not show
    // n = 1 = show
    if(objCat && objPic){
    	if(nShow == 1){
    		objCat.style.display="";
    		objPic.src = picShowHideMinus.src;
    	}else{
    		objCat.style.display="none";
    		objPic.src = picShowHidePlus.src;
    	}
    }
    }
    function showhideOnClick(CAT) { 
    var objCat = document.getElementById("div"+CAT);
    var objPic = document.getElementById("pic"+CAT);
    if(objCat && objPic){ 
    	if (objCat && objCat.style.display=="none") {
    	 objCat.style.display="";
    	 objPic.src = picShowHideMinus.src;
    	} 
    	else {
    	 objCat.style.display="none"; 
    	 objPic.src = picShowHidePlus.src;
    	}
    }
    }
    i have ensured in my php script which generates the host html, that my img and div tag ids are numbered sequentially.

    my question is how do i loop through the page in javascript to ascertain how many divs i have and then react accordingly in the function?
    inside the <head> tag define a variable like
    Code:
     <script language="javascript"> 
    <!--
    var nTotalDivs = 0;
    //-->
    </script>
    once you have created all the divs, you know how many divs were created, so the last thing assign this number to nTotalDivs, i am using ASP syntax.
    Code:
     <script language="javascript"> 
    <!--
    nTotalDivs = parseInt(<%=MyTotalDivs%>);
    //-->
    </script>
    Now on the page you know how many divs you have. Some one can also show you how to do this via dom/elements.

    Use it like Logic Ali has shown it
    Code:
     for(var i=0; i<nTotalDivs; i++){ 
    //do processing here
    }
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  14. #14
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the img is there - you just have to scroll to the right. it looks like this:

    <img id="toggleimg1"src="butt_expand.gif" onClick = "return toggleMe('bandLinks1')" />

    they are numbered sequentially.

    i also don't have access to the head tag in the document as that is rendered by another script.

  15. #15
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukemack
    the img is there - you just have to scroll to the right. it looks like this:

    <img id="toggleimg1"src="butt_expand.gif" onClick = "return toggleMe('bandLinks1')" />

    they are numbered sequentially.

    i also don't have access to the head tag in the document as that is rendered by another script.
    Code:
    document.getElementById('toggleimg').src=
    Try again. The above statement refers to 'toggleimg' not 'toggleimg1'.

  16. #16
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup i know that. thats the statement i need to change with a for loop but i cant get it to work. are you able to provide an example of your code working?
    Last edited by lukemack; Nov 23, 2006 at 11:20.

  17. #17
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    london
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved

    Code:
    			function toggleMe(targetDiv){
    			
    				collapseImg = "butt_collapse.gif";
    				expandImg = "butt_expand.gif";
      				var e=document.getElementById(targetDiv);
      				var imageDivs = new Array();
      				for (i=0; i< document.getElementsByTagName('img').length;i++){
    		 			imageDivs[i] = document.getElementById('toggleimg'+i);
    		 			
    					}
    
     					if(!e)return true;
      					if(e.style.display=="none"){
        					e.style.display="block";
        					//alert(imageDivs[1].id);
        					//imageDivs[0].src= collapseImg;
        					for (i=0;i<imageDivs.length;i++){
        					
        						if (imageDivs[i].id.substr(9,1) == targetDiv.substr(9,1)){
        						imageDivs[i].src=collapseImg;
        						}
        					}
        					
        			
      					} 
      					else {
        					
      						e.style.display="none";
        					for (i=0;i<imageDivs.length;i++){
        					
        						if (imageDivs[i].id.substr(9,1) == targetDiv.substr(9,1)){
        						imageDivs[i].src=expandImg;
        						}
        						}
    
      					}
      				
      					return true;		
    			}


Bookmarks

Posting Permissions

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