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
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show and hide divs which follow a tabindex

    Hi,

    I am in need of some help around showing and hiding a div based on a user selecting a link via tabbing (note its only tabbing I need help with, got the mouse actions sorted). Basically I have a set of links at the top of my page and a set of closely related links at the bottom with the visibility set to hidden. I pull these links into a popup menu when the top links are tabbed over.

    I am creating a tabindex on the fly, so users with JS enabled will jump from the top link into the popup menu, and users without will not get any tabindex and will just follow the natural tabbing order. So a user with JS should go from the 1st tab into the 1st box and through all those links, and then to the 2nd tab and 2nd box and so on...

    I can make the box areas appear, and the tab order alters to jump into the generated area but I cant get them to dissapear. And I only want one area to appear at any one time.

    I have stripped my code down to the bare bones so I should just be a matter of dropping it into your editor to see where I am at, or more like where I am not at.

    Any help would be much appreciated
    Cheers
    Charlie.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    <script type="text/javascript" src="js/global.js"></script>
    <script type="text/javascript">

    addLoadEvent(topAreaLinks);
    addLoadEvent(addTabIndex);
    addLoadEvent(fireListeners);
    //addLoadEvent(subListeners);

    /** Give top area a tabindex in increments of 1 so this is always the area tabbed through first **/
    function topAreaLinks() {
    var localTabindex = 1;
    var topSectionLinks = document.getElementById("top").getElementsByTagName("a");
    for (var i = 0; i < topSectionLinks.length; i++) {
    topSectionLinks[i].setAttribute("tabIndex", localTabindex);
    localTabindex ++;
    }
    }

    /** Give top links a tabindex value in increments of 100 **/
    function addTabIndex() {
    var ins = document.getElementById("ins");
    ins.setAttribute("tabIndex", "100");

    var cards = document.getElementById("cards");
    cards.setAttribute("tabIndex", "200")

    var loans = document.getElementById("loans");
    loans.setAttribute("tabIndex", "300")

    var mort = document.getElementById("mort");
    mort.setAttribute("tabIndex", "400")

    var save = document.getElementById("save");
    save.setAttribute("tabIndex", "500")

    var travel = document.getElementById("travel");
    travel.setAttribute("tabIndex", "600")
    }


    /** Event Listeners **/
    function fireListeners() {
    var tabLinks = document.getElementById("nav-primary").getElementsByTagName("a");
    for (var i = 0; i < tabLinks.length; i++) {
    var currentTab = tabLinks[i];
    addEvent(currentTab, 'focus', openPopup, false);
    //addEvent(currentTab, 'blur', closePopup, false);
    }
    }


    /** Open the popup when you tab onto the top links **/
    function openPopup(e) {

    if (window.event) {
    var links = window.event.srcElement.id;
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    } else {
    var links = e.target.id;
    e.stopPropagation();
    e.preventDefault();
    }

    //if box is already there find out where the focus is
    var popUpsection = links + "-products-box";
    var currentSection = document.getElementById(links)
    var parent = document.getElementById("wrapper");
    var thisSection = getElementsByClassName(parent, "div", popUpsection);

    var globalTabIndex = currentSection.getAttribute("tabindex");
    for (var i = 0; i < thisSection.length; i++) {
    thisSection[i].style.visibility = "visible";
    var sectionLinks = thisSection[i].getElementsByTagName("a");
    var localTabIndex = globalTabIndex;
    for (var j = 0; j < sectionLinks.length; j++) {
    sectionLinks[j].setAttribute("tabIndex", localTabIndex)
    localTabIndex++;
    }
    }
    }


    /** Close the popup when you taboff **/

    function closePopup(e) {

    if (window.event) {
    var links = window.event.srcElement.id;
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    } else {
    var links = e.target.id;
    e.stopPropagation();
    e.preventDefault();
    }

    var section = links + "-products-box";
    var parent = document.getElementById("wrapper");
    var thisSection = getElementsByClassName(parent, "div", section);
    thisSection[0].style.visibility = "hidden";

    }

    </script>
    </head>

    <body>

    <!-- Top section -->
    <div id="top">

    <!-- Branding and My account login -->
    <div id="branding" class="clearing">

    <div id="logo"><img src="" alt="" width="337" height="32" /></div>

    <div id="myacc">
    <h2>My accounts</h2>
    <p>Logon or register</p>
    <a href="login.html">Login</a>
    </div>

    </div><!--/ Branding and My account login -->

    <!-- Breadcrumb and Metafaq -->
    <div id="orientation" class="clearing">

    <div id="breadcrumb-signup">
    <dl class="clearing">
    <dt><a href="http://www.blah.com">blah.com</a></dt>
    </dl>
    <p>Welcome to Blah . we hope you enjoy your visit. <a href="signup.html">(Sign in / Register )</a></p>
    </div>

    <div id="ask" class="round corner-whitebg">
    <h2>Got a question?</h2>
    <a href="ask.html">Ask</a>
    </div>

    </div><!-- Breadcrumb and Metafaq -->

    </div>
    <!--/ Top section -->


    <div id="wrapper">

    <!-- Primary content -->
    <div id="primary-content">

    <!-- Primary Navigation -->
    <div id="nav-primary">
    <ul class="clearing">
    <li><a href="insurancetab.html" id="ins">Insurance</a></li>
    <li><a href="cardstab.html" id="cards">Credit cards</a></li>
    <li><a href="loandtab.html" id="loans">Loans</a></li>
    <li><a href="morttab.html" id="mort">Mortgages</a></li>
    <li><a href="savetabl.html" id="save">Savings</a></li>
    <li id="last"><a href="traveltab.html" id="travel">Travel</a></li>
    </ul>
    </div><!-- Primary Navigation -->
    </div>



    <div class="ins-products-box" style="visibility:hidden">
    <div id="innerbox">
    <div id="productslinks" class="clearing">
    <div id="prodleft">
    <ul>
    <li><a href="carins.html">Car insurance</a>
    <ul><li><a href="carinsquote.html">Get a and buy car online</a></li></ul>
    </li>
    <li><a href="breakdown.html">Car breakdown</a>
    <ul><li><a href="breakdownquote.html">Get a and breakdown buy online</a></li></ul>
    </li>
    <li><a href="life.html">Life insurance</a>
    <ul><li><a href="lifequote.html">Get a and buy online</a></li></ul>
    </li>
    </ul>
    </div>
    <div id="prodright">
    <ul>
    <li><a href="home.html">Home insurance</a>
    <ul><li><a href="homequote.html">Get a and buy home online</a></li></ul>
    </li>
    <li><a href="pet.html">Pet insurance</a>
    <ul><li><a href="petquote.html">Get a and buy online</a></li></ul>
    </li>
    <li><a href="travel.html">Travel insurance</a>
    <ul><li><a href="travelquote.html">Get a and buy online</a></li></ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    <div class="cards-products-box" style="visibility:hidden">
    <div id="innerbox">
    <div id="productslinks" class="clearing">
    <div id="prodleft">
    <ul>
    <li><a href="carins.html">Car insurance</a>
    <ul><li><a href="carinsquote.html">Get a and buy car online</a></li></ul>
    </li>
    <li><a href="breakdown.html">Car breakdown</a>
    <ul><li><a href="breakdownquote.html">Get a and breakdown buy online</a></li></ul>
    </li>
    <li><a href="life.html">Life insurance</a>
    <ul><li><a href="lifequote.html">Get a and buy online</a></li></ul>
    </li>
    </ul>
    </div>
    <div id="prodright">
    <ul>
    <li><a href="home.html">Home insurance</a>
    <ul><li><a href="homequote.html">Get a and buy home online</a></li></ul>
    </li>
    <li><a href="pet.html">Pet insurance</a>
    <ul><li><a href="petquote.html">Get a and buy online</a></li></ul>
    </li>
    <li><a href="travel.html">Travel insurance</a>
    <ul><li><a href="travelquote.html">Get a and buy online</a></li></ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>



    </div>
    </body>
    </html>

  • #2
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,453
    Thanks
    1
    Thanked 21 Times in 19 Posts
    *** WARNING: Questions posted here will be deleted! ***

    I hope someone moves this thread to JSPH instead of deleting it...
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog


  •  

    Posting Permissions

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