Spritely is a simple jQuery plugin that allows you to make animations with two simple methods. Both sprite and pan methods rely on background image CSS property of an element, and the main difference between the two is that sprite image must contain frames while pan image is one big continuous image which is repeatedly panned left or right.

Read more…

Let’s have some fun with form input fields and allow only numbers to be entered into text field via custom styled keypad. The goal here is not to make a plugin that will have a bunch of options, and other probably not needed stuff, but to simply give users a styled numeric keypad upon field focus, and forbid all other events on the field. As you are about to see, keypad is styled only with CSS and can easily be customized.

Read more…

Like it? Tweet it! is a jQuery-powered JavaScript widget that enables visitors to your website or blog to write a tweet about the site directly in a box displayed in the corner of the website, with a link to the site already embedded in the input field. It gives an easy way to site owners and visitors to share interesting stuff while still being able to change the content of the tweet and make it more personal.

Read more…

There are many jQuery plugins that give designers an array of options to use in order to make very nice captions. We can’t argue with that, and what I am going to do here is not much different, but it might just help you avoid the need to include a large number of plugins on a single web page. After all, captions are not that hard to achieve, and in this tutorial we are going to make them very simple and with less than ten lines of JavaScript code. Compare that and plugins which incorporate a large number of lines, and you’re gonna see advantages. Not to mention that those plugins often provide options that you don’t even need most of the time.

Read more…

As old times slowly fade away, everybody seems to forget classic markings of previous eras. How many of you still remember those old television sets where every change of channel was accompanied with that everlasting  static noise? I reckon small percentage, as modern kids are used to new technology where this stuff was polished out. So, for old times sake, lets make a small jQuery gallery plugin which will mimic that behavior with every slide change, and where slides can contain anything from images, to any other content. But, no fancy controls. Just a basic wrapper that hooks up on parent container and transforms it into a one slide at the time gallery, with optional slide interval and static noise duration.

Read more…

Just as we’ve started plugins section with a simple plugin, lets start tutorials section with a simple tutorial in which we will use jQuery to filter out table rows that do not contain desired search string. It really doesn’t get simpler than that as we will use only a couple of jQuery lines to achieve our goal. All we need is a simple HTML page with a form, input field, and a table with some text through which we can do the search. Lets get started.

Read more…

Sometimes logical steps, which we use every day to find solutions for our problems, fail us without a single word of warning. Let me explain. Sudden need for a nice star rating system tutorial, which could be used as a basis for a custom made rating control, resulted with poor response from our mighty search engines. High expectations ended up pretty quickly, and all I could find was either unusable, either poorly documented or broken, or just back linked to previous ones, which is even worse. But, after additional filtering I’ve managed to isolate four tutorials that are worth checking out, and from which we can all learn a thing or two.

Read more…

Lets start simple. Recently I’ve been working on a project which involved some small padding animations on different elements across entire application. As animated padding on child elements is a simple subject, it is not a problem to write few specific and targeted lines along with other application code, as it was the case in that project. But, as jQueryFun is fairly new in this pool of sharks, it might as well be a good starting point to feel the water and maybe make one small and simple jQuery plugin. So, let’s get started.

Read more…

Hello world indeed. As this is the first post ever here at jQueryFun I think it is okay to start with that sentence as it clearly marks a beginning of something new and exciting. At least for me it does, and hopefully this place will become just that even for you. So, what is jQueryFun all about? Well, as the title implies, mostly about jQuery and its wide usage in web world, although the general plan is to pay attention to other related stuff like JavaScript in general, and maybe even a tiny bit of design and CSS stuff through news and events section. After all, jQuery is widely used by designers all over the world.

Read more…