I know that throwing the webkit prefix at the start works for Chrome (as object.style.webkitAnimationDuration), but I have yet to find any way of making this work with the Opera prefix, and I'm not sure how effective the Firefox prefix is either. W3Schools say that all the major browsers support the duration property, so what do I do?
Jsfiddle:
http://jsfiddle.net/4C7Fp/
Javascript and Jquery suggestions accepted :)
Maybe you can use this plugin for that. (Prefixfree Plugin) It has also jquery plugin to set/get css without prefixes.
Btw why didnt you use it in css? It can be better and faster than javascript.
Related
Placeholders has always been an issue in IE8 or IE9. As a workaround for this,
I used jQuery plugin that enables placeholder to browsers who does not support this. Since my jQuery is 1.5, I used v1.8.7 of that plugin because $.valHooks is undefined. But what happened is that it seemed didn't work since my placeholders doesn't behave properly in IE8/IE9.
I have already included the jQuery.placeholder.js in my project and since it was stated there that to invoke this is you use this, $('input, textarea').placeholder();. Still i did not work. Are there other ways needed to do before using the plugin.
My placeholder issues are during submission of form and also when replacing the placeholder of 1 textbox.
Your help is greatly appreciated. ;)
You could try using http://modernizr.com
It's a plugin which detects features the user's browser supports. If it's not supported, a jQuery plugin makes it happen!
For starters, I don't know js. What I do know, I've pick pocketed from other people's work. I know that's lame so I'm trying to learn. I am trying to polyfill my nav that use css transitions with Modernizr. I've got the <script> in the HTML that calls for Modernizr. What I don't know is what js to use to call the correct load function - I think. I've looked all over the internet for tutorials, but they all assume that I already know js so they are no help.
This is my site in progress. What I'm working on is the navigation. It works correctly in Firefox. I'm trying to make it work in IE.
Firstly, there's no need to apologise for learning from others. This is how we all learn.
Modernizr is great for helping you deal with older browsers. But the important thing to know about Modernizr is that it doesn't actually do any polyfills itself; it simply tells you whether a polyfill is needed for any given feature. You still need to provide that polyfill code.
In your case, you're referencing a file called polyfillfortransition.js, but this doesn't seem to exist on your site. This is why nothing is working: you're detecting that the polyfill needed, but you're not actually polyfilling it.
So you need a polyfill script for it. I don't actually know of one that will suit, and a quick search didn't turn one up, but hopefully this will help point you in the right direction.
I used css 3, html 5 in a web page and I want to use Modernizr to show some html5 attributes and some css 3 such as border-radius on old browsers,
Does Modernizr help in this and how run it.
Modernizr will only help you detect certain features, so you'll have to add the JS fixes yourself.
In case you want to go for a pre-packaged solution this might be of help: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
In your case this might be the way to go: http://css3pie.com/
Modernizr doesn’t add missing functionality to older browsers other than the HTML5 Shiv so that you can use and style the new semantic elements from HTML5. The other answers already show some polyfill options, however, I recommend you reconsider adding purely-visual effects like border-radius to older browsers that way. Polyfills slow the older browsers down (sometimes very significantly) and make the overall experience much worse for those users.
You can use modernizr to detect what's available, e.g. rounded corners. If it's not, you can degrade gracefully via the modernizr API, or even use a plug-in to smoke and mirrors the feature.
<script type="text/javascript">
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',
callback: function () {
$('article').corner();
$('figure').corner();
}
});
</script>
Code snippet taken from http://blogs.msdn.com/b/jennifer/archive/2011/08/04/html5-part-4-using-html5-while-retaining-support-for-older-browsers.aspx
Modernizr does not help with CSS3. (You could use Selectivizr for this, but it has some cross-domain issues you'll want to read about.)
Modernizr does have IEPP for HTML5 shim support and it comes with YepNope.js as Modernizr.load, which is a great polyfills loader mechanism so you can load your own support for older browsers. That will help you drop in support for attributes like pattern and placeholder without overloading browsers that have native support for it.
Modernizr internally uses the same JS code that you would use otherwise..
e.g. If you want to check for "input" placeholder support, using Native way, you would use;
function support_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
While the Modernizr way to check would be like
function support_input_modern() {
if (Modernizr.input.placeholder)
return true;
else
return false;
}
But the above code has the same internal working as the native way...
So ideally, I would prefer native way for simpler and lesser amount of checking...
Only for very complex things, should we go for Modernizr
For a project I'm working on, I'm contemplating the idea of a sort of CSS-editor. I'm wondering if it's "legit" to expect to see changes in the document when changing the text contents of style tags.
It seems to work on Firefox, but I'm wondering if it's ok in other browsers, and if it's generally an acceptable thing to do.
Yes, it's not an ideal way of doing things, however it may be the most efficient for what I want to do.
For a CSS editor, I think it will be the best way to do it. It would be exactly the same as changing CSS. But it might require testing for other browsers. Probably it will work on Opera and Chrome as well.
I'm trying to create web applications that use JavaScript. I'd like to be able to use animation in these applications. I've tried to use basic JavaScript, but I've decided that the best thing to do is to use a library (such as YUI or jQuery).
I'm running into a problem. On Safari, when I run animation scripts, the animation is very chunky, very blocky. This happens with YUI as well as basic JavaScript. Why does this happen? Are there any good libraries that don't create this problem in Safari, but are also good for Internet Explorer and Firefox (and, hopefully, Opera)?
I have found MooTools to be pretty slick for animations, just a little smoother than jQuery.
I generally prefer jQuery, which I find to be a little more intuitive (in my head anyway), but I would use MooTools if slick animation is the most important requirement.
JQuery has animation, but I don't know what it is like on a Mac (I don't have a mac). If things are going slow, then you are probably making the animations too complicated. Remember, JavaScript is a slow language, and DOM is not designed for animation, so try to limit yourself with respect to the number of animations at the same time. Always ask if the animation is really necessary.
Well, for starters you could use CSS Transformations if the application is Safari-specific. Otherwise JQuery got some built in animations and a big community behind it (and thus, a large plugin repository).
You can download some sample code and check locally to make sure that things are supposed to work. For example, you can get the source code for B&K's jQuery book at http://www.manning.com/bibeault/ (check out the source link) and try out the samples for Chapter 5. If those pages work (locally) for you on Safari, then at least you know your basic environment is sane.
I'm having similar problems, and I suspect there are Safari bugs that jQuery is tripping over. But I haven't yet figured out whether it's me writing sloppy code (with FF perhaps being more forgiving than Safari), or if it's Safari, or if it's jQuery. I'll post more if I get any wiser.
Strange, WebKit (the JavaScript engine that Safari uses) is supposed to be pretty fast. Make sure that you have the latest version, there have been great progress for the JavaScript engines in the Safari and Firefox releases in recent time. Also, I think Dojo and MooTools have faster animations than jQuery, at least in my experience.