jQuery slider on my forum

Go down

In progress jQuery slider on my forum

Post by ibrahim9 on February 17th 2012, 11:57 pm

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

avatar
ibrahim9
Forumember

Male Posts : 33
Reputation : 2
Language : Bosnian
Location : Srebrenik

http://www.photoshop.fanforum.biz

Back to top Go down

In progress Re: jQuery slider on my forum

Post by probidthetalk on February 18th 2012, 12:14 am

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

look on javascript.com
avatar
probidthetalk
Forumember

Posts : 139
Reputation : 3
Language : PHP/MYSQL/HTML

Back to top Go down

In progress Re: jQuery slider on my forum

Post by Nera. on February 18th 2012, 12:22 pm

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.
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: jQuery slider on my forum

Post by olokers on February 19th 2012, 1:36 am

@Nera. wrote: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.

olokers
New Member

Posts : 13
Reputation : 1
Language : Tagalog

Back to top Go down

In progress Re: jQuery slider on my forum

Post by Sanket on February 19th 2012, 5:24 am

@olokers wrote:
@Nera. wrote: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'.
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum