Slider with different page heights

[abnorm]

Hey guys, i've got a problem. I used the swipe.js for a magazine. But, my problem is, i've got 3 different pages in "mySwipe". For example, page1 get a height of 1000px, page2 get a height of 2000px and page 3 get a height of 3000px. So, the slider is now 3000px height, but the content from page1 is only 1000px height. So i've 2000px without content on page1.

What is the best solution for this problem?

Thanks for your answers!

BR Adrian

[noisik]

Try setting the height on the slider main div, like this > #slider {height: 1000px;}

[lamnt]

@noisik : I did try to set height for each contents, but it's doesn't work.

[abnorm]

Hey guys, i've a other solution. I've tryed it with jquery to solve this problem. Try this:

body: || ||div id='mySwipe' class='swipe" || div style="height:1000px;" class='swipe-wrap'> || div b id="seite0" style="height:1000px;">1 /b /div || div b id="seite1" style="height:2000px;">2/b /div || div b id="seite2" style="height:3000px;">3/b /div || /div ||/div

and JS/jquery:

var elem = document.getElementById('mySwipe');		window.mySwipe = Swipe(elem, {		// startSlide: 4,		// auto: 3000,		// continuous: true,		// disableScroll: true,		// stopPropagation: true,		callback: function(index, element) {		var wrapper = $('.swipe-wrap');		var posi = mySwipe.getPos();		var hoehe = $('#seite'+posi).height();
if (posi == 0) {
wrapper.height(hoehe);}
else {
wrapper.height(hoehe);
};
},
});

On every slide, we'll get the slide-index. If the var posi is 0, the script should take the height from

. And if the posi isn't 0, they take the height from this div, too.

So, it works. It isn't the beautifull solution, i know.. ;-)

[tomatic]

@abnorm: Thanks for that solution! Even if it's not pretty, it does its job :)

The only thing I don't quite understand is why you need that if/else in there. You're doing the same thing in either branch...

[abnorm]

Yes, you're right... Is the quick&dirty-testing solution ;-)

Just delete the if/else loop... should work without them, too :-)

var elem = document.getElementById('mySwipe'); window.mySwipe = Swipe(elem, { // startSlide: 4, // auto: 3000, // continuous: true, // disableScroll: true, // stopPropagation: true, callback: function(index, element) { var wrapper = $('.swipe-wrap'); var posi = mySwipe.getPos(); var hoehe = $('#seite'+posi).height();

    wrapper.height(hoehe);

     },

// transitionEnd: function(index, element) {

    // optional a scrollTo...
//window.scrollTo(0,1);  

} });

A demo is located here: http://designerholic.de/swipe/index.html

I'll try to find a way, to get the height of the div-slides dynamically.

[tomatic]

Any idea how to handle device orientation changes on iOS? If I bind a function to the orientationchange event, the width and height of the divs are always 768 or 1024, respectively, instead of their actual height. It appears the event fires before the page layout and resulting new div sizes are recalculated.

[maxmarkus]

@tomatic: I have done a workaround which works well for all of my devices. workaround:

1. create divs and show/hide them with mediaqueries
2. javascript: have a window.resize and a function to watch about "resize" or orientation change,whatever you call it
3. let it call a function to do something if the target changes

Here's the code for your further ideas .. http://jsfiddle.net/YtSD4/

Watch out, its not testable in jsfiddle, just for better viewing. And untested since i've had to grab it out of my code, but it should already work like this (mabye some typo left).

Greets, Max