Monday, September 1st, 2008
Category: CSS
, jQuery
In March 2004, Dave Shea wrote about CSS Sprites, and now he is back with CSS Sprites 2. He walks us through using JavaScript to make this all work nicely, and picks jQuery to get 'er done:
After putting this together piece by piece, we end up with:
JAVASCRIPT:
-
-
$(document).ready(function(){
-
-
// remove link background images since we're re-doing the hover interaction below
-
// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
-
// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
-
$(".nav").children("li").each(function() {
-
var current = "nav current-" + ($(this).attr("class"));
-
var parentClass = $(".nav").attr("class");
-
if (parentClass != current) {
-
$(this).children("a").css({backgroundImage:"none"});
-
}
-
});
-
-
-
// create events for each nav item
-
attachNavEvents(".nav", "home");
-
attachNavEvents(".nav", "about");
-
attachNavEvents(".nav", "services");
-
attachNavEvents(".nav", "contact");
-
-
-
function attachNavEvents(parent, myClass) {
-
$(parent + " ." + myClass).mouseover(function() {
-
$(this).append('<div class="nav-' + myClass + '"></div>');
-
$("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
-
}).mouseout(function() {
-
$("div.nav-" + myClass).fadeOut(200, function() {
-
$(this).remove();
-
});
-
}).mousedown(function() {
-
$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
-
}).mouseup(function() {
-
$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
-
});
-
}
-
});
-
Friday, August 29th, 2008
Category: jQuery
When I was doing an interview with John Resig for the Open Web Podcast, he mentioned that the redesign of jQuery.com had a lot of people talking, and it seems like people have strong feelings about the Rock Star for whatever reason.
Ignoring the style, the redesign is more than just that:
The entirety of the site has a new layout. With drastically improved multi-layer navigation and a standardized sidebar it should become much easier to navigate the individual portions of the site.
You should probably wear a hard hat while exploring the interior pages - font sizes, spacing, and colors are all in need of tweaking, which will be handled over the upcoming week (it’s fun working against Trac, Wordpress, Drupal, and Mediawiki simultaneously).
Category: JavaScript, jQuery
John Resig posted on degrading script tags and adding functionality to <script> so you can add a src attribute and a body of code that will be executed one the external script loaded error free:
JAVASCRIPT:
-
-
<script src="some-lib.js">
-
var foo = use_some_lib();
-
foo.do.stuff();
-
</script>
-
To make this all work, John shows us a jquery aware version that detects loading and such:
JAVASCRIPT:
-
-
-
(function(){
-
var scripts = document.getElementsByTagName("script");
-
var curScript = scripts[ scripts.length - 1 ];
-
-
if ( curScript.executed )
-
return;
-
-
// ... jQuery ...
-
-
curScript.executed = true;
-
var script = curScript.innerHTML;
-
if ( script ) {
-
jQuery(document).ready(function(){
-
jQuery.globalEval( script );
-
});
-
}
-
})();
-
Where this kicks in, is more than just saving a script code block. Steve Souders has been researching different ways to tie blocks of code to scripts and having the optimal ordering for performance. We can tie this learning to John's work, and the developer can choose what they want to do (e.g. when loading don't have the icon moving etc etc).
Category: Dojo, Prototype, The Ajax Experience, jQuery
We talked a few months ago about something new we're doing at the Ajax Experience this year: the "Framework Summit." Basically, we're providing space for Prototype, jQuery, and Dojo to hold their own half-day events on-site, and these events are free and open to the general public.
Since we announced the summit, the frameworks have created their agendas for their events for their events:
Dojo Developer Day:
- Welcome, Introductions (Alex Russell, Dylan Schiemann)
- Tutorial - Progressive Dojo (Peter Higgins)
- Presentation - DojoX GFX and FX (Matthew Russell)
- Presentation - Secrets of DojoX (Tom Trenka)
- Tutorial - Getting going ... Zend + Dojo (Matthew O'Phinney)
- Tutorial - Dijit Layouts In and Out (Nikolai Onken)
- Tutorial - Reusable code, Widgeting (Peter Higgins)
- Community - Getting Involved (Peter Higgins, Nikolai Onken)
- Lightning Demos - What do you have? Show us.
Prototype Developer Day
- Welcome, Introductions (Prototype Core members)
- Contributing docs (Christophe Porteneuve)
- Contributing code (Andrew Dupont)
- Prototype & Performance
- Extended Q&A (Prototype Core members)
jQuery Developer Day
- State of jQuery (Rey Bango)
- Progressively Enhancing the User Experience Using jQuery (Karl Swedberg)
- An In-Depth Look at jQuery UI (Paul Bakaus)
- jQuery Team Code Review (jQuery Team)
Other Frameworks?
Some have asked why we didn't also include Framework X, Y, and Z at the summit. We have a simple answer: we only had room for three frameworks so we choose the three most popular frameworks (according to every survey we've seen). If the concept is successful this time around, we hope to do it on a bigger scale next year.
Obviously we hope you can make it to the entire Ajax Experience event, but if you can't do that, consider coming to one of the Framework Summit events. See you there!
Tuesday, August 26th, 2008
Category: jQuery
In the "oh wow, I didn't know JavaScript could do that" category, I just came across a cool new jQuery plugin called jParallax which implements a parallax effect on selected elements. Now, I'm not ashamed to admit not knowing what "parallax" meant so I looked it up on Wikipedia which totally added closure to the concept being implemented. Till then, I just thought that was a really cool effect!
Parallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.
jParallax includes several options for controlling the effect including setting the animation timing and layer positioning control. The demos can be viewed here.
We also covered Brett Taylor's implementation of a parallax effect last year where he showed how to build parallax backgrounds.
Update: I've added straight links to the demos
Demo Links
Thursday, August 21st, 2008
Category: jQuery
Rizqi Ahmad has created a data binding service for jQuery called Chain.js.
A simple example shows you where to start. When given HTML like:
HTML:
-
-
-
<div class="item"><span class="library">Library Name
</span></div>
-
</div>
-
The following JavaScript will add data as items to the list:
JAVASCRIPT:
-
-
$('#quickdemo')
-
.items([
-
{library:'Prototype'},
-
{library:'jQuery'},
-
{library:'Dojo'},
-
{library:'MooTools'}
-
])
-
.chain();
-
Check out the demos for more detailed examples.
Monday, August 18th, 2008
Category: CSS, IE, jQuery
Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE
When you include the library, it can scan for your -webkit-transform-* transforms (soon to support the standard transform-*) and will go to work for you using a couple of nifty technologies all put together:
- IE Filters such as
DXImageTransform.Microsoft.Matrix that do the rotate, skew, scale, and general matrix work for you
- onpropertychange "almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event." Here it is at work in the library:
JAVASCRIPT:
-
-
jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {
-
if(e.originalEvent.propertyName == 'style.webkitTransform') {
-
Transformie.refreshMatrix(this);
-
}
-
});
-
From there you can see the transforms which look like:
JAVASCRIPT:
-
-
// rotate
-
matrices.push($M([
-
[Math.cos(a), -Math.sin(a), 0],
-
[Math.sin(a), Math.cos(a), 0],
-
[0, 0, 1]
-
]));
-
Very nice indeed.
Category: Examples, JavaScript, Tip, jQuery
Jeffrey Olchovy has posted a simple tutorial on using jQuery to solve a "select-to-input toggle" that shows and hides a text field when you select "Other". It overloads the same form name, so the server side gets just one value, and doesn't know or care if it was in the drop down or typed in. You can try it live here.
This is a simple little solution to the issue that there isn't a native control to really do the job. What you really probably want here is the ability to drop down and select items, or just type into the select box field itself. This is one reason why people implement auto-complete text fields instead of using select boxes for this case, but wouldn't it be nice to be able to tag your <select> and be done?
Wednesday, July 30th, 2008
Category: Performance, jQuery
Stuart Colville has found an issue where he needed to output some JavaScript in the middle of a page, before a library that depended on it was available:
The 6th Rule in Yahoo’s Performance Rules recommends placing script before the closing body tag to prevent blocking holding up the rendering of the page’s content. This works well but there are times where script needs to be output higher up in the page than it’s dependencies.
In this example I’m using jQuery but feel free to substitute jQuery for the your favorite framework.
The requirement is that there’s a need to run some code that would ideally use jQuery somewhere in the middle of the page. I could avoid the dependency and re-write everything without jQuery and for simple scripts this can be a good way to go. But, if I want to use some of the more complex jQuery features, then I really don’t want to have to re-invent the wheel or resort to including jQuery in the head of the document.
This lead him to the following example
HTML:
-
-
-
var muffin = muffin || {};
-
muffin.inline = muffin.inline || [];
-
muffin.inline.add = function(f){
-
muffin.inline[muffin.inline.length] = f;
-
};
-
</script>
-
-
-
muffin.inline.add(function(){
-
$('#green')[0].style.backgroundColor = 'green';
-
});
-
muffin.inline.add(function(){
-
$('#red')[0].style.backgroundColor = 'red';
-
});
-
</script>
-
-
<div id="red"><p>This should be Red
</p></div>
-
<div id="green"><p>This should be Green
</p></div>
-
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
-
-
$(function(){
-
if (muffin && muffin.inline){
-
for (var i=0, j=muffin.inline.length; i<j ; i++){
-
muffin.inline[i]();
-
}
-
}
-
});
-
</script>
-
This seems a little niche. You my run into this as you have server side components outputting things, but ideally you can fix that in your architecture and ship the JavaScript in the correct location.
Monday, July 21st, 2008
Category: Plugins, jQuery
Edward Tufte has long had a following of fans in the field of information visualizations. Among his interesting taxonomy of visualization types is the "Sparkline", which he describes as "data-intense, design-simple, word-sized graphics".
While Tufte originally suggested that computer displays are too low-resolution to effectively make use of Sparklines (vs. printed page), James Dempster pointed us to some work the folks at Splunk have done to join a long line of folks who have given it a go anyway.
The resulting jQuery plug-in is really nice. Now if only they had the ability to overlay two line graphs over the same area using a transparent fill... ;-)
(Oh, and there's also a simple Sparkline generator for Google Charts over at style.org.)
