SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript function instead of too many statements

    java script


    Code HTML4Strict:
    <script type="text/javascript">
    function show1(){
        document.getElementById(1).style.display="";
        document.getElementById(2).style.display="none";
    }
    function show2(){
        document.getElementById(2).style.display="";
        document.getElementById(1).style.display="none";
    }
    </script>

    HTML
    Code HTML4Strict:
    <div class="faredivwrap">
                <div class="farenav">
                    <div onClick="show1()">book now 1</div>
                    <div onClick="show2()">book now 2</div>
                </div>
                <div class="farecontent">
                    <div id="1" style="display:none;">1 form display here</div>
                    <div id="2" style="display:none;">2 form display here</div>
     
                </div>
            </div>

    CSS
    Code HTML4Strict:
    <style>
    .faredivwrap{ 
        border:1px solid #000;
        background-color:#CCC;
        position:absolute;
    }
    .farenav{ position:relative; float:left; margin:5px;}
    .farecontent{position:relative;float:left;margin:5px;}
    .farenav div{ border:1px solid #000;}
    .farecontent div{ border:1px solid #000; min-height:60px;}
    </style>

    i need a function
    like
    show();
    it takes argument..
    and works instead of
    function show1(){
    document.getElementById(1).style.display="";
    document.getElementById(2).style.display="none";
    }
    function show2(){
    document.getElementById(2).style.display="";
    document.getElementById(1).style.display="none";
    }

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I need a function like show(); that takes arguments.
    Here is a script that uses one show() function to operate both divs. I left your inline onclick handlers to make this as close to your original structure as I could.
    A few points to remember for next time, your id references should start with an alpha character - "a1" not "1" and the opposite to display="none" is display="block" not display="". If you are going to float left you don't need to use position relative in your CSS.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>function to show</title>
    <script type="text/javascript">
    var thisIndex; // global
     function show(indx){
        thisIndex=indx; 
       // toggle indx  
        var disp=(indx==1)? 2 : 1; 
        // div that is not clicked 
        allDivs[disp].style.display="none";
      // small delay to show change  
        setTimeout(function(){allDivs[thisIndex].style.display="block";}, 100);
        }
    // ------
    var allDivs=new Array(); // global 
     function init()
      { allDivs[0]=null;
        allDivs[1]=document.getElementById("a1");
        allDivs[1].style.display="none";
        allDivs[2]=document.getElementById("a2");
        allDivs[2].style.display="none";
      }
    // -----  
    window.onload=init;
    </script>
    <style type="text/css">
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    .fareDivWrap  { position:relative; top:0px; left:0px; margin-left:20px; width:300px; height:90px; border:1px solid #000;  background-color:#EEE;  }
    .fareNav     { float:left; margin:5px; width:90px; }
    .fareNav div  { cursor:pointer; margin-bottom:5px; height:20px; padding:5px; border:1px solid #000; background-color:#CCC; }
    .fareContent { float:left; margin:5px;}
    .fareContent div  { border:1px solid #000; height:50px; padding:10px; background-color:#FFF;   }
    .blue { color:#00F; }
    .red  { color:#F00; }
    
    </style>
    </head>
    
    <body>
    
    <div class="fareDivWrap">
      <div class="fareNav">
        <div onclick="show(1)">book now 1</div>
        <div onclick="show(2)">book now 2</div>
      </div>
      <div class="fareContent">
        <div id="a1" class="red">1 form display here</div>
        <div id="a2" class="blue">2 form display here</div>
      </div>
    </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks .. but again a question arise that .... i have 5 div's ... this example works for just 2 div's

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,192
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    Maybe this old jQuery code will help as a start? It works with unlimited "child nodes".
    Code JavaScript:
    $("<parent node selector here>").toggle(
    	function () {
    		$(this).css({"color":"#fff", 
    					"background-image":"url(./includes/plus-8.png)", 
    					"background-repeat": "no-repeat", 
    					"line-height": "8px"});
    		$(this.childNodes).css({"display":"none"});
    	},
    	function () {
    		$(this).css({"color":"#000", 
    					"background-image":"url(./includes/minus-8.png)", 
    					"background-repeat": "no-repeat", 
    					"line-height": "normal"});
    		$(this.childNodes).css({"display":"inline"});
    	}
    );function init(){
    	$("#toggle_ctrl").text('<expand all button text here>');
    	$("#toggle_ctrl").css({"display":"block"});
    	$("#toggle_ctrl").toggle(
    		function(){
    			$("#toggle_ctrl").text('<close all button text here>');
    			$("<parent node selector here>").each( function() {
    				if ( $(this).css('line-height') == '8px' )
    				{
    					$(this).trigger('click');
    				}
    			});
    			$("<parent node selector here>").css({"color":"#000", 
    										"background-image":"url(./includes/minus-8.png)", 
    										"background-repeat": "no-repeat", 
    										"line-height": "normal"});
    		},
    		function () {
    			$("#toggle_ctrl").text('<expand all button text here>');
    			$("<parent node selector here>").each( function() {
    				if ( $(this).css('line-height') == 'normal' )
    				{
    					$(this).trigger('click');
    				}
    			});
    			$("<parent node selector here>").css({"color":"#fff", 
    										"background-image":"url(./includes/plus-8.png)", 
    										"background-repeat": "no-repeat", 
    										"line-height": "8px"});
    		} 
    	);
    	$("<parent node selector here>").trigger('click');
    }
    $(document).ready(function() {
    	init();
    });

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adnan803 View Post
    thanks .. but again a question arise that .... i have 5 div's ... this example works for just 2 div's
    Here is the same thing for 5 divs. The onclick handlers are now added dynamically.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta name="ProgId" content="FrontPage.Editor.Document" >
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
    <title>function to show 2</title>
    <script type="text/javascript">
    var currentIndex; // global
    var allDivs=new Array(); // global 
     function init()
      { var i=0;
        allDivs[0]=null;
        for(i=1;i<6;i++)
         { allDivs[i]=document.getElementById("a"+i); 
         // add handlers 
          document.getElementById("n"+i).onclick=function(){ 
            if(currentIndex){allDivs[currentIndex].style.display="none"; }
            currentIndex=this.id.replace(/n/,"");
            setTimeout(function(){ allDivs[currentIndex].style.display="block";}, 100);    
        } } }
    // -----  
    window.onload=init;
    </script>
    <style type="text/css">
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    .fareDivWrap  { position:relative; top:0px; left:0px; margin-left:20px; width:300px; height:300px; border:1px solid #000;  background-color:#EEE;  }
    .fareNav     { float:left; margin:5px; width:90px; }
    .fareNav div  { cursor:pointer; margin-bottom:5px; height:20px; padding:5px; border:1px solid #000; background-color:#CCC; }
    .fareContent { float:left; margin:5px; }
    .fareContent div  { border:1px solid #000; height:50px; padding:10px; background-color:#FFF;  display:none; }
    .blue { color:#00F; }
    .red  { color:#F00; }
    
    </style>
    </head>
    
    <body>
    
    <div class="fareDivWrap">
      <div class="fareNav">
        <div id="n1">
          book now 1</div>
        <div id="n2">
          book now 2</div>
        <div id="n3">
          book now 3</div>
        <div id="n4">
          book now 4</div>
        <div id="n5">
          book now 5</div>
      </div>
      <div class="fareContent">
        <div id="a1" class="red">
          1 form display here</div>
        <div id="a2" class="blue">
          2 form display here</div>
        <div id="a3" class="red">
          3 form display here</div>
        <div id="a4" class="blue">
          4 form display here</div>
        <div id="a5" class="red">
          5 form display here</div>
      </div>
    </div>
    
    </body>
    
    </html>


Tags for this Thread

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
  •