MyBB Community Forums

Everything works perfect if i run it as localhost..
but on mybb it doesnt work..
looks like it can't see the link to the JS..


My Header _member template:

Welcome, {$mybb->user['username']}
<a style="margin-right: 15px; margin-left: 15px;" href="member.php?action=profile&uid={$mybb->user['uid']}">Profile</a>

<span style="color: #ffffff">Inbox </span><span class="pm_alert" style="margin-left: 5px; margin-right: 10px;"><a id="sibutton" href="{$mybb->settings['bburl']}/private.php">{$mybb->user['pms_unread']}</a></span>
{$modcplink}
{$admincplink}
<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a>


<script type="text/javascript" src="http://rapture-gfx.com/jscripts/menu1.js"></script>
<script type="text/javascript" src="http://rapture-gfx.com/jscripts/slide.js"></script>
<div id="button5">
<a class="menu_class" href="#">Settings</a>
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
</div>

</div>

my css:

Quote:#button5 {
height: 32px;
width: 80px;
margin: auto;
}

ul, li {
margin:0;
padding:0;
list-style:none;
}

.menu_class {
border:1px solid #1c1c1c;
}

.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
}

.the_menu li {
background-color: #302f2f;
}

.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}

.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}

source:

http://www.hv-designs.co.uk/2009/02/17/s...uery-menu/

Need serious help here, the JS won't work on click

It is because MyBB use prototype and your sliding menu script use jQuery.
Add this below the last </script> :

<script>$.noConflict();</script>

Then in your menu script, replace $( and $.( with jQuery( and jQuery.(

Works thanks

Try this:

<script type="text/javascript">
    $.noConflict();
</script>
<script type="text/javascript">
    jQuery(document).ready(function()
    {
        jQuery('a.menu_class').click(function()
        {
            jQuery('ul.the_menu').slideToggle('medium');
        });
    });
</script>