Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member
    Join Date
    Aug 2008
    Posts
    9
    Member #
    17241
    Hello,

    I am using aspry tabbed panel on my website as a menubar. I found out how to get the panels to open when you hover the mouse over the tab, but I can't find out how to get it to close on mouseout. My site is broken up into 6 main sections and there are 6 tabs in my tabbed panel. depending on which section of the site you are in, there is a different default panel. (For example, if you are in the shopping section of my site, the shopping tab is the default tab).

    Anyway, I am just not sure the javascript that I need that will tell the tabbed panels that on mouseout, to return to the default tab. I only have 40 pages in the site, so if I need to put a string of javascript on each page, it won't take me too long. I am not very good with javascript and any help is REALLY appreciated.

    Here is the javascript I already have:

    Code:
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    
    Spry.Widget.TabbedPanels = function(element, opts)
    {
    this.element = this.getElement(element);
    this.defaultTab = 0; // Show the first panel by default.
    this.bindings = [];
    this.tabSelectedClass = "TabbedPanelsTabSelected";
    this.tabHoverClass = "TabbedPanelsTabHover";
    this.tabFocusedClass = "TabbedPanelsTabFocused";
    this.panelVisibleClass = "TabbedPanelsContentVisible";
    this.focusElement = null;
    this.hasFocus = false;
    this.currentTabIndex = 0;
    this.enableKeyboardNavigation = true;
    
    Spry.Widget.TabbedPanels.setOptions(this, opts);
    
    // If the defaultTab is expressed as a number/index, convert
    // it to an element.
    
    if (typeof (this.defaultTab) == "number")
    {
    if (this.defaultTab < 0)
    this.defaultTab = 0;
    else
    {
    var count = this.getTabbedPanelCount();
    if (this.defaultTab >= count)
    this.defaultTab = (count > 1) ? (count - 1) : 0;
    }
    
    this.defaultTab = this.getTabs()[this.defaultTab];
    }
    
    // The defaultTab property is supposed to be the tab element for the tab content
    // to show by default. The caller is allowed to pass in the element itself or the
    // element's id, so we need to convert the current value to an element if necessary.
    
    if (this.defaultTab)
    this.defaultTab = this.getElement(this.defaultTab);
    
    this.attachBehaviors();
    };
    
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
    {
    if (ele && typeof ele == "string")
    return document.getElementById(ele);
    return ele;
    }
    
    Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
    {
    var children = [];
    var child = element.firstChild;
    while (child)
    {
    if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
    children.push(child);
    child = child.nextSibling;
    }
    return children;
    };
    
    Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
    {
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
    return;
    ele.className += (ele.className ? " " : "") + className;
    };
    
    Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
    {
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
    return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    };
    
    Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    {
    if (!optionsObj)
    return;
    for (var optionName in optionsObj)
    {
    if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
    continue;
    obj[optionName] = optionsObj[optionName];
    }
    };
    
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
    {
    if (this.element)
    {
    var children = this.getElementChildren(this.element);
    if (children.length)
    return children[0];
    }
    return null;
    };
    
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
    {
    var tabs = [];
    var tg = this.getTabGroup();
    if (tg)
    tabs = this.getElementChildren(tg);
    return tabs;
    };
    
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
    {
    if (this.element)
    {
    var children = this.getElementChildren(this.element);
    if (children.length > 1)
    return children[1];
    }
    return null;
    };
    
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
    {
    var panels = [];
    var pg = this.getContentPanelGroup();
    if (pg)
    panels = this.getElementChildren(pg);
    return panels;
    };
    
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
    {
    ele = this.getElement(ele);
    if (ele && arr && arr.length)
    {
    for (var i = 0; i < arr.length; i++)
    {
    if (ele == arr[i])
    return i;
    }
    }
    return -1;
    };
    
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
    {
    var i = this.getIndex(ele, this.getTabs());
    if (i < 0)
    i = this.getIndex(ele, this.getContentPanels());
    return i;
    };
    
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
    {
    return this.currentTabIndex;
    };
    
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
    {
    return Math.min(this.getTabs().length, this.getContentPanels().length);
    };
    
    Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
    {
    try
    {
    if (element.addEventListener)
    element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
    element.attachEvent("on" + eventType, handler);
    }
    catch (e) {}
    };
    
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
    {
    this.showPanel(tab);
    };
    
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
    {
    this.addClassName(tab, this.tabHoverClass);
    };
    
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
    {
    this.removeClassName(tab, this.tabHoverClass);
    
    };
    
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
    {
    this.hasFocus = true;
    this.addClassName(this.element, this.tabFocusedClass);
    };
    
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
    {
    this.hasFocus = false;
    this.removeClassName(this.element, this.tabFocusedClass);
    };
    
    Spry.Widget.TabbedPanels.ENTER_KEY = 13;
    Spry.Widget.TabbedPanels.SPACE_KEY = 32;
    
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
    {
    var key = e.keyCode;
    if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
    return true;
    
    this.showPanel(tab);
    
    if (e.stopPropagation)
    e.stopPropagation();
    if (e.preventDefault)
    e.preventDefault();
    
    return false;
    };
    
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
    {
    var stopTraversal = false;
    if (root)
    {
    stopTraversal = func(root);
    if (root.hasChildNodes())
    {
    var child = root.firstChild;
    while (!stopTraversal && child)
    {
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
    }
    }
    }
    return stopTraversal;
    };
    
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
    {
    var self = this;
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { self.onTabMouseOut(e, tab); }, false);
    if (this.enableKeyboardNavigation)
    {
    // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
    // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
    // by default.
    
    // Find the first element within the tab container that has a tabindex or the first
    // anchor tag.
    
    var tabIndexEle = null;
    var tabAnchorEle = null;
    
    this.preorderTraversal(tab, function(node) {
    if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    {
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
    {
    tabIndexEle = node;
    return true;
    }
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
    tabAnchorEle = node;
    }
    return false;
    });
    
    if (tabIndexEle)
    this.focusElement = tabIndexEle;
    else if (tabAnchorEle)
    this.focusElement = tabAnchorEle;
    
    if (this.focusElement)
    {
    Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    }
    }
    };
    
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
    {
    var tpIndex = -1;
    
    if (typeof elementOrIndex == "number")
    tpIndex = elementOrIndex;
    else // Must be the element for the tab or content panel.
    tpIndex = this.getTabIndex(elementOrIndex);
    
    if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
    return;
    
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    
    var numTabbedPanels = Math.max(tabs.length, panels.length);
    
    for (var i = 0; i < numTabbedPanels; i++)
    {
    if (i != tpIndex)
    {
    if (tabs[i])
    this.removeClassName(tabs[i], this.tabSelectedClass);
    if (panels[i])
    {
    this.removeClassName(panels[i], this.panelVisibleClass);
    panels[i].style.display = "none";
    }
    }
    }
    
    this.addClassName(tabs[tpIndex], this.tabSelectedClass);
    this.addClassName(panels[tpIndex], this.panelVisibleClass);
    panels[tpIndex].style.display = "block";
    
    this.currentTabIndex = tpIndex;
    };
    
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
    {
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var panelCount = this.getTabbedPanelCount();
    
    for (var i = 0; i < panelCount; i++)
    this.addPanelEventListeners(tabs[i], panels[i]);
    
    this.showPanel(this.defaultTab);
    };


    Any help is tremendously appreciated.


    Thank you,
    Adam Weglarz.

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Hi Adam,

    Can you post a link to a page where you have this? That would help a lot in deciphering your problem.

    Thanks!

    Steve

  4. #3
    Junior Member
    Join Date
    Aug 2008
    Posts
    9
    Member #
    17241
    Quote Originally Posted by smoseley
    Hi Adam,

    Can you post a link to a page where you have this? That would help a lot in deciphering your problem.

    Thanks!
    Steve
    http://www.deals.stflies.com/buy_main.html

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Ok, you have a timeout on it.

    Edit this file: http://www.deals.stflies.com/SpryAss...abbedPanels.js

    And change the following line (at the beginning):

    var timeoutwait = 2000;

    Change it to the delay you want before the switch (seconds x 1000).

    Let me know if you have further problems!

  6. #5
    Junior Member
    Join Date
    Aug 2008
    Posts
    9
    Member #
    17241
    Hello,
    Thanks for your reply. A friend of mine just recently added the timeout for me, but I would rather not even use it. All I want is if the mouse is in the TabbedPanels for it to stay on whatever tab they are browsing at, but when the mouse leaves the TabbedPanels, it goes back to the default tab. The timeout isn't really working. If you move over the bullets, for example, it starts the countdown and then closes. I took the bullets out (which I really didn't want to; didn't upload it to my server yet) and now when you move over the spaces it starts the countdown and then closes. Also, the timeout isn't working in internet explorer. Isn't there a simpler way to say "if the mouse in in the tabbed panels, don't close, and if the mouse moves out of the tabbed panels, display the default tab.
    I want my menu to act like the menu on this site: www.bandolino.com. In theirs, however, it closes on mouseout; I want mine to go back to the default tab. Please help, I am getting desperate now.
    -Adam.

  7. #6
    Junior Member
    Join Date
    Aug 2008
    Posts
    9
    Member #
    17241
    I uploaded the site again to http://www.buyfruitflies.stflies.com except this time without the timeout javascript. However, it nearly works, except it applies the mouseout function when you leave the tab, even when you try to go to the content region. I need it to be applied when you are off the whole TabbedPanels class, not just the TabbedPanelsTab class. This might be easier to fix than the whole timeout mess. I am greateful for any help at all. Thanks a lot.
    -Adam.

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Personally, I think your javascript is overkill for what you're looking to do. I could write the whole thing in 40 lines of code. You should probably write from scratch. It'll be more efficient and work the way you want it to. If I have time later I'll help. Right now, I gotta get to work!!

  9. #8
    Junior Member
    Join Date
    Aug 2008
    Posts
    9
    Member #
    17241
    Quote Originally Posted by smoseley
    Personally, I think your javascript is overkill for what you're looking to do. I could write the whole thing in 40 lines of code. You should probably write from scratch. It'll be more efficient and work the way you want it to. If I have time later I'll help. Right now, I gotta get to work!!
    Yes, I believe you are right, but I am very poor at javascript so I was forced to use the spry code, which everyone is telling me complicated things. I do not have nearly enough knowledge of javascript to write the code by myself, but if you are willing to help, I would be very grateful. Let me know. Thanks again.
    -Adam.

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Here you go... took some time, but I got it working I think how you want.

    You have to style it though:

    Code:
    <html>
    <head>
        <title>Tabs</title>
        <script language="javascript">
            //<!--
            var tabs = new Array('shop','care','deals','about','terms','websites');
            var defaultTab = 'shop';
            var isDOM = document.getElementById;
            var isOverTab = false;
            var currentTab = false;
            var timer = null;
    
            function overTab(tabId) {
            	if (!isDOM) return false;
            	clearTimeout(timer);
            	timer = window.setTimeout("showMenu('"+tabId+"')" , 50)
            }
            
            function offTab() {
            	if (!isDOM) return false;
            	clearTimeout(timer);
            	timer = window.setTimeout("showMenu(false)" , 50)
            }
            
            function showMenu(tab){
            	if (tab != currentTab){
            		for (i = 0; i < tabs.length; i++) {
            			document.getElementById(tabs[i] + 'Menu').className = 'off';
            		}
            		newTab = (tab) ? tab : defaultTab;
            		if (newTab != false &&  document.getElementById(newTab + 'Menu')) {
            			document.getElementById(newTab + 'Menu').className = 'on';
            		}
            		currentTab = tab;
            	}
            }
            //-->
        </script>
        <style type="text/css">
            body {
                font-family: Arial, Helvetica, Sans-Serif;
                font-size: 9pt;
            }
            ul.tabs {
                list-style: none;
                margin: 0;
            }
            ul.tabs li {
                float: left;
            }
            ul.tabs a {
                  display: block;
                  padding: 10px;
                  margin-right: 1px;
                  background-color: #999;
                  color: #FFF;
                  text-decoration: none;
            }
            ul.tabs a:hover {
                background-color: #AAA;
            }
            ul.tabs .on {
            }
            ul.tabs .off {
            }
    
            div.tabPanels {
            }
            div.tabPanels .on {
                display: block;
            }
            div.tabPanels .off {
                display: none;
            }
        </style>
    </head>
    <body>
      <ul class="tabs">
        <li id="shop" class="on" tabindex="0"><a href="#" onmouseover="overTab('shop')" onmouseout="offTab()">Shop for Flies</a></li>
        <li id="care" class="off" tabindex="0"><a href="#" onmouseover="overTab('care')" onmouseout="offTab()">Care Info</a></li>
        <li id="deals" class="off" tabindex="0"><a href="#" onmouseover="overTab('deals')" onmouseout="offTab()">Special Deals</a></li>
        <li id="about" class="off" tabindex="0"><a href="#" onmouseover="overTab('about')" onmouseout="offTab()">Who Are We</a></li>
        <li id="terms" class="off" tabindex="0"><a href="#" onmouseover="overTab('terms')" onmouseout="offTab()">Terms and Guarantees</a></li>
        <li id="websites" class="off" tabindex="0"><a href="#" onmouseover="overTab('websites')" onmouseout="offTab()">Websites</a></li>
        <li id="not" class="invisible" tabindex="0"></li>
      </ul>
      <div style="clear: both;"> </div>
      <div class="tabPanels" onmouseover="clearTimeout(timer)" onmouseout="offTab()">
        <div id="shopMenu" class="on"><a href="buy_melanogaster.html"><span>D. Melanogaster</span></a>  <a href="buy_hydei.html"><span>D. Hydei</span></a>  <a href="buy_golden_hydei.html"><span>D. Hydei (Golden)</span></a>  <a href="buy_kits.html"><span>Fly Kits</span></a>  <a href="buy_supplies.html"><span>Supplies</span></a>  <a href="buy_other_insects.html"><span>Other Insects</span></a></div>
        <div id="careMenu" class="off"><a href="care_upon_arrival.html"><span>Upon Arrival</span></a>  <a href="care_basic.html"><span>Basic Care</span></a>  <a href="care_diy_cultures.html"><span>DIY Cultures</span></a>  <a href="care_rtg_cultures.html"><span>Ready-To-Go Cultures</span></a>  <a href="care_other_insects.html"><span>Other Insects</span></a></div>
        <div id="dealsMenu" class="off"><a href="deals_specials.html"><span>Specials</span></a>  <a href="deals_flybucks.html"><span>FlyBucks</span></a>  <a href="deals_wholesale.html" ><span>Wholesale</span></a>  <a href="deals_recurring_orders.html"><span>Recurring Orders</span></a></div>
        <div id="aboutMenu" class="off"><a href="company_about_us.html"><span>About Us</span></a>  <a href="company_testimonials.html"><span>Testimonials</span></a>  <a href="company_why_us.html"><span>Why Us?</span></a>  <a href="company_news.html"><span>News</span></a>  <a href="company_faqs.html"><span>FAQs</span></a>  <a href="company_contact.html"><span>Contact</span></a></div>
        <div id="termsMenu" class="off"><a href="details_terms.html"><span>Shipping and Payment Terms</span></a>  <a href="details_pickup_delivery.html"><span>Pickup and Delivery</span></a>  <a href="details_guarantees.html"><span>Guarantees</span></a>  <a href="details_other.html"><span>Other Terms</span></a></div>
        <div id="websitesMenu" class="off"><a href="http://www.snailtails.com"><span>Snail Tail Chameleons</span></a>  <a href="http://www.stconservation.com"><span>Snail Tail Conservation</span></a>  <a href="http://www.fruitfliesdirect.com"><span>Fruit Flies Direct</span></a>  <a href="sites_custom_design.html"><span>Custom Design</span></a></div>
        <div id="notMenu" class="off"></div>
      </div>
    </body>
    </html>

  11. #10
    Junior Member
    Join Date
    Aug 2008
    Posts
    9
    Member #
    17241
    Wow!!!
    You are the MAN!!!

    I am still customizing it and such, but I will definetly post when I have it perfect. It seems to be working exactly how I need it. I really appreciate all of your help - I can't thank you enough.

    I'll be in touch.
    -Adam.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

close panel content on mouseout

,

close spry tabbed panels on mouseover

,

javascript tabbed panels

,

sprytabbedpanels close button

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com