Results 1 to 6 of 6

Thread: Mouseover Tabs Menu - auto tab on page load

  1. #1
    Join Date
    Mar 2009
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouseover Tabs Menu - auto tab on page load

    1) Script Title:
    Mouseover Tabs Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...seovertabs.htm

    3) Describe problem:

    i can't get the default tab selected when the page loads to work..

    for example.. if i load the events page i would like the event sub links to show as defaulf.

    if i mouse over another tab it should show the sub links for that tab and then go back to the default tab when im not moving my mouse over any tabs.

    the site is www.eventtrafik.com

    TOP TABS
    HTML Code:
    <div id="mytabsmenu" class="menu">
    <ul>
    <li><a href="http://www.eventtrafik.com"" rel="gotsubmenu" id="index">HOME</a></li>
    <li><a href="/event-ticket.php" rel="gotsubmenu" id="events">EVENTS</a></li>
    <li><a href="/all-job.php" rel="gotsubmenu" id="jobs">JOBS</a></li>
    <li><a href="/service-venue.php" rel="gotsubmenu" id="sevices">SERVICES</a></li>
    <li><a href="/news.php" rel="gotsubmenu"  id="news">NEWS</a></li>
    <li><a href="/forum" rel="gotsubmenu" id="community">COMMUNITY</a></li>
    
    </ul>
    </div>
    BOTTOM LINKS
    HTML Code:
    <link rel="stylesheet" type="text/css" href="css/mouseovertabs.css" />
    
    <script src="js/mouseovertabs.js" type="text/javascript">
    
    /***********************************************
    * Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    
    
    <div class="tabsmenucontent">
    <ul>
    <li><a href="http://www.eventtrafik.com/login.php">LOGIN</a></li>
    <li><a href="http://www.eventtrafik.com/sign-up-step1.php">REGISTER FOR FREE</a></li>
    <li><a href="http://www.eventtrafik.com/search-member.php">Standard Search</a></li>
    <li><a href="http://www.eventtrafik.com/service-venue.php">Advanced Search</a></li>
    </ul>
    </div>
    
    <div class="tabsmenucontent">
    <ul>
    <li><a href="http://www.eventtrafik.com/event-post.php?PostIntention=PromoteEvent">Add an Event</a></li>
    <li><a href="http://www.eventtrafik.com/event-tickets.php">Latest Events</a></li>
    <li><a href="http://www.eventtrafik.com/event-ticket.php?DisplayCondition=ToBuyTicket">Selling Tickets Only</a></li>
    <li><a href="http://www.eventtrafik.com/event-ticket.php?DisplayCondition=ToPromote">Inviting Promoters Only</a></li>
    <li><a href="http://www.eventtrafik.com/event-ticket.php?DisplayCondition=ToSP">Hiring Services Only</a></li>
    <li><a href="http://www.eventtrafik.com/calendar.php?SearchType=Event&month=03&year=2009&Personal=N&DisplayCondition=">Events Calendar</a></li>
    
    
    </ul>
    </div>
    
    <div class="tabsmenucontent">
    <ul>
    <li><a href="http://www.eventtrafik.com/all-job.php?Classification=Full">FT Jobs</a></li>
    <li><a href="http://www.eventtrafik.com/all-job.php?Classification=Part">PT Jobs</a></li>
    <li><a href="http://www.eventtrafik.com/event-post.php?PostIntention=PostEvent">Event Jobs</a></li>
    <li><a href="http://www.eventtrafik.com/calendar.php?SearchType=Job&month=3&year=2009&DateDetailLink=event-ticket.php?">FT/PT Jobs calendar</a></li>
    <li><a href="http://www.eventtrafik.com/calendar.php?SearchType=Project&month=3&year=2009&DateDetailLink=all-job.php?Classification=Job">Event Jobs calendar</a></li>
    <li><a href="http://www.eventtrafik.com/all-job.php">Add a FT/PT Job</a></li>
    <li><a href="http://www.eventtrafik.com/all-job.php">Add Event Jobs</a></li>
    
    </ul>
    </div>
    
    <div class="tabsmenucontent">
    <ul>
    <li><a href="http://www.eventtrafik.com/search-member.php?UserType=SP">Standard Search</a></li>
    <li><a href="http://www.eventtrafik.com/service-venue.php">Advanced Search</a></li>
    <li><a href="http://www.eventtrafik.com/search-member.php?UserType=Organizer">Organizers</a></li>
    <li><a href="http://www.eventtrafik.com/venue-list.php">Venues</a></li>
    <li><a href="http://www.eventtrafik.com/search-member.php?UserType=Promoter">Promoters</a></li>
    <li><a href="http://www.eventtrafik.com/sign-up-step1.php">Add Services</li>
    <li><a href="http://www.eventtrafik.com/venue-description.php?AddMode=Y">Add a Venue</a></li>
    <li><a href="http://www.eventtrafik.com/sign-up-step1.php">Become a Promoter</a></li>
    
    </ul>
    </div>
    
    <div class="tabsmenucontent">
    <ul>
    <li><a href="http://www.eventtrafik.com/news.php">Search News</a></li>
    <li><a href="http://www.eventtrafik.com/article.php">Search Articles</a></li>
    <li><a href="http://www.eventtrafik.com/news-post.php">Add News</a></li>
    <li><a href="http://www.eventtrafik.com/article-post.php">Add Articles</a></li>
    </ul>
    </div>
    
    <div class="tabsmenucontent">
    <ul>
    <li><a href="http://www.eventtrafik.com/Forum">Search Forum</a></li>
    </ul>
    </div>
    
    
    <br style="clear:left" />

    thanks
    rick

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    To have a particular tab selected by default, you'd use the syntax in red below inside your tab's HTML:

    Code:
    <li><a href="http://www.eventtrafik.com" rel="gotsubmenu">HOME</a></li>
    <li><a href="/event-ticket.php" rel="gotsubmenu[selected]">EVENTS</a></li>
    <li><a href="/all-job.php" rel="gotsubmenu">JOBS</a></li>
    <li><a href="/service-venue.php" rel="gotsubmenu">SERVICES</a></li>
    <li><a href="/news.php" rel="gotsubmenu">NEWS</a></li>
    <li><a href="/forum" rel="gotsubmenu">COMMUNITY</a></li>
    Be sure to reset the same rel attribute value inside your "Home" link first.

    As far as getting the menu to snap back to the default selected when the mouse rolls out of the menu, what you could do is set the 3rd param in mouseovertabsmenu.init() to false:

    Code:
    mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", false)
    This won't exactly do what you want, though it will stop the sub menu contents from emptying out when the mouse rolls out, instead, the last selected tab's sub contents will be shown.
    DD Admin

  3. #3
    Join Date
    Mar 2009
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down

    thanks but thats not what i had in mind.

    if i do it that way it will go to the same tab no matter which page i go to.

    i would like it so,
    if im on home - it will show the home tab as default
    if im on event - it will show the event tab as default
    if im on job - it will show the job tab as default
    if im on services - it will show the services tab as default
    if im on news - it will show the home news as default
    if im on commumity - it will show the home commumity as default


    in the install instructions it says to use:

    <a href="target.htm?tabmenuid=index">Target Page</a>
    or:
    <a href="target.htm?tabmenuid=selectedtabid">Target Page</a>

    but i cant seem to get it to work.
    the code is this:
    HTML Code:
    <div id="mytabsmenu" class="menu">
    <ul>
    <li><a href="http://www.eventtrafik.com?tabmenuid=index"rel="gotsubmenu">INDEX</a></li>
    <li><a href="/event-ticket.php?tabmenuid=eventtickets" rel="gotsubmenu">EVENTS</a></li>
    <li><a href="/all-job.php?tabmenuid=alljobs" rel="gotsubmenu">JOBS</a></li>
    <li><a href="/service-venue.php?tabmenuid=index" rel="gotsubmenu">SERVICES</a></li>
    <li><a href="/news.php?tabmenuid=index" rel="gotsubmenu">NEWS</a></li>
    <li><a href="/forum?tabmenuid=forum" rel="gotsubmenu">COMMUNITY</a></li>
    
    </ul>
    </div>
    i tried differnt types of code to the links its not working:
    for example:
    HTML Code:
    <div id="mytabsmenu" class="menu">
    <ul>
    <li><a href="/event-ticket.php?tabmenuid=selectedtabid" rel="gotsubmenu">EVENTS</a></li>
    <li><a href="/event-ticket.php?tabmenuid=event-ticket" rel="gotsubmenu">EVENTS</a></li>
    <li><a href="/event-ticket.php?tabmenuid=eventticket" rel="gotsubmenu">EVENTS</a></li>
    <li><a href="/event-ticket.php?tabmenuid=event" rel="gotsubmenu">EVENTS</a></li>
    <li><a href="/event-ticket.php?tabmenuid=events" rel="gotsubmenu">EVENTS</a></li>
    
    </div>

    no go

    thanks
    ricky

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I see. If you're asking about how to select a tab using the URL parameter option, the syntax would be:

    Code:
    <a href="target.htm?mytabsmenu=0">Select First tab</a>
    Where "mytabsmenu" is the ID of your tab menu container. Or if you wish to select a tab by its ID, you'll need to first give each tab a ID, for example:

    Code:
    <div id="mytabsmenu" class="menu">
    <ul>
    <li><a href="http://www.eventtrafik.com?tabmenuid=index"rel="gotsubmenu" id="index">INDEX</a></li>
    <li><a href="/event-ticket.php?tabmenuid=eventtickets" rel="gotsubmenu" id="events">EVENTS</a></li>
    <li><a href="/all-job.php?tabmenuid=alljobs" rel="gotsubmenu">JOBS</a></li>
    <li><a href="/service-venue.php?tabmenuid=index" rel="gotsubmenu">SERVICES</a></li>
    <li><a href="/news.php?tabmenuid=index" rel="gotsubmenu">NEWS</a></li>
    <li><a href="/forum?tabmenuid=forum" rel="gotsubmenu">COMMUNITY</a></li>
    
    </ul>
    </div>
    With the above, to select the "Events" tab, the syntax would be:

    Code:
    <a href="target.htm?mytabsmenu=events">Target Page</a>
    DD Admin

  5. #5
    Join Date
    Mar 2009
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default It works -



    i had a play and it works

    this is the code...

    the url has to use the same id tag
    <div id="mytabsmenu" class="menu">

    <li><a href="http://www.eventtrafik.com?mytabsmenu=index" rel="gotsubmenu" id="index">HOME</a></li>

    this is my code:

    HTML Code:
    <div id="mytabsmenu" class="menu">
    <ul>
    <li><a href="http://www.eventtrafik.com?mytabsmenu=index" rel="gotsubmenu" id="index">HOME</a></li>
    <li><a href="/event-ticket.php?mytabsmenu=events" rel="gotsubmenu"id="events">EVENTS</a></li>
    <li><a href="/all-job.php?mytabsmenu=jobs" rel="gotsubmenu"id="jobs">JOBS</a></li>
    <li><a href="/service-venue.php?mytabsmenu=services" rel="gotsubmenu"id="services">SERVICES</a></li>
    <li><a href="/news.php?mytabsmenu=news" rel="gotsubmenu"id="news">NEWS</a></li>
    <li><a href="/forum?mytabsmenu=community" rel="gotsubmenu"id="community">COMMUNITY</a></li>
    
    </ul>
    </div>


    NOW THERE IS JUST ONE MORE PROBLEM TO SOLVE..

    how to make it so after moving your move over the tabs it always returns to the pages default tab. ????

    i tried this:
    As far as getting the menu to snap back to the default selected when the mouse rolls out of the menu, what you could do is set the 3rd param in mouseovertabsmenu.init() to false:

    but it doesn't work.

    any suggestions ???


    thanks
    ricky

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Setting the 3rd parameter of init() to false won't completely solve your problem unfortunately. As mentioned:

    This won't exactly do what you want, though it will stop the sub menu contents from emptying out when the mouse rolls out, instead, the last selected tab's sub contents will be shown.
    At the moment you'll need to use DD Tab Menu for such a functionality.
    DD Admin

Bookmarks

Posting Permissions

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