Web Analytics Made Easy -
StatCounter simple div toggler modification -- 1 small function i can't get :( - CodingForum

Announcement

Collapse
No announcement yet.

simple div toggler modification -- 1 small function i can't get :(

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • simple div toggler modification -- 1 small function i can't get :(

    Hey,

    This won't take long, i just can't get one tiny thing.

    I have a div-toggler that works as follows:
    Code:
    <script type="text/javascript"> 
      var arrPrevDiv = [null, null];
    
      function toggle(id, linkGroup) {
    
    	if (arrPrevDiv[linkGroup] != null) {
    		arrPrevDiv[linkGroup].style.display = "none"; 
    	}         
    
    	var s = document.getElementById(id);
    					
    	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
    	arrPrevDiv[linkGroup] = s; 
    	// window.location.href='#'+ id;
    	window.status=''
    	}  
    
    </script>
    and this is activated by
    Code:
    <a href="#Link4" onclick="return toggle('Link4', 0);">Link 4</a>
    The modification i can't seem to get is as follows:
    Code:
    	var m = document.getElementById('mainLogo').style.display;
    	if (m != "none") 
    	{
    		document.getElementById('mainLogo').style.display == "none"
    	}
    Basically whats changed is that now when the page loads, a main logo (or div) is shown, and when a link is clicked i need the main div to be set to "display: none" and the other div to be shown in its place.

    i can't figure out how to do it

    it may also be a variation on
    Code:
    	window.onload = function(){
    	arrPrevDiv[1] = document.getElementById("mainLogo");
    but i don't know.

    any ideas?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    maybe you should thing otherwise. Determine a way to "isolate" you divs you want to show/hide in a collection (so that anytime you may circle through them). Now pass the id of the div you want to be shown as a parameter to a function which will circle through that collection's elements and hides all, except for the elements with the passed id. If you want that a certain div to be visible onload, simpli call onload that function and pass that id.
    Ex:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .links{
    position:absolute;
    display:none;
    background:#CCCCCC;
    width:200px;
    height:200px;
    left:200px;
    top:20px;
    }
    </style>
    <script type="text/javascript">
    function showhide(id){
    var i=1,d=document.getElementById(id),divs
    while(divs=document.getElementById('Link'+i++)){
    divs.style.display=divs==d?'block':'none';
    }
    }
    onload=function(){
    showhide('Link1')
    }
    </script>
    </head>
    <body>
    <span onclick="showhide('Link1')">show DIV 1</span>
    <br>
    <br>
    <span onclick="showhide('Link2')">show DIV 2</span>
    <br>
    <br>
    <span onclick="showhide('Link3')">show DIV 3</span>
    <br>
    <br>
    <span onclick="showhide('Link4')">show DIV 4</span>
    <div id="Link1" class="links">DIV 1</div>
    <div id="Link2" class="links">DIV 2</div>
    <div id="Link3" class="links">DIV 3</div>
    <div id="Link4" class="links">DIV 4</div>
    </body>
    </html>
    Is this what you need?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

    Comment


    • #3
      I'll have to test it out... but to be honest the div toggler I have now works well on other pages i have (see www.fvjones.ca/enter.html, so i'd rather not change it especially since the modification i need is so miniscule

      whats the advantage to your approach? What about it would justify changing out the script (as ask because if there is a clear advantage, i may do it)

      alternatively, can you help me make the small modification to my script?
      Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

      Comment


      • #4
        sweet, fixed it meeself

        Code:
        <script type="text/javascript"> 
          var arrPrevDiv = [null, null];
        
          function toggle(id, linkGroup) {
        
        	if (arrPrevDiv[linkGroup] != null) {
        		arrPrevDiv[linkGroup].style.display = "none"; 
        	}         
        
        	var s = document.getElementById(id);
        				
        	if (id != 'Link1') {
        		document.getElementById("Link1").style.display = "none"	
        		}
        		
        	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
        	arrPrevDiv[linkGroup] = s; 
        	// window.location.href='#'+ id;
        	window.status=''
        	
        	}  
        
        </script>
        Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

        Comment

        Working...
        X