MyBB Community Forums

hi
i wanna use my customized menu bar for top links which uses jquery ,aftar replacing it i noticed that all editors disappeared (in advanced quick reply, profile comments, and even in new thread box)
i can see the editor but i can't see the BBCode editor( where placed img button ,font,align text,....)
plz help
i realy worked about 2 weeks on my menu bar
but i can't use it

Add the following code in your Jquery script;

jQuery.noConflict();

You need to use jQuery.noConflict() - otherwise, no prototype based JS on your forum will work.

If you paste the JS here, I'll show you how to fix it.

i don't know where exactly copy this

here is the code

[/code]

<style>


/* Firefox Dotted Outline Fix */
a:active {
outline: none;
}

/* Firefox Dotted Outline Fix */
a:focus {
-moz-outline-style: none;
}

/* Menu Body */
ul#menu {
width:90%;
height:63px;
background:url(bg.png) repeat-x;
list-style:none;
margin:0;
padding:0;
padding-top:0px;
padding-left:10%;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;


}

/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}

/* Link - common attributes */
ul#menu li a {
background:url(sprite.png) no-repeat scroll top left;
display:block;
height:63px;
position:relative;
}

/* Specify width and background position attributes specifically for the class: "tamas" */
ul#menu li a.tamas {
width:110px;
}

/* Specify width and background position attributes specifically for the class: "rahnama" */
ul#menu li a.rahnama {
width:110px;
background-position:-110px 0px;
}

/* Specify width and background position attributes specifically for the class: "danlod" */
ul#menu li a.danlod {
width:110px;
background-position:-220px 0px;
}

/* Specify width and background position attributes specifically for the class: "news" */
ul#menu li a.news {
width:110px;
background-position:-330px 0px;
}

/* Specify width and background position attributes specifically for the class: "games" */
ul#menu li a.games {
width:110px;
background-position:-441px 0px;
}

/* Specify width and background position attributes specifically for the class: "members" */
ul#menu li a.members {
width:110px;
background-position:-552px 0px;
}

/* Specify width and background position attributes specifically for the class: "forum" */
ul#menu li a.forum {
width:110px;
background-position:-662px 0px;
}

/* Specify width and background position attributes specifically for the class: "homepage" */
ul#menu li a.homepage {
width:110px;
background-position:-772px 0px;
}

/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(sprite.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}

/* Shift background position on hover for the class: "tamas" */
ul#menu li a.tamas span {
width:110px;
background-position:0px -63px;
}

/* Shift background position on hover for the class: "rahnama" */
ul#menu li a.rahnama span {
width:110px;
background-position:-110px -63px;
}

/* Shift background position on hover for the class: "danlod" */
ul#menu li a.danlod span {
width:110px;
background-position:-220px -63px;
}

/* Shift background position on hover for the class: "news" */
ul#menu li a.news span {
width:110px;
background-position:-330px -63px;
}

/* Shift background position on hover for the class: "games" */
ul#menu li a.games span {
width:110px;
background-position:-441px -63px;
}

/* Shift background position on hover for the class: "members" */
ul#menu li a.members span {
width:110px;
background-position:-552px -63px;

}
/* Shift background position on hover for the class: "forum" */
ul#menu li a.forum span {
width:110px;
background-position:-662px -63px;
}

/* Shift background position on hover for the class: "homepage" */
ul#menu li a.homepage span {
width:110px;
background-position:-772px -64px;
}


</style>

<!-- Include jQuery Library -->
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">

$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
</head>

<body>
<ul id="menu">
<li><a href="{$mybb->settings['bburl']}/contact.php" class="tamas"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/forum-13-page-1.html" class="rahnama"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/forum-36.html" class="danlod"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew" class="news"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/games.php" class="games"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="members"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/index.php" class="forum"><span></span></a></li>
<li><a href="{$mybb->settings['bburl']}/portal.php" class="homepage"><span></span></a></li>
</ul>[/code]

In above code, find;

<script type="text/javascript">

$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>

and Change it to;

<script type="text/javascript">
jQuery.noConflict();
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>

did not work
when i use that it only shows pictures when actually should appear when mouse on it
its stopped animation

I only wanted the JS. Yaldaram has semi-fixed it, though issues may still remain -.noConflict isn't quite perfect Here's what I'd do for the JS (note: I've also cleaned it up a bit):

jQuery.noConflict();

jQuery(document).ready(function($) {
    $("ul#menu span").css("opacity", "0");

    $("ul#menu span").hover(

    function() {
        $(this).stop().animate({
            opacity: 1
        }, 'slow');
    }, function() {
        $(this).stop().animate({
            opacity: 0
        }, 'slow');
    });
});

yessssssss
thank you guys
thank you so much euantor.your solution worked prefect
thanks again

No problem at all. Not many people use that method of noConflict even though (IMO) it's the best way Glad to have helped.