ansaurus

Question

Answer 1

+1 A:

The smoothness or lackthereof is not the fault of your code. Some browsers are slow. It's just not something that can be fixed from JS.

You can make your code shorter but I don't think there will be any material performance improvements.

$('#details-speakers').click(function() {
    $('#home, #sessions-content, #cases-content').slideUp('slow');
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#speakers-content').slideDown('slow', function() {
        $('#details-speakers').addClass('selected');
        //Remove other classes
        $('#details-sessions, #details-cases, #details-workshops').removeClass('selected');
  });
});

$('#details-sessions').click(function() {
    $('#home, #speakers-content, #cases-content').slideUp('slow');
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#sessions-content').slideDown('slow', function() {
    $('#details-sessions').addClass('selected');
        //Remove other classes
        $('#details-speakers, #details-cases, #details-workshops').removeClass('selected');
  });
});

$('#details-cases').click(function() {
    $('#home, #speakers-content, #sessions-content').slideUp('slow');
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#cases-content').slideDown('slow', function() {
    $('#details-cases').addClass('selected');
        //Remove other classes
        $('#details-speakers, #details-sessions, #details-workshops').removeClass('selected');
  });
});

Mark 2010-06-23 21:33:58

You're still copy and pasting essentially the same code two times.

Peter Ajtai 2010-06-23 22:01:12

I only intended to answer the question about the smoothness, and if this question wasn't about performance I would've refactored the code as well. The other answers are definitely more elegant and better in general, but the long way is still marginally faster.

Mark 2010-06-23 22:08:11

Answer 2

A:

If it's a cleaner approach you're looking for how about something like this:

$(".my4Divs").click(function() {
    var self = this;
    $(".my4Divs").each(function() {
       if(self == this) {
          $(self).addClass("selected");
          ...
          ...
          return;
       }
       $(this).removeClass("selected");
       ...
       ...
    });
});

ondesertverge 2010-06-23 21:39:43

Answer 3

+2 A:

Ctrl+C and Ctrl+V programming leads straight to hell... I think you can do something like that:

var divs = $('#details-speakers, #details-sessions, #details-cases');

divs.click(function () {
    divs.not(this).add('#home').slideUp('slow');
    // animation with home and body
    $(this).slideDown('slow', function () {
        $(this).addClass('selected');
        divs.not(this).removeClass('selected');
    });
}

And performance depends on a lot of thing (firebug is on, divs' content, divs' style, half-transparent backgrounds etc.) -- not just poor javascript.

petraszd 2010-06-23 21:46:39

I don't think this is correct/the same thing as the question.

Mark 2010-06-23 22:12:04

Haven't tested your code, but it does look like you're missing a ");" at the very end.

Peter Ajtai 2010-06-23 22:14:27

It's also not $(this).slideDown(). You need to create 2 sets of selections, one for the content boxes and another for the links.

Mark 2010-06-23 22:16:23

I like the use of divs.not(this)

Peter Ajtai 2010-06-23 22:21:13

ansaurus

tags:

views:

answers:

Show/Hide div on click using jQuery

related questions