Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with Submenu position in Javascript

    A menu is not hovered will be like this:



    some errors are found

    1. Sub-menus are displayed under the menu



    I want to display All sub-menus on the right and next to menu border

    Eg: The result I want it to be looked like this:



    How can I fix the code like that ?

    2. Sub menu does have the same size of length.

    When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties.




    How can fix the problem so that All submenu will be the same size of length when they are called ?

    My code is for leftMenu.php

    Code:
    <div id="leftmenu">
        <ul>
            <li><a href="index.php?page=dress">Fashion Dress</a></li>
            <li><a href="index.php?page=handbag">Hand Bags</a></li>
            <li><a href="index.php?page=scraves">Scraves</a></li>
            <li><a href="index.php?page=watch">Bracelet Watches</a></li>
            <li><a href="#" rel="dropmenu1">Silk Ties</a></li>
            <li><a href="#" rel="dropmenu2">Pyjamas</a>
        </li>
        </ul>
    </div>
    <!-- SILK TIES drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="index.php?page=plain">Plain Style</a>
    <a href="index.php?page=woven">Woven Style</a>
    </div>
    <!-- PYJAMAS drop down menu -->
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="index.php?page=wonen">For Women</a>
    <a href="index.php?page=men">For Men</a>
    </div>
    
    <script type="text/javascript">
    cssdropdown.startchrome("leftmenu")
    </script>
    My code is for leftmenu.css

    Code:
    #leftmenu ul{
        font-family: Arial, Verdana;
        font-size: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
        margin-top: .1em;
    }
    ul#leftmenu li {
        display: block;
        position: relative;
        float:left;
    }
    #leftmenu li a {
        display: block;
        text-decoration: none;
        background-image:url(images/leftNormal.gif);
        width: 218px;
        height: 30px;
        margin-top: .1em;
    }
    #leftmenu li a:hover {
        display: block;
        text-decoration: none;
        background-image:url(images/leftHover.gif);
        width: 218px;
        height: 30px;
        white-space: 1em;
        color:#FFF;
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    background-image:url(images/leftmenu.gif);
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    * html .dropmenudiv a{ /*IE only @hắc*/
    width: 100%;
    }
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-image:url(images/lefthover.gif);
    width: auto;
    display: block;
    text-indent: 3px;
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color:#FFF;
    }
    Javascript code in the page of leftmenu.js

    Code:
    var cssdropdown={
    disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
    //dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
    enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
    enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)
    
    //No need to edit beyond here////////////////////////
    
    dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},
    
    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;
    },
    
    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
    },
    
    showmenu:function(dropmenu, e){
        if (this.enablereveal[0]){
            if (!dropmenu._trueheight || dropmenu._trueheight<10)
                dropmenu._trueheight=dropmenu.offsetHeight
            clearTimeout(this.revealtimers[dropmenu.id])
            dropmenu.style.height=dropmenu._curheight=0
            dropmenu.style.overflow="hidden"
            dropmenu.style.visibility="visible"
            this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
        }
        else{
            dropmenu.style.visibility="visible"
        }
        this.css(this.asscmenuitem, "selected", "add")
    },
    
    revealmenu:function(dropmenu, dir){
        var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
        if (curH<maxH){
            var newH=Math.min(curH, maxH)
            dropmenu.style.height=newH+"px"
            dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
        }
        else{ //if done revealing menu
            dropmenu.style.height="auto"
            dropmenu.style.overflow="hidden"
            clearInterval(this.revealtimers[dropmenu.id])
        }
    },
    
    clearbrowseredge:function(obj, whichedge){
        var edgeoffset=0
        if (whichedge=="rightedge"){
            var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
            var dropmenuW=this.dropmenuobj.offsetWidth
            if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
                edgeoffset=dropmenuW-obj.offsetWidth
        }
        else{
            var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
            var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
            var dropmenuH=this.dropmenuobj._trueheight
            if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
                edgeoffset=dropmenuH+obj.offsetHeight
                if ((this.dropmenuobj.y-topedge)<dropmenuH) //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.hidemenu() //hide menu
        this.clearhidemenu()
        this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
        this.asscmenuitem=obj //reference associated menu item
        this.showmenu(this.dropmenuobj, 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"
        this.positionshim() //call iframe shim function
    },
    
    positionshim:function(){ //display iframe shim function
        if (this.iframeshimadded){
            if (this.dropmenuobj.style.visibility=="visible"){
                this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
                this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
                this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
                this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
                this.shimobject.style.display="block"
            }
        }
    },
    
    hideshim:function(){
        if (this.iframeshimadded)
            this.shimobject.style.display='none'
    },
    
    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
    },
    
    dynamichide:function(m, e){
        if (!this.isContained(m, e)){
            this.delayhidemenu()
        }
    },
    
    delayhidemenu:function(){
        this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
    },
    
    hidemenu:function(){
        this.css(this.asscmenuitem, "selected", "remove")
        this.dropmenuobj.style.visibility='hidden'
        this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
        this.hideshim()
    },
    
    clearhidemenu:function(){
        if (this.delayhide!="undefined")
            clearTimeout(this.delayhide)
    },
    
    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)});
    },
    
    startchrome:function(){
        if (!this.domsupport)
            return
        this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
        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")
                    var asscdropdownmenu=document.getElementById(relvalue)
                    this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
                    this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
                    this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
                    try{
                        menuitems[i].innerHTML=menuitems[i].innerHTML+" "
                    }catch(e){}
                    this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
                        if (!cssdropdown.isContained(this, e)){
                            var evtobj=window.event || e
                            cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                        }
                    }, "mouseover")
                    this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
                    this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
                }
            } //end inner for
        } //end outer for
        if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
            document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
            this.shimobject=document.getElementById("iframeshim") //reference iframe object
            this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
            this.iframeshimadded=true
        }
    } //end startchrome
    
    }
    I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly.

    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    My code is for leftMenu.php
    I'd recommend you to build the markup of menu using a nested unordered list (<ul>), which would be more semantic and will show the users a neat structure even in the naked CSS.

    And you could achieve the drop down effect in all moders browsers, without using any javascript. In that way, your menu will become accessible to users who do not have javascript support. Tale a look at the article www.htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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