153 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
wpminima says

Hello guys!

We are currently working on our new project. We use a jquery script to hide and show a sidebar with widgets (it slides in from right offscreen to left onscreen). We tried to use css methods to achieve 100% height, but that didn’t work. We then used a jquery code to achieve 100% height:

$("#sidebar-inside").height($(document).height());

This code works perfectly but there is an issue when we have a post with a slider on our blog page. The flexslider starts off with 0 height, and when it loads it has the height of the images ofcourse. The issue is that that height isn’t added to the sidebar since the jquery script to get 100% height was already loaded..

How do we go about and fix this issue? We could add a fixed height to the flexslider but this isn’t really a great, user friendly option.. We’ve already tried to que the sidebar script later then the flexsliders but this doesn’t seem to fix it!

Thanks! ;)

169 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United Kingdom
+2 more
mikedidthis says

You will need to call the script either on window.load() or use something like imagesloaded: https://github.com/desandro/imagesloaded to call the script once the images for the slider have been loaded.

161 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Located in Europe
  • Has been part of the Envato Community for over 1 year
+1 more
themebros says

1) Put the height equalization code in a function.

2) Call it on document ready, window load and inside of the slider callback for when the slider loads. Not sure which plugin you use for the slider so check the callbacks in the documentation.

Update

Or give this a go…

#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
}
153 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
wpminima says

Cheers mike! :) that will probably do the trick!

@themebros: thanks for the suggestion! I’ll try that for sure :)

We’ll report back when we fixed it! ;)

169 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United Kingdom
+2 more
mikedidthis says

2) Call it on document ready, window load and inside of the slider callback for when the slider loads. Not sure which plugin you use for the slider so check the callbacks in the documentation.

^ That would work a treat, and no need for extra stuff!

153 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
wpminima says

First: how could we add a document ready and window load into one? We use flexslider so we’ll plave it inside the start: callback.

Another question though: how can we assure that it will be loaded if the flexslider (gallery post) isn’t used?

Thanks for all the help guys, we really appreciate it! :)

161 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Located in Europe
  • Has been part of the Envato Community for over 1 year
+1 more
themebros says
function equal_height(){
    //the code
}

jQuery(document).ready(function($){

    // other jQuery code (NO flexslider)

    equal_height();

});

jQuery(window).load(function(){

    equal_height();

    // the flexslider code with a callback to equal_height();

});
153 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
wpminima says

Thank you so much Themebros and mike! We got it to work! :)

by
by
by
by
by
by