Is there a way to automatically replace all or certain CSS :hover effects with a smooth hover from jQuery (or plain JavaScript or other library would also be OK)?
E.g. if for an element a :hover style is defined, to replace this without having to manually write the JavaScript for each?
I feel that this approach goes backward in terms of web progression. It's good practice to keep presentation separate from scripting. The same goes for markup: In a perfect world they should all be disparate in implementation.
Having said that, you may be able to accomplish what you need using CSS3 transitions, though they're not supported in most older browsers. See here: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FCSS_transitions
Otherwise with jQuery:
$('element').hover(function () {
$(this).css({
// styles in JSON
});
});
Related
I've been working with some basic animations lately and trying to follow good web practices at the same time. The problem I'm encountering is image flicker when not using a preset css method to hide the element before the page loads.
It's very easy to prevent the flicker by just hiding the element with my normal css and then revealing it with javascript, but that seems to me a horrible practice if someone has javascript disabled.
Should I use the HTML5 feature of putting <noscript> tags in the header and then use a separate style sheet to set the opacity and position to the final settings for users without javascript? Is that the most elegant solution?
I've started using the greensock (gsap) library to TweenLite.from, since I can just set everything to the final state in the css, but I get a slight image/text flicker the first time the page is loaded. I like this solution because I can set all of the css as it will be for someone with no javascript, and it allows me to easily animate from a point, to an existing point, instead of working backwards like I have to do with Javascript or jQuery. But, there's still that image flicker which isn't really acceptable. Would a page preloader solve this?
What is the generally agreed upon practice for this these days? I'm also worried about SEO and the consequences of setting stuff to visibility: hidden or display:none and then animating it in. Does the Google spider read javascript?
Here's an example of the screen flicker and animations I'm talking about.
Have a look at HTML5 Boilerplate and Modernizr.
http://html5boilerplate.com/
http://modernizr.com/
It ships with a smart solution to see if a client has JavaScript enabled in CSS.
By default a class no-js is applied to HTML tag and it is then replaced by js by Modernizr. That way you can qualify your CSS selectors accordingly.
Example CSS:
.no-js .foo { }
.js .foo { }
This should execute fast enough that clients with enabled JavaScript don't see the no-js styles.
References:
What is the purpose of the HTML "no-js" class?
https://github.com/Modernizr/Modernizr/blob/master/src/setClasses.js#L9
Okay so I'm new to javascript but I can handle jquery quite well... but jquery on a small mobile web experience is realy heavy... some time it's even too mutch.
so I have this code that simply pop's up my menu bar and i wondered if there was any light way of geting this?
$(function() {
$('div.menu').hide();
$("img#menu").click(function () {
$("div#menu").toggle("slide", {direction: "right"}, 500);
});
});
Looking at your code, I'd point out the following (see comments):
$(function() {
// here you are searching by class name, that is going to eat CPU
$('div.menu').hide();
$("img#menu").click(function () {
// here you are doing a JavaScript animation, eating more of the CPU
$("div#menu").toggle("slide", {direction: "right"}, 500);
});
});
Using CSS instead of JavaScript piggy backs on native code rather than interpreted JavaScript.
A trick too is that many mobile devices are optomised for 3D CSS transitions (because 3D is used to perform flip and slide functions used by the phone's own UI). So, using 3D transitions will get you even more vroom from the engine.
A jsFiddle of your code using CSS is here:
http://jsfiddle.net/8dQMu/
A nice introduction to CSS transitions is here:
http://css3.bradshawenterprises.com/transitions/#how2use
You can simulate menu using pure CSS and without any JavaScript, just write a css selector for mouse over of item that you want to show the menu through it, but this way you can't have effects like slide. to create that kind of effects you should read their code in jQuery and implement them in JS.
other things can also handled using source code of jquery, but for selector (like 'div.menu') you can use Sizzle from Sizzlejs.com this library is very small(4k gzipped and minified) and its selector engine can do whatever jQuery can( actually jQuery internally use Sizzle )
I'm working on a site where I've created a simple CSS3 hover effect, where if a link is hovered, it changes the opacity and looks like a rollover effect. It seems to be working perfectly on all browsers (even older ones, such as Firefox 2). Just wanted some input if this is a problem and I should consider javascript instead? Or is using CSS a good (semantically correct) way of going about a rollover?
Generally, if an effect can be achieved using CSS alone, it's usually better to use CSS then to use JavaScript to achieve it.
Sure, you can use JavaScript and/or libraries like jQuery, but why? If the browser is capable of doing it natively, not only will it work better, it will look better and smoother.
Generally, people using newer browsers get benefits from the new technology.
People who do not update their systems tend to not care about how things look, so as long as the site is functional and the effect is not very important, I'd say don't bother to make all browsers behave exactly the same. It's a waste of time and effort.
For anchor elements, the :hover pseudo-class is widely supported, and is a good way to go. I believe the only in-use browser that doesn't support it is IE 6. The opacity property is less widely supported, so your effect may not look the way you want in some browsers. If you need to use the :hover pseudoclass on elements other than a, I think you'll lose IE 7 as well.
See http://www.w3schools.com/css/css_pseudo_classes.asp for some background information on :hover and other pseudo-classes.
The CSS :hover doesn't work in IE6 for elements that are not links. Is there a workaround? e.g. how do I apply the :hover to a div?
There's whatever:hover. I've never used it myself but from what I hear, it works well.
Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.
You can use the famous IE7.js from Dean Edwards, which has the nice advantage, that you can use the :hover selector in your CSS.
Apart from that, I doubt that you can achieve it with CSS alone. IE can handle JS in CSS files via expression(), but you can't get to an expression to handle hovering without a selector handling hovering, if you catch my drift.
Then, finally, a short jQuery solution:
$(document).ready(function () {
$('div').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
Then you can use this in your stylesheet:
div:hover, div.hover { ... }
If you only need for paticulars div
and you are not using jquery then go
for suckerfis js as #futta
suggested.http://www.htmldog.com/articles/suckerfish/
If you are planning to use Hover on more tags in future and don't want to edit every time js for this the go for Whatever.htc in for IE6. as #Pekka suggested.
Suckerfish vs. .htc
IIIIN the blue corner we have
Suckerfish, the original lightweight,
accessible, cross-browser,
standards-compliant :hover mimic.
IIIIN the red corner we have '.htc' -
the JavaScript files accessed via CSS
to mimic :hover.
Ding ding!
And Suckerfish instantly lands a heavy
blow on .htc's validity - .htc simply
isn't standards compliant CSS.
Oooo... .htc sneaks in a crafty jab
without the need for additional
selectors...
Suckerfish bounces around the ring.
He's much lighter weight than his
opponent.
And OH! The IE 5.0 uppercut! That's
something that .htc just doesn't have
the skill to do, whereas Suckerfish
can work IE 5.0 seamlessly.
.htc is dazed! And the contest is
over! Suckerfish wins on points! TKO!
IF you want to get benefit for other things (other than Hover) also in
IE then go for IE7.js as #Boldewyn suggested
And If you are already using jquery
and want to use hover in a limited
way then go for This way :
How to enable hover on a div for IE6 using jquery in minmal code?
NO pure and valid CSS solution available for this in IE6.
One Non- valid CSS expression solution is available
but i would not not advise to use
this because it's slow
Solution: http://www.visibilityinherit.com/code/ie6-hover-expression.php
suckerfish and it's offspring provde great lightweight alternatives for this purpose too.
Is there a problem to using javascript for styling content?
My website requires javascript. There is this text on my website that I want vertically centered. The text could be either 2 lines or 3 lines long. With javascript I could vertically center it pretty easily. The CSS ways to vertically center it seem complicated and include IE hacks.
So, is there a downside to me using javascript for this styling, considering I have already decided that my website will require javascript?
The downside is that if you have any long-running page, say an ad fails to load, etc hanging the document.ready event...your styling wouldn't be applied until the document completed rendering and the javascript then ran. (Note: This assumes your script fires in the ready event, usually the case since you'd want the elements to be there)
Basically you'd get a flash of non-styled content in the case of anything delaying the ready event. Whether that matters, up to you, but personally I'd stick to CSS where possible.
Sometimes using JavaScript for seemingly simple styling is unavoidable; if I have to use JavaScript in this kind of scenario I just try to make it degrade as well as possible, ensuring that whilst a user without JavaScript doesn't get the full experience from the website, they don't get a bad one either.
I'd personally use display: table-cell, and vertical-align:middle. Then in IE8+ and all other browsers it's centered, in older ones it won't be, but generally things like vertically aligned text aren't that vital to the design anyway.
I don't think there is a downside. If you say it's going to be easier and considering that JavaScipt is the de facto client side language, go for it. Just make sure it'll work on modern browsers...
Just a point: CSS is meant to be used to do this kind of work, but it's not a rule. There are exceptions as is your case.