jQuery Mobile; twentytwenty plugin will only show up when the browser window is resized

Question

I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...

$(window).load(function() {
  $(".twentytwenty-container").twentytwenty();
});

Maybe? Much appreciated.

Answer 1

It's a little bug, but fixed by add code. Add this to jquery.twentytwenty.js file:

$(window).load(function() {
   $(window).trigger("resize.twentytwenty");
});

  $.fn.twentytwenty = function(options) {
     var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);

    // >>>>> HERE ADD CODE <<<<<<

     return this.each(function() {

//.......

source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2