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

    Linking to a Javascript element

    Hello!

    I am using the Tab View script (original found here: http://www.javascriptkit.com/script/.../tabview.shtml) on my website, and am hoping I can create links from different places to make each tab active. For example, from Page A I want to link to the page with the tabs, and have Tab 1 be the active tab. From Page B I want to link to the page with the tabs, and have Tab 2 be the active tab... and so on.

    Is this possible?

    Thanks for any assistance!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    Since I just answered a question about "tabbed form" this is easy.
    Code:
    <html>
    <head>
    <style type="text/css">
    div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
    div.tabBody { position: absolute; top: 0px; left: 0px; 
                  width: 100%; height: 100%;
                  z-index: 1; 
                  background-color: yellow; border: solid brown 2px; 
                  padding: 20px; 
                }
    div.tabHead { position: absolute; top: -20px; left: 10px; 
                  width: 100px; height: 22px;
                  z-index: 2;
                  text-align: center; 
                  background-color: lightyellow; border: solid brown 2px; border-bottom: none;
                }
    </style>
    <body>
    <form>
    Stuff at the top of the page.
    <br/><br/>
    
    <input type="submit" value="Submit all parts of form"/>
    <div id="ALL">
        <div id="TABS">
            <div id="TAB1" class="tabHead">One</div>
            <div id="TAB2" class="tabHead" style="left: 140px;">Two</div>
            <div id="TAB3" class="tabHead" style="left: 260px;">Three</div>
        </div>
        <div id="TABBODY1" class="tabBody">
            This is body 1<br/>
            Enter your name: <input name="yourName"/>
        </div>
        <div id="TABBODY2" class="tabBody">
            2 2  second 2 2<br/>
            Enter your country: <input name="yourCountry"/>
        </div>
        <div id="TABBODY3" class="tabBody">
            Third one<br/>
            Enter your phone number: <input name="yourPhone"/>
        </div>
    </div>
    </form>
    
    
    <script type="text/javascript">
    for ( var t = 1; t < 9999; ++t )
    {
        var tab = document.getElementById("TAB"+t);
        if ( tab == null ) break;
        tab.onclick = function() { front(this.id); }
    }
    
    function front( id )
    {
        var which = Number( id.substring(3) );
        for ( var t = 1; t < 9999; ++t )
        {
            var dv = document.getElementById("TABBODY"+t);
            if ( dv == null ) return;
            dv.style.zIndex = t == which ? 5 : 1;
            var tab = document.getElementById("TAB"+t);
            tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
            tab.style.zIndex = t == which ? 7 : 1;
        }
    }
    
    var starttab = "TAB1"; // assume
    var hash = location.hash;
    // URL ends with #TABn then start with that tab instead:
    if ( ( /^\#TAB\d\d?$/ ).test(hash) ) { starttab = hash.substring(1); }
    front( starttab );
    </script>
    </body>
    </html>
    This is using my own version of tabbing, but it's not much different than the JavaScriptKit version.

    You can see the trick: Pick up the stuff after the # in the URL and, if it matches one of our tabs, pre-select that tab.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •