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