Add Variables, Operations, and Functions to Your CSS with the LESS Dynamic Stylesheet Language

As a programmer, the most frustrating part about working with CSS is the redundancy. If you’re designing a layout with a strict color and font scheme, you can find yourself copy/pasting the same same snippets over and over…and what if that scheme changes? You get to track down each element, which takes forever even with search/replace.  What programmers crave for CSS is the ability to give dynamic behavior to a static sheet. LESS is coming to the rescue.

The LESS Dynamic Stylesheet Language is a brilliant little piece of Javascript (just 34 KB!) that you can add to your web pages to bring your CSS the power of a full-blow programming language. Installation is a snap: simply include a line of code after your other stylesheets, and suddenly you have the ability to use variables, operations, and functions in your CSS. LESS is compatible with IE6+, Webkit, and Firefox and will simplify the way you code.

Variables and Operations

Let’s paint an example:  what if you wanted to set a variable to convey a constant color or size throughout your stylesheet? No problem, just employ an @variable and your coding (and updating) just got a lot faster. Need to use basic operations to scale up font size? LESS supports that, too.

Functions

Maybe you want to reduce code redundancy by assigning multiple lines of code to a single word. LESS functions have you covered. Better yet, the functions support parameter variables for added flexibility — you won’t believe how groomed your code will look.

With LESS you can reduce your coding time and simplify your updating process by eliminating redundancies and employing basic concepts that programming languages have enjoyed from the very beginning. Save time and eliminate the clutter by adding LESS to your web development tool belt.

How To: Make a CSS background slideshow with jQuery

If jQuery has one strength, it’s the library’s fantastic ability to manipulate HTML objects. Built into the library are easy to use methods for moving objects, adjusting CSS and tag attributes, changing visibility of anything on the page, and many more. To sweeten the deal, jQuery includes animation effects that allow you to transition any object from one state to another in an aesthetic way that only takes a line or two of code.

With these ideas in mind, it’s a small wonder that many jQuery plugins were developed with the intention of easily introducing pretty slideshows to display and rotate series of images. However, if you look around long enough, you’ll be facing a frustrating truth—almost none of these slideshow plugins utilize the idea of rotating CSS backgrounds.

Right now you may be telling yourself, “Self, using rotating CSS backgrounds instead of image tags for a jQuery slideshow is a bad idea.” Well, surprise, this article is a dream within a dream within a dream to convince you of the opposite. When you wake up, you’ll have a changed mind, and better yet, you’ll think it was your idea.

Best practices in HTML, CSS, and Javascript

Let’s have an honest discussion about HTML markup and Javascript. As CSS became a dominant force in shaping the appearance of valid HTML in the 2004 and on, it became more important to structure markup in a meaningful way. Using tables for layout has gone the way of the dinosaurs, DIV overload is now taboo, and designers are utilizing more intelligent information structure in their markup. Somewhere in all this sanity, jQuery has made us a little bit crazy.

“Look how easy it easy to create an image slider for my page’s mast head!”

“But Brian, isn’t it foolish to make a mast head’s appearance reliant on an image tag rather than CSS?”

“Shut up, Self, just look at these animation effects. It’s so easy!”

“But Brian, what if you have 10 different images for a single mast head and jQuery doesn’t load properly or the user has Javascript disabled? Your page is going to look really funny with 10 versions of your mast head all displayed at the same time.”

“…screw those users…”

“This is not good practice, Brian.”

“But… but…”

“BE A CHAMPION!”

You get the idea. It’s not a good idea to use an image tag slider unless you’re looking for an alternative way of displaying structured content, such as a photo gallery. However, many designers use these convenient image sliders to display graphics better suited for CSS background use. Slackers.

Fear not, you can have your cake and eat it, too. All you need is jQuery and a bit of know-how. I’m here to provide the know-how, good buddy. Let’s do this—high five!

Creating an CSS background slider with jQuery

Step 1: Markup

We’ll start with the HTML markup and CSS. Our example will be a typical mast head that is of a fixed width and height in the body of the page:


As always, we’ll include the jQuery library and provide a space for our Javascript code in the head of the page:





The line of code $(document).ready(function(){}) is a way of telling your page to execute commands after the page has finished loading. Our script will go inside, just to be sure that our code doesn’t try to manipulate HTML objects that have not yet loaded.

Step 2: Preloading Images

One pitfall of dynamic CSS backgrounds is that when a background image is changed, the user will notice a ‘flicker’ as the new background is loaded on the page. We can avoid unintended visual discrepancies by preloading the images before the background-changing code that is executed.


var imgArr = new Array( // relative paths of images
 'path/to/images/1.jpg',
 'path/to/images/2.jpg',
 'path/to/images/3.jpg',
 'path/to/images/4.jpg'
 );

var preloadArr = new Array();
var i;

/* preload images */
for(i=0; i < imgArr.length; i++){
 preloadArr[i] = new Image();
 preloadArr[i].src = imgArr[i];
}

Let’s break it down. First, we create an array that holds the relative paths to each image file that we want to include in our rotation. Next, we create another array which will hold Image objects. A Javascript Image object is a symbol of an HTML image element, and once you declare its source, it is cached by the browser. We can then create a loop that goes through our ‘relative path’ array and creates an Image object representing each image we want in our rotation. The source is assigned for each Image object, and viola, our CSS background images are preloaded and cached.

Step 3: Dynamic CSS changes and animation

All that’s left is to take our preloaded CSS background images and rotate them one at a time over a set interval. This can be accomplished with a small amount of code:


var currImg = 1;
var intID = setInterval(changeImg, 6000);

/* image rotator */
function changeImg(){
 $('#mast-head').animate({opacity: 0}, 1000, function(){
 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
 }).animate({opacity: 1}, 1000);
}

There isn’t a lot of code, but there is a lot going on here. First, we set a variable that will map which image in the ‘preloaded’ array is being displayed. Next, we set the interval at which our changeImg() function is executed. Remember, Javascript measures time in milliseconds, so our argument of 6000 is equal to 6 seconds.

Finally, we create the changeImg() function that will change the CSS background image of the element we dictate while animating the process.  The logic is to use jQuery’s animate() method to transition from one CSS state to another over a set amount of time. In our case, we’re changing the opacity to 0 over a 1 second period. Then, we change the background image of the #mast-head element with jQuery’s css() function and a bit of fancy array element selection. At the end, we again use animate() to bring the element’s opacity back to 1. Essentially—fade out, change background, fade in. Neato!

Here’s how your final script will look:





True to form, this jQuery demo has a lot of things happening in a small amount of space.  Use this portable little script for any number of projects, and remember, only use an image tag slider if it makes sense to do so! In many cases, dynamic CSS background changes are best practice. Check out this script in action.

Until next time, amigos, happy programming.

*kick*

Fix: Featured Content Gallery WordPress Plugin Displays Incorrectly in Internet Explorer 6

For many websites, the Featured Content Gallery for WordPress provides the centerpiece and main focal point of the front page (Techerator included).  This plugin has the ability to display posts in a specific category as well as a graphic and accompanying text for a great preview of articles on the site.

The Problem

When doing some cross-browser compatibility checking, I noticed that the Featured Content Gallery plugin (version 3.2.0) was rendering incorrectly in Internet Explorer 6.  Instead of displaying the article’s preview text as an overlay on the bottom of the article image, it was displaying directly in the middle and looking very out of place.  The picture below shows the rendering error.

Featured Content Gallery Rendering Problem

The Fix

The solution to this problem was a very simple CSS fix.  Find and open the jd.gallery.css file for the Featured Content Gallery plugin (usually located at yoursite.com/wp-content/plugins/featured-content-gallery/css/jd.gallery.css).

Locate the following code (approximately line 41):

* html .jdGallery .slideInfoZone
{
bottom: 100px;
}

And replace with:

* html .jdGallery .slideInfoZone
{
bottom: 0px;
}

Voilà!  The Featured Content Gallery plugin now renders properly in Internet Explorer 6.

Featured Content Gallery Rendering Correctly

How To: Remove the Smiley from the WordPress.com Stats Plugin

One of the first plugins I installed when building the Techerator website was WordPress.com Stats, a plugin which offered useful and practical statistics (instead of the overwhelming metrics that Google Analytics and others provide) with the added benefit that since the statistics monitoring is hosted by WordPress, it would have no adverse impact on the site’s performance.  The only requirement to activate WordPress.com Stats was an API key, which is provided to anyone with a WordPress.com account.

WordPress.com statistics have been very useful and a welcome addition to my WordPress dashboard.  However, I noticed that when logged out of WordPress, a small smiley face icon was appearing at the bottom of the website and breaking the template!  Check out the picture below to see what was happening…

Smiley
Oh Snap!

As you can imagine, I was pretty unhappy to find my template being destroyed by such an innocent emoticon.  At first, I wasn’t even sure where the smiley was coming from so I had to examine the site’s source code to determine its diabolical origin.  It turns out the smiley graphic is added by the WordPress.com statistics script, and isn’t even a part of the plugin (trust me, I looked).

The smiley face can be removed with a very simple addition to your style.css file.  By adding the line:

img#wpstats{display:none;}

to your style.css file (located in your theme directory, usually www.yoursite.com/wp-content/themes/theme_name/style.css), the smiley face will be automatically hidden and no longer wreak havoc on your beautiful template.  The reason the smiley face only is displayed when logged out is so administrators of the site do not inflate the site’s statistics.

Hooray!
Hooray!

Incidentally, this little tip was included in the WordPress.com Stats plugin readme, but who really reads that stuff anyway? 🙂