I have an image carousel on a page on my site (using slidesjs and jQuery). It works fine on all desktop browsers, and even on the iPhone if the phone is on wireless. When the iPhone is connecting via 3G or GPRS, the image area of the carousel doesn't load and there's just blank white space.
However, I believe that the size of the images is stopping things from loading.
So what I'd like to do is detect whether or not the user is using mobile Safari, and if so, just show a single image in this space.
To do that means changing the HTML that is output for the carousel and just setting it to a single image source.
Is it possible to do this with javascript somehow ?
It is quite easy to do. Full explanation is here: http://www.quirksmode.org/js/detect.html.
Just look for "iPhone" in navigator.userAgent string.
Related
I'm having an issue where an animaed png that is encoded to only play once, plays twice on IOS. I am swapping out a blank PNG to the animated PNG when it gets within viewport. Once in viewport since its on scroll it checks to see if the src of the image is the animated or static. If its the static it doesn't do a swap.
On desktop its perfect. But on mobile the animation plays twice. I thought it was my js but it turns out the png itself is acting differently in IOS.
I checked out the direct url to the animation and it turns out even though the PNG is set to play only once on IOS it plays twice.
The PNG in quesiton is used here: https://www.xeroproject.com/wtf/
And the direct link is here: https://www.xeroproject.com/wtf/wp-content/themes/wtf_big5/images/arrow_animate.png
WHen you scroll down to the map an arrow animates and map markers fall in. Again, Desktop perfect but on ios it animates twice. Same goes for going to the direct link.
Is there a different way to encode it I can use? or is this something I can't control in IOS?
I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.
I've got many reports from Android visitors to my blog said that when they are browsing any post from my blog, the images inside the posts get re-sized gradually to be hidden completely (width and height like be zeros, just the shadow of the image is visible).
I've tested that and I confirm the issue in android browser and Facebook browser as well, but Google Chrome shows everything OK.
I don't know what is causing this problem, JavaScript or CSS problem? I'm using a bootstrap css code for images for responsiveness on mobile devices.
Seems this line did the problem:
img {box-sizing:border-box};
I removed it and it works in Android browser!
I am starting out in html5 and javascript, and i've seen this trick done in a number of websites. Is it possible to show in a website a picture of a iphone or android device,and within that device show content from your iphone or android app, with a time interval(that is show 7 seven images in a time reel). I've seen this done with a axure inline frame, but is it possible to do it with javascript, css or html5?
Just make the 'content' a fixed size and put an image of an iPhone with a transparent screen on top of that.
I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.
OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.