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 1639 Rabbit 12,516
Recognized Expert Moderator MVP
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
Rabbit 12,516
Recognized Expert Moderator MVP
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;
-
}
-
Rabbit 12,516
Recognized Expert Moderator MVP
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
Rabbit 12,516
Recognized Expert Moderator MVP
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.
<style>
..high {background-color: #99FFCC;}
..low {background-color: #33CC00;}
</style>
|
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 dropdown menu selections are
made. Here is an abstract html/javascript form:
<form>
Enter how much money you are willing to spend:<input type=text name=amount
size=10>
Enter your home city:
<select name=city>
|
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 menu-items.
This is not exactly to my liking because you have to set the width
according to the text in the menu-items. Now, when working width a fixed
font size, this goes fine, but that's not exactly what I want. If people
have the standard font...
|
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 = LoadControl("AdminDropDownMenu.ascx");
// add it to the pages controls
Page.Controls.Add(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 first i.e. the choosen
item from the first filters the items in the second
first dropdown menu
sub no sub
1 science >>>>>>>>> if this is selected
2 maths
| |
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' changes accordingly.
But dont know why whenever i clicks on the node in tree it gives error cannot execute code from freed script. Only in IE 6.
Can anyone help me with that?
|
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 elements contained in this sub menu when clicked actually do nothing...!
Here is what I did:
placed the menu the way I wanted, converted this images to Movie Clip, double clicked, added 4 layers (one for the actions, one for an alpha...
|
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 a dropdown you can add image to tilte, every choice.
Version 2: check if JavaScript is disabled, then add normal dropdown menu
Let's try dropdown below and feel differences. Tested: IE 7, Opera 9, Firefox 2, Netscape 8.
Demo:...
|
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 drop down menu. However, I cannot get it to work when I try to select 'Other' on the second drop down menu. Any ideas about how I can start getting the second drop down menu to show a text box just like the first one does?
Also, how do I get the...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |