0

Hi all,
I have taken from net drop down menu (Drop down chrome menu). it is written in Object oriented background. but i would like to get it simple and concise. i wrote it in a prosedural background again.
below is original script.
1-is HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bakı İstehsalat Tikinti Şirkəti</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #f3efd4 url(yeni.jpg) no-repeat center top;
    color: #333333;
    width: 100%;
    display: table;
        height:900px;
}
#content {
    width: 1024px;
    margin: 5px auto 0px;
        background-color:#fff;
        height:900px;
    border: solid 1px #ccc;
    padding: 0px 0px 0px 0px;
}
h1 {
    margin: 0;
    padding: 0;
}
</style>
<link rel="stylesheet" type="text/css" href="S%20Design_files/chromestyle.css">

<script type="text/javascript" src="S%20Design_files/chrome.js">
</script>

<link rel="stylesheet" href="S%20Design_files/style.css">


</head>

<body>
<div id="content"><div><img src="S%20Design_files/top.jpg"></div>
    <div class="chromestyle" id="xrom">
<ul>
<li><a href="http://www.dynamicdrive.com/">Main</a></li>
<li><a class="" href="#" rel="dropmenu1">Gallery</a></li>
<li><a class="" href="#" rel="dropmenu2">Partners</a></li>
<li><a class="" href="#" rel="dropmenu3">About us</a></li>
<li><a class="" href="#" rel="dropmenu4">Contact</a></li>
<li><a class="" href="#" rel="dropmenu5">Map</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div style="height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;" id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/"></a>
<a href="http://www.cssdrive.com/">Флористика</a>

</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px; height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;">
<a href="http://www.cnn.com/"></a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px; height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;">
<a href="http://www.google.com/">saasaa</a>
</div>
<div id="dropmenu4" class="dropmenudiv" style="width: 150px; height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;">
<a href="">Национальный декор</a>
<a href="">Новогодний декор</a>
<a href="">Детский праздник</a>
</div>
<div id="dropmenu5" class="dropmenudiv" style="width: 150px; height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;">
<a href=""></a>
</div>
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="">Контакты</a>

</div>
    <script type="text/javascript">

cssdropdown.startchrome("xrom")


</script>

<div id="slider-wrapper">
   <div id="slider" class="nivoSlider">
      <img src="images/1.jpg" alt="" title="" />
      <a href="#"><img src="images/2.jpg" alt="" title="" /></a>
      <img src="images/3.jpg" alt="" title=""  />
       <img src="images/4.jpg" alt="" title="" />
            </div>


     </div>
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>    <p style="padding-bottom: 0px"> </p>  </div>
</body></html>

second is CSS chromestyle.css

.chromestyle{
width: 100%;
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, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### 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;
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;
}

and finally is JS file

var cssdropdown={
disappeardelay: 1050,
dropdownindicator: '<img src="down.gif" border="0" />', 
enablereveal: [true, 35],
enableiframeshim: 1, 


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){
        alert('verilmeyib');
            dropmenu._trueheight=dropmenu.offsetHeight
            }

        alert(this.revealtimers[dropmenu.id]);
        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

    }
    alert(dropmenu._curheight);
        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.getposOffset(startchrome, "lef")
    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+"      vdgdgf"+cssdropdown.dropdownindicator
                }catch(e){}
                this.addEvent(menuitems[i], function(e){

                    if (!cssdropdown.isContained(this, e)){
                        var evtobj=window.event || e

                        cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                        var az=document.getElementById('xrom').getElementsByTagName("a")[3].innerHTML;
                    //  alert(this.innerHTML==az);
                    }
                }, "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
    }
}

}

it works perfectly in all browsers
and now below is my script which i would like to get it simply
html and javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    #esas {

        height:300px;
        width:200px;
        background-color:red;
        margin-top:20px;
    }

    </style>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script>
window.onload=function(){
    var delayhide="";
    function pos(obyekt){
        var obj=obyekt.getAttribute('rel');
        var get=document.getElementById(obj);
        var left=obyekt.offsetLeft;
        var top=obyekt.offsetTop;
        var hun=obyekt.offsetHeight;
       open(get);
      get.style.left=left +"px"
    get.style.top=top +hun+1+"px"

    }
    function unpos(obyekt){
    delayhide=setTimeout(function(){del(obyekt)}, 50);
    }

function unpos1(obyekt){
    delayhide=setTimeout(function(){sil1(obyekt)}, 500);
    }
    function del(obyekt){
    var obj=obyekt.getAttribute('rel');
    var get=document.getElementById(obj);
    var left=-1000;
    var top=-1000;
      get.style.left=left +"px"
    get.style.top=top +"px"


    }
    function sil1(obyekt){
      var obj=obyekt;  
       var left=-1000;
        var top=-1000;
     obj.style.left=left +"px"
    obj.style.top=top +"px"
}

    function open(dropmenu){

        if (!dropmenu._trueheight || dropmenu._trueheight<10){
        dropmenu._trueheight=dropmenu.offsetHeight
        }
        dropmenu.style.height=dropmenu._curheight=0
        dropmenu.style.overflow="hidden"
        dropmenu.style.visibility="visible"
        //this.revealtimers[dropmenu.id]=
        timer=setInterval(function(){ac(dropmenu)}, 10)


    }
function ac(dropmenu){

    var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=15;
    if (curH<maxH){
        var newH=Math.min(curH, maxH)
        dropmenu.style.height=newH+"px"
        dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
    }
    else{ 
        dropmenu.style.height="auto"
        dropmenu.style.overflow="hidden"
        clearInterval(timer);
    }
    }
   var menuitems=document.getElementById('xrom').getElementsByTagName("a");
   function bax(){
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    var gotur=menuitems[i].getAttribute("rel");
    var id=document.getElementById(gotur);
    id.onmouseover=function(){  clearTimeout(delayhide);}
    id.onmouseout=function(){   unpos1(this);}
    menuitems[i].onmouseover=function(){pos(this);}
    menuitems[i].onmouseout=function(){unpos(this);}
    }
   }
   }

   bax()
   }

   </script>
</head>
<body>
   <div class="chromestyle" id="xrom">
<ul>
<li><a href="http://www.dynamicdrive.com/">Main</a></li>
<li><a class="" href="#" rel="dropmenu1">Gallery</a></li>
<li><a class="" href="#" rel="dropmenu2">Partners</a></li>
<li><a class="" href="#" rel="dropmenu3">About Us</a></li>
<li><a class="" href="#" rel="dropmenu4">Contact</a></li>
<li><a class="" href="#">Map</a></li>
</ul>
</div>
<div id="dropmenu1" class="dropmenudiv" style="width: 150px; height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;">
<a href="">Национальный декор</a>
<a href="">Новогодний декор</a>
<a href="">Детский праздник</a>
</div>
<div id="dropmenu2" class="dropmenudiv" style="width: 150px; height: auto; overflow: hidden; visibility: hidden; left: -1000px; top: -1000px;">
<a href="">Национальный декор</a>
<a href="">Новогодний декор</a>
<a href="">Детский праздник</a>
</div>
 <input type="button" value="yaz">
</body>
</html>

and style.css

.chromestyle{
width: 100%;
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;
}
.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: visible;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; 
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

The problem is that when i quickly move coursor on dropdown menus from to another and back again several times the dropdown menu crashes. one of these menus are opened downward and other not. what was the problem with the script i wrote?
Thanks in advance

2
Contributors
1
Reply
26
Views
4 Years
Discussion Span
Last Post by LastMitch
0

The problem is that when i quickly move coursor on dropdown menus from to another and back again several times the dropdown menu crashes. one of these menus are opened downward and other not. what was the problem with the script i wrote?

What browsers is the menu crashing? Have try to used Inspect Element from each browsers to see the code runs? Then you will be able to pin-point the issue you are having.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.