Tags: jquery

jQuery visibility pseudo-selectors

To help me with a project at work, I’ve written two jQuery pseudo-selectors which will help determine if an element is currently in the viewport or if it has been reached during scroll. This can be incredibly powerful if you’re looking to only display certain items (like a “back to top” link) after you’ve reached a certain point on the page, or only while some other element is within the viewport. Read More →

jQuery.imgradio Plugin v1.0 released

The default HTML radio buttons and check boxes aren’t the most aesthetically pleasing things in the world of web design. With this in mind, I have created a jQuery plugin that will replace those pesky <input /> elements with <span /> elements for your CSS styling pleasure. Under the hood, the original elements are still being used for storing the user’s selection(s), so there’s nothing extra for you to do when the form is submitted. Additionally, it can be configured to operate as a “rating” system—so that, for example, checking the 4th star in a 5-star list would swap the first 4 stars in the list to the “checked” state (visually speaking, at least… in the underlying radio buttons, only the 4th star would be selected). Read More →

jQuery.noFlickerSlide Plugin v1.0.0 released

Since 1.1.3, jQuery’s slideUp() method has had problems with flickering in Internet Explorer. While this issue can generally be fixed by avoiding Quirks Mode with a DOCTYPE declaration, it doesn’t always work so easily. (The HTML 5 declaration worked for me, but was unfortunately not an option in the project at hand—which was filled with XHTML 1.0 Transitional pages.) To correct the problem with a JavaScript solution, you can overload the $.fn.slideUp prototype for all Internet Explorer versions and have it animate the element to a minimum height of 1px. The bug with IE seems to stem from it being unable to elegantly handle 0px-tall elements.

I’ve built a jQuery plugin, jQuery.noFlickerSlide, which does just that. You can download the source for yourself, or grab the minified version for use on your site. Read More →