Results 1 to 3 of 3

Thread: A combo Error

  1. #1
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default A combo Error

    1) Script Title:
    Chromemenu & slashdot-style menu
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rome/index.htm & http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
    3) Describe problem:

    My problem is more of a combo problem.

    I have combined the 2 menu styles. The chrome menu being the promary and the slashdot menu being the menu that gets displayed once the chrome menu displays it's dropdown.

    My problem is that when one of the slashdot menu collapses the Chrome menu hides itself and you then have to move the mouse over the chrome menu to get the slashdot menu. The slashdot menu is the basic slashdot menu except that when you open up the chrome drop-down the submenu the you collapsed will be collapsed.


    Does anyone know of a way to make it so that when you click on the submenu and it collapses, the drop-down will not hide itself?


    Here is the .css file
    Code:
    .sdmenu {
        width: 150px;
        font-family: Tahoma;
        font-size: 16px;
        padding-bottom: 10px;
        background: White  no-repeat  right bottom;
        color: Black;
    }
    
    .sdmenu .title, .sdmenu .titlehidden{
        display: block;
        padding: 5px 0;
        font-weight: bold;
        color: White;
        background:  #EEE url(title.gif) repeat-x;
    }
    
    .sdmenu .title {
        border-bottom: 0px solid Blue;
    }
    
    .sdmenu .arrow {
    		margin-left: 10px;
        margin-right: 7px;	
    	arrow-olor: Blue;
    }
    
    .sdmenu .titlehidden {
        border-bottom: none;
    }
    
    .sdmenu #top {
        background: url(toptitle.gif) no-repeat;
    }
    
    .sdmenu .submenu {
        overflow: hidden;
    }
    
    .sdmenu .submenu a {
        padding: 1px 1px;
        text-indent: 07px;
        background: white url(Hover2.gif) ;
        display: block;
        border-bottom: 10px solid #EEE;
        color: White;
        text-weight: bold;
        font-size:13px;
        border-top:10px;
    }
    
    .sdmenu .submenu a:hover {
        background :  white url(Hover2arrow.gif) ;
        color: white;
    }
    .chromestyle{
    width: 99%;
    font-weight: bold;
    }
    
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }
    
    .chromestyle ul li{
    display: inline;
    }
    
    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }
    
    .chromestyle ul li a:hover{
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }
    
    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: " v";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }
    
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 1;
    font:normal 12px Tahoma;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 150px;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }

  2. #2
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    var remember = true; //Remember menu states, and restore them on next visit.
    var contractall_default= true; //Should all submenus be contracted by default? (true or false)
    
    var menu, titles, submenus, arrows, bypixels;
    var heights = new Array();
    
    var n = navigator.userAgent;
    if(/Opera/.test(n)) bypixels = 2;
    else if(/Firefox/.test(n)) bypixels = 3;
    else if(/MSIE/.test(n)) bypixels = 2;
    
    /////DD added expandall() and contractall() functions/////
    
    function slash_expandall(){
    if (typeof menu!="undefined"){
    	for(i=0; i<Math.max(titles.length, submenus.length); i++){
    		titles[i].className="title";
    		arrows[i].src = "slashfiles/expanded.gif";
    		submenus[i].style.display="";
    		submenus[i].style.height = heights[i]+"px";
    	}
    }
    }
    
    function slash_contractall(){
    if (typeof menu!="undefined"){
    	for(i=0; i<Math.max(titles.length, submenus.length); i++){
    		titles[i].className="titlehidden";
    		arrows[i].src = "slashfiles/collapsed.gif";
    		submenus[i].style.display="none";
    		submenus[i].style.height = 0;
    	}
    }
    }
    
    
    /////End DD added functions///////////////////////////////
    
    
    function init(){
        menu = getElementsByClassName("sdmenu", "div", document)[0];
        titles = getElementsByClassName("title", "span", menu);
        submenus = getElementsByClassName("submenu", "div", menu);
        arrows = getElementsByClassName("arrow", "img", menu);
        for(i=0; i<Math.max(titles.length, submenus.length); i++) {
            titles[i].onclick = gomenu;
            arrows[i].onclick = gomenu;
            heights[i] = submenus[i].offsetHeight;
            submenus[i].style.height = submenus[i].offsetHeight+"px";
        }
        if(remember)
    				restore()
    		else if (contractall_default) //DD added code
    				slash_contractall() //DD added code
    }
    
    function restore() {
        if(getcookie("menu") != null) {
            var hidden = getcookie("menu").split(",");
            for(var i in hidden) {
                titles[hidden[i]].className = "titlehidden";
                submenus[hidden[i]].style.height = "0px";
                submenus[hidden[i]].style.display = "none";
                arrows[hidden[i]].src = "slashfiles/collapsed.gif";
            }
        }
    }
    
    function gomenu(e) {
        if (!e)
            var e = window.event;
        var ce = (e.target) ? e.target : e.srcElement;
        var sm;
        for(var i in titles) {
            if(titles[i] == ce || arrows[i] == ce)
                sm = i;
        }
        if(parseInt(submenus[sm].style.height) > parseInt(heights[sm])-2) {
            hidemenu(sm);
        } else if(parseInt(submenus[sm].style.height) < 2) {
            titles[sm].className = "title";
            showmenu(sm);
        }
    }
    
    function hidemenu(sm) {
        var nr = submenus[sm].getElementsByTagName("a").length*bypixels;
        submenus[sm].style.height = (parseInt(submenus[sm].style.height)-nr)+"px";
        var to = setTimeout("hidemenu("+sm+")", 15);
        if(parseInt(submenus[sm].style.height) <= nr) {
            clearTimeout(to);
            submenus[sm].style.display = "none";
            submenus[sm].style.height = "0px";
            arrows[sm].src = "slashfiles/collapsed.gif";
            titles[sm].className = "titlehidden";
        }
    }
    
    function showmenu(sm) {
        var nr = submenus[sm].getElementsByTagName("a").length*bypixels;
        submenus[sm].style.display = "";
        submenus[sm].style.height = (parseInt(submenus[sm].style.height)+nr)+"px";
        var to = setTimeout("showmenu("+sm+")", 15);
        if(parseInt(submenus[sm].style.height) > (parseInt(heights[sm])-nr)) {
            clearTimeout(to);
            submenus[sm].style.height = heights[sm]+"px";
            arrows[sm].src = "slashfiles/expanded.gif";
        }
            
            
    }
    
    function store() {
        var hidden = new Array();
        for(var i in titles) {
            if(titles[i].className == "titlehidden")
                hidden.push(i);
        }
        putcookie("menu", hidden.join(","), 30);
    }
    
    function getElementsByClassName(strClassName, strTagName, oElm){
        var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
        var arrReturnElements = new Array();
        strClassName = strClassName.replace(/\-/g, "\\-");
        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
        var oElement;
        for(var i=0; i<arrElements.length; i++){
            oElement = arrElements[i];      
            if(oRegExp.test(oElement.className)){
                arrReturnElements.push(oElement);
            }   
        }
        return (arrReturnElements)
    }
    
    function putcookie(c_name,value,expiredays) {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate);
    }
    
    function getcookie(c_name) {
        if(document.cookie.length > 0) {
            var c_start = document.cookie.indexOf(c_name + "=");
            if(c_start != -1) {
                c_start = c_start + c_name.length + 1;
                var c_end = document.cookie.indexOf(";",c_start);
                if(c_end == -1)
                    c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start, c_end));
            }
        }
        return null;
    }
    
    window.onload = init;
    if(remember) window.onunload = store;
    
    
    
    
    //Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
    //Last updated: June 14th, 06'
    
    var cssdropdown={
    disappeardelay: 500 ,  //set delay in miliseconds before menu disappears onmouseout
    disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
    enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
    
    //No need to edit beyond here////////////////////////
    dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,
    
    getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    },
    
    swipeeffect:function(){
    if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
    this.bottomclip+=10+(this.bottomclip/1) //unclip drop down menu visibility gradually
    this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
    }
    else
    return
    this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 0.12)
    },
    
    showhide:function(obj, e){
    if (this.ie || this.firefox)
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
    if (e.type=="click" && obj.visibility==visible || e.type=="mouseover"){
    if (this.enableswipe==1){
    if (typeof this.swipetimer!="undefined")
    clearTimeout(this.swipetimer)
    obj.clip="rect(0 auto 0 0)" //hide menu via clipping
    this.bottomclip=0
    this.swipeeffect()
    }
    obj.visibility="visible"
    }
    else if (e.type=="click")
    obj.visibility="visible"
    },
    
    iecompattest:function(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    },
    
    clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="leftedge"){
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
    if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
    edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
    if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
    edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
    if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    },
    
    dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
    this.dropmenuobj.style.visibility="visible" //hide menu
    this.clearhidemenu()
    if (this.ie||this.firefox){
    obj.onmouseout=function(){cssdropdown.delayhidemenu()}
    obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
    this.dropmenuobj=document.getElementById(dropmenuID)
    this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
    this.dropmenuobj.onmouseout=function(){cssdropdown.dynamichide(e)}
    this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
    this.showhide(this.dropmenuobj.style, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    }
    },
    
    
    contains_firefox:function(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    },
    
    dynamichide:function(e){
    var evtobj=window.event? window.event : e
    if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
    this.delayhidemenu()
    else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
    this.delayhidemenu()
    },
    
    delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu
    },
    
    clearhidemenu:function(){
    if (this.delayhide!="undefined")
    clearTimeout(this.delayhide)
    },
    
    startchrome:function(){
    for (var ids=0; ids<arguments.length; ids++){
    var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    var relvalue=menuitems[i].getAttribute("rel")
    menuitems[i].onmouseover=function(e){
    var event=typeof e!="undefined"? e : window.event
    cssdropdown.dropit(this,event,this.getAttribute("rel"))
    }
    }
    }
    }
    }
    
    }

  3. #3
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    and there was the .js file
    Thanks


    Sorry for the extremly long post.

    Also, if what I am doing is against any copyright issues please let me know and I will stop!

    Thankyou!!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •