#1
  1. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Mar 2009
    Posts
    4
    Rep Power
    0

    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
    Last edited by thientanchuong; July 17th, 2010 at 10:53 PM. Reason: Can not see my images

Similar Threads

  1. Javascript IE problem "unknown runtime error" using innerHTML
    By nanquan in forum HTML, JavaScript And CSS Help
    Replies: 3
    Last Post: January 14th, 2007, 05:51 AM
  2. Javascript: problem with "-"
    By Stuiterbal in forum HTML, JavaScript And CSS Help
    Replies: 5
    Last Post: May 4th, 2006, 09:05 AM
  3. Tricky Javascript Problem
    By pbd22 in forum HTML, JavaScript And CSS Help
    Replies: 2
    Last Post: April 10th, 2006, 04:47 AM
  4. JavaScript Open New Window Problem
    By mikecollins in forum HTML, JavaScript And CSS Help
    Replies: 7
    Last Post: October 18th, 2005, 06:15 PM
  5. problem with images in javascript with xsl
    By managarmer in forum HTML, JavaScript And CSS Help
    Replies: 9
    Last Post: October 4th, 2005, 09:58 PM

IMN logo majestic logo threadwatch logo seochat tools logo