0

I'm trying to implement a div slider into a standard iScroll HTML page, please see the below links:

With iScroll (slide not working properly): http://utvecklingspunkten.se/iscroll.html

Without iScroll (slide working): http://utvecklingspunkten.se/iscroll2.html

For some reason, iScroll hides the content (not the div containing it!) in the second div slide. The div containing the content is there allright and it's corretly possitioned (have a look in the console), but the content is simply hidden by iScroll. When removing all references to iScroll, as in iscroll2.html, everything works as it should.

Wrapper containing both slides:

#wrapper {
position:absolute; z-index:1;
top:45px; bottom:2px; left:0;
background:#aaa;
-webkit-transition-property: left;
-webkit-transition-duration: 400ms;
display:block !important;

}

Each sliding element:

.additional-block {
position: absolute;
display:block !important;
}

Does anyone know how I can make iScroll and the slider to work together, and not interfere? Hopefully, there's only a line of code or two in iscroll.js that need to be changed. Likewise, an iScroll div (like the artificial scrollbar) overlaping my second slide div is another possible reason. Pointing this out for me would be greatly appreciated. Thanks!

Jonathan
  • 2,953
  • 3
  • 26
  • 37

1 Answers1

0

Try using jQuery Slider, you can style it inside out. Plus you have there already mouse dragging and scrolling ( which actually works ).

Seb
  • 100
  • 6
  • As this is is part of an iPhone webb app, simple and very basic CSS-animations are preferable. I've tried both and come to the conclusion that CSS-animations like this one runs more smoothly on the iPhone as compared to jQuery. Therefor, this is unfortunately not an option for me. So does anyone know how to fix the actual problem stated above? – Jonathan May 22 '12 at 16:27