thebird / Swipe

Swipe is the most accurate touch slider.
MIT License
6.79k stars 1.69k forks source link

jquery mobile and dynamic content #250

Open fgiraud opened 11 years ago

fgiraud commented 11 years ago

Hi! I'm trying to use swipe with jquery mobile 1.2.0 and dynamic content. But i reproduce the offset problem : div's are showing up stacked on top of each other, below the 'slider'. To show it, you can see the brad birdsall's jsFiddle (http://fiddle.jshell.net/bradbirdsall/PT5d3/) and replace the pageshow function :

ilhan88 commented 11 years ago

I thank you from the bottom of my heart. I was struggling with this "display bug" for weeks.

This fixed it for me:

I'm using the swipe files by bradbirdsall in combination with the: jquery.mobile-1.3.0.js and jquery-1.9.1.js libraries.

I've placed the following code: $(document).delegate("#page_id", "pageshow", function() { before the setup script which bradbirdsall has placed underneath the index page. This runs the swipe function when the page is showed up.

See an example of how I use the code underneath:

/* Slider setup [inname_uitgave page]
*/

var elem = document.getElementById('slider');

// runs the script when page is showed up
$(document).delegate("#inname_uitgave", "pageshow", function() {

window.slider = Swipe(elem, {
  // startSlide: 4,
  // speed: 400,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  callback: function(index, element) {
    $('.index_slider').html(index);

    }

    },
  // transitionEnd: function(index, element) {}
});

});

TheHackerDev commented 11 years ago

I'm still not sure how you managed to get this to work, @ilhan88. What did you mean with the "#inname_uitgave" portion of the code? Would you be able to post your solution to jsfiddle?

EDIT: I had "position: relative" in my CSS file for the swipe class (".swipe") for some reason. I took that out and it worked. The slider is still offset to the left a little bit, but it works now. I just copied over the "Swipe 2 required styles" portion of the CSS on @bradbirdsall's jsfiddle (http://fiddle.jshell.net/bradbirdsall/PT5d3/) to replace my own "Swipe 2 required styles" and it worked. Not sure why there was a discrepancy between the two though.