Slider Panel

latchy · 1 Slider Panel Mon May 24, 2010 11:46 pm

latchy

Registered Member

Posts : 181
Points : 0
Age : 41
Location : Graphic Central...

Slider Panel - jQuery
Making a slider panel using jQuery

Slider Panel

Ok today we are going to learn how to make this...
http://gctest2010.formyjob.net/slider2-h2.htm

OK so lets get started with the jQuery

Code:: <script type="text/javascript" src="http://graphiccentral.bravehost.com/slider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>

Nothing more to that part of the tutorial, It's just so simple Laughing

OK, now for the CSS...

Code:: <style type="text/css"> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #c3c3c3; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #373737; background: url(http://img638.imageshack.us/img638/5051/tabwo.png) no-repeat center top; } .btn-slide { background: url(http://img21.imageshack.us/img21/8233/whitearrown.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style>

I will show you the editing at the end of the tutorial Smile

. Again nothing more to this part of the tutorial, just remember that you can host your CSS internal or exteranl.

Now for the HTML...

Code:: </head> <body> <div id="panel"> <--!Your Content goes here--> </div> <p class="slide"><a href="http://www.graphiccentral.org/index.htm" class="btn-slide">Slide Panel</a></p>

OK now that that is out of the way, lets move onto the editing Smile

To edit the background color of the box inside the slider change this in #panel of the CSS...

Code:: background: #c3c3c3;

Now, can you see the small line you see at the bottom of the pannel, you can edit in .slide of the CSS...

Code:: border-top: solid 4px #373737;

Now the tab is an image and you can edit it in the same place as the above, but look for

Code:: http://img638.imageshack.us/img638/5051/tabwo.png

I have included a link at the bottom of the tutorial for the PSD of the tab, Here are a few to get you started
Slider Panel Lightbluew

You can edit the arrows if you like, but I would not recommend it, as it was difficult to get the right amount of transparency Shocked

You can edit in the .btn-slide part of the CSS, just look for this...

Code:: http://img21.imageshack.us/img21/8233/whitearrown.gif

I think it is fairly obvious where to edit the content, just look for the <--!Your Content goes here-->

You can also change the text on the button, just look for...

Code:: class="btn-slide">Slide Panel</a></p>

and change the slide panel to whatever you like Very Happy

Also, remember to change the Graphic Central link to your own Wink

Here is the link to the PSD for the Tab...
http://www.graphiccentral.org/download.forum?id=17

Thanks,
Rob
I hope you enjoyed my tutorial

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

ankillien · 2 Re: Slider Panel Wed May 26, 2010 12:47 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Nice tutorial Very Happy

I thought you were going to explain hot to code the jQuery...anyways.

I think you should mention where exactly the JavaScript should be placed.
It is not advisable to apply style for body element in CSS since it can override the current look of any site/forum. Please remove it from the code.
(Same comments go for Q&A slider as well)

Thanks Smile

latchy · 3 Re: Slider Panel Wed May 26, 2010 3:28 pm

latchy

Registered Member

Posts : 181
Points : 0
Age : 41
Location : Graphic Central...

ankillien wrote:Nice tutorial

I thought you were going to explain hot to code the jQuery...anyways.

I think you should mention where exactly the JavaScript should be placed.
It is not advisable to apply style for body element in CSS since it can override the current look of any site/forum. Please remove it from the code.
(Same comments go for Q&A slider as well)

Thanks

I will post up the complete code, as for the CSS...
If I remove that, it all messes up Sad

ankillien · 4 Re: Slider Panel Wed May 26, 2010 7:08 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

For the CSS,
You should apply the part to another container which you are applying to the body. If someone will add this CSS in their site it will become only 570px wide! I may also mess with other elements on the site.

So, it is advised to apply the styles to another <div> instead o f the whole body.

Thank you Very Happy

Joel · 5 Re: Slider Panel Thu May 27, 2010 2:12 pm

Joel

Registered Member

Posts : 1857
Points : 91
Age : 27
Location : Singapore
Browser : Firefox

very nice tutorial Latchy! All the best!

ankillien · 6 Re: Slider Panel Mon Jun 07, 2010 9:57 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Tutorial Accepted

Guest · 7 Re: Slider Panel Wed Aug 18, 2010 12:14 am

Guest

a question,if we want to place it to an html page we have to add the html right after the <body> tag?

ankillien · 8 Re: Slider Panel Wed Aug 18, 2010 8:16 am

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Cool-Processor wrote:a question,if we want to place it to an html page we have to add the html right after the <body> tag?

The CSS and Javascript part will go inside <head> tags while the HTML code will go inside the <body> tags.

C.noergaard · 9 Re: Slider Panel Wed Sep 01, 2010 10:02 pm

C.noergaard

Registered Member

Posts : 103
Points : 0
Age : 26
Location : Ikast,Jylland,Denmark
Browser : Google Chrome

Good tutorial i like it

Mikey · 10 Re: Slider Panel Tue Sep 07, 2010 8:38 am

Mikey

Registered Member

Posts : 12
Points : 0
Age : 30
Location : USA
Browser : Firefox

I thought this would be a jQuery tutorial, but really this is just a drop down menu using jQuery. Sad

Not a bad tutorial I guess in that regard.

cashrow5 · 11 Re: Slider Panel Sat Sep 18, 2010 12:38 pm

cashrow5

Registered Member

Posts : 3
Points : 3
Age : 37
Location : INDIA
Browser : Firefox

Nice tutorial Very Happy sunbath

Fake signature removed - ankillien

Ezio · 12 Re: Slider Panel Sun Apr 03, 2011 4:10 pm

Ezio

Registered Member

Posts : 174
Points : 22
Age : 26
Location : Bandung, Indonesia
Browser : Firefox

waw ! very cool, i must try this in my blog, Cool

but why Initially this works, but be not working. even though I've followed the tutorial carefully?
maybe you can check this : http://bargedoz.forumotion.com/h11-sliding-panel
hehehehe thanks !

RockerMan · 13 Re: Slider Panel Tue Apr 05, 2011 5:01 am

RockerMan

Technician

Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser : Firefox

Looks like you have foreign characters in the Javascript. Can happen when you copy and paste :/

verrell123 · 14 Re: Slider Panel Tue Apr 05, 2011 5:03 pm

verrell123

Registered Member

Posts : 1418
Points : 389
Age : 26
Location : Indonesia
Browser : Firefox

I know your false,

Code:: <script type="text/javascript" src="http://graphiccentral.bravehost.com/slider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>

ForuMotion can't use the

Code:: $

Chance into jQuery

Unknown Data · 15 Re: Slider Panel Tue Apr 05, 2011 8:04 pm

Unknown Data

Registered Member

Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser : Safari

I think you can by manipulating with the DOM.

connect0123 · 16 UK Websites Designer Wed Apr 06, 2011 1:30 pm

connect0123

Registered Member

Posts : 1
Points : 0
Age : 34
Location : delhi
Browser : Google Chrome

Very nice tutorial latchy.All the Best n keep it up.

Thanks

maijiyeon · 17 Re: Slider Panel Sat Jul 09, 2011 9:16 pm

maijiyeon

Registered Member

Posts : 2
Points : 0
Age : 27
Location : Malaysia
Browser : Google Chrome

wow! thanks for the tutorial!

Sponsored content

Quick Menu

Quick Menu

1 Slider Panel Mon May 24, 2010 11:46 pm

latchy

2 Re: Slider Panel Wed May 26, 2010 12:47 pm

ankillien

3 Re: Slider Panel Wed May 26, 2010 3:28 pm

latchy

4 Re: Slider Panel Wed May 26, 2010 7:08 pm

ankillien

5 Re: Slider Panel Thu May 27, 2010 2:12 pm

Joel

6 Re: Slider Panel Mon Jun 07, 2010 9:57 pm

ankillien

7 Re: Slider Panel Wed Aug 18, 2010 12:14 am

Guest

8 Re: Slider Panel Wed Aug 18, 2010 8:16 am

ankillien

9 Re: Slider Panel Wed Sep 01, 2010 10:02 pm

C.noergaard

10 Re: Slider Panel Tue Sep 07, 2010 8:38 am

Mikey

11 Re: Slider Panel Sat Sep 18, 2010 12:38 pm

cashrow5

12 Re: Slider Panel Sun Apr 03, 2011 4:10 pm

Ezio

13 Re: Slider Panel Tue Apr 05, 2011 5:01 am

RockerMan

14 Re: Slider Panel Tue Apr 05, 2011 5:03 pm

verrell123

15 Re: Slider Panel Tue Apr 05, 2011 8:04 pm

Unknown Data

16 UK Websites Designer Wed Apr 06, 2011 1:30 pm

connect0123

17 Re: Slider Panel Sat Jul 09, 2011 9:16 pm

maijiyeon

18 Re: Slider Panel

Sponsored content