www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20

Thread: Switch Div Content Using Javascript

  1. #16
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    my server is down

    you should not hot link to scripts on my site

    create a .js file of

    Code:
    // Animate (11-January-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // A light weight animator to progressively change
    // the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and 'liner'.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.52K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.neg=srt<0||fin<0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
      this.apply();
      if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    and use that
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  2. #17
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    if anyone here could tell me where im going wrong... the page is showing the number 4 and 5 containers div "Whole bunch of text here" its not hiding those two lines. Then when I click the links my jquery effect fires off but no new content loads.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>David's Site</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    		<script src="js/jquery.zaccordion.js"></script>
    		
    		<!-- for the slide show -->
    		<style type="text/css">
    			/* Just some styles to set the page layout. */
    			* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
    			body {padding:20px;line-height:20px;font-size:12px;color:#000;}
    			h1 {font-size:18px;margin:10px 0;line-height:1;}
    			h2 {font-size:14px;margin:10px 0;line-height:1;}
    			p {font-size:12px;margin:10px 0;}
    			small {font-size:11px;margin:10px 0;color:#333;}
    			a {font-size:12px;text-decoration:none;color:#f00;}
    			p span {color:#00f;}
    			#container {width:960px;margin:0 auto;padding-bottom:40px;}
    			#examples {margin-top:60px;}
    			pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed #ddd;padding:10px;background:#f6f6f6;}
    			pre.html {margin:10px 0;}
    			.clear {clear:both;}
    		</style>
    	
      
    <style type="text/css">
    @import url(css.css);
    </style>
    <script type="text/javascript" src="js.js"></script>
    
    
    <!-- for loading the div with ajax -->
    <script>
    function showDiv(idInfo) {
      var sel = document.getElementById('divLinks').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      document.getElementById('containers'+idInfo).display = 'block';
      return false;
    }
    </script>
    
    <style type="text/css">
    #containers1, #containers2, #containers3, #containers4 #containers5 {
      display:none;
      overflow:hidden;
    }
    </style>
    
    </head>
    
    <body>
    <div id="top">
    </div>
    
    
    <!-- The navigation css is in styles.css -->
    
    <div id="main">
    
    <ul id="navigationMenu">
        <li>
    	    <a class="home" href="#" onclick="return showDiv('1');return false">
                <span>Home</span>
            </a>
        </li>
        
        <li>
        	<a class="about" href="#" onclick="return showDiv('2');return false">
                <span>About</span>
            </a>
        </li>
        
        <li>
    	     <a class="services" href="#" onclick="return showDiv('3');return false">
                <span>Services</span>
             </a>
        </li>
        
        <li>
        	<a class="portfolio" href="#" onclick="return showDiv('4');return false">
                <span>Portfolio</span>
            </a>
        </li>
        
        <li>
        	<a class="contact" href="#" onclick="return showDiv('5');return false">
                <span>Contact us</span>
            </a>
        </li>
    </ul>
        
    </div>
    
    
    <!-- The css for the main area is in css.css-->
    <!-- The wrapper and the content div control the jquery slide up effect -->
    
    <div id="wrapper">
    	<div id="content">
      
      <!-- The 5 container content divs will display in the containers area -->		   	
           <div id="divLinks">
     <div id="containers1">Containers #1<p>Whole bunch of text 1</div>
     <div id="containers2">Containers #2<p>Whole bunch of text 2</div>
     <div id="containers3">Containers #3<p>Whole bunch of text 3</div>
     <div id="containers4">Containers #4<p>Whole bunch of text 4</div>
      <div id="containers5">Containers #5<p>Whole bunch of text 5</div>
     </div> 
    
    	</div>
    </div>
    
       
    <!-- This is the slide show. Also the css for the slid show is in the head of this document -->
    
    	<div id="container">
    		<div id="examples">
    			<ul id="example1">
    				<li>
    					<img src="images/slide0.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide1.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide2.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide3.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide4.gif" width="600" height="270" alt="" />
    				</li>
    			</ul>
    	
    	<script type="text/javascript">
    	$("#example1").zAccordion({
    	timeout: 4000,
    	slideWidth: 600,
    	width: 960,
    	height: 270
    	});
    	</script>
    
    </div>
    </div>
    
    <div id="foot">
    <a href="#top"><img src="img/upArrow.png" width="100" /></a>
    </div>
    </body>
    </html>
    Code:
    $(document).ready(function() {
    						   
    	var hash = window.location.hash.substr(1);
    	var href = $('#navigationMenu li a').each(function(){
    		var href = $(this).attr('href');
    		if(hash==href.substr(0,href.length-5)){
    			var toLoad = hash+'.html #content';
    			$('#content').load(toLoad)
    		}											
    	});
    
    	$('#navigationMenu li a').click(function(){
    								  
    		var toLoad = $(this).attr('href')+' #content';
    		$('#content').hide('fast',loadContent);
    		$('#load').remove();
    		$('#wrapper').append('<span id="load">LOADING...</span>');
    		$('#load').fadeIn('normal');
    		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    		
    		function loadContent() {
    			$('#content').load(toLoad,'',showNewContent())
    		}
    		function showNewContent() {
    			$('#content').show('normal',hideLoader());
    		}
    	
    		function hideLoader() {
    			$('#load').fadeOut('normal');
    		}
    		return false;
    		
    		
    		
    	});
    
    });

    Also here is the error in my console
    Code:
    OPTIONS file:///Applications/XAMPP/xamppfiles/htdocs/david/.html  jquery.min.js:2
    send jquery.min.js:2
    p.extend.ajax jquery.min.js:2
    p.fn.load jquery.min.js:2
    (anonymous function) js.js:8
    p.extend.each jquery.min.js:2
    p.fn.p.each jquery.min.js:2
    (anonymous function) js.js:4
    k jquery.min.js:2
    l.fireWith jquery.min.js:2
    p.extend.ready jquery.min.js:2
    D
    Last edited by Nicholas Diaz; 01-04-2014 at 04:01 PM.

  3. #18
    Join Date
    Apr 2014
    Posts
    1
    Hi JMRKER,

    I've been trying to use your code to make an entire subset of div be replaced with a continuous menu. It would be something like this
    Code:
    <div id="divLinks">
    
    <p>
    
    <div id="container">
     <div id="linkDiv">
     <a href="#" onclick="showDiv('');return false">Home</a>
     <a href="#" onclick="showDiv('1');return false">link 1</a>
     <a href="#" onclick="showDiv('2');return false">link 2</a>
     <a href="#" onclick="showDiv('3');return false">link 3</a>
     <a href="#" onclick="showDiv('4');return false">link 4</a>
    </div>
    <div id="content_left"> Left facing content that needs to be updatable</div>
    <div id="content_right"> Right facing content that need to be updatable</div>
    </div>
    
    <!-- The 4 container content divs. -->
    
     <div id="container1">
    <div id="linkDiv">
     <a href="#" onclick="showDiv('');return false">Home</a>
     <a href="#" onclick="showDiv('1');return false">link 1</a>
     <a href="#" onclick="showDiv('2');return false">link 2</a>
     <a href="#" onclick="showDiv('3');return false">link 3</a>
     <a href="#" onclick="showDiv('4');return false">link 4</a>
    </div>
    <div id="content_left"> Left facing content that needs to be updatable</div>
    <div id="content_right"> Right facing content that need to be updatable</div>
    </div>
    
     <div id="container2"><div id="linkDiv">
     <a href="#" onclick="showDiv('');return false">Home</a>
     <a href="#" onclick="showDiv('1');return false">link 1</a>
     <a href="#" onclick="showDiv('2');return false">link 2</a>
     <a href="#" onclick="showDiv('3');return false">link 3</a>
     <a href="#" onclick="showDiv('4');return false">link 4</a>
    </div>
    <div id="content_left"> Left facing content that needs to be updatable</div>
    <div id="content_right"> Right facing content that need to be updatable</div>
    </div>
     
    <div id="container3"><div id="linkDiv">
     <a href="#" onclick="showDiv('');return false">Home</a>
     <a href="#" onclick="showDiv('1');return false">link 1</a>
     <a href="#" onclick="showDiv('2');return false">link 2</a>
     <a href="#" onclick="showDiv('3');return false">link 3</a>
     <a href="#" onclick="showDiv('4');return false">link 4</a>
    </div>
    <div id="content_left"> Left facing content that needs to be updatable</div>
    <div id="content_right"> Right facing content that need to be updatable</div>
    </div>
     
    <div id="container4">Etc, Etc.</div>
    </div>
    When I write it this way I can get container (zero) to display correctly but when go to container1 or container2 none of the sub-divs are displaying. I can see that their display is being set to none but I can't get display:inherit to work. Any suggestions on the javascript or css to solve this?

    Thanks
    Luke

  4. #19
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259
    The main problem I see with post #18 is that you have duplicated id values.
    Id values MUST be unique.

    It's like the computer is standing in a room full of 'John's and calls for John.
    Who's going to be the first to answer?

    Post the rest of you code that includes your JS and CSS settings for further analysis.
    Good Luck!

  5. #20
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb

    Just guessing here as to your design needs. Maybe totally off-base.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
    
    function showDiv(idInfo) {
      var sel = document.getElementById('divLinks').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].className == 'container') { sel[i].style.display = 'none'; }
      }
      document.getElementById('container'+idInfo).style.display = 'block';
      return false;
    }
    </script>
    
    <style type="text/css">
    hr { background-Color:orange; height:0.5em; }
    .container {
      display:none;
      border:3px solid blue;
      height:300px;
      overflow:scroll;
    }
    .leftContent { display:block; width:49.5%; float:left; }
    .rightContent { display:block; width:49.5%; float:right; }
    </style>
    
    </head>
    <body>
    <div id="linkDiv">
     <a href="#" onclick="return showDiv('1')">link 1</a>
     <a href="#" onclick="return showDiv('2')">link 2</a>
     <a href="#" onclick="return showDiv('3')">link 3</a>
     <a href="#" onclick="return showDiv('4')">link 4</a>
    </div>
    <p>
    
    <!-- The 4 container content divs. -->
    <div id="divLinks">
    
     <div id="container1" class="container">Container #1<p>Whole bunch of text 1 <hr>
      <div id="content_left1" class="leftContent"> Left facing content <p>that needs to be updatable</div>
      <div id="content_right1" class="rightContent"> Right facing content <p>that needs to be updatable</div>
     </div>
    
     <div id="container2" class="container">Container #2<p>Whole bunch of text 2 <hr>
      <div id="content_left2" class="leftContent"> Left facing<p> content that needs<p> to be updatable</div>
      <div id="content_right2" class="rightContent"> Right facing<p> content that needs<p> to be updatable</div>
     </div>
    
     <div id="container3" class="container">Container #3<p>Whole bunch of text 3 <hr>
      <div id="content_left3" class="leftContent"> Left facing content that needs to be updatable</div>
      <div id="content_right3" class="rightContent"> Right facing content that needs to be updatable</div>
     </div>
    
     <div id="container4" class="container">Container #4<p>Whole bunch of text 4 <hr>
      <div id="content_left4" class="leftContent"> Left<p> facing<p> content<p> that<p> needs<p> to<p> be<p> updatable</div>
      <div id="content_right4" class="rightContent"> Right<p> facing<p> content<p> that<p> needs<p> to<p> be<p> updatable</div>
     </div>
    
    </div>
    
    <script type="text/javascript">
    window.onload = function() { showDiv('1'); }
    </script>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles