0

I am currently making a mobile site that has a rotating slideshow. I am using the latest version of JQuery Mobile (1.9.1) and Brad Birdsall's swipe.js.

The problem I am having is that in order to view the first slide, which has #advertising-consumer in it, I must drag the page down by about 10-20px in order for it to load. Once I perform that it works perfectly, is there a known bug with this, or a script I can use to simulate this?

here is some code in case you need it.

html
body
<div data-role="page" data-theme="a" id="port">
<div data-role="header" class="header-index" data-position="inline"> <a href="#index" data-rel="back" class="ui-btn-left ui-btn-back" data-icon="arrow-l">Back</a>
<div class="logo-interior"><a href="index.php"><img src="images/spacer.png" width="75" height="40" alt="logo"></a></div>
</div>
<div data-role="content" data-theme="a" style="width:320px; margin-left:0px; margin-right:0px;">
<div id='mySwipe' style='max-width:320px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<div class="portfolio-image"  id="advertising-consumer">
<p class="portfolio-subhead-orange">Advertising</p>
</div>
<p class="portfolio-body">Text goes here</p>
</div>
<div>
<div class="portfolio-image"  id="animation">
<p class="portfolio-subhead-orange">Animation & Video</p>
</div>
<p class="portfolio-body">Text goes here</p>
</div>
</div>
</div>
<script src='js/swipe.js'></script> 
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 0,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});
</script>
</body>
</html>

Any help would be much appreciated, and I apologize for wasting time if I made a bone-head mistake.

Sam Hartung
  • 1
  • 1
  • 4
    try adding js library in _head_ and the code inside `$(document).on('pageshow', function () { //code });` – Omar Aug 15 '13 at 19:46
  • 1
    @Omar: nice answer ! Why dont you put this in answer. So It will get some up votes . also what is the impact of using pageshow event instead of document.ready ? – V-Xtreme Feb 24 '14 at 12:34
  • 1
    @V-Xtreme hi, `.ready()` fires once per document and before any jQM page events. Thus, you need to initialize _Swiper_ on `pageshow` when page is rendered and shown. I'll explain more in a separate answer. – Omar Feb 24 '14 at 12:48

0 Answers0