Using jQuery in MyBB themes

[sukanjan.k]

In these days to get the maximum out of design you have to use jQuery and the most easiest process to get stunning effects in a web page. There are already many jQuery plug-ins available for use. Like we can use tooltip plug-in, many great menu effects also hover effects.

But using MyBB in jQuery theme is not easy, many designer can't get the jQuery plug-in to work with a MyBB theme, this happens because MyBB uses "Prototype JavaScript framework" not jQuery. Thats why Prototype conflict with jQuery and none of the scripts work properly. The solution of this problem is easy. There are various ways to modify a jQuery code and use it in a MyBB theme.

1. Using $.noConflict();

Code:

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($)
  // You can put your jQuery code here with $ as function variable.
</script>

2. By overriding the $-function

Code:

<script>
     var $j = jQuery.noConflict();
    
     // Here we are changing the function name from $ to $j
     $j(document).ready(function(){
       $j("div").hide();
     });
    
     // We can use here Prototype with $ function name.
     $('someid').hide();
</script>

what we are doing here is changing the function name $ from $j so that it won't conflict with prototypes '$' function name.

3. Including jQuery before other libraries. (Most effective)

If we can include jQuery before other libraries, use jQuery while using jQuery and $ for other library. There is no need for overriding the $-function by calling "jQuery.noConflict()".

Code:

<script>
     // Replace the $ with jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
    
     // Use Prototype with $(...), etc.
     $('some_id').hide();
  </script>

Hope by following the above methods many can overcome the problems they face while using jQuery plug-ins in MyBB themes.

Thanks for reading.

[Ammy_769]

Well, once we ditched all old browser. CSS3 will replace it. Currently, not all browser support CSS3 that`s why developer use cross browser solution jQuery. It is difficult to implant, really messing with coding but give your animation for all browser regardless of how old it is? does not mean use ancient IE6.
Thanks for sum up. Developers will surely like it.

[sukanjan.k]

I have seen many posts in MyBB about this jQuery problem, thats why decided to write this tutorial. Hope it helps many MyBB themers as well as developers. Yes ammy jQuery is hard to apply but the features jQuery offer is awesome and once you familiar with the jQuery coding you just fell in love with it. There is so much can be done with jQuery.

[ThinkChange]

OO What is for ? Drop down menu ?

[sukanjan.k]

(05-31-2011 01:44 PM)ThinkChange Wrote:  OO What is for ? Drop down menu ?

Its for all the jQuery plug-ins. By the method you can use jQuery in MyBB theme.

[ThinkChange]

Hey is it possible that this could make the thread section which [-] this to slowly goes up or either goes down?

[sukanjan.k]

(06-05-2011 12:48 PM)ThinkChange Wrote:  Hey is it possible that this could make the thread section which [-] this to slowly goes up or either goes down?

Yes its possible, you could do that using a plug-in or you can code that yourself.

[Bapun Raz]

Nice tutorial friend thnx for sharing.

[ambrizal]

please instert demo site

[sukanjan.k]

(09-20-2011 04:34 PM)ambrizal Wrote:  please instert demo site

In this tutorial we have stated the ways of integrating jQuery into MyBB themes, for example all our main site jQuery effects are integrated by this way.