Log in

View Full Version : Static Menu Script - insert javascript in menu in place of url ???



vegeman
09-06-2013, 10:49 AM
1) Script Title: Static Menu Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/staticmenu3.htm

3) Describe problem:

I'm using a line of java script that links to a position in my music player playlist half way down the page: <a href="javascript:;" id="playlist-setPlaylist-funkmusic">

Is it possible to include this line of code in your "Static Menu Script" instead of a typical url?

Thanks.

molendijk
09-06-2013, 04:03 PM
Hello vegeman,
That script is terribly outdated. You'd better use something like this:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Static Menu</title>

<style>
.menu_item {border: 1px solid gray}
.menu_item:hover{background: yellow; cursor: pointer}
</style>

<script>
var my_menu=
'<div style="position: fixed; text-align: center; width: 130px; left: 15px; top: 50px; font-family: arial; font-size: 15px">'+
'<div style="background: lightblue; border: 1px solid gray">Menu</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'">Dynamic Drive</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</div>'+
'<div class="menu_item" onclick="alert(\'hello\')">Alert</div>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

</head>

<body style="padding-left: 200px">
Body content here
</body>

</html>


It'll give you more freedom. You can use whatever type of link you want (see last item: alert).
This alternative is not very sophisticated, but easy to understand.

vegeman
09-06-2013, 04:47 PM
Hi Molendijk,

Thanks, but I can't seem to format the link correctly for it to work.
Can you take a look and let me know what I'm doing wrong?

Test Site: http://drumlesssplitsongs.com/test.htm

I'm trying to take the code from line 2006 and place it at line 2113.

NOTE: Look all the way to the left of the page at the top and you can see the static link working there.

Thanks.




Hello vegeman,
That script is terribly outdated. You'd better use something like this:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Static Menu</title>

<style>
.menu_item {border: 1px solid gray}
.menu_item:hover{background: yellow; cursor: pointer}
</style>

<script>
var my_menu=
'<div style="position: fixed; text-align: center; width: 130px; left: 15px; top: 50px; font-family: arial; font-size: 15px">'+
'<div style="background: lightblue; border: 1px solid gray">Menu</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'">Dynamic Drive</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</div>'+
'<div class="menu_item" onclick="alert(\'hello\')">Alert</div>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

</head>

<body style="padding-left: 200px">
Body content here
</body>

</html>


It'll give you more freedom. You can use whatever type of link you want (see last item: alert).
This alternative is not very sophisticated, but easy to understand.

molendijk
09-06-2013, 05:31 PM
Well, this:

'<div class="menu_item" onclick="<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</div>'
is invalid code'. That should be:

'<div class="menu_item" onclick="location.href" id="playlist-setPlaylist-heavy">Heavy Metal</div>'
or maybe

'<div class="menu_item" onclick="location.href=javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</div>'
But I wonder if that will work, since it's not clear to me what your original:

<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal<br></a>
exactly does. Btw, it should be </a><br>, not <br></a>.

vegeman
09-06-2013, 05:44 PM
Oh well, your suggested solutions didn't work for that link and I tried both of them. Thanks anyway for trying though. Hopefully someone else on the forum will have a fix.

Thanks again for the initial fix on the menu itself !

molendijk
09-06-2013, 11:06 PM
Hello vegeman,
I found out how your script works.
Replace the styles I gave you with this:

<style>
.menu_item {position: relative; font-family: arial; font-size: 14px; color: blue}
.menu_item:hover{background: yellow; cursor: pointer}
</style>

Replace the script I gave you with this:

<script>
var my_menu=
'<div style="position: fixed; text-align: center; right: 275px; top: 175px; height:0px">'+
'<a style="background: lightblue; border: 1px solid gray">Menu</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'">Dynamic Drive</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</a><br>'+
'<a class="menu_item" href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

Remove the original line for Heavy Metal. That is, remove the following (whole!) line. Don't forget to also remove the closing a-tag (</a>):

<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>

That should do it.

vegeman
09-07-2013, 12:49 AM
Wow, that worked! Thanks. Is there a way to add back in the border lines as before?

Also, can each link have a colored background and not be transparent?

One last thing: I need to refresh the page to allow the main list to appear once you've already chosen a genre heading such as heavy metal.
Can I make this refresh code a link in the scrolling box: <a href="javascript:history.go(0)">Main List</a> (it's currently on line 2004)

Can I throw you a few bucks for your trouble? Have a PayPal acc't?

Thanks!

molendijk
09-07-2013, 10:12 AM
Styles:

<style>
.menu_item {position: relative; font-family: arial; font-size: 14px; color: white; width: 170px; border: 1px solid gray; display: inline-block; background: darkred}
.menu_item:hover{background: yellow; color: black; cursor: pointer}
</style>


Script:

<script>
var my_menu=
'<div style="position: fixed; text-align: center; right: 275px; top: 175px; height:0px">'+
'<a style="background: lightblue; border: 1px solid gray">Menu</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'" style="background: green">Dynamic Drive</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</a><br>'+
'<a class="menu_item" href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

The default background is darkred (see styles). You can change that of course. You can change the background for each individual item by doing something similar to what I've done for the DynamicDrive link (style=...)..

Refresh code:
Just above this:

<div class="jp-current-time">00:00</div>
add this:

<div style="text-align: center; font-size: 11px; font-weight: bold">Click <a style="color: gray" href="javascript: void(0)" onclick="window.location.reload()">here</a> to start all over</div>

I'm glad to help you. To thank me, just login then click on the thanks-button at the bottom (left). No bucks.

vegeman
09-07-2013, 02:41 PM
Hi Arie,

Thanks a bunch. I changed the refresh link and now everything works great. Thanks again for ALL your help. You're the man :-)

Check out the site now: http://drumlesssplitsongs.com/

molendijk
09-07-2013, 04:54 PM
That's great!

vegeman
09-09-2013, 05:52 AM
Hi Arie,

I was able to figure out how to add a "scroll to top" feature to each of the a class="menu_item" headings.
However, I can't figure out how to make that work in my first menu heading which is the "refresh" (Main List) script. This is on line 2158.
Can you help with that?

http://drumlesssplitsongs.com/

Thanks.

molendijk
09-09-2013, 03:23 PM
Hi Larry,
I haven't looked at how you fixed it, but remove your last changes and just replace

'<div style="position: fixed; text-align: center; right: 146px; top: 188px; height:0px">'
with:

'<div style="position: fixed; text-align: center; right: 146px; top: 188px; height:0px" onclick="window.scrollTo(0, 0);">'
That's all. Good luck.

vegeman
09-09-2013, 04:00 PM
Thanks, you're a genius!