background preloader
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. Hello! You can use it on any html web page, and any part of the page can interact with a sprite (click anywhere on this page and wait and you'll see what we mean). Spritely has the following great advantages it works well on iPhone/iPod Touch/iPad - check out this page on an iPhone.

Related:  Coding Tools and Tricks

One Weird Trick to Baseline-Align Text I’m writing this post because I hope I’m wrong. I have found a silly solution to a common typographic problem, and I hope there’s a better way to do what I want. The problem is baseline-aligning text. I want to position a character’s baseline at a particular spot, in a way that works with all browsers, fonts and font sizes. The reason I want to do this is for drop cap positioning. 10 awesome jQuery snippets Preloading images Preloading images is useful: Instead of loading an image when the user request it, we preload them in the background so they are ready to be displayed. Doing so in jQuery is very simple, as shown below: (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

Demo > maxImage Scaling Plugin Caution: This example is meant for expert users. Remember, with FillElement you can often accomplish an offset scheme very easily... just set your containing element where you want the images to be displayed. Because the first rule of Maximage 2.0 is to try to remain hands off and out of your way, the built in support for offsets have been dropped with version 2.0. This doesn't mean they aren't possible.

“Outside the Box” Navigation with jQuery Just about every website uses the regular navigation concepts we're all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn't new, it's certainly not common. 10 places where anyone can learn to code Teens, tweens and kids are often referred to as “digital natives.” Having grown up with the Internet, smartphones and tablets, they’re often extraordinarily adept at interacting with digital technology. But Mitch Resnick, who spoke at TEDxBeaconStreet, is skeptical of this descriptor. Sure, young people can text and chat and play games, he says, “but that doesn’t really make you fluent.” Mitch Resnick: Let's teach kids to code Fluency, Resnick proposes in this TED Talk, comes not through interacting with new technologies, but through creating them. The former is like reading, while the latter is like writing.

Installation and upgrade of ClickHeat - ClickHeat (Belorussian translation is available, provided by fatcow) Installation 1) extract the archive and upload it on your server (the archive already contains a /clickheat/ directory, so you can extract it at the root of your website) 2) call the directory from your browser (say 3) follow on-screen instructionsBe aware that the javascript code has changed in the 1.x releases, so you must change your html code if you're upgrading from 0.xx. Upgrade Scrollable Fixed Header Table – A JQuery Plugin « Jerome Bulanad This plugin allows html tables to be scrollable horizontally and vertically while headers are still visible and in tack with the columns. This plugin can be used in two modes: 1. Import dependencies

Vertical Scroll Menu with jQuery Tutorial Introduction Just last week, I came accross to this website Narrow Design. His scroll menu caught a lot of my attentions, I played with it for a while. Yes, unfortunately, it's built in flash. And, Yes, we are going to implement it with jquery - javascript based scroll menu that will do the same thing. Auto–prefixing – Scott Riley Vendor prefixes are, if you swing that way, a useful part of CSS. Some people hate them but those people probably still use IDs in their CSS and think BEM is a porn genre. What isn’t great about vendor prefixes is that they’re experimental, temporary by nature, and are often misused by lazy developers.

jQuery One Page Navigation Plugin Sep 26, 2010 When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: Brizk Design and Crush + Lovely. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted. BubbleUp jQuery Plugin to Spice Up Your Menu Hey friend, in the previous jQuery Learning tutorial, I wrote an article that helps you to create your own jQuery plugin with the fun zooming effect. This plugin has received a lot of attention for a while and there are some suggestion from you guys to help this plugin to be better. I collected some interesting recommendations and bug fixes from my readers to write it again and release it. This plugin now is more flexible, easy to customize and working with all major web browsers with any size of images. Sounds cool? Enjoy it!

60 Amazing jQuery Sliders, Carousels and Other jQuery Image Plugins Creative Can This is one of the largest and most up to date collections of jQuery slider plugins. I’m sure you will find some of them useful for adding cool slider effects to your web pages. It is more and more common to see jQuery slider plugins used for image slideshows, carousels and for creating html slider effects on websites. It is a really great solution for showcasing sequential images or featured articles without taking up too much space. To have a jQuery banner, content slider, carousel, gallery or any image presentation system on your web page, you certainly have the option to code it from scratch.

SVG Patterns Gallery Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Why SVG? SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9. Browser support

Element ‘in view’ Event Plugin I’ve been preparing a few articles for jQuery for Designers and for .net magazine and in doing so I’ve had to write a plugin that could prove to be useful to share. I’ve created an event that will trigger when the element is scrolled in to the viewport. Preamble First of all, this isn’t really a plugin. It’s a utility of sorts. It’s not really a plugin, because you don’t call it.

Related:  Web design resourcesframeworks jszacblakemore