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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How come this doesn't work?

    I have a few tabs on my website. They're each set to the corresponding id in the JS file. It's supposed to add #tab-1 to the end of the URL in the users browser when it's clicked. For example, when a user is at mypage.com and they click on the tab, it ads mypage.com/#tab-1 to the end. How come it doesn't do what I want when I click it though?

    Here's an example of how it's setup.

    HTML:

    <a href="#tab-1" id="tab1">Text</a>

    JavaScript:

    document.getElementById("tab1").onclick = function(){
    this.href += "#tab-1";
    }

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Question...

    Do the "tabs" on the page have a style display setting of "none" when the page is first executed?

    If yes, you might need to add some more logic to change the selected tab to "block" or 'inline', if needed.

    Do you have a link or bit of code to show how the JS and HTML interact for these "tab" settings?

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a link to the active tabs: http://www.thatswhyimbroke.com/

    The CSS tab reference is .tabset

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    I you want to do what I think (navigation based on hash values) you're going about it in an awkward way.

    I can see that your site is already using jquery.
    Please add a plugin for listening to the hash, like this one: http://tkyk.github.com/jquery-history-plugin/

    Do this because it's really hard to master how to listen to hash changes cross-browser (in older IE's an empty iframe has to be created etc, to get the history object to behave like it should... an library takes all this pain away).

    Then let hash events be the place where changes are born:
    Code:
    $(function(){
       $.history.init(function(hash){
            if(hash == "") {
                // initialize your app
            } else {
                // hide or show div elements
               // and or load new pieces of content through ajax
               // depending on the value of hash
            }
        },
        { unescape: ",/" });
    });


  •  

    Posting Permissions

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