shubanman
05-09-2011, 05:10 PM
After looking at this code http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
I decided to implement it onto my forum. I have a problem though. Rather than have the content of each tab in a separate file, I want to have it in the same file (not a separate file).
Here's what I have so far:
echo '
<style type="text/css"><!--
.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0px 0px -1px 0px;
padding: 0;
list-style-type: none;
}
.tabsmenuclass li{
float: left;
}
.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #ddd;
color: #888888;
margin-right: 5px;
text-decoration: none;
font: bold 13px Arial;
}
.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #e8e8e8;
color: black;
text-decoration:none !important;
border-top: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 0px;
border-left: 1px solid silver;
}';
echo '
.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 99%;
height: auto;
overflow:auto;
padding: 0px;
border: 1px solid silver;
}
.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
--></style>
<script src="tabbed_block/mouseovertabs.js" type="text/javascript"></script>
<div id="mytabsmenu" 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>
</ul>
</div>
<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="tabbed_block/mouseoverTabContent.php?categories='" style="visibility:hidden">Sub Menu contents</a>
</div>
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", false)
</script>
';
How do I make it so that for it each tab, the content I want displayed within it is coded on this file, rather than one that links elsewhere?
Currently it's link to: tabbed_block/mouseoverTabContent.php?categories='
Please help
I decided to implement it onto my forum. I have a problem though. Rather than have the content of each tab in a separate file, I want to have it in the same file (not a separate file).
Here's what I have so far:
echo '
<style type="text/css"><!--
.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0px 0px -1px 0px;
padding: 0;
list-style-type: none;
}
.tabsmenuclass li{
float: left;
}
.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #ddd;
color: #888888;
margin-right: 5px;
text-decoration: none;
font: bold 13px Arial;
}
.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #e8e8e8;
color: black;
text-decoration:none !important;
border-top: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 0px;
border-left: 1px solid silver;
}';
echo '
.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 99%;
height: auto;
overflow:auto;
padding: 0px;
border: 1px solid silver;
}
.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
--></style>
<script src="tabbed_block/mouseovertabs.js" type="text/javascript"></script>
<div id="mytabsmenu" 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>
</ul>
</div>
<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="tabbed_block/mouseoverTabContent.php?categories='" style="visibility:hidden">Sub Menu contents</a>
</div>
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", false)
</script>
';
How do I make it so that for it each tab, the content I want displayed within it is coded on this file, rather than one that links elsewhere?
Currently it's link to: tabbed_block/mouseoverTabContent.php?categories='
Please help