MyBB Community Forums

I want to add jQuery to my theme as I want to include a User Panel.

This is the code I have to insert into the headerinclude template.:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel_l").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>

I use mybb javascript file this way:

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/mybb.js"></script>

Somebody may help me to make it so it doesn't conflict with mybb Prototype?

Replace above with this;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel_l").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});
</script>

Thanks Yaldaram, now I have it like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 <script type="text/javascript">
 jQuery.noConflict();
 $(document).ready(function(){
     $(".trigger").click(function(){
         $(".panel_l").toggle("fast");
         $(this).toggleClass("active");
         return false;
     });
 });
 </script>

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/mybb.js"></script>

But jQuery panel stopped working

http://www.mypurebb.com/254-jquery-and-mybb/

That should help.

Tanks Euantor, this worked out:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
	jQuery(".trigger").click(function(){
		jQuery(".panel_l").toggle("fast");
		jQuery(this).toggleClass("active");
		return false;
	});
});
</script>

But this didn't:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
 $(document).ready(function(){
     $(".trigger").click(function(){
         $(".panel_l").toggle("fast");
         $(this).toggleClass("active");
         return false;
     });
 });
 </script>

I know nothing about javascript, so it does matter if I just use the one that worked even if it is not the "right" way?

Edit: Sorry for mistaking usernames.

That last script had a function that was not being closed, and wasn't even supposed to be there in the first place. This should work as well, and, according to euantor's link, is the most correct way:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
     $(".trigger").click(function(){
         $(".panel_l").toggle("fast");
         $(this).toggleClass("active");
         return false;
     });
});
</script>

So you did remove $(document).ready(function(){ right?

Tanks, it worked. Also I apologize for confusing euantor's name if anyone noticed.

Tanks everyone

Yes, I did, because you were repeating it (except that you were using $ instead of jQuery) and the function wasn't being closed.

^ I get it now. Thanks for pointing it out