PDA

View Full Version : BB Code Enhancements - jQuery Spoiler BB Code - Smooth Scrolling


1Unreal
05-08-2009, 10:00 PM
Ive not seen a very pretty spoiler BB code so I thought I would make one. It uses some really simple jQuery code so its very easy to modify with some other cool effects ;)

Heres a demo (http://www.theflickzone.com/tutorials/846-spoiler-bb-code.html#post1561)

Also, its worth mentioning that if you users browser is slow at parsing javascript they might see the spoiler for a split second.

Anyway, heres how to install it.

Open up the template headinclude, go to the bottom and add this code


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#spoilercontent").hide();
$("#spoilerhead").click(function () {
if ($("#spoilercontent").is(":hidden")) {
$("#spoilercontent").slideDown("slow");
} else {
$("#spoilercontent").slideUp("slow");
}
});
});
</script>

If you are using jQuery somewhere on your site already remove the first line ;)

Next add a new BB code use what ever options you want, but use this for the HTML replacement:


<div id="spoilerhead" class="thead">Spoiler</div> <div id="spoilercontent" class="alt1">{param}</div>


And youre done!

Indyaboard
05-09-2009, 06:52 PM
Very nice, thanks!

Flowsion
05-09-2009, 09:49 PM
Pretty stupid if it spoils it before the javascript loads, lol.

TWTCommish
05-09-2009, 10:10 PM
You should be able to avoid that problem; just have it hidden by default with the bbCode itself.

<div id="spoilerhead" class="thead">Spoiler</div> <div id="spoilercontent" class="alt1" style="display: none;">{param}</div>

brandonroy
05-10-2009, 08:47 AM
I saw the spoiler in your demo for about 30 seconds (after most of the page loaded all the way) then it finally hid itself.

Princeton
05-10-2009, 01:24 PM
no files - moved to graveyard