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.

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.

Content load on Scroll with jQuery

To produce a similar effect as twitter (although for an entirely different purpose) I created a little bit of script to load additional content to ht end of the document when you scroll to the bottom. This will create the effect of the page being as long as your total content, no page switching, no linking to to other pages, just one long page.

This version uses jQuery because the site I’m making uses jQuery for a bunch of other things, I do have a complete non-jQuery version if anybody is interested. Anyways, heres the code

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

The scripts pretty straight forward, only things to note are that the current top display number is stores in a hidden input, the reason I have it set up this way is because if the user doesn’t have jquery, of the script fails to load for some reason, I’ll still know where the are so a traditional next page button will pick up where they left off. There’s also a minor bug on my phone when testing, I’ll look into it and post a fix if I find one, shouldn’t be to hard to fix with some polling (check position every x milliseconds), which, coincidentally is how the non-jQuery version works.

Example can be seen right here: http://fatfolderdesign.com/ex/scroll_load/, it’s as basic as basic can be.

Edit 07/15/2011: Having a problem getting this to work properly in Firefox? So did commenter Mihajlo, he also supplied a fix before I even had a chance to take a look. I talk a little in a new post, aptly names Content load on scroll with jQuery UPDATE but for the short version is add this bit of code, just add it or integrate it into existing code:

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

I’ve updated the snipplr post and example page accordingly. Thanks Mihajlo.