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.

Posted on

Content load on Scroll with jQuery update

This post is primarily an update to me Content load on Scroll with jQuery post. Check it out for more information.

Commenter Mihajlo noted that there was a problem with the Content load on Scroll with jQuery example in Firefox 5 for windows and linux, and before I could even get off work to take a look he posted a fix.

The problem has to do with the browsers cacheing system. When you reload the page it keeps the cached value of the hidden input that keeps track of how far you’ve scrolled, so when you reloaded it would display the initial 50, then jump to wherever you were. The solution is simple, you just need to reset that value once the page is loaded, so that it will overwrite any cached data your browser may be using. The code posted is as simple as it gets

Snipplr: http://snipplr.com/view/47744/simple-content-load-on-scroll/

You could also fix this by playing with how browsers cache your site, but sine more browsers get it right most of the time, this seems like a better solution to me. I’ve updated the snipplr post and the Content load on Scroll with jQuery example page accordingly. Thanks Mihajlo.

Posted on

Super simple inline PHP alternating rows

Traditionally when you have lost lists of dat you want to alternate rows for usability. The first thing everybody makes to fix this is a simple if statement loop, but this adds a number of lines and is hardly a clean solution. Additionally it required you to have a “counter” or “switch” variable, usually placed at the bottom of the loop, overall very messy.

I had a boss who thought he was on the cutting edge by compressing the traditional if statement into a shorthand version (saving 2-3 lines of code), but the system was still using a $class variable and still requires a counting or switch variable. It was still a mess and added clutter to the code that was already cluttered.

Earlier today I was working on outputting client records for the previously mentioned fully customized application. Wanting to avoid such messy code as I’ve seen (and admittedly used) in the past I looked for a better solution and with a little tweaking and playing I came up with this (actually I came up with something similar, that I further optimized at home, but lets not split hairs here).

Snipplr: http://snipplr.com/view/56219/simple-inline-php-alternating-rows/

Thats it, that placed inline in a normal echo statement will place the class alt every other time. It’s a simple modification if you want to call a class tag without adding the key (say you already have a class assigned to it and just want this as a second one, simply place it in the quotes and adjust the code accordingly). Compressed down to a single line it neatly fits into existing code (even HTML with inline PHP like WordPress) and keeps everything clutter free. Heres a simplified snippet of how I deployed it:

Snipplr: http://snipplr.com/view/56219/simple-inline-php-alternating-rows/

I’d usually go over how ti works but it’s pretty straight forward, only thing that might be confusing to newer programmers is how it determines what to output and the general format of shorthand if statements. Simply put the output of putting something into a variable (in this case the ' class="alt" into the $alt variable) is always what you put in (assuming PHP can put it in it, but not being able to is a rather abnormal situation). As for shorthand if statements they are simple; (conditional ? true : false), only disadvantage is that a shorthand if statements are only good for one thing (no multiple lines by inlining ;‘s with it).

I’ve tested this on several servers and it’s haven’t noticed an issue. This is the most compressed alternating row script I’ve seen online, if anybody knows of a reason not to use it (or, if it’s even possible, a shorter version) or uses it in something cool let me know.