Hello there gents.
Well, I'm making a few jQuery tutorials for all of you. But if you didn't know how to do this, then any jQuery tutorial I brought to you would break a few things around your site. I originally intended to include a mini-tut inside all of my jQuery tutorials to fix this, but I might as well just make this so I can be lazy and just link to this.
So the simple, easy way to ensure jQuery doesn't conflict with MyBB.
First,
Download jQuery and upload the library to somewhere within your MyBB Installation.
Go to,
ACP -> Templates & Styles -> Templates -> Ungrouped Templates -> headerincludes
Find,
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>
Add Below,
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/path/to/jquery.js?ver=1400"></script>
<script>
jQuery.noConflict();
</script>
(edit the "path/to/jquery" line to your actual jQuery library path)
From then on, include any jQuery scripts below that line. It's usually best to include them through headerincludes, but there are exceptions.
And that's all.
Explanation:
(If you're one of those people who need a reason like I do. )
Normally, it'd be impossible to install jQuery on a MyBB board. MyBB uses a similar library called Prototype, which due to their similarities, conflicts heavily with jQuery's library. And installing jQuery would break all of the scripts on MyBB running on Prototype (for instance, the moderator options, Quick Edit, and many various javascript features throughout MyBB). However, jQuery was smart and created the jQuery.noConflict(); function in order to help us with that. And voila', we have a working jQuery library.
I'm gonna pick on this guy's tutorial, from over at mybb.com. And if he reads this, forgive me man. Just optimizing your tut a bit. All credits go to him for this while all credits go to dynamic drive in which he found them at in which all credits go to the guy who created them at dynamic drive. *whew*
Anyway.
What this guy's tut does is add a jQuery script which adds an arrow to the bottom right corner of the screen that appears when the user is no longer at the top of the page. Allowing him or her to click the arrow to return back. Very conveniant, considering MyBB's own back to the top thing is a little meh.
You can find a working demo
here.
A few people reported that his tutorial broke a few options around their sites, due to Prototype and jQuery conflictions. Now, all you have to do to make this tutorial work for you, is use my previous method above to ensure there's no conflictions with jQuery. Download the script from the
link 41shots provided. Upload it to your site and then go to headerincludes,
And add this anywhere below The jQuery No Conflict code.
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/path/to/scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>
(Removed the jQuery inclusion due to the assumption jQuery is already included)
(And once again, edit the path to reflect to where you uploaded the script)
And boom! You suddenly have a very sexy arrow which will no doubt give your users more ease of use.
Once again, credits to 41shots for the original tutorial and finding the script.
By the way, if you want to edit the arrow image in the script...edit scrolltopcontrol.js in Notepad, Notepad ++, or your site's file editor, or whichever, find this line,
Code:
controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
Change <img src="
up.png" to the path of your arrow image, and,
change
"width:48px; height:48px"
to the EXACT dimensions of your arrow image.
Anyways, that's all for now folks. Once again, thanks to 41shots for the tutorial which I used as an example for optimization, and to dynamic drive for providing the script.
I'll come along with some of my own jQuery Script Tutorials soon enough.
