Thursday, April 17th, 2008
Category: jQuery
Ever gone to a site to read up on your favorite show or get the lowdown on a new movie only to have the whole plot spoiled because you weren't forewarned that the "whole freakin' script" was injected into the article?!?! Yeah, I've been there and it ain't fun!
Chris Coyier of CSS-Tricks came up with a solution called Fade-in Spoiler Revealer which used jQuery to allow the user to click on a div that blocked view of the spoiler and see the contents. This was a very cool technique and caught the attention of Brian Dillard. Brian wondered how this script could be adapted to work with RSS readers and mobile browsers:
My only reservation about Coyier's technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn't we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.
Brian Dillard came up with his own version of a spoiler blocker which, through a little progressive enhancement, accommodates for situations where JS is not enabled (eg: a RSS reader). His code consists of two parts; the jQuery code which hides the spoiler and binds the click event to a fade effect and the HTML which is progressive enhanced.
JAVASCRIPT:
-
-
$(document).ready(function() {
-
-
$(".spoiler")
-
//hide the spoiler
-
.children("span.hidden").hide()
-
//hide the whitespace inside it
-
.children("br").hide()
-
//step back up a level
-
.end()
-
//find the sibling
-
.prev("span.message")
-
//add the click handler to show the spoiler
-
.click(function() {
-
//use a callback So FX execute non-simultaneously;
-
$(this).fadeOut(600, function() {
-
$(this).next().fadeIn(600);
-
})
-
})
-
;
-
-
});
-
HTML:
-
-
-
In the movie "Citizen Kane," Charles Foster Kane's last
-
word, "Rosebud," turns out to be ...
-
-
(
<a href="#answer">Click here if you'd like to be spoiled.
</a>)
-
</span>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
<a name="answer"></a>a sled.
-
</span>
-
</p>
-
You can see the demo here. You'll need to turn off JavaScript in order to see it.
This is one way of managing the user experience in user-agents without JavaScript support but I'm sure that the Ajaxian crowd has developed other ways of tackling this same problem. We'd like to hear about it so comment away.
Tuesday, April 15th, 2008
Category: JavaScript, Performance, Prototype, jQuery
Piotr Solnica did a couple of posts on jQuery and Prototype benchmarks back in the day, and John-David Dalton just found them.
In part one, he runs tests such as:
JAVASCRIPT:
-
-
$('td.first').addClass('marked'); // jQuery
-
-
$$('td.first').each(function(cell){
-
cell.addClassName('marked');
-
});
-
-
// or
-
-
$$('td.first').invoke('addClassName', 'marked');
-
and concludes:
Executed tests show that Prototype seems to be faster then jQuery, with the exception of the new insertion method, which performance should be improved. Although I like jQuery syntax more then Prototype, the performance is way more important then saving few lines of code. Of course tests that I made don’t show how these libraries act in a real application, which is my task for the next part(s) of this article. Despite the results I must admit that I’m very excited about jQuery, my general impression is that this library is more mature then Prototype.
In part two, Piotr uses a custom JavaScript-based testing environment instead of running tests using Firebug profiler. This allows the test suite to run in many browsers, and this time concludes:
Prototype was at least 2 times faster then jQuery in 15 cases, and jQuery was faster then Prototype in 8 cases. What library should I choose? In my case I will stick with Prototype, because it offers the same functionality as jQuery does + more and it’s faster. jQuery is probably better for projects where there’s a need for some fancy UI effects and that’s it, but it’s just an assumption, correct me if I’m wrong…
4.6 rating from 160 votes
Thursday, April 10th, 2008
Category: CSS, JavaScript, jQuery
During his work in redesigning the Pathfinder web site, Brian Dillard came across the infamous IE6 transparent PNGs issue and used two methods to tackle the issues. He decided to do a nice write-up explaining how he worked around the fact that IE6, while it would render PNGs, would not retain their alpha-channel transparency and produce unexpected colors in place of the transparency.
IE6's lack of transparent PNG support is appalling, but Microsoft does offer a proprietary fix for the same problem: CSS behaviors, which are a non-standard extension to the CSS spec. By applying a special behavior to your PNG images, you can force IE6 to display them with their alpha transparency intact.
Coding this CSS behavior on an image-by-image basis would be tedious. Luckily, developer Angus Turnbull has released an open-source script that can be used to apply the behavior globally: IE PNG Fix. The current production release is v1.0 RC4, but a preview of v1.0 RC5 is also available.
While the IE PNG Fix script to dealt with the majority of the PNG transparency issue, there was still one problem that the script could not correct:
There is, however, one drawback to Turnbull's script: It can't account for PNG background images with a background-position other than top left. It will restore the alpha-channel transparency to such images, but it will reposition them to top left, potentially making your designs look even worse than they would have with an ugly gray halo where the transparency should be.
Brian turned to jQuery to help him resolve this by allowing him to re-insert the background images previously removed from IE6 as foreground images.
Full details, including code, of his solution can be found in his two part series linked below:
Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 1 of 2)
Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 2 of 2)
Friday, April 4th, 2008
Category: GWT, jQuery
Are you a fan of GWT but would like toms jQuery magic mixed in? Ray Cromwell has your back, as he has created GQuery, an implementation of jQuery for GWT.
This means that you can write code like this:
JAVA:
-
-
public void onModuleLoad() {
-
$("div").css("color", "red").click(new Function() {
-
-
-
$(e).as(Effects).fadeOut();
-
}
-
});
-
}
-
I decided to demonstrate some of the huge benefits of 1.5 by implementing a type-safe JQuery clone in GWT.
That's right, for all those folks who don't want to deal with GWT Widgets, but just want to query, wrap, and manipulate plain old DOM elements in GWT, this article is for you. I'm talking to you, you self-hating Java programmer with an inner Javascript Ninja begging to be let out.
After the GWT compiler gets its hands on it, the example comes in at 5459 bytes. This library can only be achieved with GWT 1.5 features, and gives you:
- Joel Webber of the GWT Team just submitted a patch to GWT 1.5 that implements every DOM2 Core+HTML class as a subclass of the new JavaScriptObject. This not only made the coding of GQuery very easy, but it produces nicely optimized JavaScript.
- Static Imports. The $ function would not nearly be as nice without static imports.
- Generics and Covariant return. The Plugin mechanism utilizes this to fake prototype based overrides of the GQuery object.
Fun little feature, $$
jQuery contains a lot of methods which take essentially property/value pairs in a Javascript object literal. Emulating this with Java syntax would be too tedious (Scala frontend to GWT, please!), however, to ease this use case, I added a global $$ function for manipulation JavaScriptObject/JSON objects easily.
JAVA:
-
-
Properties literal = $$
("{ foo: 'bar', baz: 'bam'}");
-
$$("{foo: 1, bar : 2}").get("foo") == 1;
-
Tuesday, April 1st, 2008
Category: jQuery
Finally, you can throw away the concise jQuery code, and you can instead grab a more verbose version Classy Query, that John Resig has provided.
This extra verbosity is perfect for a compiler or a document parser. The important people.
You can now write code like this:
HTML:
-
-
-
-
-
jQuery.Events.addEventListener(document, "ready", function(){
-
jQuery.querySelectorAll("div").forEach(function(elem){
-
jQuery.DOM.append(elem, "
<b>More...
</b>");
-
});
-
-
jQuery.querySelectorAll("div b").forEach(function(elem){
-
jQuery.Events.addEventListener("click", function(elem, event){
-
var next = jQuery.Traversal.nextSibling(elem);
-
var animation = jQuery.Effects.buildAnimation( next, {height: "toggle"});
-
amimation.start();
-
});
-
});
-
});
-
</script>
-
Finally. Check out the source.
Monday, March 31st, 2008
Category: Browsers, CSS, Debugging, jQuery
Mario Heiderich of Ormigo has created a jQuery based code snippet/bookmarklet that is capable of detecting floating errors and adding a dotted orange border to elements which should be cleared - but aren't.
It saved me a huge bunch of time debugging complex layouts for all browsers - especially IE6. If jQuery isn't already loaded on the page it can easily be fetched with the several jQuerify approaches.
Snippet
JAVASCRIPT:
-
-
(function(){
-
function checkNext(element, floating) {
-
if(element.css('clear') != 'none') {
-
var clearing = true;
-
} else {
-
if(element.next().length !== 0) {
-
var clearing = false;
-
checkNext(element.next(), floating);
-
} else {
-
console.log(element);
-
element.css({border:'2px dotted orange;'})
-
}
-
}
-
}
-
$('body *').each(function(){
-
var element = $(this);
-
if(element.css('float') !== 'none' && element.next().length !== 0) {
-
checkNext(element.next(), element.css('float'));
-
}
-
eval('');
-
});
-
})();
