Is it possible to call requestAnimationFrame on an iPhone (iOS 5.1)? As far as I've been able to figure out, the mobile Safari simply doesn't this method, with or without vendor prefix.
It does not look like it does. Here is a link to a set of screenshots I took of a jsfiddle I wrote.
Screenshot link
http://crossbrowsertesting.com/users/34762/screenshots/z7e91b18ffb5e81e5079/public
jsfiddle link
http://jsfiddle.net/fpmeh/
On the 5.1 IOS screenshot you will see the text is set to nothing in the jsfiddle. On newer browsers from that same text is set to one of the different available methods.
This is fully supported from iOS 7 onwards.
http://caniuse.com/#feat=requestanimationframe
Related
I'm pretty new to web-coding and in my attempt to create jQuery based menu bars complete with dropdowns I have stumbled upon some vast differences between broswers. Below you can see that while FF and Safari are the same, IE is actually behaving and Opera is ok-ish, Chrome gets it totally wrong. As far as I can tell I have all the latest versions.
I removed the code from here and pasted it in: (doesn't want to let me link properly) so: jsfiddle.net/2hCR2/
Just in case, support for older versions of IE (6-7) is not required.
Right now I'm mostly concerned with the positioning aspect. Any assistance is much appreciated!
****EDIT:** After continuing to play with the chrome developer tools I realized that when I manually set the 1st list (pants/t-shirt) to display:block it displays as expected (exactly like FF and Safari in the image) so it appears that this is more of a javascript/jQuery issue not updating the DOM correctly(?). I also noticed that when I put the code is JSFiddle and ran the script in Chrome it produced the same error, but when I ran JSFiddle in FF (exact same fiddle link) it renders correctly.
It does not happen in Chrome Canary (version 24) but it does in stable (version 22). Apparently it is a bug which has been fixed.
You can either wait a month or two so that all Chrome users get the fix, or just use .show() instead of .show(0).
Is html5 drag and drop broken on safari browser for windows ? If so, are there any work arounds ?
I'm using Safari 5.1.2 on Windows 7 and the drop targets always show up as non droppable. Tried this on 2 different windows 7 computers with clean install and latest setup.
Tried with both this demo and my own code which works on every other latest browser.
http://html5demos.com/drag
Indeed D&D for Safari doesn't work.
Kind of work around for Safari:
Put the logic in the 'dragend' event of the draggable object
Instead in the 'drop' event of the dropping on object.
Yes. After a lot of self-doubt, experimentation, and research, I can say that it is definitely broken for me too (Safari 5.1.7 on Windows) as at today: 15 Nov 2012. This has been quite confusing and distressing!
Hope Apple comes to the party soon.
From http://html5doctor.com/native-drag-and-drop/#dragging_anything
add this:
[draggable=true] {
-khtml-user-drag: element;
}
Non-HTML5 drag and drop is available via jQuery UI:
http://jqueryui.com/demos/draggable/
You can build a download with only that specific function if you want it to be lightweight.
You can use Modernizr to detect whether it's supported and fall back on jQuery if needbe:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}
From http://www.html5rocks.com/en/tutorials/dnd/basics/
I'm working on creating a FPS-type game for the browser using WebGL/Javascript and have been unable to successfully implement the very recently added "Mouse Lock" feature to Chrome and Firefox.
I have tried the example code from all three of these sources to no avail:
http://code.google.com/p/chromium/issues/detail?id=72754
http://blog.sethladd.com/2011/09/mouse-lock-for-html5-fps-games.html
http://jsfiddle.net/jdias/3dqBL/
So, that leads me to my question. What is the correct way to lock the mouse in the latest versions of Chrome and Firefox (Minefield)? I would really love to get this working!
Thanks in advance.
Mouselock actually hasn't been implemented in Firefox, but there is an experimental build located at: http://people.mozilla.com/~tmielczarek/mouselock+gamepad/ . With google Chrome, get the latest version and go into about:flags and check --enable-pointer-lock.
I hope that helps.
I am trying to create an interface using jQuery but having some difficulty making it work on different browsers although, what I am linking now should work on most of the Windows browsers.
See here: http://122.173.254.198/picasa_hover_experiment.htm
(Please note the problem part is programmed minimal and solution expected on same)
The problem is with images 3 and 8 which I want to focus on mouseover and show in between as other images. It fails to work on either Opera or IE 6 as I am testing. Would somebody provide me a cross-browser and working solution to it?
Try updating your jQuery to 1.4.2...
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
I have the following javascript being called to request a focus when page is loaded.
This code works 100% OK with Firefox and IE7, but Chrome and Safari do not seem to move the focus at all. How to make it work with all browsers?
document.getElementById("MyFlashFile").focus();
It took me hours searching the Internet, but finally I found a solution that works on the lastest versions of IE, Firefox, Chrome and Safari.
The following code solves the problem for good:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script>
function setFocusOnFlash() {
var f=swfobject.getObjectById('myFlashObjectId');
if (f) { f.tabIndex = 0; f.focus(); }
}
</script>
</head>
<body onload="setFocusOnFlash()">
This example assumes the flash is embedded using the SWFObject library. If not, you should set the f variable to the Object or Embed tag which holds the flash movie.
Edited on 5 May 2012: Well, unfortunately it seems that the tabIndex workaround no longer works for all combinations of browser (Chrome/Safari) and operating system.
For instance, currently Chrome 18 on Windows fails.
See the link below, provided by Christian Junk, to get the status of the problem's resolution.
Unfortunately there is no way to ensure that you can set focus to a flash file that works in all browsers. IE and Firefox have solved this problem (for the most part), but Chrome and Safari are both based off of Webkit which does not have a solution.
If you ever notice on YouTube or other video / flash site that the first thing you see is something to entice you to click on the player, that is due to this problem.
One developer came up with a clever workaround, but it does involve adding some ActionScript to your flash file, this can be a pain in the ass if you are building a generic player.
Gary Bishop: Fixing Firefox Flash Foolishness
Another sort of solution is to set your wmode to opaque. I've heard this works in some situations, but will screw up cursors in text areas. I haven't had much luck with this either, but you can give it a shot.
You can find more information about the no focus bug on bugzilla.
It seems that there is a bug in Chrome:
"window.document.getElementById('swfID').focus() not working for flash objects"
http://code.google.com/p/chromium/issues/detail?id=27868
I've tried to find a workaround but I was not able to find one ;(
Regards,
Christian
In addition to Cláudio Silva answer , you need to set wmode="opaque"
Ensure this code is being called after the entire page has been rendered. It's probably being called above the HTML it refers to, so the element will not exist yet.
Various JavaScript frameworks have utilities to tell you when the DOM is ready.