Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[BB Code] Sliding Spoiler with jQuery Details »
[BB Code] Sliding Spoiler with jQuery
Mod Version: 1.00, by bpr (Member) bpr is offline
Developer Last Online: Dec 2010 I like it Show Printable Version Email this Page

vB Version: 4.0.x Rating: (0 vote - 0 average) Installs: 9
Released: 24 Apr 2010 Last Update: Never Downloads: 0
Not Supported Template Edits Additional Files Re-usable Code  

What does this mod do?
This is a normal spoiler, with which you can hide some text in your post. When a user clicks on the spoiler name, a field will slide in/out with the hidden text.

Where is it useful?
This could be useful for serveral things, of couse it is not as mighty as a real hide hack, but you could hide small / unimportant information such as an answer for an rethoric question or you could hide some offtopic spam in a context post.

How does it looks?
Closed spoiler:


Open Spoiler:


How to install?
1. Upload the picture

into the following directory via ftp:
[forum_root]/images/icons/

2. Upload the Editor Icon via ftp:


into
[forum_root]/images/editor/

Uploads are finished now!


3. Create a new BBCode via ACP with the following settings:
Title: Spoiler
BB-Code Tag: sp
Code:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

!IMPORTANT:You might wanna change "Spoiler Inhalt:" into your own language, but basically it means: "Spoiler Content:"(Dont worry you dont have to be a HTML crack to do so)

Example: [sp]Hidden text![/sp]
Description: This code hides/show a text within the spoiler tag
{option} usage: NO!
Image: /images/icons/spoiler.gif
You can check the rest however you like, but I was using:
Remove Tag: Yes
and the rest: No

Now you can save.

3. jQuery Part:

If you are already using jquery on your website you can easily skip part3 and go on to part4.
However, if you dont have jquery implented you can do this just like that:

Open your ACP -> Styles & Templates -> "Configure Styles" -> choose "Alter Templates" -> click on the template "footer" and than "edit"

Scroll down to the very last code line where something should be written like this:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and put underneath

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

now you can save this template and leave it.

4. Your Spoiler hack should already work!
On the other hand it looks pretty "blank" So lets do some quick n dirty CSS (3):
In my case I created an extra external stylesheet for my board, in many cases thats not the case, I am actually not that deep into vbulletin yet with all the style vars and so on but what we need is this little css:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

You could also add this in one of the header templates such as "headinclude_bottom" where as you have to put around the code the following lines:
Above:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Under:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

I personally do not recommend internal style sheets, so I am sorry to mess this little howto up with that bullcrap and not using style vars, I might alter this text in the future.

5. Thats it - you are done

All the best
bpr

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	closed-spoiler.png
Views:	2466
Size:	7.0 KB
ID:	116232   Click image for larger version

Name:	open-spoiler.png
Views:	2537
Size:	7.7 KB
ID:	116233  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
BB Code Enhancements Spoiler BB Code - jQuery Smooth Scrolling 1Unreal Modification Graveyard 8 27 May 2009 14:34
BB Code Enhancements jQuery Spoiler BB Code - Smooth Scrolling 1Unreal Modification Graveyard 5 10 May 2009 14:24

Comments
  #2  
Old 24 Apr 2010, 02:08
TimberFloorAu's Avatar
TimberFloorAu TimberFloorAu is offline
 
Join Date: May 2008
Real name: Blue
Excellent Tagged
__________________

My Hacks [ click ] | Steve ~ Administrator for British Expats AustraliaBound.org/forum | Test our forum - user; don pass; pass123
Sports Tipping Mod - coming February 2010 ~ Show your Interest !
Reply With Quote
  #3  
Old 26 May 2011, 01:02
obmob obmob is offline
 
Join Date: Nov 2001
Will test
Reply With Quote
  #4  
Old 30 Aug 2011, 08:56
ozione ozione is offline
 
Join Date: Nov 2010
this is just what i needed and it actually works as it should! THANKS!
Reply With Quote
  #5  
Old 10 Sep 2011, 08:04
ozione ozione is offline
 
Join Date: Nov 2010
there is one bug though; using widgets with last posts and if the spoiler is somewhere on the beginning of the post, the widget reveals it.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 17:54.

Layout Options | Width: Wide Color: