Cannot understand some code in Dropdown menu script!!!

**Rabbit** · Aug 16 '13, 03:40 PM

As a rule of thumb, I do not open attachments from strangers. Please post the code in the thread itself. And use code tags when you do.

**azegurb** · Aug 17 '13, 06:48 AM

the js.file

Code:

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
    }
}

}

the css file

Code:

.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 html file

Code:

<!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>

thanks for attention

**Rabbit** · Aug 18 '13, 05:23 AM

The isContained function basically returns true is the triggering event's triggering element is contained within another given element.

**azegurb** · Aug 19 '13, 04:53 AM

I dont undertand what is triggering event's triggering element. i know triggering event for ex:mouseover but i dont know what is triggering event's triggering element?
And i created mine. but it doesn't work well like the script before i posted. the code i wrote is below. it works normally, but when i quickly move coursor on and out some of the dropdown menu crashes.

Code:

<!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 the css file

Code:

.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;
}

**Rabbit** · Aug 19 '13, 07:16 AM

The triggering event's triggering element means exactly that. When an event is triggered, there's an element associated with that event. For example, if you click on a div, the triggering event is the click, the triggering element is the div.

I'm assuming you didn't write the code that you posted. Your best bet is to read the documentation on that library that you downloaded.

**azegurb** · Aug 19 '13, 07:39 AM

The original code is above which i posted. but second code i myself wrote. if possible pls test it. it works but when i quickly move coursor on and out it crashes. for ex-if i mouseover Gallery and then Partners menus. one is closed and the another is opened. when i do several times, Partners dont open. so it crashes. Thank you for attention

**Rabbit** · Aug 19 '13, 04:00 PM

Compare the two HTML files. There are a lot of differences. For example, the HTML doctype being used is different. Yours is missing references to CSS files and JS files that are in the working version. And there is javascript code in the working version that is missing in yours.

Those are the 3 biggest mistakes I saw, there are probably others. You need to go through and compare line by line and fix the differences between the two files.

Cannot understand some code in Dropdown menu script!!!

Cannot understand some code in Dropdown menu script!!!

Comment

Comment

Comment

Comment

Comment

Comment

Comment