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.
Related
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 have an animation made in Adobe Edge, featuring an animated body with an overlay of a face, pulled via an URL parameter.
It works fine on web. However, on IOS a video can only be played full screen - and then the image overlay obviously doesn't show.
Does anyone know a solution of how I could make this work on IOS? Either some way to convert the video+overlay to a merged video, svg animation or something else? Or just play the video without fullscreen - but I don't think this is possible.
On iOS mobile devices videos played in Safari go full screen with no other elements available. There is no way to stop this behaviour in Safari. Videos can be made to play inline within a native app, but not Safari unfortunately.
on iOS tablet devices, videos can be played inline within Safari.
However,you mentioned that you've created the animation in Adobe Edge Animate? I'd be tempted to publish your animation as a web animation and use that where your video would be.
I am working on an iPad web application using standard HTML/CSS/JS. Eventually it will be wrapped in Phonegap, but for the time being it will live on the web.
The application delivers HTML5 content from Scribd (converted PDFs) via an iFrame embed. Due to the different orientations of the iPad, and readability of the content, it is necessary to have the content of the iFrame larger than the embedded iFrame.
The issue I've run into is that Apple in their infinite 'wisdom' have taken out the ability to scroll iFrames in iOS 4.3+ (both using 1 and 2 finger scrolls).
I've implemented iScroll 4 to get around this however it only seems to work if the user touches outside of the iFrame, even if the whole iFrame is inside the scrolling div.
Has anybody found a workaround / solution for this? Can I disable the iFrame scrolling somehow and give full control to iScroll?
Any help would be greatly appreciated, been hacking at this for days...
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.