Mouseover Tabs Menu - auto tab on page load

[rickyspires]

1) Script Title:
Mouseover Tabs Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.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

<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


<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

[ddadmin]

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


<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:


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.

[rickyspires]

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:

<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:

<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

[ddadmin]

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


<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:


<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:


<a href="target.htm?mytabsmenu=events">Target Page</a>

[rickyspires]

:)

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:



<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

[ddadmin]

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 (http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm) for such a functionality.