CODEWITHSUNDEEP
jqueryslide
Andrew
Andrew

Reputation: 1121

Partial Height Slider

I am working on a slider for my portfolio that will show some of the piece and then show the rest of it when you expand it. You can see a preview of it here: http://staging.pautlerdesign.com/portfolio/index.php. I am using the following code to get the desired effect: 

  if ($(window).width()>768) {
    var sliderHeight = "180px";
    $('.slider').each(function () {
      var current = $(this);
      var height = $(current).height();
      current.attr("box_h", height);
    });

    $('.slider').css("height", sliderHeight);
    $(".slider_menu").html('<a href="javascript:void(0);" class="expand"><i class="ss-plus"></i></a>');
    $(".slider_menu a").click(function() {
      openSlider($(this).parent().prev("ul.slider"), $(this).parent());
      return false;
    });
  }

  function openSlider(obj, slideMenu) {
      var open_height = $(obj).attr("box_h") + "px";
      $(obj).animate({
          "height": open_height
      }, {
          duration: "slow"
      });
      $(slideMenu).html('<a href="javascript:void(0);" class="expand"><i class="ss-hyphen"></i></a>');
      $(slideMenu).children("a").click(function() {
          closeSlider(obj, slideMenu);
      });
      return false;
  }

  function closeSlider(obj, slideMenu) {
      $(obj).animate({
          "height": sliderHeight
      }, {
          duration: "slow"
      });
      $(slideMenu).html('<a href="javascript:void(0);" class="expand"><i class="ss-plus"></i></a>');
      $(slideMenu).children("a").click(function() {
          openSlider(obj, slideMenu);
      });
      return false;
  }

For some reason the part at the top when it assigns "box_h" to the ul is not working exactly right. It is working great for the first few items, but as you get to the bottom, it is applying a height of 22, 44, or 66. I have no idea why it would be working for some of the pieces, but not for the others. Any ideas? I presume it is a very minor thing, but I can't figure it out for the life of me.

Upvotes: 0

Views: 323

Answers (1)

nspady
nspady

Reputation: 64

Looks like you need to wrap the code in a:

$(window).load( function() {
  //...
})

instead of:

$( function() {
  //...
});

Since that will delay the code execution until the DOM and images on the page have loaded. Currently the block of Javascript you listed is running when only the DOM is guaranteed to be loaded, items later in the page will have inaccurate heights, since images may not have loaded yet and expanded the box.

Upvotes: 1

Related Questions