I am having problems getting this demo code to work. Anyone able to get it to work for them?
Slide Down Menu
Printable View
I am having problems getting this demo code to work. Anyone able to get it to work for them?
Slide Down Menu
Works for me.
I want to use the demo code on a webpage and the menu
doesn't even display. I even got the sliding_menu.js file off the
server and put it on my server and still nothing. What is wrong?
Hobo, you created a new page from the demo?
Yup. Here's my code (I changed it a bit):
Tested it in IE6, Mozilla 1.4, and Opera 7.11 and it worked fine in all. You do need the sliding_menu.js file, however vbForums wont allow the upload of .js files, so you'll have to snag it off that site: http://javascript.internet.com/navig...liding_menu.jsCode:<html>
<head>
<title>js menu example</title>
<script type="text/javascript">
function goToURL() {
history.go(-1);
}
var Link = new Array();
Link[0] = "0|Home";
Link[1] = "1|Home|http://www.javascriptsource.com|";
Link[2] = "1|More Scripts|http://www.javascript.com|";
Link[3] = "1|Contact|http://www.javascriptsource.com/contact-us.html|";
Link[4] = "1|Traffic|http://www.thecounter.com|";
Link[5] = "0|Access";
Link[6] = "1|Login|Login.asp|";
Link[7] = "1|Logout|Logout.asp|"
Link[8] = "0|Scripts";
Link[9] = "1|Asp|http://www.javascriptsource.com|";
Link[10] = "1|JavaScript|http://www.javascriptsource.com|";
Link[11] = "0|Links";
Link[12] = "1|JavaScript sites|http://www.javascripts.com|blank";
</script>
<style type="text/css">
.menu {
position:relative;
background-color:gold;
border:1px solid darkblue;
width:150;
font-size:11px;
font-family:verdana;
font:bold;
position:absolute;
cursor:se-resize;
}
.item_panel {
width:150;
border-left:1px solid darkblue;
border-right:1px solid darkblue;
clip:rect(0,150,0,0);
position:absolute;
}
.item_panel a{
text-decoration:none;
color:black;
cursor:hand;
}
.item {
background-color:lightyellow;
width:148;
font-size:10px;
font-family:verdana;
}
</style>
<script language="JavaScript" src="sliding_menu.js"></script>
</head>
<body>
<div style="text-align: center;">
<table style="margin-left: auto; margin-right: auto; width: 150px;">
<tr>
<td style="width: 100%;">
<script type="text/javascript">
startup(4);
</script>
</td>
</tr>
</table>
</div>
</body>
</html>
Let me know if you need anymore help.
Ah now I see what you did to get it to work. Their directions is to
paste it into the <BODY> tag when I should of known better that
it should not be in there. I had downloaded the Sliding_menu.js
from their site before. So if you were able to get it to work I knew
it was something in the htm page.
Thank you very much!
That website is very bad in instructing how to set this up. Unless I missed it, do they even tell you that you need sliding_menu.js?Quote:
Originally posted by RobDog888
Ah now I see what you did to get it to work. Their directions is to
paste it into the <BODY> tag when I should of known better that
it should not be in there. I had downloaded the Sliding_menu.js
from their site before. So if you were able to get it to work I knew
it was something in the htm page.
Thank you very much!
Yea, I saw the src reference to the sliding_menu.js file too.
Another question, how can I modify the pointer to be a regular
mousepointer when over the menu categories?
something like this...
but this just gives the mousepointer the I bar pointer. I want the mouse pointer arrow.Code:<style type="text/css">
.menu {
position:relative;
background-color:#999999;
border:1px solid #333333;
width:160;
font-size:11px;
font-family:verdana;
font:bold;
position:absolute;
cursor:arrow;
}
.item_panel {
width:150;
border-left:1px solid #333333;
border-right:1px solid #333333;
clip:rect(0,160,0,0);
position:absolute;
}
.item_panel a{
text-decoration:none;
color:#000000;
cursor:hand;
}
.item {
background-color:#E3E3E3;
width:158;
font-size:10px;
font-family:verdana;
}
</style>
What are the options and correct constants for mouse pointers?
Thanks again.
If you want the i-beam thing, then you want cursor: text;.
Here is a list of what's available: http://www.w3.org/TR/CSS2/ui.html#cursor-props
By the way, I don't think the following function is even used, so you can probably remove it:
Code:function goToURL() {
history.go(-1);
}
Yes, I already did that. Thanks.
Thanks for the link too! Good reference. I haven't done any html
or javascript in about two years. Its all starting to come back -
slowly.
Yet another question...
I want to add the onMouseover event for the menu headers.
When I write it in I get errors.
I have tried with single quotes and without.Code:Truncated for the thread
function write_menu()
{
smc = 0; // count the position of the self_menu
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;
for(i=0;i<Link.length;i++)
{
la = Link[i].split("|");
if (la[0] == "0")
{
if(start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")' onMouseover='window.status='Test'; return true;'> "+ la[1] + "</div>");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}
document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' onmouseover='color(this.id); window.status='Test Item'; return true;' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
csmc++;
}
}
I hate Mondays. :(
You have an extra single quote on the end. Remove that and it should work (at least it did for me).Code:window.status='Test Item'; return true;'
Nope, nevermind. You're putting single quotes inside single quotes. Try something like this:
Code:document.write("' onmouseover=\"color(this.id); window.status='Test Item'; return true;\" onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
Like this.
Worked!Code:document.write("' onmouseover=\"color(this.id); window.status='Test Item'; return true;\" onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
So I can follow the same syntax for the onMouseout.
The \ is a replacement for the single quote?
Thanks again!
Whenever you want to put a certain kind of quote within the same kind of quote, you have to escape it.
Otherwise it'll think that the myVar = "Jill said," and then think the "Damnit, go away!" part is code.Code:myVar = "Jill said, \"Damnit, go away!\"";
I don't know if that makes sense or not...or if you already know that, just ignore me. :p
That makes sense to me. Thanks.
Ok. Now how to get the menu item caption to display according
to the menu item mouseovered?
So the code needs to be able to display the window status ofCode:document.write("' onmouseover=\"color(this.id); window.status='Test Item 1'; return true;\" onmouseout=\"uncolor(this.id); window.status=''; return true;\"> "+ la[1] + "</div></a>");
something like "Go to Test Item 1 page" and change when
mouseovered to Test Item 2 to equal "Go to Test Item 2 page"
Got it!
Thank you very much for all your help and time Hobo.Code:document.write("' onmouseover=\"color(this.id); window.status='"+la[1]+"'; return true;\" onmouseout=\"uncolor(this.id); window.status=''; return true;\"> "+ la[1] + "</div></a>");
No problemo. :)
What happens if the browser has JavaScript disabled?
You get nothing. :(Quote:
Originally posted by CornedBee
What happens if the browser has JavaScript disabled?
Is there a way to determine if JavaScript is disabled? What are
the odds that it may be disabled?
:sick:
Are the odds high enough that this can't be used on a production site?
There's of course no JavaScript way to find out if JavaScript is disabled. ;)
There's no server-side way either.
This is why I don't like all-JavaScript menus.
I'm currently working on a page with a drop-down menu. It looks very cool when JavaScript is enabled, and it still works (in Mozilla and Opera) if it is disabled, if not as cool. There's no way in IE to make a dropdown without JavaScript.
The page currently isn't displayed properly in IE, and the script doesn't work there either, but in Mozilla it looks fine. It's a rewrite of someone else's page.
http://stud3.tuwien.ac.at/~e0226430/justin/justin.html
Only two of the menus are actually menus, and only one menu item is clickable.
But the thing is, disable JavaScript and it still works. And a text-only browser gets simple nested unordered lists. It doesn't get much better than that.
You can use the <noscript> element though, its contents are displayed by JavaScript-aware browsers only if JavaScript is disabled.
My main concern is that the majority of the visiters will have
javascript enabled. If they are using IE then the odd should be
high that they will have it enabled. Of course, there will be no
way to determine using javascript, if javascript is enabled. Is
there another method to detect this? If it can be determined it is
disabled, then it should be redirected to another non-javascript
compatible page.
What you can do is have a non-javascript page load as default. But at the top of that page have something like:
That way the non-javascript page loads by default, and if javascript is enabled, it takes them to the javascript page.Code:<head>
<script type="text/javascript">
// redirect to javascript-enabled page
</script>
</head>
Thanks Hobo. Perhaps a quick page that will determine which
way to go. How about if the page is javascript enabled it gets
redirected immediatly. If not, after a 1 second timeout the page
redirects to the non-javascript page?
If this sounds good then how to do it, if not how to do something else?
Thanks for your continued help.
Sure, if you can redirect without javascript. Meta tag, probably. I think my method is better, though.Quote:
Originally posted by RobDog888
Thanks Hobo. Perhaps a quick page that will determine which
way to go. How about if the page is javascript enabled it gets
redirected immediatly. If not, after a 1 second timeout the page
redirects to the non-javascript page?
If this sounds good then how to do it, if not how to do something else?
Thanks for your continued help.
But whatever works.
This is what I'm talking about:
Code:<html>
<head>
<title></title>
<script type="text/javascript">
window.location.href = 'http://www.aol.com/';
</script>
</head>
<body>
<!-- your non-javascript page starts here...
if javascript is enabled, it will automatically redirect
to your javascript page. If javascript is not enabled, it
will ignore the javascript and continue showing this page
-->
</body>
</html>
But keep in mind that this kind of redirect breaks the back button.
True. I hit pages all the time with that going on.Quote:
Originally posted by CornedBee
But keep in mind that this kind of redirect breaks the back button.
Me too, but on this type of page you really don't want someone
who is javascript enabled to go back to the detection page. The
refered page will be the home page for javascript enabled
browsers.
I don't mean going back to the detection page.
If someone links to you, they will probably link to your front page (= detection page). This page forwards them to yet another page.
Now I want to get back to the original site, so I hit back. Which takes me one step back to the detection page, which promptly forwards me again. Which is definitly NOT what I want.
In any case, your page should NEVER depend on JavaScript, and redirecting is a poor solution IMHO. Much better are scripts that are executed on load and transform the existing simple structure into a complex menu. For example, you could collapse all <ul> tags with the class set to "menu" or something. Then give them mouseovers so that they expand.
Take a look at the page I showed with Mozilla. The script gives the menu a nice effect. If you disable scripting, the menu works thanks to CSS. If you somehow disable all styles, you get a plain list.
Or take a look at my main page,
http://stud3.tuwien.ac.at/~e0226430/
. There's no JavaScript at all. Again, the thing doesn't work in IE. But in Mozilla, you can choose View->Use Style->Basic Page Style to disable all CSS. The result is a simple unstyled page, but it is still fully navigateable.
Ok I see your code is using the <ul> tags to create a menu, but
thats all I can see since I am using IE. I don't want to install
Netscape or Mozilla. I have too much installed already.
I think maybe just going with a table structure menu for the non-
javascript browsers (without animation) may be the way to go.
I will create a function to rediredt on load instead. Will this mean
that the back link will still be left intact?
Code:<html>
<head>
<title></title>
<script type="text/javascript">
function DetectMe() {
window.location.href = 'http://www.aol.com/';
}
</script>
</head>
<body onLoad="DetectMe();">
</body>
</html>
Table structures are never for non-JavaScript browsers ;)
Gotta get help from CSS-D for that damned page.
Why not just create a basic 1x? table with images for menuitems.
href them to the corresponding page. No JS or anything. just a
table to align the images. ;)