Hi All,
I have taken from net dropdown menu script understood it but not completely.
below is html file
but there i dont know the isContained function role. Can anyone help me undertand this function. files are attached in zip format
I will your responses. Thanks in advance
7 1629
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.
the 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
-
}
-
}
-
-
}
-
the css file - .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
thanks for attention
The isContained function basically returns true is the triggering event's triggering element is contained within another given element.
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.
and the css file - .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 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.
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
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: michael |
last post by:
How may the following script be modified to function with the list
structure below it?
In short: it is meant to apply a background style to groups of LI's and ULs
depeding on the URL filename.
...
|
by: Mosher |
last post by:
Hi all, I am looking for some event handler auto-calc help on a form that
takes user input through text fields and dropdown menus. I would like some
of the text fields to be auto populated when...
|
by: Tim |
last post by:
Hi,
I've been searching the web for hours now and found lots and lots of
javascript files with which you can create dropdown menu's, but with all
of them you have to specify the width of the...
|
by: Phl |
last post by:
hi,
does any know why my javascript dropdownlist in my user control will
only appear if I have my code as follows:
// create an instance of the user control
Control UCAdminDDMenu =...
|
by: Ian Davies |
last post by:
Hello
Ive been informed that I need to do the following in javascript.
I have two drop down menus in my php script. The items displayed in the
second is dependent on which item is choosen from the...
|
by: shrik |
last post by:
I have one main page which contains two iframes say 'leftpanel' and 'content'. leftpanel contain page which has tree in it.
Now whenever i clikc on the partiucular node the pages in the 'content'...
|
by: plunder |
last post by:
Hi all what I'm trying to do is a flash menu which in some points has a dropdown sub-menu which comes out on mouseover and contains elements which if clicked link to other pages. Point is that these...
|
by: temp304 |
last post by:
Customize Dropdown Menu is designed to display some choices, as: languages, countries, themes,... but it's differrent from original version in browsers. This tool combine CSS and JavaScript to create...
|
by: jerrydigital |
last post by:
good evening,
I am trying to allow my users to enter in text if they don't find their option on my drop down menu. In the code below, I can get a text box to show up when I select 'Other' on the...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
| |