Forum Moderators: not2easy
Appendix B. Adding jQuery support to browsers for CSS3
So, the vendor of a browser lets us down by not implementing CSS3, and the transition from IE8.js to the real IE8 is not quite as expected, or a the newer browser support for CSS3 is not quite implemented as expected yet. We can give them all something extra and help kick it into gear anyway.
Appendix B. jQuery
[jquery.com...]
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is not only a CSS helper function library it is a fully featured very powerful library of events and functions that will be familiar to anyone already familiar with JavaScript. Its beauty is its power, simplicity of use, support for most of the CSS3 functions already and its use of selectors in the CSS format. Together this makes it quite logical as a "gap" filler utility already.
The real IE8 doesn't support nearly as much CSS3 as the IE8.js script was expecting of it, but using jQuery we can add all (or nearly all) CSS3 functionality to IE8 as well as top up/backup any other browser that might be only partially implemented or buggily implemented.
jQuery is the brainchild of John Resig and the main library can be hotlinked from the Google API code repository.
All one needs to add is a few lines of code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><!--[if IE]>
<script type="text/javascript">
$(document).ready(function(){
//your functions
});
</script>
<![endif]-->
The link to the jQuery library itself should be first in the head of the document. Then any functions you want to incorporate can be placed in your own external JS files as required. These should come after the main script. Your functions file need not necessarily be in an IE conditional, like our example mainly show here, unless you want to specifically keep any IE "gap only" features separate as a "hack management" feature.
These functions can also be used as a backup for other browsers that may still be a little buggy in their implementation of the CSS3 selector you're trying to mimic. Or they could be built up to add further enhancements like slide/hide showing - If that's the case the corresponding CSS should also not be in an IE conditional comment either.
A full list of what jQuery natively supports so far is at [docs.jquery.com...]
Note: just because the selector you are looking to mimic isn't yet there, doesn't mean it can't be used, there is usually another way of targetting the function to provide a class name for your CSS.
e.g. see the difference:
the
:empty$(":empty").addClass('isempty');[/pre]
that simply selects all elements that are empty using the jQuery support and then adds a class name to them for you to use in your CSS.whereas
which does not have native jQuery support can still be targeted but might need a slightly longer function to add your CSS Class::target
[pre]$('a[href^=#]').click(function() {
var id = $(this).attr('href');
$('*').removeClass('istarget');
$(id).addClass('istarget');
})
The above code first targets all links that start with a hash, i.e. fragment identifier links, then it assign something to happen when one of those links are clicked. It then takes the value of the href attribute of the link that was clicked and assigns that value to a variable: "id". The function next goes through all elements and removes any existing elements that already have this class, because only one element should be the target at any one time, then it adds the class "istarget" to the element which has the exact #id that the variable holds, in other words the target.
My jQuery is not that hot, I'm just finding out it's full power and maybe these functions, and the ones supplied throughout the series, could be optimised. Would love to hear it here if you can contribute, thanks
Appendix A - ie7.js and ie8.js [webmasterworld.com]
[edited by: SuzyUK at 3:54 pm (utc) on July 5, 2009]
