subCHILD

Archive for the CSS category

Slideshowify Gets a Project Homepage, Demos, Documentation

posted by admin in Code, CSS, design, HTML, JavaScript, jQuery, jQuery

After just sitting there collecting dust for a while, Slideshowify is back and better than ever.

New updates include CSS3 support (provided via @rstacruz‘s excellent jquery.transit.js plugin), animation as well as zooming in both directions and better browser support – it works and looks great on tablets and other touch devices.

In addition, the project now has a legitimate project homepage which provides documentation and a couple of live demos. 

Check it out now at: http://subchild.com/slideshowify

Slideshowify: Ken Burns Slideshow Effect as a jQuery Plugin

Slideshowify is a jQuery plugin for creating a slideshow of images that will fill the screen with a (cropped) image, then pan across to reveal the rest of it. This is commonly referred to as the Ken Burns Effect and is often seen in documentaries. A nice version is of it can be seen in that Mac screensaver.

Anyhow, here’s a stab at such a thing. Some future enhancements are obvious (pan direction, zooming, transition options, etc.) and anticipate finding the time to add that stuff shortly.

For now, check out the code on github.com and see a demo at www.subchild.com/slideshowify

To use it, include jQuery, jquery.slideshowify.js, then feed slideshowify a selector that matches some images. For example:

$("img").slideshowify();

Alternatively, you could load data from an external feed and call $.slideshowify() with configuration options:

$.slideshowify({
 	dataUrl   : "http://www.gallerama.com/services/gallery/get.php?gid=2107&versions[]=9",
	dataType  : "jsonp",
	randomize : true,
 	filterFn  : function(imgs){
 		var fixedImgs = [];
 		$.each(imgs, function(i, img){
 			fixedImgs.push(img.versions["9"]);
 		});
 		return fixedImgs;
 	},
	afterFadeIn : function(imgData){},
	beforeFadeOut : function(imgData){}
 });

Most of the params here are passed directly to jQuery’s $.ajax() method. Some are used to reformat the data (slideshowify() expects an array of objects of this format: {src:”domain.com/path/to/image.jpg”, w:”600″, h:”400″}), others are hooks or speed (fade, delay) options.

Proper documentation will be provided. Most likely.

The "MS Shell Dlg" Mystery (Solved)

posted by admin in browsers, CSS, design, fonts, HTML

If you haven’t noticed (and are using a PC), the headlines on this blog should now be rendered using the MS Shell Dlg font [I've since changed this and have been experimenting with custom fonts via @font-face, but all information in this post still applies otherwise.] I learned about this font just now after trying to figure out why tadalist.com‘s input fields were rendering using it instead of the fonts specified in the CSS rule. I’m still unsure why the computed style lists MS Shell Dlg as the font since its never explicitly specified nor is the the default, but it is. (If you know why this is, drop a comment below.)

Anyhow, I really like the way this font looks at 20+ pixels and bolded, so its the new style for the (H2) headers. If you’re on a Mac, you should see Helvetica and since that font carries mad clout complaints will be appropriately ignored.

OK, I’m off to read more about this, starting here: http://support.microsoft.com/kb/282187

Update #1

Just read it.  A very intriguing quote from that page: “It is not a font but a face name for a nonexistent font.”  What?  Its definitely a font and after testing all of the usual suspects, I’m still unsure which one. Bizarre.

Update #2

I found the answer on this page: http://msdn.microsoft.com/en-us/library/dd374112%28VS.85%29.aspx.  The font that MS Shell Dlg maps to on all versions of Windows since Windows 2000 is “Microsoft Sans Serif”.  But I’m guessing that using MS Shell Dlg in the CSS rule instead makes more sense since it will map properly on other versions of Windows, and since its a shorter rule.  Though, specifying “Microsoft Sans Serif” explicitly, followed by more common fonts would make for a better rule and ensure no further surprises.

All this said, I’m still not sure why tadalist.com’s input fields are rendering in this font.

Update #3

Since writing this post, I’m noticing this font substitution taking place more often.  For example, Twitter‘s login input fields behave the same way, as does the h2 tag on Dictionary.com.  What all of these have in common is that they specify the first font name in quotes (presumably since it contains multiple words) and it happens to be a font that I don’t have installed.  While quotes should be permitted in such cases and are even encouraged by some, I find that its not necessary and here appears to not have the intended effect.

Best Cheat Sheets for Web Developers

posted by admin in CSS, HTML, JavaScript, jQuery

A colleague of mine sent out a link to a very resourceful page containing very helpful cheat sheets for web developers.  Get them here: http://www.webappers.com/2008/11/05/best-cheat-sheets-for-web-developers/

I haven’t seen the WebAppers site before, but it definitely deserves a bookmark and periodic visits.

Simple JavaScript and CSS File Bundler

posted by admin in Code, CSS, JavaScript, PHP

Optimizing web page loading is not a new subject, but it remains one that doesn’t get as much attention as it deserves.  Web/UI developers often assume that site performance is mostly attributed to back-end operations (database interactions, processing, etc.), servers themselves (hardware and software) and other variants such as bandwidth, traffic, etc. But there are many ways to optimize client-side code in a way that will result in a noticeable improvement in site loading and performance.

Fortunately, some of these techniques are becoming more common. For example, CSS Sprites are frequently seen now days and are heavily used by Google (sample) and Yahoo (sample).  The reason CSS Sprites are a good idea is because reducing the number of requests means that servers have less to process and deliver, while the browsers have fewer components to download. This point is one particularly worth noting since before Firefox version 3 and Internet Explorer version 8, most browsers supported only 2 concurrent requests per domain. (With new browsers, that number goes up to 6, but the concept is no less important.)

So, loading fewer files is good for both the server and the client. CSS Sprites allow us to cut down the number of images which need to be downloaded (and also prevent having to preload images which are initially hidden, such as rollovers), but how can this technique be applied to other page components?

More

Recent Posts
Recent Comments
About
Simon: Hi there, i am looking for a parameter which can change direction of mov...
CM: Hi, Alex! I know exactly what king of messages you get, like "Hi, I'm new to php a...
admin: Alive and well....
SJ: If the array size exceeded 10 then sorting will not work. any help?...
shutterstock: I've learn several excellent stuff here. Definitely price bookmarking for revisiting....

Subchild is a blog about web development. It's author is Aleksandar Kolundzija, himself a web developer for 10++ years, presently a Hacker-in-Residence at betaworks. Prior to betaworks, Alex worked at Google, Meebo, MLB Advanced Media (MLB.com), Razorfish, and elsewhere.

Some of Alex's side projects include Gallerama.com, Slideshowify, LiveXmlEdit, and other blogs like Dopevector and blog.gallerama.com. When he's not working on any of those, Alex is probably playing guitar, producing music, mixing records, taking photos, playing with his kid, or watching documentaries about particle physics, the monetary system, etc.

Let him know what's up: ak @ subchild.com