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

Thread: Switch Div Content Using Javascript

  1. #16
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    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
    8
    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,377
    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,377

    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>

  6. #21
    Join Date
    Apr 2014
    Posts
    8
    JMRKER,

    Here is what I have with the updated divs. The first content div displays exactly as I wanted it to. I would include the pictures and Jscript code if I knew how.

    Code:
    <!doctype html>
    <html>
    <head>
    	<title>Company Name: Medical Product Development serving San Diego</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<link href="style.css" type="text/css" rel="stylesheet" />
    	<link rel="icon" href="favicon.ico" />
    </head>
    <!-- Script section -->
    
    <!-- where I found the div hiding/showing code http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript -->
    <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++) {
        sel[i].style.display = 'none';
      }
      document.getElementById('content'+idInfo).style.display = 'block';
    }
    </script>
    <!-- this script handles slideshow -->
    <script src="js-image-slider.js" type="text/javascript"></script>
    
    
    <body>
    <div id="body_wrapper">
    	<div id="header">
    	
    		<div id="header_logo">
    			<a href="http://www.companyname.com" class="headerlogo"><img src="exp-eng-logo.jpg" alt="Homepage" ></a>
    		</div>
    		
    		<div id="header_menu">
    			<ul>
    				<li><a href="aboutus.aspx">About Us</a></li>
    				<li><a href="projects.aspx">Projects</a></li>
    				<li><a href="services.aspx">Services</a></li>
    				<li><a href="contactus.aspx">Contact Us</a></li>
    				<li><a href="resources.aspx">Resources</a></li>
    			</ul>
    		</div>
    		
    	</div>
    	
    <div id="divLinks">
    	<div id="content" >
    	
    		<div id="menu">
    	
    		<div id="menu_content">
    		
    			<ul>
    				<li class="exp_blue"><a href="#" onclick="showDiv(''); return false">Services</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('1'); return false">Mechanical</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('2'); return false">Electrical</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('3'); return false">Firmware/Software</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('4'); return false">Industrial Design</a></li>
    			</ul>
    			
    		</div>
    		
    	</div>
    		
    		<div id="sliderframe">
    		
    			<div id="slider">
                	<img src="FrontImage_RonFW.jpg" >
         			<img src="FrontImage_SandraFWBusy.jpg" >
         			<img src="EArBud_jpg.jpg" >
         			<img src="motherPCBAradio_JPG.jpg" >
         			<img src="HeadSet_jpg.jpg" >
         			<img src="RadioHandSet_jpg.jpg" >
            	</div>
            	
            </div>
    
    		
    		<div id="info_left">
    		
    			<strong class="exp_blue">
    			WHO WE ARE
    			</strong>
    						
    			<p class="small">
    			We are an accomplished product development and design firm based in San Diego, California. Since 1995, we have been providing a full suite of engineering support from concept to production. Our in-house team of mechanical, electrical, and FW/SW engineers have broad experience in medical, commercial, and consumer products.
    			<br><a class="exp_blue" href="/Pages/aboutus.aspx">Read More &raquo;</a>
    			</p>
    			
    		</div>
    		
    		<div id="info_center">
    			<strong class="exp_blue">
    			WHAT WE DO
    			</strong>
    			
    			<p class="small">
    			We help you make things happen. Our firm is flexible enough to work on a project alone or to collaborate with your engineers for development and design. Our breadth allows us to develop electromechanical and electronic products, embedded systems, manufacturing equipment, machine and fixture design, and fabrication of prototypes.
    			<br><a class="exp_blue" href="/Pages/services.aspx">View Services &raquo;</a>
    			</p>
    
    		</div>
    		
    		<div id="info_right">
    		
    			<strong class="exp_blue">
    			MORE ON US
    			</strong>
    
    		
    			<p class="small">
    			Company Name is structured and managed to either augment your engineering department or be your engineering department. We welcome a close working relationship and support it by giving our customers direct access to the engineers at all times.
    			<br><a class="exp_blue" href="/Pages/contactus.aspx">Contact Us &raquo;</a>
    			</p>
    			
    		</div>
    		
    	</div>
    <!-- -------------------Div to be unhidden onclick ------------------------ -->	
    	<div id="content1" >
    	
    		<div id="menu1">
    	
    		<div id="menu_content1">
    		
    			<ul>
    				<li class="exp_blue"><a href="#" onclick="showDiv(''); return false">Services</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('1'); return false">Mechanical</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('2'); return false">Electrical</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('3'); return false">Firmware/Software</a></li>
    				<li class="exp_blue"><a href="#" onclick="showDiv('4'); return false">Industrial Design</a></li>
    			</ul>
    			
    		</div>
    		
    	</div>
    		
    		<div id="sliderframe">
    		
    			<div id="slider">
                	<img src="FrontImage_RonFW.jpg" >
         			<img src="FrontImage_SandraFWBusy.jpg" >
         			<img src="EArBud_jpg.jpg" >
         			<img src="motherPCBAradio_JPG.jpg" >
         			<img src="HeadSet_jpg.jpg" >
         			<img src="RadioHandSet_jpg.jpg" >
            	</div>
            	
            </div>
    
    		
    		<div id="info_left1">
    		
    			<strong class="exp_blue">
    			WHO WE ARE
    			</strong>
    						
    			<p class="small">
    			We are an accomplished product development and design firm based in San Diego, California. Since 1995, we have been providing a full suite of engineering support from concept to production. Our in-house team of mechanical, electrical, and FW/SW engineers have broad experience in medical, commercial, and consumer products.
    			<br><a class="exp_blue" href="/Pages/aboutus.aspx">Read More &raquo;</a>
    			</p>
    			
    		</div>
    		
    		<div id="info_center1">
    			<strong class="exp_blue">
    			WHAT WE DO
    			</strong>
    			
    			<p class="small">
    			We help you make things happen. Our firm is flexible enough to work on a project alone or to collaborate with your engineers for development and design. Our breadth allows us to develop electromechanical and electronic products, embedded systems, manufacturing equipment, machine and fixture design, and fabrication of prototypes.
    			<br><a class="exp_blue" href="/Pages/services.aspx">View Services &raquo;</a>
    			</p>
    
    		</div>
    		
    		<div id="info_right1">
    		
    			<strong class="exp_blue">
    			MORE ON US
    			</strong>
    
    		
    			<p class="small">
    			Company Name is structured and managed to either augment your engineering department or be your engineering department. We welcome a close working relationship and support it by giving our customers direct access to the engineers at all times.
    			<br><a class="exp_blue" href="/Pages/contactus.aspx">Contact Us &raquo;</a>
    			</p>
    			
    		</div>
    		
    	</div>
    </div>
    
    	<div id="footer">
    	
    		<div id="footer_company">
    			<p class="right small">&#169;2014 Company Name | All Rights Reserved.</p>
    		</div>
    		
    		<div id="footer_menu">
    			<ul>
    				<li><a href="aboutus.aspx">About Us</a></li>
    				<li><a href="projects.aspx">Projects</a></li>
    				<li><a href="services.aspx">Services</a></li>
    				<li><a href="contactus.aspx">Contact Us</a></li>
    				<li><a href="resources.aspx">Resources</a></li>
    				<li><a href="sitemap.aspx">Site Map</a></li>
    			</ul>
    		</div>
    		
    	</div>
    
    <!-- Special container for this page: used to hide and show divs -->
    <!--
    <div id="divLinks">
    	<div id="content1">
     			<div id="menu">
    	
    				<div id="menu_content">
    		
    					<ul>
    						<li class="exp_blue"><a href="#" onclick="showDiv(''); return false">Services</a></li>
    						<li class="exp_blue"><a href="#" onclick="showDiv('1'); return false">Mechanical</a></li>
    						<li class="exp_blue"><a href="#" onclick="showDiv('2'); return false">Electrical</a></li>
    						<li class="exp_blue"><a href="#" onclick="showDiv('3'); return false">Firmware/Software</a></li>
    						<li class="exp_blue"><a href="#" onclick="showDiv('4'); return false">Industrial Design</a></li>
    					</ul>
    			
    				</div>
    			</div>
     			Container #1<p>Whole bunch of text 1
     		</div>
     	<div id="content2">Container #2<p>Whole bunch of text 2</div>
     	<div id="content3">Container #3<p>Whole bunch of text 3</div>
     	<div id="content4">Container #4<p>Whole bunch of text 4</div>
    </div>-->
    </div>
    </body>
    </html>
    I'll post the css in another post, it is too long for this.

    I'm not sure how all of this would come together, especially with the javascript controlled slider with all the different divs it has.

    I'm not entirely sure if the code you replied with before would work with this?

    Thanks for your help

    Luke

  7. #22
    Join Date
    Apr 2014
    Posts
    8
    JMRKER,

    So with this code you did, am I to assume that the script checks all the divs below id=linkDiv for a class (that I would need to create) called 'container' and then sets only the divs with class='container' display:none? Then, because the top div of container is display:none that the lower divs would not display?

    Is that correct?

    Sorry, web programming is not my primary skillset. Actually, programming is not my skillset at all, I'm a mechanical engineer who has been enlisted.

    Thanks,

    Quote Originally Posted by JMRKER View Post
    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>

  8. #23
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Quote Originally Posted by lukeseed View Post
    JMRKER,

    So with this code you did, am I to assume that the script checks all the divs below id=linkDiv for a class (that I would need to create) called 'container' and then sets only the divs with class='container' display:none? Then, because the top div of container is display:none that the lower divs would not display?

    Is that correct?

    Sorry, web programming is not my primary skillset. Actually, programming is not my skillset at all, I'm a mechanical engineer who has been enlisted.

    Thanks,
    Almost...
    1. The 'linkDiv' is a wrapper for the other 4 <div> sections, each of which wraps 2 additional <div> sections.

    2. Note that the 'showDiv(idInfo)' function is initially called with the onload.
    a. In this function, ALL <div>s of the linkDiv with the container class are set to display:none.
    b. Then the idInfo number is used to set the display:block for the selected sub-div which hav a class of *-content
    c. The sub-divs are individually controlled by the leftContent or rightContent CSS.

    3. You could control the display of each of the *Content <div> sections, but I don't know if that is a design need.
    That is why the display:block is included, but not changed in this version. The float:left or float:right controls
    where each of the 2 divs is positioned within 4 containers labeled container1 to container4 in this example.
    Use a '<br style="clear:both">' if you need to add additional information to the containers BELOW the content displays.

    4. Place whatever extra tags you wish within either of the containers or content blocks.

    Good luck with your enlistment
    Last edited by JMRKER; 04-21-2014 at 07:24 PM.

  9. #24
    Join Date
    May 2014
    Posts
    1
    OK im pretty new to webdeveloper.com, but I have to sign up to say thank to you guys! Thank you maggiemkfung for asking the right question, and thank you JMRKER for being a nice master!!!!!!!!!!!!!!!!!!!

  10. #25
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    You are most welcome, I'm sure, from both of us.
    Happy to help.
    Good Luck!

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