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

Thread: Switch Div Content Using Javascript

Hybrid View

  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,377

    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, how do I show default content? The page loads blank with just the text links?

  4. #4
    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

  5. #5
    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...

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

  7. #7
    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>

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

    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.

  9. #9
    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".

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

    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>

  11. #11
    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

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

  13. #13
    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?

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    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.

  15. #15
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    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/

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