Orientation issue in android

[iosscripts]

When orientation is changed on android, the slider does not respond and resize properly.

[jamesryanbell]

I am also have this issue on the iPhone 4. It works fine when you start in landscape and change to portrait but when you start in portrait and rotate to landscape the slider doesn't resize

[iosscripts]

Take a look at the parent element that contains the outer slider block. What is the width/height of this element when the device is rotated? The slider's width/height will resize with respect to its parent element and not the window/body (unless the body is it's parent of course).

The reason for this is if you have a responsive layout and the slider doesn't span the full width of the window, it can still resize properly within the design.

If you are still experiencing issues, please give me a like to a demo.

[jamesryanbell]

The parent element doesn't have a fixed width as I wan't the slider to fit the screen responsively. Is there any way to set the parent to be 100% width and still have the slider responsively resize?

[iosscripts]

Sure. That should work. Without a demo I can't really see what the problem is though. Give me a link to something and I'll help you sort it out.

[jamesryanbell]

Sorry I can't provided a demo at the minute, I will try and get one sorted though. I have a height of 100% and a width of 100% which works fine on desktop's but as I mentioned before on iPhone and Android if I start out in portrait mode and then rotate to landscape mode the image doesn't resize. Going from landscape to portrait works fine!

[jamesryanbell]

Actually scrap that, managed to get it working on the iPhone but it isn't working on Android as per the original issue. Any news on how long this will be before it's fixed?

[iosscripts]

Awesome! any idea what went wrong?

Android has known issues... as far as I know there is a bug in the browser that causes the new width/height reported back following the resize/orientationchange event to be incorrect. I have tried a few things but I wasn't able to find a great way to approach this fix. Maybe ice cream sandwich will have it sorted out. My Galaxy S2 LTE doesn't have the update yet here in Canada :(.

[jamesryanbell]

I had width:100% set on the img, changed this to max-width: 100% and everything seems to be working now. Shame about the issues with Android, support for this is a must for this project so I'll probably have to look around for a different slider if that is the case. Real shame as this is a great bit of kit, hopefully I will be able to use it for something else in the future :)

[iosscripts]

Well you can always try calling the destroy method, and reinitialize the slider after device rotation with a delay on it to catch the new width/height.

Since the Android issue feels like a race condition, something like this might work (pseudo-code):

$(window).bind(orientationchage, function() { $('.iosSlider').iosSlider('destroy'); setTimeout(function() { $('.iosSlider').iosSlider(); }, 200); });

I'd hate to see you go! :( lol.

[ColColonCleaner]

Just an FYI, somthing i had to use in my version. For debug on desktop browsers, the orientationchange event is not supported, so this code works better.

//check if the browser supports orientation change
    var supportsOrientationChange = "onorientationchange" in window,
    //if it does, use orientation change, otherwise use resize
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
    //add listener to check for rotation or resize
    window.addEventListener(orientationEvent, function() {
        //reboot sliders with delay you mentioned before
    }, false);

[zaheerabbass]

Any update for this issue. Its still issue on orientation change.

[iosscripts]

There is a browser bug in the default browser that is released with android. There isnt anything i can do out wait for a fix. Firefox and opera are working for android though.

What is your android version? Browser?

Sent from Samsung Mobile

-------- Original message -------- Subject: Re: [iosSlider] Orientation issue in android (#9) From: zaheerabbass reply@reply.github.com To: Marc Whitbread contact@iosscripts.com CC:

Any update for this issue. Its still issue on orientation change.

---

Reply to this email directly or view it on GitHub: https://github.com/iosscripts/iosSlider/issues/9#issuecomment-7520820

[DerekHutchinson]

Another poor mans solution that worked for me was this. I combined cobeliga's method with a simple agent detection and refresh. So if they are using androids and they resize the page it just refreshes and that fixed the issue for me. (might not be the most elegant solution tho :-/)

    //get the agent name
    var ua = navigator.userAgent.toLowerCase();
    //check to see if it's an android.
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    //if so apply refresh method
    if(isAndroid) {
        //check if the browser supports orientation change
        var supportsOrientationChange = "onorientationchange" in window,
        //if it does, use orientation change, otherwise use resize
        orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
        //add listener to check for rotation or resize
        window.addEventListener(orientationEvent, function() {
            location.reload(); 
            //alert("test");
        }, false);
    }

[jchinxyz]

I was able to solve this issue by just calling the slider's update function after an arbitrary timeout:

(window).bind('orientationchange load', function(event) { setTimeout(function() {
$('.iosSlider').iosSlider('update'); }, 1000);

});

[marcwhitbread]

@jchinxyz Yep. That works! I made the same sort of 'pseudo-code' recommendation above. But yours is cleaner. Kind of a drag that this browser bug still exists though.

[tygas]

For my jquery mobile project worked:

window.onresize = function() { $('.iosSlider').iosSlider('destroy'); $('.iosSlider').iosSlider(); };