[Discussion] Tabbed Block by Mouse Over

[alhaudhie]

how can we change mouseover tab with clickable tab?

[Freddy]

You'd probably need to change the javascript or write your own version with another javascript snippet.

[Rav33n]

Great work here One question - I run into trouble when I try to have two tab blocks. I've tried copying the js and content php files, renaming them and pointing to the new ones from the block, but that doesn't seem to work.

Any help is much appreciated

[Freddy]

When you say trouble - what exactly do you mean ?  Error messages ?  If so what are they and when do they occur...more info needed...

[Rav33n]

When you say trouble - what exactly do you mean ?  Error messages ?  If so what are they and when do they occur...more info needed...

Doh. Trouble means, mouse over doesn't show the tab, only the tab button changes color. And once moused over, it doesn't stay on that tab, just goes to initial state, which is no tab. This is only for the second block on the page - the first tabbed block works fine.

[Freddy]

Here's what you need to do:

1) create another mouseoverTabContent.php if you haven't already - give it a new name like mouseoverTabContent2.php - save that near the original one. This example I am using here uses a duplicate of the original - so I get two exactly the same. You can edit it all however you like of course.

2) If you are always going to use two tabbed blocks on the same page then you have to leave out the CSS and Javascript in the second one down, so you will end up with something like this :

Code Select Expand

// Set which categories you want to pull recent articles from.  Comma separated ! 

$categories = '1,2,3,4';

echo '
<div id="mytabsmenu2" class="tabsmenuclass">
<ul>
<li><a href="#" rel="gotsubmenu[selected]">New Topics</a></li>
<li><a href="#" rel="gotsubmenu">Tools</a></li>
<li><a href="#" rel="gotsubmenu">New Articles</a></li>
<li><a href="#" rel="gotsubmenu">New Files</a></li>
<li><a href="#" rel="gotsubmenu">Statistics</a></li>
<li><a href="#" rel="gotsubmenu">Member</a></li>
<li><a href="#" rel="gotsubmenu">Search</a></li>
</ul>
</div>

<div id="mysubmenuarea2" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="tabbed_block/mouseoverTabContent2.php?categories=' , $categories , '" style="visibility:hidden">Sub Menu contents</a>
</div>

<script type="text/javascript">
mouseovertabsmenu.init("mytabsmenu2", "mysubmenuarea2", false)
</script>
';

3) Notice I have changed :

<div id="mytabsmenu2" class="tabsmenuclass">

<div id="mysubmenuarea2" class="tabsmenucontentclass">

<a href="tabbed_block/mouseoverTabContent2.php?categories=' , $categories....

mouseovertabsmenu.init("mytabsmenu2", "mysubmenuarea2", false)

This gives you a new instance of the tabbed block with a different id to the first block.  I just added a 2 after each one to distinguish them.

4) If you do all that it should work.

[Freddy]

Also, if you are not going to use the categories feature in the second block then you can just change this line :

Code Select Expand

<a href="tabbed_block/mouseoverTabContent2.php?categories=' , $categories , '" style="visibility:hidden">Sub Menu contents</a>

into this :

Code Select Expand

<a href="tabbed_block/mouseoverTabContent2.php" style="visibility:hidden">Sub Menu contents</a>

And then delete this line too as it's not needed :

Code Select Expand

$categories = '1,2,3,4';

[Xarcell]

pretty nifty...

Anyway to put it on a timer to rotate?

[Rav33n]

Here's what you need to do:

Brilliant, thanks.

2) If you are always going to use two tabbed blocks on the same page then you have to leave out the CSS and Javascript in the second one down

ftfy

Thanks alot mate.

[Freddy]

pretty nifty...

Anyway to put it on a timer to rotate?

I'm sure there is, but I know nothing about javascript so that's something I wouldn't be able to do myself.

Rav33n,

Glad it worked   Thanks for the note about having to leave out the javascript etc, I wasn't sure, but I figured the second lot would cause a problem.