Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Javascript dynamically changing tab

    hi i am totally frustrated !!
    i have been using this on my webpage.
    http://www.barelyfitz.com/projects/tabber/

    if u see under the advanced section there is a code for changing tabs dynamically.

    Code:
    document.getElementById('mytab1').tabber.tabShow(0);
    this doesn't work.
    basically i have a webpage internet.htm. which has a menubar with loads of menu items.
    if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is:
    Code:
    <li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li>
    the full code is:


    Code:
    <ul id="QualityMenuBar" class="MenuBarHorizontal">
                      <li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a>
                        <ul>
    
                        
                          <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li>
                          <li><a href="AdminDocuments.htm"  >Guidance</a></li>
                          <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li>
                          <li><a href="AdminDocuments.htm">Plans</a></li>
                          <li><a href="AdminDocuments.htm">Procedures</a></li>
                        </ul>
                      </li>



    this is what the admindocuments.htm contains, based on the website link i have borrowed the code from.

    Code:
    <div class="tabber" id="admin">
    
         <div class="tabbertab">
    	  <h2>Forms</h2>
       
    <script type="text/javascript" src="adminForms.js"></script>
    
         </div>
    
    
          <div class="tabbertab">
    	  <h2>Guidance</h2>
    
           
    	<script type="text/javascript" src="adminGuidance.js"></script>
         </div>
    
    
         <div class="tabbertab">
    	  <h2>Org. Chart</h2>
    	<script type="text/javascript" src="adminOrg.js"></script>
         </div>
         
         
           <div class="tabbertab">
    	  <h2>Plans</h2>
    	<script type="text/javascript" src="adminPlans.js"></script>
         </div>
         
         
           <div class="tabbertab">
    	  <h2>Procedures</h2>
    	 <script type="text/javascript" src="adminProc.js"></script>
         </div>
    
    </div>
    whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code.
    what am i doing wrong here?

    please advice.
    Many thanks.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But when you sumbit the <a>, you DESTROY the current page!

    So your onclick code works...but only for a millisecond or so as the browser loads Admindocument.htm !!

    If you want the code in Admindocument.htm to know which thing was clicked on, you have to *TELL* it.

    Probably the easiest way to do that would be something like:
    Code:
    <li><a href="AdminDocuments.htm?0">Forms</a></li>
    <li><a href="AdminDocuments.htm?1">Guidance</a></li>
    <li><a href="AdminDocuments.htm?2">....
    And then, in AdminDocument.htm, you can do
    Code:
    var tabnumber = location.search.substring(1);
    to find what tab was clicked on in the prior page.

    That code you showed only works when you STAY on the same page! Not when your tabs lead you off to some other page. At least, that's how I read their code.

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    Cheers mate that is a solution and I already have tried that but I am looking to use the one line onclick JavaScript he ha mentioned on his advanced tab.
    Can anyone help me use that?
    Cheers


  •  

    Tags for this Thread

    Posting Permissions

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