WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Slider Panel

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Slider Panel on Mon May 24, 2010 10:16 pm

latchy


Registered Member
Registered Member

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








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 Smile

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

http://www.graphiccentral.org/

2Accespted Re: Slider Panel on Wed May 26, 2010 11:17 am

ankillien


Administrator
Administrator
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

3Accespted Re: Slider Panel on Wed May 26, 2010 1:58 pm

latchy


Registered Member
Registered Member
ankillien wrote: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


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

http://www.graphiccentral.org/

4Accespted Re: Slider Panel on Wed May 26, 2010 5:38 pm

ankillien


Administrator
Administrator
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

5Accespted Re: Slider Panel on Thu May 27, 2010 12:42 pm

Joel


Registered Member
Registered Member
very nice tutorial Latchy! All the best!

http://www.advertisehotspot.info/

6Accespted Re: Slider Panel on Mon Jun 07, 2010 8:27 pm

ankillien


Administrator
Administrator
Tutorial Accepted

7Accespted Re: Slider Panel on Tue Aug 17, 2010 10:44 pm

Guest


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

8Accespted Re: Slider Panel on Wed Aug 18, 2010 6:46 am

ankillien


Administrator
Administrator
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.

9Accespted Re: Slider Panel on Wed Sep 01, 2010 8:32 pm

C.noergaard


Registered Member
Registered Member
Good tutorial i like it

10Accespted Re: Slider Panel on Tue Sep 07, 2010 7:08 am

Mikey


Registered Member
Registered Member
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.

11Accespted Re: Slider Panel on Sat Sep 18, 2010 11:08 am

cashrow5


Registered Member
Registered Member
Nice tutorial Very Happy sunbath

Fake signature removed - ankillien

http://www.marblehost.com

12Accespted Re: Slider Panel on Sun Apr 03, 2011 2:40 pm

Ezio


Registered Member
Registered Member
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.marocs.net/h11-sliding-panel
hehehehe thanks !

http://www.forumbargedoz.ce.ms

13Accespted Re: Slider Panel on Tue Apr 05, 2011 3:31 am

RockerMan


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

http://www.graphics-post.com/

14Accespted Re: Slider Panel on Tue Apr 05, 2011 3:33 pm

verrell123


Registered Member
Registered Member
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

http://graphicholdine.forumid.net/

15Accespted Re: Slider Panel on Tue Apr 05, 2011 6:34 pm

Unknown Data


Registered Member
Registered Member
I think you can by manipulating with the DOM.

http://www.sjovfakta.dk

16Accespted UK Websites Designer on Wed Apr 06, 2011 12:00 pm

connect0123


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

Thanks

17Accespted Re: Slider Panel on Sat Jul 09, 2011 7:46 pm

maijiyeon


Registered Member
Registered Member
wow! thanks for the tutorial!

http://t-aramsia.forumms.net

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Slider Panel

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