Join Me On The JQuery Bandwagon
Over the last few weeks I have been reading a lot about jQuery and how easy it is to use and that it adds some great functionality to a website. So I though I would take the plunge and spend a bit of time seeing what all the fuss is about. Over the coming weeks I will be giving you some more insights and tutorials on JQuery and you can make your mind up whether it is something that would benefit your site.
What I am trying to do here at Dreamweaver Spot is share with you the things that I am learning on my journey to becoming a better web developer. So make sure you SUBSCRIBE to MY RSS Feed so you can come on the journey with me an learn some great stuff along the way too.
Now I have really been a javascript person, but I have had it mentioned to me on numerous occasions that this jQuery stuff is pretty easy to learn so what the heck. To get started you will first need to download the jQuery File. After the download place the file into a folder in your website maybe a scripts folder, you need to add a couple of lines to the <head></head> tags of the page.
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
// Your jQuery Stuff goes here
</script>
</head>
What made me think of using jQuery in the first place was that on a project I am working on at a local High School they are using Sharepoint Portal and on the particular page that I was working on, the screen real estate is very important and I needed to fit a few things in that would not have fitted ordinarily. Hense I wanted to create some collapsible divs and I know that with jQuery this is possible.
Now that we have the references to the jquery.js file in place we are ready to use it. In the above code you should see where we will put the code. In between the script tags we will put what they call a “ready event” which basically checks that the document is ready to be manipulated. This ready event looks like this;
$(document).ready(function(){
// All your code goes in here..............
});
For the purpose of this example all I am going to show you is how easy it is so show and hide an entire div element. So here is my CSS and (X)HTML Markup for this example.
CSS
<style>
body{font-size:12px; font-family:"Trebuchet MS";}
#content1{
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>
(X)HTML
<a href="#" id="click">Something Here</a>
<div class="box">
<div id="content1">
<p><a href="#" id="close">Close</a></p>
</div>
</div>
</body>
As you can see it is a very simple example, but the use of this it just about limitless!
Now for the jQuery code that does all the funky stuff. What I am going to do is Show and Hide the Content1 Div element. For that I created the jQuery code below, have a look then I will go through it.
$(document).ready(function(){
$('#content1').hide();
$('a').click(function(){
$('#content1').show('slow');
});
$('a#close').click(function(){
$('#content1').hide('slow');
})
});
As I mentioned earlier the $(document).ready(function()} is a function that waits until the page is ready to be manipulated before executing the code inside it.
The next line $('#content1').hide(); Hides the Content1 Div to start with. Notice how there is a relationship between jQuery and CSS in that is uses the, ID is this case, but it could use a class in exactly the same manner, as the argument inside the parenthesis.
We then move onto the next section of code that “Shows” the DIV when the linked text is clicked. $('a).click(function(){}); This is calling the “click” function and then invoking the “show” effect on the Content1 Div.
Read the code again and make sure you get a grip on the logic. It took me a little while to get the hang of it as well !!!
Inside that Div that is being Shown and Hidden there is another text link that will Hide the Div.
$('a#close').click(function(){
$('#content1').hide('slow');
})
If you look at this you can see that any “a” (link) element with an ID of “close” will invoke the “hide” Effect on the Content 1 Div.
And People that is all there is to it !!!! You can check out the example that I used in this jQuery example here.
If you have found this tutorial helpful, feel free to donate in the footer to keep this website active, so others can find this information useful. Thank You.
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
July 20th, 2008 at 11:03 pm
Very didactic. Thanks!
October 29th, 2008 at 5:19 am
hi i loved your tutorial. I was wondering if there is a way to have it be used for multiple reveals. the website listed is the one i am trying to do it with. all the lyrics titles need to be able to use the drop box like the first one does. if you could respond asap that would be amazing. thanks
Alan.
December 22nd, 2008 at 11:54 pm
take a look at nice best blog -
http://www.blogmyway.org/entry.php?w=survey&e_id=32988
http://www.blogmyway.org/entry.php?w=survey&e_id=32988
http://www.blogmyway.org/entry.php?w=survey&e_id=32988
September 16th, 2009 at 9:48 pm
this is working fine..thnaks
September 26th, 2009 at 9:20 pm
hello there what abt multiple show hide in one page i tried but by click both div is closed what to do?
December 29th, 2009 at 9:51 pm
Very nice and useful tutorials to web designers,
Thanks for posting.
December 29th, 2009 at 9:57 pm
Very nice and useful tutorials for web designers,
Thanks for posting.
February 2nd, 2010 at 2:45 am
Clear and straightforward tutorial. I have been meaning to get into jQuery myself and this is a useful pointer in that direction,
cheers
February 4th, 2010 at 3:38 pm
Its really small code, but usually we need this.. thank you..
February 13th, 2010 at 3:43 am
Id like to do this in a drop down menu for a form would i use this code of would i implant some kinda code into the drop down>
February 18th, 2010 at 8:25 pm
Thanks for the useful Info. Can u please provide me the source code of this?
April 2nd, 2010 at 2:10 am
I’m having a problem with this. I’m using the jQuery smooth scrolling for anchored links, and when I click on the link to go to the top of the page, the div opens.
Also, how do you implement this for more than on div?
April 3rd, 2010 at 8:00 am
Hi,
Great tutorial. Thanks very much!
I’m working on a project where i’m live-searching a database (with AJAX) and displaying the results in a DIV.
This itself works perfectly, but i’ve tried hidding a field (table, span, div, a) with your solution. I could not get it to work on dynamic php pages.
Am i right in assuming that the cause it won’t work is dynamic pages ? Is there a way around this?
Thanks,
Den
April 25th, 2010 at 1:20 am
Den,
jQuery will certainly work on a php site. In fact it’s built quite well to handle Ajax functions as well. You just need to remember that jQuery is a client-side script whereas php is a server-side language. PHP happens first, then you can implement the jQuery stuff. Post your code if you want more help…