jQuery slider on my forum

[ibrahim9]

How I can add jQuery on my forum, like this:

[probidthetalk]

Everything he talks about there is actually the same type of code

look on javascript.com

[Nera.]

Hi,

There used to be the exact tutorial for those share buttons slide in Jalokim displayed there. I can't seem to find it anywhere. It would serve you great since you would not need to customize it, only replace the links.

For that you can use something like this:

Add this to AP > Display > Colors > CSS:

Code:

.ljevo {
   position: fixed;
   top: 50px;
   left: 0;
   display: none;
   background: #000000;
   border:1px solid #111111;
   -moz-border-radius-topright: 20px;
   -webkit-border-top-right-radius: 20px;
   -moz-border-radius-bottomright: 20px;
   -webkit-border-bottom-right-radius: 20px;
   width: 330px;
   height: auto;
        padding: 15px;
   opacity: .5;
   color: white;
   }
a.trigger {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #444444;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    display: block;
    left: 0;
    opacity: 0.7;
    padding: 15px;
    position: fixed;
    text-decoration: none;
    top: 80px;
}

Than add this to your AP > Display > Homepage > Generalities > Message content:

Code:

   <div class="ljevo">Content Here</div>
   <a class="trigger" href="#"><img src="http://www.apporacle.com/wp-content/themes/creativezodiac/gfx/blog_icons/icon_share.png" /></a>

You'll need to add your social icons where it says 'content here'.

And than go to AP > Modules > JS managment and mark enable JS.

Create a new JS file and add this in it:

Code:

$(document).ready(function(){
$(".trigger").click(function(){
$(".ljevo").toggle("fast");
$(this).toggleClass("active");
return false;
});
});

Example of it working on an Forumotion forum:



Thought you'll need to customise it a bit to make it look nicer.

[olokers]

Hi,

Code:

   <div class="ljevo">Content Here</div>
   <a class="trigger" href="#"><img src="http://www.apporacle.com/wp-content/themes/creativezodiac/gfx/blog_icons/icon_share.png" /></a>

You'll need to add your social icons where it says 'content here'.

And than go to AP > Modules > JS managment and mark enable JS.

Create a new JS file and add this in it:

Can i ask what 'content here'. is all about? i don't know this.. sorry for my noob question.

[Sanket]

Hi,

Code:

   <div class="ljevo">Content Here</div>
   <a class="trigger" href="#"><img src="http://www.apporacle.com/wp-content/themes/creativezodiac/gfx/blog_icons/icon_share.png" /></a>

You'll need to add your social icons where it says 'content here'.

And than go to AP > Modules > JS managment and mark enable JS.

Create a new JS file and add this in it:

Can i ask what 'content here'. is all about? i don't know this.. sorry for my noob question.

You'll need to add your social icons where it says 'content here'.