Incorporate simple Javascript menu into my vB forum? [Archive]

View Full Version : Incorporate simple Javascript menu into my vB forum?

anthroforum

12-12-2008, 04:12 PM

I have tried a few Javascript navigation scripts but they never work properly :/

This is what I want to achieve, could anyone suggest a script? Once I have a drop-down menu like in the second picture, I can dispense with the navbar altogether.

https://vborg.vbsupport.ru/external/2008/12/71.jpg

https://vborg.vbsupport.ru/external/2008/12/72.jpg

Lynne

12-12-2008, 04:16 PM

Have you tried just copying the Quick Links code for use? You will have to comment out the Quick Links in the navbar if you copy the code because it will conflict with it in the top navbar if you do.

anthroforum

12-12-2008, 08:10 PM

I pasted the following into my Header but it's not appearing in any shape or form :/

<div class="vbmenu_popup" id="usercptools_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos1]

<tr><td class="thead">$vbphrase[networking]</td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
<if condition="$show['quick_links_groups']">
<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
</if>
<if condition="$show['quick_links_albums']">
<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
</if>
$template_hook[navbar_quick_links_menu_pos2]

<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>

<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos3]

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
$template_hook[navbar_quick_links_menu_pos4]

</table>
</div>

Lynne

12-12-2008, 09:25 PM

"display:none" does what is says... it doesn't display anything.

Also, that code is just for the drop-down, you realize that, right? All it does is display the drop-down menu itself, not the link that you click on to make it drop down. That's why display:none is in there.

anthroforum

12-13-2008, 04:42 PM

OK, this is where it's at now (in a skin not seen by ordinary users I hasten to add!)

It displays constantly, so I guess all I want to do is to have it show only on mouse over, and also to alter the positioning so that it is on the button.

https://vborg.vbsupport.ru/external/2008/12/65.jpg

Code:


<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center"> <table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="21">
<tr>
<td width="65"><img src="/images/gradients/hbf/01-topleft.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="123"><img src="/images/gradients/hbf/02-topcentre.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="29"><img src="/images/gradients/hbf/03-topright.gif"></td>
</tr>

<table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="57">
<tr>
<td width="258"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="/images/gradients/hbf/05.gif" border="0"></a></td>
<td width="65"><a href="usercp.php$session[sessionurl_q]"><img src="/images/gradients/hbf/06.gif" border="0"></a></td>
<td width="89"><a href="memberlist.php$session[sessionurl_q]"><img src="/images/gradients/hbf/07.gif" border="0"></a></td>
<td width="53"><a href="/photoplog/index.php$session[sessionurl_q]"><img src="/images/gradients/hbf/08.gif" border="0"></a></td>
<td width="71"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2"><img src="/images/gradients/hbf/09.gif" border="0"></a></td>
<td width="78"><img src="/images/gradients/hbf/10.gif" border="0">

<div class="vbmenu_popup" id="usercptools_menu" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos1]

<tr><td class="thead">$vbphrase[networking]</td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
<if condition="$show['quick_links_groups']">
<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
</if>
<if condition="$show['quick_links_albums']">
<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
</if>
$template_hook[navbar_quick_links_menu_pos2]

<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>

<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos3]

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
$template_hook[navbar_quick_links_menu_pos4]

</table>
</div>

</td>
<td width="66"><a href="/misc.php$session[sessionurl_q]?do=flashchat"><img src="/images/gradients/hbf/11.gif" border="0"></a></td>
<td width="58"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><img src="/images/gradients/hbf/12.gif" border="0"></a></td>
<td width="162"><img src="/images/gradients/hbf/13.gif" border="0"></td>
</tr>
</td>

</td>
</tr>
</table>




$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

Lynne

12-13-2008, 05:29 PM

It probably shows constantly because you didn't do the second part of my post:

Have you tried just copying the Quick Links code for use? You will have to comment out the Quick Links in the navbar if you copy the code because it will conflict with it in the top navbar if you do.
You could rewrite it to not conflict by giving it new ids. You can't have two items on a page with the same id or you will cause problems on your page (like a drop-down that stays dropped down).

anthroforum

12-14-2008, 11:26 AM

I have removed the Quick Links in the navbar template, how can I get the Quick Links menu to float instead of force the table open.

https://vborg.vbsupport.ru/external/2008/12/63.jpg

Lynne

12-14-2008, 04:48 PM

I don't know what you mean by this - "how can I get the Quick Links menu to float instead of force the table open."

anthroforum

12-14-2008, 06:01 PM

Just the the Quick Links menu is disrupting the display of the forum, how it is placed now, it would be great if it only appeared when the mouse cursor was over the button:

https://vborg.vbsupport.ru/external/2008/12/63.jpg

Lynne

12-14-2008, 06:35 PM

Post the code for you navbar (or whatever template you are using - both the template to make the navbar link and the one that makes the dropdown). Make sure to use the proper code tags around it or it's too hard to read.

anthroforum

12-14-2008, 08:04 PM

<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center"> <table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="21">
<tr>
<td width="65"><img src="/images/gradients/hbf/01-topleft.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="123"><img src="/images/gradients/hbf/02-topcentre.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="29"><img src="/images/gradients/hbf/03-topright.gif"></td>
</tr>

<table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="57">
<tr>
<td width="258"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="/images/gradients/hbf/05.gif" border="0"></a></td>
<td width="65"><a href="usercp.php$session[sessionurl_q]"><img src="/images/gradients/hbf/06.gif" border="0"></a></td>
<td width="89"><a href="memberlist.php$session[sessionurl_q]"><img src="/images/gradients/hbf/07.gif" border="0"></a></td>
<td width="53"><a href="/photoplog/index.php$session[sessionurl_q]"><img src="/images/gradients/hbf/08.gif" border="0"></a></td>
<td width="71"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2"><img src="/images/gradients/hbf/09.gif" border="0"></a></td>
<td width="78"><img src="/images/gradients/hbf/10.gif" border="0">

<div class="vbmenu_popup" id="usercptools_menu" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos1]

<tr><td class="thead">$vbphrase[networking]</td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
<if condition="$show['quick_links_groups']">
<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
</if>
<if condition="$show['quick_links_albums']">
<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
</if>
$template_hook[navbar_quick_links_menu_pos2]

<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>

<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos3]

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
$template_hook[navbar_quick_links_menu_pos4]

</table>
</div>

</td>
<td width="66"><a href="/misc.php$session[sessionurl_q]?do=flashchat"><img src="/images/gradients/hbf/11.gif" border="0"></a></td>
<td width="58"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><img src="/images/gradients/hbf/12.gif" border="0"></a></td>
<td width="162"><img src="/images/gradients/hbf/13.gif" border="0"></td>
</tr>
</td>

</td>
</tr>
</table>




$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

Lynne

12-14-2008, 09:30 PM

Look at how they did it in the default navbar template. Here's the link in the navbar:
<td class="vbmenu_control"><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>You need to modify that to have an image and put it in place of all the stuff inbetween these lines:
<td width="78"><img src="/images/gradients/hbf/10.gif" border="0">

<div class="vbmenu_popup" id="usercptools_menu" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

stuff
</table>
</div>
</td>

And then put all that stuff at the bottom like in the navbar (with display:none).

anthroforum

12-14-2008, 10:14 PM

I don't know, the display:none just makes it vanish again wherever that tag is.

Lynne

12-14-2008, 10:19 PM

It's going to vanish if you don't put the other code there like I suggested.

anthroforum

12-15-2008, 03:45 PM

<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center"> <table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="21">
<tr>
<td width="65"><img src="/images/gradients/hbf/01-topleft.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="123"><img src="/images/gradients/hbf/02-topcentre.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="29"><img src="/images/gradients/hbf/03-topright.gif"></td>
</tr>

<table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="57">
<tr>
<td width="258"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="/images/gradients/hbf/05.gif" border="0"></a></td>
<td width="65"><a href="usercp.php$session[sessionurl_q]"><img src="/images/gradients/hbf/06.gif" border="0"></a></td>
<td width="89"><a href="memberlist.php$session[sessionurl_q]"><img src="/images/gradients/hbf/07.gif" border="0"></a></td>
<td width="53"><a href="/photoplog/index.php$session[sessionurl_q]"><img src="/images/gradients/hbf/08.gif" border="0"></a></td>
<td width="71"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2"><img src="/images/gradients/hbf/09.gif" border="0"></a></td>
<td width="78"><img src="/images/gradients/hbf/10.gif" border="0">

<div class="vbmenu_popup" id="usercptools_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

<td class="vbmenu_control"><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>

<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos1]

<tr><td class="thead">$vbphrase[networking]</td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
<if condition="$show['quick_links_groups']">
<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
</if>
<if condition="$show['quick_links_albums']">
<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
</if>
$template_hook[navbar_quick_links_menu_pos2]

<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>

<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos3]

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
$template_hook[navbar_quick_links_menu_pos4]

</table>
</div>

</td>
<td width="66"><a href="/misc.php$session[sessionurl_q]?do=flashchat"><img src="/images/gradients/hbf/11.gif" border="0"></a></td>
<td width="58"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><img src="/images/gradients/hbf/12.gif" border="0"></a></td>
<td width="162"><img src="/images/gradients/hbf/13.gif" border="0"></td>
</tr>
</td>

</td>
</tr>
</table>




$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

--------------- Added 1229363243 at 1229363243 ---------------

Maybe take it to the paid services forum,

Lynne

12-15-2008, 04:37 PM

I think you need to reread what my suggestion was. You have not replaced that code in your template at all or moved all the drop-down code to the bottom of the template.