1

I'm attempting to detect whether a user is viewing a website from an Apple device, and if they are, make the div "carriage-promo" behave in a certain way.

Ordinarily this div has transitions and animate to take the height from 0px to 40px when a user scrolls down the page, this doesn't function very well on touch devices so I would like it to be static.

Consider:

    $(document).ready(function(){
        var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
        var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
        var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");

        if(isiPhone > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
        if(isiPad > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
        if(isiPod > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
    });

I've only ever used CSS3 media queries for conditional styling behavior in the past, but this occasion calls for jQuery/JS.

Any suggestions? I'm expecting either a tiny syntax error, or to have completely misunderstood how this works!

Kara
  • 5,650
  • 15
  • 48
  • 55
Myles
  • 916
  • 2
  • 9
  • 29
  • 1
    your answer is here can you please check this [http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery][1] [1]: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery – Shakti Patel Sep 04 '13 at 08:27
  • Thanks, trying these now. They don't seem to be working though! I'm probably causing some kind of clash somewhere. – Myles Sep 04 '13 at 08:39
  • 2
    Do you realize that the majority of touch devices in the world are not from Apple (way more Android devices than Apple devices in the world) so you really ought not be relying on detecting Apple to correspond to touch. You probably should detect the actual condition that makes you want to change the behavior (either screen size or the presence of a touch interface or something like that). Detecting specific devices or manufacturers is usually the wrong approach. – jfriend00 Sep 04 '13 at 08:45
  • I am fully aware, since I own an Android Tablet and Mobile Phone. This was just a starting point, but thanks - you do make sense. :p – Myles Sep 04 '13 at 08:49

1 Answers1

1

try to add this line on ready:

window.scrollBy(0, 1);

looks like it helps on ios > 5
another way to use position: absolute and set bottom position scrollTop + windowHeight - promoHeight

Artem Gorlachev
  • 517
  • 4
  • 8