Posted on

Flexible site layout with resize detection

As phone sand tablets become more popular it’s becoming more common to see sites that can dynamically handle them, as well as notmal users, without having to load a special “mobile version”. There are several way to create such fluid sites, but today I’ll be talking about one I made not to long ago.

WordPress twentlyeleven, the new theme with wordpress 3.2, is a fluid width site, as you shrink your window the relative sizes get smaller, eventually breaking down into a single column site for mobile devices. They do this with CSS3 @media conditions, and while this is a perfectly usable method I found it left a little to be desired. First it bloats your stylesheet with all it’s extra group and if your using something that deletes comments, like the CSS color changer I posted last week, those group will get removed and the site will no longer be fluid (in fact it will probably be broken to boot). The second this I dislike about the @media method is the lag. Whenever  it changed between sizes the browser pauses for a moment while it figures everything out. I know this is probably a minor concern to most people but it annoyed me to no end, I wanted quick, fluid changes. For those reasons I wrote a short little jQuery javascript to do the dynamic changing.

Snipplr: http://snipplr.com/view/59044/flexible-site-layout-with-resize-detection/

The script adds a style to every element in the selector variable, which is anything that jQuery would understand as a selector (in the example it’s several different divs separated by commas, but I’ve done it with various other selectors). The classes that are added, as well as the sizes they are added at, are controlled by the if statement. In the example, the sizes “tiny_screen”, “small_screen”, “medium_screen”, and “large_screen” where added if the window was under 320px, between 321px and 768px, between 769px and 1024px, and anything larget that 1024px respectively. Those sized are all easily changeable (reducible or expandable if you want more or less steps). Using an if statement to control the sizes isn’t the most efficient way sure, but if your under 5 size options it’s just as fact as any other method, possible even faster if your number of levels is low. That said, if anybody wants to use more and notices it being problematic let me know and I’ll remake it using another method.

Settings up default styles, for those people without javascript enabled, can be done in two ways. First is to use the cascade effect of stylesheets, so say if one of your elements is the #main tag, you can give the normal #main the styles you want, like width:800px;, then give #main.small_screen a different style, the one you want on a small screen, say width:400px. Because #main.small_screen is more detailed that #main, it’s rules will override #main’s rules and it’ll give you the smaller, updated width. This methods does have the disadvantage of making some thing more difficult to adjust in the style sheet later (because you have to hunt it down and look between them all). I suggest simply giving those items a default class. I figure most people with javascript turned off are using medium screens, so in that case my html code would include both an id of main and a class of medium_screen, the script will adjust that ass soon as the page loads if it’s bigger or smaller assuming it can run and if not they should be able to use the site just fine.

I’ve got an example of this right on the resizer example page  so you can see it in action. If you have any questions/comments/criticisms post them below, as well as if you use this in a project or improve upon it and I’ll update with that information included as well.

Posted on

CSS minifier and color changer

Sometimes you want to be able to compress your stylesheet without having to worry about having a working version and a minified version that are separate, or going back and reflowing your minified version every time you want to make a change. Sometimes you want to be able to change a color without having to go through and find the then thousands times you used to and change them all my hand (even with a fancy find/replace command). In that case it’s time to get some scripting involved, I’ve done this in the past, with a more advanced version that also included allt he linked images as data URIs, but that truly is overkill and can really slow down a style sheet process with large images in it. My original version was also much slower overall relying on <code>str_ireplace()</code> instead of a much neater regular expression. So when I was taksed with making a new version for a different site I figues it’d be best to more it as compact and fast as possible> After some tinkering and playing around with regular expressions (regexpal.com is a great place to do that BTW) I came up with this:

Snipplr: http://snipplr.com/view/58764/css-minifier-and-color-replaces/

What this script does is pretty simple, first a function is declared, this is the function that replaces colors, if your not going to be doing that you can remove it (and the second regular expression). This it loads the file using file_get_contents, if you have multiple stylesheets you can load them all into it and places them all in the save $css variable using .= instead, then it runs the regular expressions (first one minifies, second one replaces colors (more on that in a bit) and finally it preps the output and prins it. The first regular expression is kinda long and may be hard to follow, but it removed all comments, lines breaks, and spaces when there not important to the formatting (so if you use the sigle element margin declaration <code>margin: 0px 4px 3px 10px;</code> all thos spaces will be preserved, except for that first one after the <code>:</code>). To compress the code further you could also gzip to results when it’s supported by the browser but I didn’t do it because of some strage behavior on my test machine when it comes to gzipping things, it’s on the list for the final release code though. I suppose if you wanted to take things one step further you could also search for inefficient code and replace that as well, but I didn’t include it because the software I use automatically does that (yes I was being lazy not including it but it really would have been a waste of time and made the script a lot longer in the process).

The second regular expression find specific comments placed in the code after colors and replaces them, for example it would take this:

and turn it into this

assuming that the colorize script returned red as the color. The colorize function can get the new colors however you want it to (in whatever format you want too), the can be pre-determined from an array, picked based on time of day, cookie settings, database settings. Whatever you want to do to get them should work. Personally I’m using Wordpress to save them and then pulling them back out from that, this gives you a nice page on the Wordpress backend to save the colors. This gives users a simple way to change colors on there themes without having to dirty themselves with css code (good considering most people using these themes don’t know anything about css). Best part is, if it’s missing a value it will use whatever is in the stylesheet normally, so you can still do your layout with a program that has live previews without having to refresh pages to get the php to re-run.

This could easily be expanded upon in the future, and perhaps one day I’ll have the chance to do that. It could easily be turned into something with complete customizability, even to the point of replaced border and margins, widths, padding – you name it. but for now it will just do colors as thats a good 90% of what needs to be changed. Any questions or improvements let me know in the comments.

UPDATE: I made the color catcher better and added keyword support, you can see the new version here: http://fatfolderdesign.com/400/unimportant/css-colorizer-update

Posted on

Simple jQuery Rotator

A friend of mine needed a simple image rotor, so after a little pestering I finally decided o make one. It’s dead simple, and theres tons of room for improvement, but it seems to be pretty reliable and they liked it. Figured I’d post it here, perhaps someone can use it and improve upon it.

The script uses 3 parts, first the HTML layout

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

This is pretty simple, you have a container (which isn’t required code-wise), some divs used for the previous and next button sprites (given the IDs rotator_prev and rototor_next respectively) and in the middle is a the rotator_box div, thats the area that actually shows the images or whatever other content you want (The script can handle anything placed in that div). Finally inside the rotator_box there are rotator_set boxes, each one of these has a number at the end of it, each 1 greater than the last. Like I said this was a simple, quickly made rotator.

There is also some CSS applied to this code, the important stuff is below.

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

The most important part of that is the defined width and height, along with the overflow set to hidden. This gives you a box of the right size to show the content you want, and hides the rest of the content out of view. This can be done in a linear row, a grid, a column, whatever you want, just adjust the width and height.

Finally the last part which pulls it all together, the jQuery script.

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

This script runs on document load and does a few things. First, it defined two onclick events for the next and previous buttons. All they do is add or subtract to the lastloaded variable used to determine what is being displayed, after they do that they run the update function. The update function fades the currently visible items out, and fades the next one in. After it’s faded in, the script reset it’s opacity to 1. This is just a precaution, without the explicit opacity reset click to quickly will cause a minor flitch where an image will no longer fade to full opacity.

Thats it. As I said it was made quickly and simply, but it works great. If you want to see it in action you can check out the Simple jQuery Rotator example, theres some notes in the code (although nothing not covered by this post) and it’s in an external file if you’d like a copy to play around with. If you find a good use for this or make any improvements let me know and I’ll post about them.