The
Palm
Civet

Posts tagged jquery

jk + scrollto

one of my favorite ui conventions in web apps today is the binding of the ‘j’ and ‘k’ keyboard keys to navigate up and down through a list of items, like in gmail, google readerffffound, and boston globe’s big picture.

this kind of mouse-less browsing not only speeds up browsing of long lists, but more subtlety, it standardizes the framing of the viewing experience, which increases usability. every time you press ‘j’ on a big picture article, you guarantee the next picture will be identically and predictably framed, making the surfing experience more pleasant.

on my latest microblog venture, question suggestions, i wanted to give this a go. luckily i found pat nakajima’s extremely lightweight jquery jk plugin on github for this exact functionality. the only addition i wanted to add was quick animated scrolling from one post to another to aid the user’s perception of how the keyboard shortcut movements works. combining jk with the equally lightweight jquery scrollto plugin was super simple, just add =>


$.scrollTo({your_focused_on_post_object}, {duration}, {settings});

to the end of the focusOn function in jquery-jk, to have the browser window follow your j/k-ing. best of all, the combo weighs in at less than 10kb. check it out in action at questionsuggestions.com.

highlighting the current menu link with jquery

highlighting the current page in a navigation menu is a common user interface tactic. there are ways to do this server-side in wordpress templates, textpattern forms, and rails view files, but the benefit of using jquery is that you can use the same technique regardless of what publishing platform or framework your site is running on. consider you have a typical <ul id=”nav”> menu structure:


function filterPath(string) {
	return string
	.replace(/^\//,'')
	.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
	.replace(/\/$/,'');
} 
$("#nav a").filter(function() {
	return filterPath(this.pathname) == filterPath(location.pathname);
}).addClass('current'); 

each <a href=”“> in the menu is compared to the location.pathname in the browser window through the filterPath function, which strips the path of any unnecessary slashes and index.*/default.*’s. if there is a match, it adds the class of ‘current’, which can be styled accordingly.

fixing internet explorer’s z-index bug with jquery

one of the most common and most frustrating bugs when dealing with internet explorer 6 & 7 is the way it can screw up the stacking order of elements’ z-index properties. this can make setting up things like a suckerfish style dropdown menu less fun than paying taxes.

here is a jquery clip that will solve most ie related z-index issues, by reading the dom from top to bottom and making sure that every element has a higher z-index than the next. just customize your array of elements at the top of the each() function.


if (jQuery.browser.msie) {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
}

{via}

compiling and sharing code, ideas, and tools for making better websites and applications.

by justin talbott {email me}

what is a palm civet?