www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: Switch Div Content Using Javascript

  1. #1
    Join Date
    Oct 2012
    Posts
    10

    Angry Switch Div Content Using Javascript

    Hello all--

    I've been searching around the Internet looking for a solution, and haven't been able to find one that works.

    Here is what I am dealing with... I have 4 text links, that when I click on each link, I want the unhidden div container to load. Although my syntax is incorrect, it's basically:

    //My 4 text links
    <a href="">link 1</a>
    <a href="">link 2</a>
    <a href="">link 3</a>
    <a href="">link 4</a>

    //The container I want all content divs to load into... and by default, to show the first container content
    <div id="container"></div>

    //The 4 container content divs.
    <div id="container1">Whole bunch of text 1</div>
    <div id="container2">Whole bunch of text 2</div>
    <div id="container3">Whole bunch of text 3</div>
    <div id="container4">Whole bunch of text 4</div>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb

    Looks like you didn't search far enough...
    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++) {
        sel[i].style.display = 'none';
      }
      document.getElementById('container'+idInfo).style.display = 'block';
    }
    </script>
    <style type="text/css">
    #container1, #container2, #container3, #container4 {
      display:none;
      border:3px solid blue;
      height:200px;
      overflow:hidden;
    }
    </style>
    
    </head>
    <body>
    <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>
    <p>
    
    <div id="container">
     The container I want all content divs to load into... and by default, to show the first container content
    </div>
    
    <!-- The 4 container content divs. -->
    <div id="divLinks">
     <div id="container1">Container #1<p>Whole bunch of text 1</div>
     <div id="container2">Container #2<p>Whole bunch of text 2</div>
     <div id="container3">Container #3<p>Whole bunch of text 3</div>
     <div id="container4">Container #4<p>Whole bunch of text 4</div>
    </div>
    
    </body>
    </html>
    BTW: You should enclose your code between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to read, copy, test and/or debug.

    Good Luck!

  3. #3
    Join Date
    Oct 2012
    Posts
    10
    JMRKER, you are a real blessing! Thank you so much... after 6 hours of troubleshooting, you totally solved my problem. Now I have to stylize... I wish I was better at coding...

  4. #4
    Join Date
    Oct 2012
    Posts
    10
    JMRKER, how do I show default content? The page loads blank with just the text links?

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    You will need to she where your code differs from mine as I am not much of a mind reader.

  6. #6
    Join Date
    Oct 2012
    Posts
    10
    For those of you using this code, place this code below <div id="container4"></div>

    Code:
        <div id="container">
    		<script language="javascript">
            $(document).ready(function(){
            showDiv('1');
            })           
            </script>
        </div>

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Exclamation

    Quote Originally Posted by maggiemkfung View Post
    For those of you using this code, place this code below <div id="container4"></div>

    Code:
        <div id="container">
    		<script language="javascript">
            $(document).ready(function(){
            showDiv('1');
            })           
            </script>
        </div>
    Should not be used unless you also include a JQuery library reference.

    Also, the code is not needed unless the user wants to display the first <div> tag after the main <div> content when the page is called the 1st time.
    There are other ways to accomplish this without the library [onload() comes to mind].
    And the description of the OP in the first post did not want that, if I understood his request.

  8. #8
    Join Date
    Nov 2013
    Posts
    3
    Hi JMRKER!
    Would it be possible for you to show me code where I can have div "container1" to show up at first load and there would be no div "container"?
    I want to be able to navigate between different "pages" (divs) like in a single page web app and I don't want to use jQuery - no content should be present on more than one "page".

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    ToBeJazz, why wouldn't you try to change the previous code (which is already given) by yourself? or use it as a guide?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  10. #10
    Join Date
    Nov 2013
    Posts
    3
    Padonak, unfortunately the simple answer is that I don't have enough knowledge in JavaScript.

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb

    Quote Originally Posted by ToBeJazz View Post
    Hi JMRKER!
    Would it be possible for you to show me code where I can have div "container1" to show up at first load and there would be no div "container"?
    I want to be able to navigate between different "pages" (divs) like in a single page web app and I don't want to use jQuery - no content should be present on more than one "page".
    Just a few small changes that you could try yourself
    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++) { sel[i].style.display = 'none'; }
      document.getElementById('container'+idInfo).style.display = 'block';
      return false;
    }
    </script>
    <style type="text/css">
    #container1, #container2, #container3, #container4 {
      display:none;
      border:3px solid blue;
      height:200px;
      overflow:hidden;
    }
    </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">Container #1<p>Whole bunch of text 1</div>
     <div id="container2">Container #2<p>Whole bunch of text 2</div>
     <div id="container3">Container #3<p>Whole bunch of text 3</div>
     <div id="container4">Container #4<p>Whole bunch of text 4</div>
    </div>
    
    <script type="text/javascript">
    window.onload = function() { showDiv('1'); }
    </script>
    
    </body>
    </html>

  12. #12
    Join Date
    Nov 2013
    Posts
    3
    Many many thanks to you JMRKER!
    I've spent many hours searching for a simple way to swap and go between pages like this and this seems to be the most effective way to do it - would you agree that this is somewhat the best way to go between pages in a single page web app?
    What I have left is to do the CSS (or do I have to use JavaScript AND CSS for that?) for the page/div transitions.
    I would like to have a transition going from container1 to container2 or 3 or 4 where container 1 should slide out to the left and container 2/3/4 should come in from the right, and every time I go back from either container 2 or 3 or 4 to 1 the slide transition should be the opposite.
    I'd like to do it with CSS only, but this might not be possible?

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    The post I published is pretty simple. It does the job as designed. And it can be easily modified

    However, to add more effects, you will need a combination of JS and CSS working together.

    For an example of what, I think, you want, see: http://www.scriptiny.com/2011/01/javascript-slider/

    A 'google' search will reveal a lot of other sites depending upon your desires and abilities.
    Last edited by JMRKER; 11-27-2013 at 06:03 PM.

  14. #14
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,668
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    
    <style type="text/css">
    #divLinks {
     position:relative;width:400px;height:200px;border:1px solid blue;
    }
    
    
    .page {
      width:100%;height:200px;
    }
    </style>
    
    </head>
    <body>
    <div id="linkDiv">
     <a href="#" onclick="return zxcSlider.Page('divLinks',0);" >link 1</a>
     <a href="#" onclick="return zxcSlider.Page('divLinks',1);" >link 2</a>
     <a href="#" onclick="return zxcSlider.Page('divLinks',2);" >link 3</a>
     <a href="#" onclick="return zxcSlider.Page('divLinks',3);" >link 4</a>
    </div>
    <p>
    
    <!-- The 4 container content divs. -->
    <div id="divLinks">
     <div class="page" >Container #1<p>Whole bunch of text 1</div>
     <div class="page" >Container #2<p>Whole bunch of text 2</div>
     <div class="page" >Container #3<p>Whole bunch of text 3</div>
     <div class="page" >Container #4<p>Whole bunch of text 4</div>
    </div>
    
    <script type="text/javascript" >
    
    var zxcSlider={
    
     Page:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.n!=n&&o.ary[n]){
       o.ud=n<o.n?-1:1;
       this.rotate(o,n);
      }
      return false;
     },
    
     init:function(o){
      var id=o.ParentID,n=o.DisplayPage,ms=o.Animate,p=document.getElementById(id);
      if (p){
       p.style.overflow='hidden';
       var clds=p.childNodes,z0=0;
       o.ary=[];
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         clds[z0].style.position='absolute';
         clds[z0].style.left=(o.ary.length!=n?p.offsetWidth:0)+'px';
         o.ary.push([clds[z0],'left']);
        }
       }
      }
      o.p=p;
      o.n=o.ary[n]?n:-1;
      o.ud=1;
      o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
      this['zxc'+id]=o;
     },
    
     rotate:function(o,n){
      this.animate(o,o.ary[n],o.p.offsetWidth*o.ud,0,new Date(),o.ms);
      o.ary[o.n]?this.animate(o,o.ary[o.n],o.ary[o.n][0].offsetLeft,o.p.offsetWidth*(o.ud>0?-1:1),new Date(),o.ms):null;
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
      }
     }
    
    
    
    }
    
    zxcSlider.init({
     ParentID:'divLinks',  // the unique ID name of the parent DIV.        (string)
     DisplayPage:0,        //(optional) the initial page index to display. (number, default = all pages hidden)
     Animate:1000          //(optional) animation duration in millisec.    (number, default = 1000)
    })
    
    </script>
    
    </body>
    </html>
    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/

  15. #15
    Join Date
    Nov 2013
    Posts
    1
    Vic,
    Have a possible broken code on our website. Not sure how else to reach you. Contact us at: http://bit.ly/18OUS7s

    Animate function no longer working, stacking all divs over each other. Using javascript source:

    <SCRIPT type=text/javascript
    src="http://www.vicsjavascripts.org.uk/Animate/Animate.js">// <![CDATA[

    // ]]></SCRIPT>

    Thanks,

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