Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
noobie2005 #1
dynamic menu, javascript
I hope someone can help me out, out there. I'm having trouble with my script,
every time I go to test it, I get an error. Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
if(navigator.appName == "Netscape")
window.captureEvents(Event.MOUSEMOVE);
document.onmousemove = track;
var m1 = document.getElementById("menu_1");
var m2 = document.getElementById("menu_2");
var m3 = document.getElementById("menu_3");
function track(e)
{
var x = (document.all) ? event.x : e.pageX;
var y = (document.all) ? event.y : e.pageY;
if (x<1 || x>60 || y<53 || y>123)
m1.style.visibility = "hidden";
if (x<70 || x>130 || y <53 || y>123)
m2.style.visibility = "hidden";
if (x<140 || x>200 || y<53 || y>123)
m3.style.visibility = "hidden";
}
function reveal(menu)
{
if(menu == 1) m1.style.visibility = "visible";
if(menu == 2) m2.style.visibility = "visible";
if(menu == 3) m3.style.visibility = "visible";
}
</script>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<h1>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</h1>
<div id="bar">
<a href="javascript://" onMouseOver="reveal(1)"> Menu 1</a> |
<a href="javascript://" onMouseOver="reveal(2)"> Menu 2</a> |
<a href="javascript://" onMouseOver="reveal(3)"> Menu 3</a>
</div>
<div id="menu_1" class="menu" style="left:0px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<body>
</body>
</html>
Can someone help me? Thank you in advance!
noobie2005 Guest
-
JavaScript for menu bars or side menu for an externalweb page
I have designed some web pages with top menn bars and drop-down menu buttons for web page linkings. So far all the web pages I have coded showed... -
dynamic menu system going to dynamic page
please can someone help me - im at the end of my tether! ive got an access db. Its got a list of words that is to be a menu system stored in it.... -
cascading menu (JavaScript)
I apolagize but this is my first stab at JavaScript. I have been asked to design a webpage with drop down menus. = new Menu(false, '',... -
Shockwave problems with Javascript Menu
To anyone that can help: Hello I seem to be having some problems with a javascript menu that need to be placed on an html page with a shockwave... -
Simple menu in javascript
I have a list on my page. E.G Users : Applications When the user clicks on 1 of them for example "users" I want this to appear : Users :... -
T.Pastrana - 4Level #2 Re: dynamic menu, javascript
The problem is your script is calling reference to an object that hasn't yet
loaded onto the page. The code executes first, and it is looking for your
divs which haven't yet loaded. You'll have to let the page load with the div
elements and then you'll be able to access them.
Using global vars isn't a good idea in this case because you have an
"onmousemove" on the body which will again, throw an error if the divs
haven't yet loaded.
Your best bet is to just use the direct reference to the divs right in the
functions. The code as you have it will still throw errors because the
"menu_2" and "menu_3" divs aren't in the HTML. Once you put them in there
it will be fine.
<script language="javascript" type="text/javascript">
if(navigator.appName == "Netscape"){
window.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = track;
function track(e){
var x = (document.all) ? event.x : e.pageX;
var y = (document.all) ? event.y : e.pageY;
if (x<1 || x>60 || y<53 || y>123)
document.getElementById("menu_1").style.visibility = "hidden";
if (x<70 || x>130 || y <53 || y>123)
document.getElementById("menu_2").style.visibility = "hidden";
if (x<140 || x>200 || y<53 || y>123)
document.getElementById("menu_3").style.visibility = "hidden";
}
function reveal(menu){
if(menu == 1) document.getElementById("menu_1").style.visibility =
"visible";
if(menu == 2) document.getElementById("menu_2").style.visibility =
"visible";
if(menu == 3) document.getElementById("menu_3").style.visibility =
"visible";
}
</script>
--
Regards,
...Trent Pastrana
[url]www.fourlevel.com[/url]
Dreamweaver Designer Tools
iFrameSuite | MiniMenus | Scroller Packages | More...
-----------------------------
"noobie2005" <webforumsuser@macromedia.com> wrote in message
news:d63q7o$5ii$1@forums.macromedia.com...script,> I hope someone can help me out, out there. I'm having trouble with my> every time I go to test it, I get an error. Here's the code:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <title>Untitled Document</title>
> <script language="javascript" type="text/javascript">
> if(navigator.appName == "Netscape")
> window.captureEvents(Event.MOUSEMOVE);
> document.onmousemove = track;
> var m1 = document.getElementById("menu_1");
> var m2 = document.getElementById("menu_2");
> var m3 = document.getElementById("menu_3");
>
> function track(e)
> {
> var x = (document.all) ? event.x : e.pageX;
> var y = (document.all) ? event.y : e.pageY;
> if (x<1 || x>60 || y<53 || y>123)
> m1.style.visibility = "hidden";
> if (x<70 || x>130 || y <53 || y>123)
> m2.style.visibility = "hidden";
> if (x<140 || x>200 || y<53 || y>123)
> m3.style.visibility = "hidden";
> }
>
> function reveal(menu)
> {
> if(menu == 1) m1.style.visibility = "visible";
> if(menu == 2) m2.style.visibility = "visible";
> if(menu == 3) m3.style.visibility = "visible";
> }
> </script>
> <link href="menu.css" rel="stylesheet" type="text/css">
> </head>
> <h1>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</h1>
>
> <div id="bar">
> <a href="javascript://" onMouseOver="reveal(1)"> Menu 1</a> |
> <a href="javascript://" onMouseOver="reveal(2)"> Menu 2</a> |
> <a href="javascript://" onMouseOver="reveal(3)"> Menu 3</a>
> </div>
>
> <div id="menu_1" class="menu" style="left:0px">
> <a href="target1.html"> Item 1 </a><br/>
> <a href="target2.html"> Item 2 </a><br/>
> <a href="target3.html"> Item 3 </a>
> </div>
> <body>
> </body>
> </html>
>
> Can someone help me? Thank you in advance!
>
T.Pastrana - 4Level Guest
-
Murray *TMM* #3 Re: dynamic menu, javascript
Actually, the HTML shown there is pretty whacked too....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"T.Pastrana - 4Level" <aaaa@aaaa.com> wrote in message
news:d646rv$jtu$1@forums.macromedia.com...> The problem is your script is calling reference to an object that hasn't
> yet
> loaded onto the page. The code executes first, and it is looking for your
> divs which haven't yet loaded. You'll have to let the page load with the
> div
> elements and then you'll be able to access them.
>
> Using global vars isn't a good idea in this case because you have an
> "onmousemove" on the body which will again, throw an error if the divs
> haven't yet loaded.
>
> Your best bet is to just use the direct reference to the divs right in the
> functions. The code as you have it will still throw errors because the
> "menu_2" and "menu_3" divs aren't in the HTML. Once you put them in
> there
> it will be fine.
>
>
>
> <script language="javascript" type="text/javascript">
> if(navigator.appName == "Netscape"){
> window.captureEvents(Event.MOUSEMOVE);
> }
> document.onmousemove = track;
>
> function track(e){
> var x = (document.all) ? event.x : e.pageX;
> var y = (document.all) ? event.y : e.pageY;
> if (x<1 || x>60 || y<53 || y>123)
> document.getElementById("menu_1").style.visibility = "hidden";
> if (x<70 || x>130 || y <53 || y>123)
> document.getElementById("menu_2").style.visibility = "hidden";
> if (x<140 || x>200 || y<53 || y>123)
> document.getElementById("menu_3").style.visibility = "hidden";
> }
>
> function reveal(menu){
> if(menu == 1) document.getElementById("menu_1").style.visibility =
> "visible";
> if(menu == 2) document.getElementById("menu_2").style.visibility =
> "visible";
> if(menu == 3) document.getElementById("menu_3").style.visibility =
> "visible";
> }
> </script>
>
>
>
>
> --
> Regards,
> ..Trent Pastrana
> [url]www.fourlevel.com[/url]
>
> Dreamweaver Designer Tools
> iFrameSuite | MiniMenus | Scroller Packages | More...
> -----------------------------
>
>
>
>
>
>
> "noobie2005" <webforumsuser@macromedia.com> wrote in message
> news:d63q7o$5ii$1@forums.macromedia.com...> script,>> I hope someone can help me out, out there. I'm having trouble with my>>> every time I go to test it, I get an error. Here's the code:
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>> "http://www.w3.org/TR/html4/loose.dtd">
>> <html>
>> <head>
>> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
>> <title>Untitled Document</title>
>> <script language="javascript" type="text/javascript">
>> if(navigator.appName == "Netscape")
>> window.captureEvents(Event.MOUSEMOVE);
>> document.onmousemove = track;
>> var m1 = document.getElementById("menu_1");
>> var m2 = document.getElementById("menu_2");
>> var m3 = document.getElementById("menu_3");
>>
>> function track(e)
>> {
>> var x = (document.all) ? event.x : e.pageX;
>> var y = (document.all) ? event.y : e.pageY;
>> if (x<1 || x>60 || y<53 || y>123)
>> m1.style.visibility = "hidden";
>> if (x<70 || x>130 || y <53 || y>123)
>> m2.style.visibility = "hidden";
>> if (x<140 || x>200 || y<53 || y>123)
>> m3.style.visibility = "hidden";
>> }
>>
>> function reveal(menu)
>> {
>> if(menu == 1) m1.style.visibility = "visible";
>> if(menu == 2) m2.style.visibility = "visible";
>> if(menu == 3) m3.style.visibility = "visible";
>> }
>> </script>
>> <link href="menu.css" rel="stylesheet" type="text/css">
>> </head>
>> <h1>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</h1>
>>
>> <div id="bar">
>> <a href="javascript://" onMouseOver="reveal(1)"> Menu 1</a> |
>> <a href="javascript://" onMouseOver="reveal(2)"> Menu 2</a> |
>> <a href="javascript://" onMouseOver="reveal(3)"> Menu 3</a>
>> </div>
>>
>> <div id="menu_1" class="menu" style="left:0px">
>> <a href="target1.html"> Item 1 </a><br/>
>> <a href="target2.html"> Item 2 </a><br/>
>> <a href="target3.html"> Item 3 </a>
>> </div>
>> <body>
>> </body>
>> </html>
>>
>> Can someone help me? Thank you in advance!
>>
>
Murray *TMM* Guest
-
T.Pastrana - 4Level #4 Re: dynamic menu, javascript
Yeah, I forgot to tell him his opening <body> tag is way out of place.
If your still listening, move your opening <body> tag just below your
closing </head> tag.
--
Regards,
...Trent Pastrana
[url]www.fourlevel.com[/url]
Dreamweaver Designer Tools
iFrameSuite | MiniMenus | Scroller Packages | More...
-----------------------------
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:d64mi6$b6m$1@forums.macromedia.com...your> Actually, the HTML shown there is pretty whacked too....
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> ==================
>
> "T.Pastrana - 4Level" <aaaa@aaaa.com> wrote in message
> news:d646rv$jtu$1@forums.macromedia.com...> > The problem is your script is calling reference to an object that hasn't
> > yet
> > loaded onto the page. The code executes first, and it is looking forthe> > divs which haven't yet loaded. You'll have to let the page load with the
> > div
> > elements and then you'll be able to access them.
> >
> > Using global vars isn't a good idea in this case because you have an
> > "onmousemove" on the body which will again, throw an error if the divs
> > haven't yet loaded.
> >
> > Your best bet is to just use the direct reference to the divs right incharset=iso-8859-1">> > functions. The code as you have it will still throw errors because the
> > "menu_2" and "menu_3" divs aren't in the HTML. Once you put them in
> > there
> > it will be fine.
> >
> >
> >
> > <script language="javascript" type="text/javascript">
> > if(navigator.appName == "Netscape"){
> > window.captureEvents(Event.MOUSEMOVE);
> > }
> > document.onmousemove = track;
> >
> > function track(e){
> > var x = (document.all) ? event.x : e.pageX;
> > var y = (document.all) ? event.y : e.pageY;
> > if (x<1 || x>60 || y<53 || y>123)
> > document.getElementById("menu_1").style.visibility = "hidden";
> > if (x<70 || x>130 || y <53 || y>123)
> > document.getElementById("menu_2").style.visibility = "hidden";
> > if (x<140 || x>200 || y<53 || y>123)
> > document.getElementById("menu_3").style.visibility = "hidden";
> > }
> >
> > function reveal(menu){
> > if(menu == 1) document.getElementById("menu_1").style.visibility =
> > "visible";
> > if(menu == 2) document.getElementById("menu_2").style.visibility =
> > "visible";
> > if(menu == 3) document.getElementById("menu_3").style.visibility =
> > "visible";
> > }
> > </script>
> >
> >
> >
> >
> > --
> > Regards,
> > ..Trent Pastrana
> > [url]www.fourlevel.com[/url]
> >
> > Dreamweaver Designer Tools
> > iFrameSuite | MiniMenus | Scroller Packages | More...
> > -----------------------------
> >
> >
> >
> >
> >
> >
> > "noobie2005" <webforumsuser@macromedia.com> wrote in message
> > news:d63q7o$5ii$1@forums.macromedia.com...> > script,> >> I hope someone can help me out, out there. I'm having trouble with my> >> every time I go to test it, I get an error. Here's the code:
> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> >> "http://www.w3.org/TR/html4/loose.dtd">
> >> <html>
> >> <head>
> >> <meta http-equiv="Content-Type" content="text/html;>> >> >> <title>Untitled Document</title>
> >> <script language="javascript" type="text/javascript">
> >> if(navigator.appName == "Netscape")
> >> window.captureEvents(Event.MOUSEMOVE);
> >> document.onmousemove = track;
> >> var m1 = document.getElementById("menu_1");
> >> var m2 = document.getElementById("menu_2");
> >> var m3 = document.getElementById("menu_3");
> >>
> >> function track(e)
> >> {
> >> var x = (document.all) ? event.x : e.pageX;
> >> var y = (document.all) ? event.y : e.pageY;
> >> if (x<1 || x>60 || y<53 || y>123)
> >> m1.style.visibility = "hidden";
> >> if (x<70 || x>130 || y <53 || y>123)
> >> m2.style.visibility = "hidden";
> >> if (x<140 || x>200 || y<53 || y>123)
> >> m3.style.visibility = "hidden";
> >> }
> >>
> >> function reveal(menu)
> >> {
> >> if(menu == 1) m1.style.visibility = "visible";
> >> if(menu == 2) m2.style.visibility = "visible";
> >> if(menu == 3) m3.style.visibility = "visible";
> >> }
> >> </script>
> >> <link href="menu.css" rel="stylesheet" type="text/css">
> >> </head>
> >> <h1>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</h1>
> >>
> >> <div id="bar">
> >> <a href="javascript://" onMouseOver="reveal(1)"> Menu 1</a> |
> >> <a href="javascript://" onMouseOver="reveal(2)"> Menu 2</a> |
> >> <a href="javascript://" onMouseOver="reveal(3)"> Menu 3</a>
> >> </div>
> >>
> >> <div id="menu_1" class="menu" style="left:0px">
> >> <a href="target1.html"> Item 1 </a><br/>
> >> <a href="target2.html"> Item 2 </a><br/>
> >> <a href="target3.html"> Item 3 </a>
> >> </div>
> >> <body>
> >> </body>
> >> </html>
> >>
> >> Can someone help me? Thank you in advance!
> >>
> >
>
T.Pastrana - 4Level Guest
-
noobie2005 #5 Re: dynamic menu, javascript
Hey, it's me again, and it did work, but now I'm having trouble, yet again, as
my SN states, I'm still a rookie at this, and learning this as I go, so please
be patient with me. This time it's having the menu, stay in place while the
user mouse is over the drop-down menu...I think that sounds confusing, but I
hope you get my drift, but this time I'll include the CSS page too. The code is
almost the same:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
if(navigator.appName == "Netscape"){
window.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = track;
function track(e)
{
var x = (document.all) ? event.x : e.pageX;
var y = (document.all) ? event.y : e.pageY;
if (x<1 || x>60 || y<53 || y>123)
document.getElementById("menu_1").style.visibility = "hidden";
if (x<70 || x>130 || y <53 || y>123)
document.getElementById("menu_2").style.visibility = "hidden";
if (x<140 || x>200 || y<53 || y>123)
document.getElementById("menu_3").style.visibility = "hidden";
if (x<210 || x>270 || y<53 || y>123)
document.getElementById("menu_4").style.visibility = "hidden";
if (x<280 || x>340 || y<53 || y>123)
document.getElementById("menu_5").style.visibility = "hidden";
if (x<350 || x>470 || y<53 || y>123)
document.getElementById("menu_6").style.visibility = "hidden";
}
function reveal(menu){
if(menu == 1) document.getElementById("menu_1").style.visibility = "visible";
if(menu == 2) document.getElementById("menu_2").style.visibility = "visible";
if(menu == 3) document.getElementById("menu_3").style.visibility = "visible";
if(menu == 4) document.getElementById("menu_4").style.visibility = "visible";
if(menu == 5) document.getElementById("menu_5").style.visibility = "visible";
if(menu == 6) document.getElementById("menu_6").style.visibility = "visible";
}
</script>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</h1>
<div id="bar">
<a href="javascript://" onMouseOver="reveal(1)">PRODUCTS</a>
<a href="javascript://" onMouseOver="reveal(2)">INFORMATION</a>
<a href="javascript://" onMouseOver="reveal(3)">WHERE TO BUY</a>
<a href="javascript://" onMouseOver="reveal(4)">USER GROUPS</a>
<a href="javascript://" onMouseOver="reveal(5)">COMPANY</a>
<a href="javascript://" onMouseOver="reveal(6)">NEWS</a>
</div>
<div id="menu_1" class="menu" style="left:1px">
<a href=""> Main-Line Units </a><br/>
<a href=""> Hose & Drip Units </a><br/>
<a href=""> Fertilizers & Supplements</a><br/>
<a href="">Parts & Accessories</a>
</div>
<div id="menu_2" class="menu" style="left:75px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_3" class="menu" style="left:170px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_4" class="menu" style="left:260px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_5" class="menu" style="left:290px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_6" class="menu" style="left:350px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
</body>
</html>
And the CSS page:
#bar
{
background-color: #2E8B57;
font-family: Arial;
font-size: 12pt;
font: bold;
color : White;
text-align : center;
text-transform : capitalize;
padding : 5 5 5 5;
}
.menu
{
background-color: Orange;
font-family: Arial;
font-size: 11pt;
color : White;
text-align : left;
text-transform : capitalize;
visibility: hidden;
}
a
{
font-family: Arial;
text-decoration : none;
color: White;
}
a:hover
{
background : #FF8C00;
font-family: Arial;
text-decoration: none;
color: White;
font: bold;
}
I hope someone gets this, if not I'll post another topic or something, I
really don't want to becuase it'll feel like I'm wasting server space, I hope I
can get help!
PS: Thanks, I did'nt even notice that I missed placed the <body> tag....lol, I
AM a rookie
noobie2005 Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
