Snipplr

(jQuery) Auto-Replace Broken Images - FatFolderDesigner

Sun, 08 Jan 2012 09:47:12 UTC

There are 2 jQuery snippets, both replace broken images with one of your choosing, the difference is that one is "safe" and the other is "persistent". The safe one will quick working, so if your doing something that dynamically changed images on a page it'll only work for the first broken image. The persistent one will keep working, but if your missing image image is missing it'll cause a overflow error.

(jQuery) Flexible Site Layout With Resize Detection, now improved! - FatFolderDesigner

Sat, 05 Nov 2011 11:02:52 UTC

I've previously posted this here: http://snipplr.com/view/59044/flexible-site-layout-with-resize-detection/ This new version is short and more efficient, plus it no longer shows 1 (harmless) error on launch. Works the same as last time, the sizable object has the size to add the class too all the sizable elements, so for this example if the screen is less that 450px it'll add the class "phone" to the body (and the other elements), and if it's larger than 750px, but not 1000px, it'll give it the tablet layout. More information about the script is at the link, questions/comments/concerns can be sent to be from here or the comments section at the link.

(jQuery) Simple jQuery Rotator - FatFolderDesigner

Sun, 24 Jul 2011 05:02:20 UTC

The code is in three parts, a HTML layout (with some requirements I'll go over below), some CSS code (again, requirements below) and the actual jQuery code. I go over all the code in detail at the link, but I'll give a quick rundown od the jQuery as well. The HTML: The button that control next and previous are given IDs of "rotator_next" and "rotator_prev" respectively. The content shows in the a div with the ID "rotator_box". Inside the "rotator_box" div there a other divs with the IDs "rotator_set_#" where # is a number, 1 through as many pages as you want. The CSS: The important part of the style is the width, height, and overflow property. The width and height allow you to control the way the items are display, be it column, grid, or standard horizontal orientation. The jQuery: The script runs on document load and sets up a click even for the next and previous buttons. This evens add or subtract the lastviwed accordingly and run the update function, which does the fading out and fading in. After the contents have faded in it sets the opacity to 1, this is just to prevent any overzealous user from clicking so fast it makes a page stop wanting to fade fully in. Like I said, theres more info and an example at the link.

(jQuery) Case Insensitive contains jQuery selector - FatFolderDesigner

Sun, 05 Jun 2011 05:13:33 UTC

This one was not created by me, but I can't remember who originally created it. It does the same thing as the built in :contains() selector with one important difference, it's case insensitive. Since I usually type in all lower case (bad habit I know) I like to use it for filters. It's also a nice one to use on name filters, that way if the person using the filter doesn't use the proper case it will still pull of the name, for example if they type in "Delsoto", but the proper capitalization is "DelSoto" the default :contains() won't find it, but this modified :Contains() will. Very convient. If you have any questions about this selector, or happen to know who made tit, post and let me know. Use it in a cool project, do the same.

(jQuery) Animated Pitchbars - FatFolderDesigner

Sun, 29 May 2011 05:28:11 UTC

The comments for this are broken down into 2 parts, first the script is talked about, then theres a little about the HTML code that the script relies on. You can find more information at the URL, as well as an example of it in action. You can leave comments here or at the link if you have any questions or comments, or if you found a nice use for it. First the script. Use jquery to load this once the document is complete. The function starts with variables, the first line of them are ones for easy modification, pitches in the number of pitches it will show at once, and the shortdelay/longdelay is the delay between animating individual and pitches and the delay between animating the last displayed pitch and starting from the top again respectively. After that there is a while statement, this takes the appropriate pitch and wraps each element around a span for animation purposes. Then it gets into the main scripting and animation section. The each function runs through each of the spans and starts the animation on it. First is fades the current value out, it inserts the new pitch, pre-set at 0 opacity, and fades it in span-by-span. Once the loops is complete it runs a couple checks; is it the last pitch being displayed, is it the last pitch in the list of all pitches, and what itâ€™s going to be doing next. In the first two cases it resets the appropriate counter, the last check determines if it will run the short delay (between pitches being displayed) or the long delay (between displaying the last pitch and starting the animation cycle again). With this setup the script will run forever, looping when needed. It does require some HTML formatting though, is in the second section. Second, the HTML The first section is the list of pitches, stored in an un-ordered list with the id "pitches". Each pitch simply goes in a list item. Theres nothing more to creating the list of all your pitches. The display goes inside the divs. The class pitchbar is my own simply for formattingand is not required the other one, activepitch# is the area where the the current pitches will be displayed. The "#" is for each pitch that you display at a time from 1 to your max, for example the code below has a pitches of three, so I have 3 divs; activepitch1, activepitch2, activepitch3. The example at the url has 5 divs and a pitches value of 5 as well.

(jQuery) Inline labels with jQuery animations - FatFolderDesigner

Sun, 22 May 2011 05:12:00 UTC

After being tasked with creating inputs like those on the twitter homepage I came up with this inline label system that uses jquery to control the labels (in the vase of the example it fase and slides them). The code is in three parts. First, the input are formatted a very special way, donâ€™t worry itâ€™s basic and easy to implement. Take a look at the first section below. The input is obvious, as is the label, the last div, with the class .inputerror.firstname is some specific code for inline displayed error messages, I may make a post about them if there is any interest. The label is moved over the input box. Because of this itâ€™s important to have the label properly formatted with the for="" element pointing to the appropriate input field. Second is the CSS. Obviously the code below has some styling for looks, which is fully changeable based on your individual implementation, the important stuff is the display, overflow, and the margin-top on the .inputbox label, as well as the previously mentioned background in the .inputbox input style. Youâ€™ll notice that the inputbox doesnt have a width or a height (except where limited by the actual input inside it). That because thats all set via the individual inputs so you can vary it from input to input depending on what will go in it (just like the example has set up). The last bit of code is the scripting. The first bit checks if there is a value to the input, if not it will reanimate the label back in, with a simple fade in in this case, but you do have full control over how it does it. Then, if there is something in the input it will fade it out, in this case by pushing it right while fading out. Once a label is completely faded out it is hidden so it wonâ€™t interfere with normal operation of the input box (like selecting or double clicking). It also makes it visible again before fading it back in. All three parts put together make a nice animated inline label like the ones on the example page located after the url (scroll to the bottom of the post for a direct link). Itâ€™s been tested in IE and on mobile devices and seems to work fine albeit with slow or no animations on mobile devices. If youâ€™ve found a great use for this, converted it to another library (or no a library independent form), or have an questions or would like some help with modifications or implementation on your specific site leave a comment below or on the blog at the link.

(jQuery) Insert alphabetically with jQuery - FatFolderDesigner

Sun, 27 Feb 2011 15:14:31 UTC

This function will insert items into an orders alphabetically (assuming it's already alphabetical). Initially design to make a smooth single page load/save feature that sotred everything in drop down lists, you guessed it, alphabetically. Can simply be modified to work in any sort of layout (ordered lists was just easier for the example) Example at the link, you can post any questions there too.

(jQuery) Simple jQuery content filter with BONUS alternating row reset - FatFolderDesigner

Sat, 19 Feb 2011 18:49:06 UTC

A simple way to filter lists or tables that uses a new "Contains" (note capitalization) selector to clean up the code a bit. Three examples are below, first sorts through a list, second a table, third a tabe and it correctly the alternating row colors so that it keeps a nice clean look. Example at the link, any questions can be posted there too.

(jQuery) Prevent Stale Ajax Data with jQuery - FatFolderDesigner

Sun, 30 Jan 2011 06:14:17 UTC

When running live filters on large, long scripts you can get old, stale results replacing your new, fresh ones. After all, a search for everything containing 'S" in a large database of city names can take a lot longer than "Seattle", so your script gets the results for "Seattle", displays then, then it gets the results for "S" and displays them, replacing the "Seattle" search you really wanted. This script aborts the previous call before making the new one, effectively preventing that from happening. There are 2 caveats though. 1. The server may continue to process the request (depending on setup). 2. The error console logs it as an error, but not a fatal one and no alerts are thrown so the normal end user wont notice. I have some more information available at the URL.

(jQuery) Simple Content Load on Scroll - FatFolderDesigner

Sun, 23 Jan 2011 17:55:47 UTC

Simple jQuery script to load additional content when you near the bottom of the page, same sorta thing Twitter does (although I originally programed it for a different use). Only thing of remark is the fact that it stores the current highest loaded value in a hidden variable, that way, fi the scrip dies or the user does not ave javascript enabled you can use that variable to load the next set of content up through traditions POST/GET methods. I also have a version of the script that does not use jQuery if anybody is interested (although it is much larger and not as smooth). Example is available at the link. UPDATE: A commenter (on my site at the link) 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 he posted is as simple as it gets and has been added to the source. You could also fix this by playing with how browser cache your site, but since they usually get the right this seems like a better solution to me.