First Time with jQuery. Help Please

JavaScript
1

Hello

I am currently working my way throguh jQuery: Novice to Ninja. It’s excellent so far. Learned a lot from it.

I am just having a go implementing the bouncy content panes example onto a page on my test website.

This is the bit of jQuery I have got: (altered example)

$(document).ready(function(){
  // hide all coaster lists
  $( '.park ul' ).hide();
  
  $('.park h3').click(function() {
    $(this).next().animate( 
	    {'height':'toggle'}, 'normal', 'easeOutBounce'
    );
  });
});

Basically, I understand it all, APART from this bit:

{'height':'toggle'}

As far as I can remember, I have not seen toggle being used like that. What is it doing and how?

Thanks in advance.

Neil

2

The method value “toggle” tells the jQuery animation to remember the absolute height of the element so when the next click event happens it knows the original height and returns it back to its normal state.

Hope that explains it.

3

ok. It just seems like an odd way to do it as I ahve not come across it written in that style previously in the book.

Surely you could just set that element to hide on default and then just do a normal toggle to show and then hide it?

4

Yes you could use .[B]toggle/B but the downside to that is you don’t get the easing effects that you get with .[B]animate/B

5

Ah right, Ok. I guess I’ll reread the toggle section of the book to make sure I understand that and then reread the .animate section again.

Thanks for your help.

6

Hey

I have this jquery:

$(document).ready(function(){

	// hide all coaster lists
	$( '.park ul' ).hide();
	
	// animate the height of the ul with ease effect
	$('.park h3').click(function() {
		$(this).next().animate( 
			{'height':'toggle'}, 'normal', 'easeOutBounce'
		);
	});
	
	// change cursor to hand when hovered over
	$('.park h3').hover(function() {
		$(this).css('cursor', 'pointer');
	}, function() {
		$(this).css('cursor', 'auto');
	});
});

Basically, I want to make the text within the h3 centered when it has been clicked and go back to normal when clicked again.

I tried adding a callback function to .animate to add a class called text-center but not sure what the selector should be?

If I use $(‘.park h3’) then that would make ALL the h3’s move to the center when any were clicked and not just the h3 that was clicked.

If I use $(this), then what is “this” referring to?.

Once I have the text of the h3 centering as needed then how would I alter that to animate it centering?

Any ideas?

7

$COLOR=#66cc66 [/COLOR]refers to the current scope within the click method meaning the current jQuery object currently clicked is now referenced to this. Try the following

    // animate the height of the ul with ease effect
    $('.park h3').click(function() {
        $(this)
            .css('text-align', ($(this).css('text-align') == 'center' ? 'left' : 'center'));
            .next()
            .animate({
                height: 'toggle'
            }, 'normal', 'easeOutBounce');
    });
8

Thanks for your help.

Any chance you could sort of explain what that code snippet does line by line?

Thanks

Neil

9

I’ll give that a go.


// When someone clicks on the h3 within the "park" class element
$('.park h3').click(function() {
    $(this) // do some things relating to that clicked element, which are
        // toggle the alignment of its text between center and left
        .css('text-align', ($(this).css('text-align') == 'center' ? 'left' : 'center'));
        // go to the element immediately after the clicked element
        .next()
        // animate that element
        .animate({
            // toggle the height between 0 and its known height
            height: 'toggle'
            // normal duration, and use a bounce effect at the end of the animation
        }, 'normal', 'easeOutBounce');
});

Looking back at the code, the comments really aren’t all that necessary.

10

No problem and hopefully that sums it up a little better for you bud :slight_smile:

11

ok. Thanks guys for both of your help. I understand that code now.

I didn’t realise you could just keep adding on different .??? onto the previous lot to add extra functionality.

It does make sense though. I’ll give it a o on my site a bit later and add a littl extra to change the cursor to a hand.

Thanks Again

Neil, and Happy New Year

12

How it works is that jQuery returns the jQuery object from each function, so that you can chain the next call directly on to it.


$(this).css(...).next().animate(...);

which can then be indented in a more appropriate manner, to help you visually understand what’s happening.


$(this)
    .css(...)
    .next()
    .animate(...);
13

Indented javascript in the long run is a better way to go even though it uses more lines of the file it makes it that much easier to for someone else to understand it. A couple of months ago i never coded like this and now i do as the structure is just so much easier to go through rather then everything been on one line and all packed together.

14

Excellent. I’ll reformat my code to be in the indented format as it is definitely much more readable like that.

15

This is the code so far:

$(document).ready(function(){

	// hide all coaster lists
	$('.park ul').hide();
	
	// animate the height of the ul with ease effect
    $('.park h3').click(function() {
		$(this)
			.css('text-align', ($(this).css('text-align') == 'center' ? 'left' : 'center'));
			.hover(function() {
				$(this).css('cursor', 'pointer');
			}, function() {
				$(this).css('cursor', 'auto');
			});
			.next()
			.animate({
				height: 'toggle'
			}, 'normal', 'easeOutBounce');
	});
	
});

Something must be wrong as the .park ul 's are not hiding upon refreshing the page.

I can’t seem to spot anything wrong, can you?

Neil

16

There looks to be a rogue semicolon at the end of the css line.

17

nope, no difference with that removed

18

Look at the end of the hover method

19

Ah right, Got it. Thanks

20

Hey guys. I’m back again with another issue:

Here’s my jQuery script:

$(document).ready(function(){

	// hide all coaster lists
	$('.park ul').hide();
	
	// animate the height of the ul with ease effect | move h3 to middle when open | change cursor to hand when hovered
    $('.park h3').click(function() {
		$(this)
			.css('text-align', ($(this).css('text-align') == 'center' ? 'left' : 'center'))
			.hover(function() {
				$(this).css('cursor', 'pointer');
			}, function() {
				$(this).css('cursor', 'auto');
			})
			.next()
			.animate({
				height: 'toggle'
			}, 'slow', 'easeOutBounce');
	});
	
	//Move list to left when coaster name is clicked and display photo
	$().click(function() {
		$('.park li').addClass('toList');
	});
	
});

and associated CSS:

.park h3
{
background: #000066;
padding: .1em .2em;
}

.park ul
{
list-style-type: none;
}

.park li
{
float: left;
display: inline;
text-align: center;
width: 33%;
border: 0px solid red;
height: 2em;
}

.park
{
clear: both;
}

.park ul
{

}

.toList
{
display: block;
}

Why don’t the li’s within .park move back to being a standard list when one of them is clicked on?