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.
Don’t want to miss any Tips and Tutorials?, SIGN UP for the Blog and Web Design Tips Weekly Newsletter
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
Leave a Reply