Version 1.2 of the jQuery Before/After plugin is now available. The changes in this version are minor and were made primarily to account for issues in Chrome and Safari when dragging the divider (apparently this is a webkit/jQuery issue involving the latest versions of each). I also cleaned up the code a little however the final size of the plugin remains about the same at a slim 7k (~4.5k minified). See this post for instructions on how to use the plugin and demos. The demos have been updated to use jQuery 1.4.3 and jQueryUI 1.8.5.

If you’ve spent more than a few minutes coding in JavaScript, you’ve probably run up against the “this” keyword. Beginner coders can sometimes have trouble understanding what “this” is and what it’s for, especially if they’ve never coded in another language before.

What is “this”?

Some books and online resources define JavaScript’s “this” keyword as:

• “The this keyword is important.  Any function that is used as a method is effectively passed an implicit argument – the object through which it is invoked.” (JavaScript: The Definitive Guide)
• “The this keyword refers to the context object (a.k.a. current object).  In a method call obj.method(), in the body of method, this is a reference to obj.” (MDC)

Crystal clear, easy to understand, no fuss, no muss right? Please. It’s all gobbledygook. In a nutshell, in JavaScript when you perform an action on a DOM element like clicking a link, submitting a form, hovering over an image etc., JavaScript automatically uses the “this” keyword to refer to the object that is being interacted with.  Think of “this” as a link from a DOM element being interacted with.

Example 1:

<p style="color:navy" onclick="alert(this.style.color)">

In this example, when we click on any part of the paragraph, an alert box will pop up with the text “navy” because within the alert, “this” refers to the paragraph and everything within it. We could have also referred to a different DOM element (e.g an element with an id of “foo”, all <h1> tags, etc.) so that clicking within one paragraph alerted us to the color property of a different paragraph; for example the one with an id of “foo”. Continue Reading »

jQuery Panel Gallery Plugin 2.0

Since it’s been about a year since the Panel Gallery plugin was last updated, I figured that it was overdue for some spiffying up. I’ve completely rewritten the Panel Gallery plugin and added a HUGE amount of new effects. You’re no longer are you limited to just panels to transition your images; now you have a whole slew of different effect to apply, with multiple ways to apply them. View the demos.

Version 2.0 (the Super Happy Fun Ball™ edition) has the following transition effects:

• Fade – A simple total image fade
• Box (5 variations) – Transitions by dividing up an image into small squares. Transitions can be random, or wipe diagonally from top left to bottom right, top right to bottom left, bottom left to top right, and bottom right to top left.
• Panel (44 variations) -  Too many to list, panels divide up an image horizontally or vertically and animate based on your options. Some effects are, zipper, teeth, reveal, north/south, east/west.
• Overlay (8 variations) – These are the original Panel Gallery effects, with the ability to add a blinds effect for any overlay option.
• Jackpot – Vegas style baby! This effect divides an image up into three pieces and transitions them like slot machine wheels.

You can apply specific effects on any image, create an array of effects, of let the plugin pick effects for you. This, combined with the plugin’s options gives you an unlimited amount of combinations to use. Continue Reading »