The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
#1
03-28-2009, 11:57 AM
|
|||
|
|||
HTML Hover Menu..
I can't seem to get these to work. They are from: http://www.dynamicdrive.com/dynamici...seovertabs.htm.
I want them as the exact same. Right now, I have my... sup.html: (the page it's on) Code:
<html>
<head>
<title>lol.</title>
<link rel="stylesheet" type="text/css" href="mouseovertabs.css" />
<script src="mouseovertabs.js" type="text/javascript"></script>
</head>
<body>
<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">Homepage</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>
<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm">Sub Menu contents</a>
</div>
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)
</script>
</body>
</html>
Code:
/* ######### CSS for top level tabs ######### */
.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenuclass li{
float: left;
}
.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #E8E8E8;
color: black;
margin-right: 1px;
text-decoration: none;
font: bold 13px Arial;
}
.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: black;
color: white;
}
/* ######### CSS for sub menu container below ######### */
.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 90%;
height: 24px;
padding: 5px;
border: 1px solid silver;
}
.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
Code:
var mouseovertabsmenu={
disappeardelay: 250, //set delay in miliseconds before sub menu disappears onmouseout
ajaxloadingmsg: 'Loading Sub Menu Contents...', //Message to show inside sub menu while fetching contents
///////No need to edit beyond here//////////////////////
tabsmenutree:{},
initializetabs:function(tabsmenuid, submenuid, tabcontentsLength, disappearBool){
var tabmenu=document.getElementById(tabsmenuid)
var tablinks=tabmenu.getElementsByTagName("a")
var submenu=document.getElementById(submenuid)
var selected=null, tablinks_count=0
for (var i=0; i<tablinks.length; i++){
tablinks[i]._parentid=tabsmenuid
var relattr=tablinks[i].getAttribute("rel")
if (/^gotsubmenu/i.test(relattr) && tablinks_count<tabcontentsLength){ //if "rel" attribute starts with="gotsubmenu" and a tab content exists for this tab based on its order
tablinks[i]._pos=tablinks_count //remember position of this tab relative to its active peers
if (relattr.indexOf("[selected]")!=-1){
selected=tablinks_count
}
this.addEvent(tablinks[i], function(){
var tabsmenutree=mouseovertabsmenu.tabsmenutree[this._parentid]
mouseovertabsmenu.clearhidetimer(tabsmenutree.submenu.hidetimer)
mouseovertabsmenu.showsubmenu(this)
}, "mouseover")
tablinks_count++
this.tabsmenutree[tabsmenuid].tabs.push(tablinks[i]) //add this tab to tab collection
}
else{ //else for regular tab links (with no "rel" attribute)
this.addEvent(tablinks[i], function(){
mouseovertabsmenu.hidesubmenu(this._parentid)
}, "mouseover")
}
}
this.addEvent(submenu, function(e){
mouseovertabsmenu.clearhidetimer(this.hidetimer)
}, "mouseover")
if (disappearBool==true){
this.addEvent(submenu, function(e){ //hide submenu contents when mouse rolls out of submenu DIV
if (!mouseovertabsmenu.isContained(this, e)){
var cursubmenuobj=this
this.hidetimer=setTimeout(function(){mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)}, mouseovertabsmenu.disappeardelay)
}
}, "mouseout")
}
var urlselected=this.urlparamselect(tabsmenuid)
//return position of selected tab (relative to its peers), or null
return typeof urlselected=="number"? urlselected : document.getElementById(urlselected)? document.getElementById(urlselected)._pos : selected
},
ajaxload:function(tabsmenuid, submenuid, disappearBool, url){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var tabsmenutree=this.tabsmenutree[tabsmenuid]
tabsmenutree.submenu.innerHTML=this.ajaxloadingmsg
var ajaxfriendlyurl=url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
page_request.onreadystatechange=function(){
mouseovertabsmenu.ajaxpopulate(page_request, tabsmenuid, submenuid, disappearBool, ajaxfriendlyurl)
}
var bustcache=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', ajaxfriendlyurl+bustcache, true)
page_request.send(null)
},
ajaxpopulate:function(page_request, tabsmenuid, submenuid, disappearBool, url){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
var tabsmenutree=this.tabsmenutree[tabsmenuid]
tabsmenutree.submenu.innerHTML=page_request.responseText
var innerdivs=tabsmenutree.submenu.getElementsByTagName("div")
for (var i=0; i<innerdivs.length; i++){
if (/tabsmenucontent/i.test(innerdivs[i].className)){
tabsmenutree.submenu_divs.push(innerdivs[i])
}
}
var selected=this.initializetabs(tabsmenuid, submenuid, tabsmenutree.submenu_divs.length, disappearBool)
if (selected!=null && selected<tabsmenutree.submenu_divs.length){
innerdivs[selected].style.display="block"
this.css(tabsmenutree.tabs[selected], "selected", "add")
tabsmenutree.submenu._prevselected=selected
}
}
},
showsubmenu:function(linkobj){
var tabsmenutree=this.tabsmenutree[linkobj._parentid]
this.hidesubmenu(linkobj._parentid)
var selected=parseInt(linkobj._pos)
tabsmenutree.submenu_divs[selected].style.display="block"
this.css(tabsmenutree.tabs[selected], "selected", "add")
tabsmenutree.submenu._prevselected=selected
},
hidesubmenu:function(tabsmenuid){
var tabsmenutree=this.tabsmenutree[tabsmenuid]
var prevselectedindex=tabsmenutree.submenu._prevselected
if (typeof prevselectedindex!="undefined"){
tabsmenutree.submenu_divs[prevselectedindex].style.display="none"
this.css(tabsmenutree.tabs[prevselectedindex], "selected", "remove")
}
},
clearhidetimer:function(timerid){
if (timerid)
clearTimeout(timerid)
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
urlparamselect:function(tabsmenuid){
var result=window.location.search.match(new RegExp(tabsmenuid+"=(\\w+)", "i")) //check for "?tabsmenuid=id_or_pos_of_selected_tab" in URL
var selectedtabstr=RegExp.$1
return /^\d+$/.test(selectedtabstr)? parseInt(selectedtabstr) : selectedtabstr //return position or ID of selected tab (or null if niether found)
},
addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},
init:function(tabsmenuid, submenuid, disappearBool){
this.tabsmenutree[tabsmenuid]={}
this.tabsmenutree[tabsmenuid].tabs=[] //array referencing the active tab links in this menu (ones with a "rel=gotsubmenu" attr)
this.tabsmenutree[tabsmenuid].submenu=null //reference submenu DIV for this menu
this.tabsmenutree[tabsmenuid].submenu_divs=[] //array referencing the submenu contents (external DIVs with class="tabsmenucontent")
var submenu=document.getElementById(submenuid)
submenu._parentid=tabsmenuid
this.tabsmenutree[tabsmenuid].submenu=submenu //remember this DIV as menu's submenu container
var remoteurl=submenu.getElementsByTagName("a")[0].getAttribute("href")
this.ajaxload(tabsmenuid, submenuid, disappearBool, remoteurl)
}
}
document.write('<style type="text/css">\n.tabsmenucontent{display:none}\n</style>')
|
|
#2
03-28-2009, 03:30 PM
|
||||
|
||||
|
Nothing. The links work just fine. It's perfect (I know, I've got the fully functional page displaying properly in Opera). Although it's very likely that the CSS isn't being handled correctly by your browser. Try to put a high z-index on the links to make sure that they're put on top.
|
 |
«
Previous Thread
|
Next Thread
»
Linear Mode
|
|
All times are GMT. The time now is 04:47 PM.