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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to hide this on click

    Hi guys,

    I have this code which when clicks moves between tabs butit means a tab always has to be visible.

    Is there a way to make it so that if i click the same button for a 2nd time all tabs are hidden and to make them all load hidden rather than load showing the 1st tab.

    Any help would be greatly apprecited.

    Thanks

    Mike


    **************************************************************************************
    My Head code is:
    **************************************************************************************

    Code:
    <script language="JavaScript" type="text/javascript">
      function login(showhide){
        if(showhide == "show"){
            document.getElementById('popupbox').style.visibility="visible";
        }else if(showhide == "hide"){
            document.getElementById('popupbox').style.visibility="hidden"; 
        }
      }
      </script>
    
    <link href="stylesform.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript">
        //<=!=[=C=D=A=T=A=[
    
        var tabLinks = new Array();
        var contentDivs = new Array();
    
        function init() {
    
          // Grab the tab links and content divs from the page
          var tabListItems = document.getElementById('tabs').childNodes;
          for ( var i = 0; i < tabListItems.length; i++ ) {
            if ( tabListItems[i].nodeName == "LI" ) {
              var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
              var id = getHash( tabLink.getAttribute('href') );
              tabLinks[id] = tabLink;
              contentDivs[id] = document.getElementById( id );
            }
          }
    
          // Assign onclick events to the tab links, and
          // highlight the first tab
          var i = 0;
    
          for ( var id in tabLinks ) {
            tabLinks[id].onclick = showTab;
            tabLinks[id].onfocus = function() { this.blur() };
            if ( i == 0 ) tabLinks[id].className = 'selected';
            i++;
          }
    
          // Hide all content divs except the first
          var i = 0;
    
          for ( var id in contentDivs ) {
            if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
            i++;
          }
        }
    
        function showTab() {
          var selectedId = getHash( this.getAttribute('href') );
    
          // Highlight the selected tab, and dim all others.
          // Also show the selected content div, and hide all others.
          for ( var id in contentDivs ) {
            if ( id == selectedId ) {
              tabLinks[id].className = 'selected';
              contentDivs[id].className = 'tabContent';
            } else {
              tabLinks[id].className = '';
              contentDivs[id].className = 'tabContent hide';
            }
          }
    
          // Stop the browser following the link
          return false;
        }
    
        function getFirstChildWithTagName( element, tagName ) {
          for ( var i = 0; i < element.childNodes.length; i++ ) {
            if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
          }
        }
    
        function getHash( url ) {
          var hashPos = url.lastIndexOf ( '#' );
          return url.substring( hashPos + 1 );
        }
    
        //]=]=>
        </script>
    **************************************************************************************
    My Body Code is:
    **************************************************************************************

    Code:
    <body onload="init()">
    
        <ul id="tabs">
          <li><a href="#alertssites" style="position: absolute; left: 96px; top: 130px;" >&nbsp&nbsp&nbspAlerts&nbsp&nbsp</a></li> 
          <li><a href="#uksites" style="position: absolute; left: 175px; top: 130px;" >&nbsp&nbsp&nbsp&nbsp&nbspUK&nbsp&nbsp</a></li>
          <li><a href="#ussites"style="position: absolute; left: 248px; top: 130px;" >&nbsp&nbsp&nbsp&nbsp&nbspUS&nbsp&nbsp</a></li>
          <li><a href="#asiasites"style="position: absolute; left: 321px; top: 130px;" >&nbsp&nbsp&nbsp&nbsp&nbspAsia&nbsp</a></li>
          <li><a href="#worldsites"style="position: absolute; left: 396px; top: 130px;" >&nbsp&nbsp&nbspWorld&nbsp</a></li>
        </ul>
    
        <div class="tabContent" style="position: absolute; left: 93px; top: 168px;" id="alertssites">
          <br>
          <center><h2>Auto Alerts</h2></center>
          <br>
          <div>    
                <center><table>
                <tr>
                <td>
                <input type="button" value="New Auto Alert" onclick="window.location = 'AutoAlerts.php';">
                </td>
                <td>
                <input type="button" value="Edit Auto Alert" onclick="window.location = 'myAutoAlerts.php';">
                </td>
                </tr>
                </table></center>
          </div>
        </div>
    
    
        <div class="tabContent" style="position: absolute; left: 93px; top: 168px;" id="uksites">
          <br>
          <center><h2>UK Sites</h2></center>
          <br>
          <div>
          </div>
        </div>
    
                                   CONTENT GOES HERE
    
        <div class="tabContent" style="position: absolute; left: 93px; top: 168px;"id="ussites">
          <br>
          <center><h2>US Sites</h2></center>
          <br>
          <div>
    
                                   CONTENT GOES HERE
    
          </div>
        </div>
    
        <div class="tabContent" style="position: absolute; left: 93px; top: 168px;"id="asiasites">
          <br>
          <center><h2>Asia Sites</h2></center>
          <br>
          <div>
    
                                   CONTENT GOES HERE
    
          </div>
        </div>
        
            <div class="tabContent" style="position: absolute; left: 93px; top: 168px;"id="worldsites">
          <br>
          <center><h2>International Sites</h2></center>
          <br>
          <div>
    
                                   CONTENT GOES HERE
    
          </div>
        </div>
    Last edited by VIPStephan; 04-11-2014 at 02:22 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Welcome to the forums Mike
    Put your code between tags or no one will look at the code.
    And run what you give us to make sure it works the way you want it. The code you posted needs CSS, the generated page is messed up.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry im new to posting im not really sure how to post it between tags?

    i have uploaded the working page to - http://www.legaleyealpha.webatu.com/newmenu.php

    if that is any help?

    Thanks

    Mike

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Sorry im new to posting im not really sure how to post it between tags?
    OK. No problem, the forums are a little messed up and making things easy on us is not a high priority. Type "[ code ]"(without the spaces) as the opening tag and "[/code]" as the closing tag and paste your code between the two.

    I looked at your page - Here's a heads up. comments are like this:
    <!-- Search Box -->
    You have:
    <!---Search Box---!>
    This is killing the majority of your page. I'd correct that asap.
    I'd also go here The W3C Markup Validation Service and correct errors.
    No </html>, divs written above the body tag, etc.

    And because you use PHP we can not see all your code and I'm sure some CSS comes from there 'cause what you have in the HTML is not doing the job.
    Last edited by sunfighter; 04-11-2014 at 03:03 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Sunfighter,

    Thanks for the tips i have attached a copy of the code from the CSS file that is used.

    Any php code is not doing anything towards the menu sytem itself. and so no other code other than the code 1st attached and this CCS is used to make it.
    I know how to use php but im new to javascript i got the basis of this code from a forum and edited it the best that I could.

    I would prefer to be able to add a different image to each of the buttons but i couldnt figure that out so made do the best that i could. But the hide on 2nd click is the thing i really need to sort out.


    Thanks

    Mike


    Code:
    /* CSS Document */
    body{padding:0px; margin:0px; background:#2f383f; color:#FFF; font:10px/14px Tahoma, sans-serif;}
    div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
    
    
    ul{list-style-type:none;}
    ul#tabs { list-style-type: none; margin: 0px 0 0 0; padding: 0 0 10px 0; }
    ul#tabs li { display: inline; }
    ul#tabs li a { color: #FFFFFF; background-image: url(http://legaleyealpha.webatu.com/images/newmenu/buttonoff.png); border: 0px solid #00000; border-bottom: none; padding:10px 25px 11px 10px; text-decoration: none; }
    ul#tabs li a:hover { background-color: #f1f0ee; }
    ul#tabs li a.selected { color: #FFFFFF; background-image: url(http://legaleyealpha.webatu.com/images/newmenu/buttonon.png);padding:10px 25px 11px 10px; }
    
    
    div.tabContent {  width: 365px; padding: 0.5em; background-color: #171717; }
    div.tabContent.hide { display: none; }

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    It is foolish to go any further with this until the site is fixed. Trying to modify a site when it has numerous errors is not good. Fix site and then we'll work on getting it the way you want.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Sunfighter thanks but im at work atm and this is not my day job so i dont have access to edit the site atm i just need help on that 1 peice of javascript code. I know that my code may not be perfect but it is working for what I need.

    Sorry to have wasted your time I will go and ask on another forum.

    Thanks

    Mike


  •  

    Posting Permissions

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