472,983 Members | 2,878 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,983 software developers and data experts.

How to Make "Mouse-Over" Drop-Down Menus

I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus--the type that when you "hover" over a subject links
relevant to that subject "emerge" which you can then "hover" over and click.
(see the links left on http://www.dpreview.com to see what I mean)

I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
and I'm not sure how to integrate any menus of my own into it. The code
follows:

******START OF CODE****************************
<script language = "Javascript">
<!--
/**
* DHTML dropdown menu script. Courtesy of SmartWebby.com
(http://www.smartwebby.com/dhtml/)
*/

var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS6 = (bName == "Netscape" && bVer >= 5);
var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
window.onerror = null;
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4 || NS6) {
if (navigator.appName == "Netscape" && !document.getElementById){
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
layerVis="show";
layerHid="hide";
}
else if (!document.all && document.getElementById) {
layerStyleRef="layer.style.";
layerRef="document.getElementById";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
else {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
}
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
if (NS4 || IE4 || NS6) {
if (timeOn != null) {
clearTimeout(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerVis+'"');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top="'+menuTop+'"');

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+eval(layerName+'L')+
'"');
}
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerVis+'"');
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.to p="'+menuTop+'"');

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.le ft="'+eval(layerName+'L')+
'"');
}
onLayer = layerName
}
}// HIDE MENU
function hideLayer(layerName){
if (menuActive == 0) {
if (NS4 || IE4) {

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerHid+'"');
}
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerHid+'"');
}
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btnOut()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 400)

}// SET BACKGROUND COLOR
function setBgColor(layer, color) {
if (NS6){

eval('document.getElementById("'+layer+'").style.b ackgroundColor="'+color+'"
');
}
else if (NS4){

eval('window.document.layers["'+layer+'"].document.bgColor="'+color+'"');
eval('window.document.layers["'+layer+'"].saveColor="'+color+'"');
}
else if (IE4){
eval('document.all.'+layer+'.style.backgroundColor ="'+color+'"');
}
}

function getImage(name) {
if (NS4 || NS6) {
return findImage(name, document);
}
if (IE4 || NS6)
return eval('document.all.' + name);
return null;
}

function findImage(name, doc) {
var i, img;
for (i = 0; i < doc.images.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}

function getImagePageLeft(img) {
var x, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageX + img.x - 1;
else
return img.x - 1;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
return -1;
}

function getImagePageTop(img) {
var y, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageY + img.y;
else
return img.y;
}
if (IE4) {
y = 0;
obj = img;
while (obj.offsetParent != null) {
y += obj.offsetTop;
obj = obj.offsetParent;
}
y += obj.offsetTop;
return y;
}
return -1;
}
// -->
</script>
******END OF CODE*******************************

Tips?

LRH
Jul 23 '05 #1
7 6451
Larry R Harrison Jr wrote:

Your From address does not specify a mailbox which is a violation of
Internet/Usenet standards and disregarding the Netiquette as well
as most certainly a violation of the Acceptable Use Policy of your
service provider.**You*have*been*warned.

<http://www.interhack.net/pubs/munging-harmful/>
I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus [...]
<http://devedge.netscape.com/viewsource/2003/devedge-redesign/#Key-Demo-able-Features>
I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
[...]


It's junk.
PointedEars
--
Shall we import lard or steel? Let me tell you, preparedness makes us
powerful. Butter merely makes us fat.
Jul 23 '05 #2
Okay, one guy seems offended that I didn't give him a suitable email box so
he could spam me and aggravate me inappropriately. Anyone out there with
actual help on their mind?

"Larry R Harrison Jr" <no***@noone.com> wrote in message
news:YWKUc.10016$yh.9696@fed1read05...
I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus--the type that when you "hover" over a subject links
relevant to that subject "emerge" which you can then "hover" over and click. (see the links left on http://www.dpreview.com to see what I mean)

I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
and I'm not sure how to integrate any menus of my own into it. The code
follows:

******START OF CODE****************************
<script language = "Javascript">
<!--
/**
* DHTML dropdown menu script. Courtesy of SmartWebby.com
(http://www.smartwebby.com/dhtml/)
*/

var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS6 = (bName == "Netscape" && bVer >= 5);
var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
window.onerror = null;
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4 || NS6) {
if (navigator.appName == "Netscape" && !document.getElementById){
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
layerVis="show";
layerHid="hide";
}
else if (!document.all && document.getElementById) {
layerStyleRef="layer.style.";
layerRef="document.getElementById";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
else {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
}
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
if (NS4 || IE4 || NS6) {
if (timeOn != null) {
clearTimeout(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerVis+'"'); eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top="'+menuTop+'"');

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+eval(layerName+'L')+ '"');
}
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerVis+'"'); eval(layerRef+'("'+layerName+'")'+styleSwitch+'.to p="'+menuTop+'"');

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.le ft="'+eval(layerName+'L')+ '"');
}
onLayer = layerName
}
}// HIDE MENU
function hideLayer(layerName){
if (menuActive == 0) {
if (NS4 || IE4) {

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerHid+'"'); }
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerHid+'"'); }
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btnOut()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 400)

}// SET BACKGROUND COLOR
function setBgColor(layer, color) {
if (NS6){

eval('document.getElementById("'+layer+'").style.b ackgroundColor="'+color+'" ');
}
else if (NS4){

eval('window.document.layers["'+layer+'"].document.bgColor="'+color+'"');
eval('window.document.layers["'+layer+'"].saveColor="'+color+'"');
}
else if (IE4){
eval('document.all.'+layer+'.style.backgroundColor ="'+color+'"');
}
}

function getImage(name) {
if (NS4 || NS6) {
return findImage(name, document);
}
if (IE4 || NS6)
return eval('document.all.' + name);
return null;
}

function findImage(name, doc) {
var i, img;
for (i = 0; i < doc.images.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}

function getImagePageLeft(img) {
var x, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageX + img.x - 1;
else
return img.x - 1;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
return -1;
}

function getImagePageTop(img) {
var y, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageY + img.y;
else
return img.y;
}
if (IE4) {
y = 0;
obj = img;
while (obj.offsetParent != null) {
y += obj.offsetTop;
obj = obj.offsetParent;
}
y += obj.offsetTop;
return y;
}
return -1;
}
// -->
</script>
******END OF CODE*******************************

Tips?

LRH

Jul 23 '05 #3
In article <YWKUc.10016$yh.9696@fed1read05>, no***@noone.com enlightened us
with...
I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus--the type that when you "hover" over a subject links
relevant to that subject "emerge" which you can then "hover" over and click.
(see the links left on http://www.dpreview.com to see what I mean)


I like the HVMenu over at Dynamic Drive myself. Why reinvent the wheel? :)
http://www.dynamicdrive.com

If it's a coding exercise for you, check out the source code. It's
practically illegible with the shortcuts, lack of comments, and variable
names, but it might give you a hint or three.
I tried this a while back, and, after pounding my head against the wall for
awhile, decided I'd rather use someone else's nice, tested, and FREE code.
*grins*

HTH
--
--
~kaeli~
Condoms should be used on every conceivable occasion.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4

"Thomas 'PointedEars' Lahn" <Po*********@web.de> ha
service provider. You have been warned.

wooooow Larry, are you trembling yet now that pointed ears has warned you?
ahahahahahahaha

(...)
I have code from smartwebby.com (DHTML) but I'm not sure if it's the best, [...]


It's junk.


Ah! Fantastic!
Jul 23 '05 #5
I grabbed some code and got it working fine, with one problem--I want to
move the javascript (JS) files to their own folder. So in the portions you
add to your HTML file where it says SRC= I tried the following syntaxes,
NONE of them work:

src="newfolder\custom.js"
src="newfolder/custom.js"
src="\newfolder\custom.js"

Again it originally said

src="custom.js"

and if I left it that way and had the JS files in the same folder as the
HTML file, all was well. But again I want to be able to move the JS files to
their own folder to reduce clutter. I just can't seem to get the path right.
And searching in Google I can't seem to find the answer.

Tips?

LRH

NONE of them work. It works fine if I have the files in the
src="\js_files\custom.js"

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP***********************@nntp.lucent.com...
In article <YWKUc.10016$yh.9696@fed1read05>, no***@noone.com enlightened us with...
I am looking for javascript and a basic tutorial on how to make mouse-over drop-down menus--the type that when you "hover" over a subject links
relevant to that subject "emerge" which you can then "hover" over and click. (see the links left on http://www.dpreview.com to see what I mean)

I like the HVMenu over at Dynamic Drive myself. Why reinvent the wheel?

:) http://www.dynamicdrive.com

If it's a coding exercise for you, check out the source code. It's
practically illegible with the shortcuts, lack of comments, and variable
names, but it might give you a hint or three.
I tried this a while back, and, after pounding my head against the wall for awhile, decided I'd rather use someone else's nice, tested, and FREE code.
*grins*

HTH
--
--
~kaeli~
Condoms should be used on every conceivable occasion.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #6
Larry R Harrison Jr wrote:
I grabbed some code and got it working fine, with one problem--I want to
move the javascript (JS) files to their own folder. So in the portions you
add to your HTML file where it says SRC= I tried the following syntaxes,
NONE of them work:

src="newfolder\custom.js"
src="newfolder/custom.js"
src="\newfolder\custom.js"


The src path depends on the folder structure.

Lets say you have a folder called WWW and inside that folder you have
two folders, one named HTMLFiles, the other named ScriptFiles.

In a file in HTMLFiles folder and a .js file in the ScriptFiles folder,
the src would be:

...\ScriptFiles\filename.js

...\ tells it to go up one folder in the heirarchy.

Another alternative is to use an absolute URL to the file:

src="http://www.domainname.com/folderName/filename.js"
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #7
Larry R Harrison Jr wrote:
I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus [snip]

******START OF CODE****************************
[snip]

var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS6 = (bName == "Netscape" && bVer >= 5);
var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
This chunk is only useful for "browser detection" and browser deection
is a bad, bad idea. For example, in the above you don't allow for the
incredibly common case of people using Opera and setting it to claim
that it is Microsoft IE. Refer to the group FAQ for much better (and
much simpler) methods.
window.onerror = null;
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4 || NS6) {
if (navigator.appName == "Netscape" && !document.getElementById){
[snip]
else if (!document.all && document.getElementById) {
[snip]
}
else {
[snip]
}
}
All of the above can be very much simplified by getting rid of browser
detection as shown in the FAQ.
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
if (NS4 || IE4 || NS6) {
if (timeOn != null) {
clearTimeout(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {
[snip]
if (NS6) {
[snip]
}
onLayer = layerName
}
Same here - its much simpler without browser detection again.
}// HIDE MENU
function hideLayer(layerName){
[snip]
}
And again.
[snip]
}// SET BACKGROUND COLOR
function setBgColor(layer, color) {
if (NS6){
[snip]
}


And, dare I say it, again this would be a lot simpler without browser
detection as well. I would advise you to grab a copy of the FAQ, look at
*object* detection and *function* detection instead of *browser*
detection and adapt the code. You'll probably find it turns out a lot
smaller and faster.
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: prasat | last post by:
Hi Does anybody work with mouse package for cfd analysis in c++. I would like to decide issues. Please reply --
5
by: Roger Shrubber | last post by:
I have a page with images that the user can drag from one frame to another. I need them to see a "ghost image" of the image they are dragging, while the original stays put. I use the onmousemove...
8
by: WindAndWaves | last post by:
Hi everyone, Has anyone got any experience with drop and drag in Access? I would like to make a calendar style form where my users can drop and drag appointments.... I am using Access 2003...
3
by: Manish Jain | last post by:
Platform: C# Windows Application/Framework 1.1 ---------------------------------------------------- I am implementing Drag' Drop between 2 trees. Now when I initiate drag and "DragOver" the...
2
by: Serge Klokov | last post by:
Hi! 1. Please, help with example "paint on form by mouse" 2. Below is my example, but it clear the line after each Refresh()... how to fix? 3. How to draw the line in Mouse_Move event? ...
3
by: Boki | last post by:
Dear All, I think you all knew my problem. I don't know how to draw line @@ in VB.NET (2005 beta) , very sad. Coudl you please help me? Best regards, Boki.
3
by: TheSteph | last post by:
Hi, I've made a CustomPanel derived from the Panel class. How can I set my own size of the "client area" of that CustomPanel ? ("client area" = Size of the rectangle in which one can drop...
6
by: Kai Zhu | last post by:
I wrote a piece of code to handle drag and drop of DIV element. The code works fine in firefox, but has some problem will IE. We I load the HTML, I can not drag the DIV, and IE seems to be not...
7
by: Michael R | last post by:
It's an interesting question, as I see it. I have a form, in which there are a few command buttons, which change color when the mouse is on top of them (On Mouse Move). Now, I want the color to be...
5
by: Romulo NF | last post by:
Greetings, Im back here to show the new version of the drag & drop table columns (original script ). Ive found some issues with the old script, specially when trying to use 2 tables with...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.