Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Programming Discussions
FAQ Community Calendar Today's Posts Search

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
  #1  
Old 03-28-2009, 11:57 AM
Winterworks Winterworks is offline
 
Join Date: Feb 2008
Location: Canada
Posts: 640
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default 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>
mouseovertabs.css:
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;
}
mouseovertabs.js:
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>')
It's currently showing up with: http://trasion.com/sup.html. But it doesn't load the sub links... What did I do wrong?
Reply With Quote
 


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:34 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04815 seconds
  • Memory Usage 2,320KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (2)post_thanks_box
  • (2)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit_info
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_threadedmode.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete