Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Static Menu Script - insert javascript in menu in place of url ???

  1. #1
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Static Menu Script - insert javascript in menu in place of url ???

    1) Script Title: Static Menu Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...taticmenu3.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.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Hello vegeman,
    That script is terribly outdated. You'd better use something like this:
    Code:
    <!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.
    Last edited by molendijk; 09-06-2013 at 05:12 PM. Reason: Correction in text

  3. #3
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.



    Quote Originally Posted by molendijk View Post
    Hello vegeman,
    That script is terribly outdated. You'd better use something like this:
    Code:
    <!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.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Well, this:
    Code:
    '<div class="menu_item" onclick="<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</div>'
    is invalid code'. That should be:
    Code:
    '<div class="menu_item" onclick="location.href" id="playlist-setPlaylist-heavy">Heavy Metal</div>'
    or maybe
    Code:
    '<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:
    Code:
    <a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal<br></a>
    exactly does. Btw, it should be </a><br>, not <br></a>.

  5. #5
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 !

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Hello vegeman,
    I found out how your script works.
    Replace the styles I gave you with this:
    Code:
    <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:
    Code:
    <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>):
    Code:
    <a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>
    That should do it.
    Last edited by molendijk; 09-07-2013 at 12:40 AM. Reason: Highlighting

  7. #7
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Styles:
    Code:
    <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:
    Code:
    <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:
    Code:
    <div class="jp-current-time">00:00</div>
    add this:
    Code:
    <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.

  9. The Following User Says Thank You to molendijk For This Useful Post:

    vegeman (09-07-2013)

  10. #9
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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/

  11. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

Similar Threads

  1. Static Menu Script
    By freestyle in forum Bug reports
    Replies: 0
    Last Post: 03-24-2008, 09:41 PM
  2. Static Menu script.... need pull out feature
    By develonet in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-15-2008, 10:47 AM
  3. Replies: 0
    Last Post: 04-18-2007, 10:24 PM
  4. Static Menu Script- Open links in new window?
    By Naild in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-14-2005, 09:48 AM
  5. Static Menu Script II question
    By |-Iceman-| in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-20-2005, 02:56 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •