Search jQuery

jQuery Forum

kfk1988

Correct use of jQuery? (jsFiddle link included)

in Using jQuery • 11 years ago

I am new to JavaScript and the jQuery library. I've seen a lot of cool sites that use sliding panels to display content. I wrote up a quick, simple example in jsFiddle and was curious if I am on the right track. Is this an appropriate use? Is there a better way? Am I missing anything important? Thanks so much for you help.

This shows the HTML / CSS / jQuery and a preview in your browser:

http://jsfiddle.net/WZqH8/2/

Replies(3)

kbwood.au

Re: Correct use of jQuery? (jsFiddle link included)

11 years ago

It looks fine. You could add a panel class to your display divs and make it more generic like this (which would make it easier when adding new panels):

$(function() { // Shorthand for $(document).ready(function() {
$('#nav li').click(function() { // Click any li inside #nav
var id = this.id.replace(/.*(\d+)$/, '$1'); // Retrieve its numeric ID
$('#nav li').removeClass('highlighted'); // Remove all highlighted flags
$(this).addClass('highlighted'); // And set this one
$('div.panel:visible').slideUp(200); // Hide any visible panel
$('#panel-' + id).delay(400).slideDown(200); // And show the selected one
});
});

youri.bok

Re: Correct use of jQuery? (jsFiddle link included)

11 years ago

Note that the text in the panels also slides a bit. This is because jquery has to animate not only the element height, but also the padding, border, and margin. Else it would have to jump at the end of the close animation.

In some cases this is not what you want, or it just doesn't look nice. If that is the case then you can solve this by adding a div around the panel you want to slide, make sure that this div has a height that is equal to the outerheight of the panel (so panel height plus padding, border, margin), and then make jquery slide that div instead of the panel.

Now jquery doesn't have any padding, border, or margin to animate, just a height, so the text will stay firmly on its place during the animation.

kfk1988

Re: Correct use of jQuery? (jsFiddle link included)

11 years ago

Thanks so much guys. This was the exact kind of feedback I was looking for. I really appreciate it!

Top Reply

Response title

Attachments

jQuery Forum

Correct use of jQuery? (jsFiddle link included)

Replies(3)

Re: Correct use of jQuery? (jsFiddle link included)

Re: Correct use of jQuery? (jsFiddle link included)

Re: Correct use of jQuery? (jsFiddle link included)

Statistics

Tags

Actions