"jQuery for Absolute Beginners” Video Series complete, what next?

Martin_Man · 5 Sep 2009 at 12:56

I have completed and mastered http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/. Are there any advanced stages I can move onto now with videos like these as they are so easy to follow and understand.

suarve · 5 Sep 2009 at 14:23

I learned quite a lot from http://www.learningjquery.com/

I like how each post has a level next to it E.g. beginner, advanced etc.

LiE · 6 Sep 2009 at 08:34

Martin have a read through the official docs and then start writing some code. Perhaps make a practice website implementing lots of the JQuery functions.

GravyMonster · 6 Sep 2009 at 11:57

Yeah, the jQ official documentation is very very good - far better than any other framework I've ever used, which makes learning and using it much easier.

Tripnologist · 6 Sep 2009 at 12:21

I quite agree with msm722. Start using it even if it's just messing around. The more you use it, the easier it becomes. You'll learn far more using it than you will reading about it.

topbanana · 7 Sep 2009 at 09:57

It sounds like you need a project to practise on

Martin_Man · 7 Sep 2009 at 15:59

topbanana said:
It sounds like you need a project to practise on

Explain?

suarve · 7 Sep 2009 at 16:33

Martin_Man said:
Explain?

E.g. get your teeth into a project. A lot of people learn a lot by actually using it to solve a practical problem.

Martin_Man · 7 Sep 2009 at 17:01

suarve said:
E.g. get your teeth into a project. A lot of people learn a lot by actually using it to solve a practical problem.

Ohhh i see.
I was actually thinking about doing that but i thought i would like to learn a little more first.

Do you have any work? I'd love to see.

GravyMonster · 7 Sep 2009 at 17:14

I did this a while back when i was testing out the drag/drop and AJAX features.

TBH I think the best way to learn something is by doing. All the theory in the world isn't going to help if you've never actually built anything in anger

Martin_Man · 7 Sep 2009 at 17:30

Thats pretty cool. I shall give it ago and post on here soon

Martin_Man · 7 Sep 2009 at 22:18

Ok this is how new i am. Its not perfect which i am aware of so please don't be to harsh. Click on the link below for a tester.

http://www.every-occasional-videos.co.uk/jquery

How do i change this so that when you click a second link it removes the first content?

Here is my code

Code:

$(function() {
		   $('a#home').click(function() {
									  $('#box').fadeIn(4000);
									  });
		   
		   		   $('a#news').click(function() {
									  $('#box2').fadeIn(4000);
									  });
				   
				   		   $('a#about').click(function() {
									  $('#box3').fadeIn(4000);
									  });
						   				   		   
												   $('a#link').click(function() {
									  $('#box4').fadeIn(4000);
									  });	
												   
		   });

RobH · 8 Sep 2009 at 00:09

You can fix it using a custom function:

Code:

<script type="text/javascript">
	
	$(function() {
		$('a#home').click(function() {
			showContent('#box');
		});
		   
		$('a#news').click(function() {
			showContent('#box2');
		});
				   
		$('a#about').click(function() {
			showContent('#box3');
		});
						   				   		   
		$('a#link').click(function() {
			showContent('#box4');
		});
	});
	
	function showContent(box) {
		// Hide all of the boxes
		$('.content').hide();
		// Fade in the specified box
		$(box).fadeIn(4000);
	}
	
</script>

You will need to add a class to all of the divs in the body so they can be hidden with a single selector:

Code:

<div id="box" class="content">
<div id="box2" class="content">
<div id="box3" class="content">
<div id="box4" class="content">

Inazuma · 8 Sep 2009 at 07:32

Is this for absolute beginners of javascript, or just beginners of jquery?

Martin_Man · 8 Sep 2009 at 08:48

RobH said:

You can fix it using a custom function:

Code:

<script type="text/javascript">
	
	$(function() {
		$('a#home').click(function() {
			showContent('#box');
		});
		   
		$('a#news').click(function() {
			showContent('#box2');
		});
				   
		$('a#about').click(function() {
			showContent('#box3');
		});
						   				   		   
		$('a#link').click(function() {
			showContent('#box4');
		});
	});
	
	function showContent(box) {
		// Hide all of the boxes
		$('.content').hide();
		// Fade in the specified box
		$(box).fadeIn(4000);
	}
	
</script>

You will need to add a class to all of the divs in the body so they can be hidden with a single selector:

Code:

<div id="box" class="content">
<div id="box2" class="content">
<div id="box3" class="content">
<div id="box4" class="content">

Thanks mate! because of the 'showContent('#box4');' is this what removes the content when you click onto another link?

Its for beginners of Jquery only. Would you like to have the link?

Inazuma · 8 Sep 2009 at 09:12

You already gave the link in the top post

GravyMonster · 8 Sep 2009 at 10:02

Martin_Man said:
because of the 'showContent('#box4');' is this what removes the content when you click onto another link?

In a rounadbout way yes. showContent is just the function, the line which actually hides all the boxes is $('.content').hide();.