The Inspiration

A few weeks back a good friend of mine needed to put together a website to display some of her drawings/portfolio pieces. And of course I decided to go with my jqGalScroll plugin but it got me thinking that there really should be a better way of displaying her work.

After digging around I came across thunderfuel's website and was like "OMG, I must make that" and well, I did, sorta. I built the foundation and since I am really not a design person I did not make it all that pretty, so feel free to take what I did and make it pretty.

Demo of the Portfolio idea

The HTML

As always, I am using a definition list:

The CSS

Nothing overly special, anything with height, width, or padding is needed, coloring and font styles are optional:

The JavaScript

I am using the the easing plugin in my example so be sure to grab that also:

Here is the actual code being used:

Demo of the Portfolio idea

The Improvements

So what else could be done to this example to give more of a WOW factor? Of the top of my head I can think of a few. Of course a good amount of WOW can be received from a good design instead of green on green, but what about an automatic slide show? What about different directions of the animation, ie. one from the left, one from the right, one from top and so on?

Be all mean, let me know what you come up with.

Update: Made a change to the easing methods to easeOutQuad and easeInQuad, should be less jarring.

What I have put together is some code that I have been using on a few projects and turned it into a rough plugin. I say a rough plugin because it is very basic and not entirely flexible; let's just call it a proof-of-concept.

Live Demo of Password strength indicator and generator

In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

The first example you notice that I have a basic indicator showing the strength is the form a colors blocks going from green to red with red being the strongest indicator. (I got these images from the cpanel password changer)

This is what you would normally see and it is fine, but what if your design is much like my current design where you are featuring trees?

In the second example we simply swap out the icon for a tree that has four levels and when the password is real strong the tree is completely filled in with red.

Have a look at the code:

The Code for Password strength indicator and generator

By default the plugin will work off of ten default classes that you can set the css for which you can do an image sprite like I did above. Or maybe just a DIV with specific colors and widths that will illustrate a growing strength of a password.

Final Thoughts

The point of this post is to show you that you don't need to limit yourself to what is already out there, expand your thinking to include all possibilities and not just prepackaged ones.

With that said, what other possibilities do we have for a simple thing like a password strength indicator? Hmm... maybe doing a meter type thing that goes from zero to a hundred and just rotate the pointer much like the clock example?

What I want to cover in the article is what I have learned and what steps I took when coding with RSH for the Mason project and for some other on going projects.

First thing you should do is download the Really Simple History code.

Secondly, I have been using a modified version of Adam Vandenberg's Querystring functions which has only one modification to it.

You will need to set up your script is a particular way so that the history script is created first, and then initialized, at least the way I do it, when DOM is ready.  You can get away with doing it on Window.onload but since most likely your code will be minipulating the DOM, initializing on DOM ready is probably better for you.

I set up my inital code like below:

Lines 1 and 2 we set up some globals we will be reusing later on and line 4 we create the history object. Lines 5 and 6 should be familiar to you, here we just check to see if the DOM is ready, if so, we run the code in the containing function. Line 8 we initialize the history script and at line 9 we set the listener to "theListener" which is a function I will point out further down the page. You will see that I also have an IF statement that is checking to see if this is the initial run. This is because the the RSH script does not run the listener script when it is initialized.

The next function is just a helper function I use all the time when dealing with the hash:

The last function is the "theListener" function which I referenced at line 9 of the second group of codes. This function will get called each and every time the hash changes.

Although the RSH script does pass back two params you will see that I don't use them and the only real reason for this is that I felt it was too complicated and I never really figured out how I should use them.

At line 2 of the function we check to see if the function was already initiated. Then at line 3 we set up a new Querystring reference - should probably change the name to hashstring or something like that at some point. And from this point on, you can check your query string for what ever parameters you need to and run the appropriate codes.

Ideals

I firmly believe that a site should still be functional, 508 compliant and still look good when styles and JavaScript are turned off. With this in mind we will be doing some "progressive enhancements" and since there is going to very little that won't work in all browsers I won't go into my rant about PE.

Structure

We will be using Definition lists; why definition lists? Because they are semantically correct for this situation. Have a look at two really good articles from Css-tricks.com and Maxdesign.com which go into detail on why you should use definition lists.

Below is the structure we will be dealing with, notice that we only have the DL/DT/DD structure and now wrapping DIV or any other extra mark up:

With PE in mind, we will use JavaScript to add in any additional mark up we will need to achieve the scroller look.

Current Progress

The content from our current progress is from a dump I did of my own site using WordPress' loop.

Styling

In our next layer of PE will are going to add in some style simple based off of the current structure minus the JavaScript.

Current Progress

In this phase we really did not do anything special, I just styled it as I would have normally. You can add more pop to it if you feel. Do note however, that at line 28 I am using a selector that IE6 does not support and since the extra padding for that element is a nice to have and really does not hold the user of IE6 back I felt it was ok to add that in there.

JavaScript

Now we start with the real fun, using JavaScript - in this instance, jQuery as our framework of choice, but you can just as easily use MooTools or DoJo - to add in some WOW factor. Here the plan is to wrap the DL in a DIV, add some classes to some elements, set up some events, and animations.

What we have in the example just below is some additional styles and elements.

Current Progress

Finally we have to set up the events and animation; what events do we need to set up and why? We need to bind the mouseenter and mouseleave event because if we want to be able to read what is being shown we need to be able to put our mouse over the content and have it stop any animations that are running so we can read it.

First thing we will need to do is to find out the total height of the grouped content is. The grouped content in this case is the DT/DD/DD/DD combination. We will be using the outerHeight() method to get the total height (padding/margin/height). To get that grouped content we will be using a combination of .children() and .slice().

Final

Final

Closing

So with the final product we have a decent footprint to stylize to your likings. Feel free to stylize it, add new functionality, new animation - some easin/easeout effects would look nice. Think outside of the box, just make sure it degrades nicely.

For those that want to do the same thing with jQuery here is the JavaScript code, please have a read at his post for the PHP code and any discussion his post sparks.

Yeah, I know, there is so much less code then the MooTools example, why is that? Psstt... because jQuery is better ;).

Here is a live demo (an email is not sent, but the returned data is appended to the page.

Preparations

I spent about three weeks getting this presentation together with the hopes that everything I talked about would be self-explanatory.  For the most part it was, there was some items that I should have wrote differently as to not make it look complicated.  Over all I think most of the items just flowed well.

My preparations went something like this, first I went through most of the code I had written over the past two months.  As I went through the code I made a tally of what traversing methods where used and how often.  I was suprise to see that I used .eq() quite often, guess I am glad jQuery brought that back quickly after the move to the .slice() method back at 1.1.4.  The others that ranked pretty high were .is(), .hasClass() and .not().

Since that list is pretty small I decided to go through some of the "help" emails, IMs and twitter messages I have gotten over the past couple of months and although I took some more complex routes with the answers I provided, after looking at them again they could have been accomplished better by using some of the family methods.  Yes, I am coining a new phrase for a group of methods.  Those methods are .children(), .parent(), .parents(), .siblings(), and the cousins .next() and .prev().  I also through in .end() since this can be a very useful method and helps the chaining a bunch of calls together.

I know that I am much better presentor when i present on the fly with minimum talking points, so actually creating a slideshow and talking off of that slide show was going to very hard for me.  After many, many edits to my talking points that I had written down and desided to put pen to paper or mouse pointer to web browser.  I signed up for an account with 280slides, started making my slide.  Although the app does not offer the same flexiblity or features that a desktop app would provide, it was pretty damned close.  My hat goes off to the developers of that app, it is quite nice.

After some time, about two weeks, I finally got the presentation done the day before I was to present.  I went to the slides over and over again and noted what points I should make what points were less important and depending on how well the presentation was going, I would expand on those talking points.

The Presentation

The meetup did not have a big turn out so the nervousness I had before hand disapated enough for me to get in to my zone.  I started off by introducing myself and did my best to keep away from any self depricating statements that I am so very skilled at.  Told the group what I would be focusing on, Selecting, Caching, Traversing, and we were on our way.

The group consisted of a few JavaScript rookies and JavaScript novices but for the most part, everyone knew CSS.  So for selectors, I focused on if you know CSS then you know how to select DOM elements in jQuery.  It really is that simple.  I explained the Hierarchy Selectors since a good majority of people I've helped over the years don't fully grasp them.  The main ones are the prev + next and prev ~ siblings selectors since if you don't see it is use, you can't really grasp the purpose of them.  I also showed the built in Custom Selectors but did not go into detail with them.

Caching was pretty straight forward so there was not much explanation needed for that.

Finally I jumped in to Traversing, focusing the methods I mentioned above.  The .is(), .hasClass() and .not() methods were pretty easy to explain, but for the family methods I actually had to show a family, my family.  I created a family tree for the group to better demonstrate .children(), .parent(), .parents(), .siblings().  I think it went over pretty well, I think for ease, I will put this grab in between each of the family method slides.  Moving back and forth between slides was a bit time consuming.

Explaining the .next() and .prev() methods was pretty easy and straight forward, there were some questions, but mainly because I was using a bad term, can't remember what it was now.

To demonstrate .end(), I pulled up a few pieces of code from projects that I've been working on and explained what each line was doing, much like what I did for the "Slide in tab" post I did a few weeks back.

The Close

There really was not a ton of questions thrown my way, that could mean that I did an excellent job of explaining myself or it means people were totally confused and felt I could not help them.   For the questions that were asked, I was able to answer them pretty easily.

My thoughts

There are obviously a few things I feel I need to work on and will try to do so.  I want to do some more talks, maybe focusing on the same topic at first till I feel that one is working the way I want and then maybe move on to more complicated jQuery topics.

The slide show I used for my presentation is below, feel free to have a look at it and let me know your thoughts.  As soon as slideshare is done processing it I will post the slideshare link here, till then feel free to check out the presentation via 280slides.

The Slides

So, let the brainwashing education begin!

The Tabs

Take a look off to the left I moved the demo here, do you see the three tabs that are there, they are so spectacularly named "tab 1", "tab2" and, yup you guessed it, "tab3."  The html structure is pretty straight forward:

You will notice that there are no links for the tabs and this is because we will create them on the fly.  Why?  Well, other then that I have a plan to show you some new tricks, imagine that you have JavaScript turned off, those will just be pointless links with a hash in them.  You can probably argue that we can put an ID with each tab and that link will be a link hash to that ID, and I will say that you are being brainwashed educated to my thinking.

The CSS

This part is actually completely open to you to format how ever you want, my initial thought was to do a bunch of "progressive enhancements" - don't you love buzzwords for not truly supporting older browsers - that would entail some gradients, rounded corners and dropshadows, but the point of this post was not to show off my CSS3 prowest.  The point was to show you some fancy methods so here is the CSS I am using:

The jQuery

Alright, we are at the meat and potatoes the corn and the cob the Larry and Moe (and Curly)... sadly that is the best I can do with those analogies.  Any who, we are at the JavaScript, what I will do is post the code and the try to explain what is happening line by line:

Update: Moved the demo to a separate page.

The Explanation

Lines 1 and 2 are just some variables that I will be setting and reusing through-out the code.

Line 5 I set the "jqsideTabs" variable to reference the jQuery object for the element with an ID of sideTabs and I also add a class of "close".

Line 7 a reference is being set and I will point a little later below what that is actually being referenced too.

Line 8 we look inside the jqsideTabs DIV for the H3 elements that are inside the ".tab" DIVs.  I can just as easily do jqsideTabs.find('.tab > h3') to make sure to the H3 tag directly below the ".tab" element or jqsideTabs.find('.tab h3:first-child') to make sure I grabbing the first H3 that is the first element under '.tab'.

Line 9 we clone() those H3 elements, if we do .clone(true) we will also clone any events that are bound to the H3.

Line 10 we append the cloned H3s to "jqsideTabs"

Line 11 through to 51 we are looping through those H3s to do some fanciness.  Notice the "i" in the function?  That will be returning the index of the loop starting at zero (0).

Line 12 some variables are set up.

Line 14 we check if we are on the first index, which is zero (0), and then set the "cls" variable to "active".

Line 15 we set up a reference to a new DOM element/jQuery object that has the text of the H3 element by using "that.text()".

Line 16 we replace the H3 with the newly create DOM element, the A element/tag/

Line 18 we get the outer width (.outerWidth()) of the element, outerWidth() will get the full width of the element including border and padding, if you were to do outerWidth(true) you would also get the margins.

Line 20 we check if it is the first index again and if so, set the variable "ra" to the outer width

Line 21 is the else part of line 20 and here we set the "r" variable.  Both "ra" and "r" will be used for "right active" and "right".  You will see their purpose shortly.

Line 23 is doing a few things, 1) it is setting the top and right positions of the element and returning the .height() of the element plus the previously stored height at the same time.

Line 25 we are using the .get(0) method against the newly created A tag and this will give us the equivalent of doing a getElementById.

Line 26 we set the reference now so that we don't have to re-look up this element later on, the speed gain is probably minimum at best but I makes me happy to do this and really, that is what it's all about.

Line 27 and line 26 we are doing something specific and really can't remember what it is called, maybe "assignment," but basically we are storing some data directly in the DOM to be used later.

Line 29 we add a .click() event to the A tag we created.

Line 30 just to stick to a decent naming conventions I take the varariable I set earlier and plop it into a new variable call "el" (short for element)

Line 32 to 34 we check to see if the jqsideTabs element has a class (.hasClass()) of "closed", if so, remove that class.

Line 35 to 37 we check to see if the jqsidetabs element does not have a class of "closed" and the current element has a class of "active", if so, add the class "close".

Line 40 we grab all the .siblings(), in this case, all the .tab DIVs and links that were created.

Line 41 each item returns will have the class "active" removed.

Line 42 the default right position is set for those elements.  But let me note something real quick, in this case I am going with the assumption that I did not set the "position" of the .tab elements to anything, meaning, they were not set to relative or absolute.  If I did this I would need to change siblings to only grab items at are A tags to be sure I only grab the, well, A tags.

Line 43 the .end() method is used, this brings the reference back to "el" at line 39.

Line 44 a class of "active" is added.

Line 45 the right position is set to the "ra" variable.

Line 47 with the reference of tabs that was set back at line 7, we find the DIV or .tab that equals what ever that index (i) is match to, in the example it can be either 0, 1 or 2, then we show that one and then hide its siblings that have a class of ".tab".

Line 49 a return of false is used to stop the default action of the link.

Line 52 end() is used to give reference back to the H3 tags.

Line 53 we use .parent() to grab the parents of the H3 tags.

Line 54 we filter down to the first element in the parents by using .eq(0).

Line 55 a class is added to that returned element from line 54.

Line 56 we go back to all the parents by using .end()

Line 57 filter is used with the combination seletor of ":not()" and ":eq(0)" to grab all the DIVs (the parents of the H3s) that is not equal to the first one.

Line 58 then we hide the returned elements

Line 59 here we use end() to finally set the "tabs" variable that we have way back at line 7.

The Closing

Ok, are you brainwashed educated yet?  Could I have combined a few steps or could I have writen some of my selectors to be a little more precise? Sure I could have.  The beauty of coding with jQuery is that there can be any number of ways to approach the same exact issue.  But do keep in mind that my way is always the right way.

But seriously, there are a lot of ways to use the jQuery framework, you have to find the way the best suits you.  And the only way to find that out is to learn how others do it and read the docs and learn the selectors and traversing methods.

As always, please feel free to check me if I got something incorrect or if you think you can do better.  I am just as open to learning as you should be.

Chaining

Chaining is one of the most beautiful and time save pieces of code structure that jQuery brought to the game, the problem is is that it can make the code unreadable if not treated correctly.

For example, say you wanted to select the fourth LI in your nav and add a class, remove a class from it, then you want to find the UL that is a child of that LI and add a class to that, then want to move back to the UL that has the ID nav on it (.end() goes back to the last 'destructive' operation) and lastly you want to animate that UL. Along with have a heft run on sentence you also have a pretty unreadable string of functions.

Instead, format you code to look something like below, you can have more then one methods per line, but keep it reasonable and readable. See how I am indenting each line? This is to give it a sense that each method is referring to specific elements. Much like you would indent your HTML and how some people indent their related CSS, it is good practice to indent your code.

A small caveat to the above structure is that if you run your code through JavaScript Lint you will get a notice of "lint warning: unexpected end of line; it is ambiguous whether these lines are part of the same statement," I personally don't see an issue with this and will just to a find and replace for the line break and all is good.

Traversing (Finding)

Last post I posted about eq, hasClass, is, and not which are four traversing methods for filtering out certain items from your select. For returning specific elements from the DOM using the children(), siblings(), parent(), and parents() methods in most of my projects.

The Core developers for jQuery are very smart people

The Core developers for jQuery are very smart people, they name methods the make a lot of sense and match up to the functionality they provide and children() is not an exception. Let's assume we have the following DOM structure:

With that structure, we did:

How many elements would be returned? 17? 15? 7?

If you said 7 then you are correct; why not 17 or 15? Imagine this, you have a single parent, and you have 6 brothers each of whom have a significant other. You and your significant other have a daughter and she in turns has a kid but is single and that kid has a childhood sweetheart. In this scenario "#nav" is your mother (we'll cover the parent and parents method below but keep this in your head) and when we say give me all your children we are only look for your mothers immediate children, which in this case are the LI.

Got that?

Ok, now what do you get if you do the following with the siblings() method?

If you said 6, you are correct, siblings will select all your immediate brothers and sisters. You following me so far? Does this make sense? In this example we are saying select the LI that is in the forth index (or in this case, you) and then get my brothers and sisters or siblings.

Just for a teaser, what if you wanted to something to you and your siblings? Easy, just add .andSelf() at the end (this would probably be used in a case where you click on a LI and do $(this)). We'll cover this a bit more in a later post.

The .parent() method is pretty straight forward, it will select your immediate parent. So in the following case you will select the UL.

The parent() method excepts an expression but the only need I've ever had was to quickly test the parent for something particular, maybe a class or a specific attribute or attribute with a certain value, in an IF statement. (remember, in JavaScript 0 is treated at false and 1 is treated as true)

The parents() method can be a little more powerful for your needs, but is useful in some cases. Let's assume that the UL above is the only code in your body tag. So if you do the following how many items will be returned? 1? 2? 3? 4?

If you said anything but 3 you would be incorrect, if the UL code above was the only child of the body tag that the JavaScript code above would return the UL, BODY, and HTML tags. With the parents method you can filter it down to what you want by using any number of selectors that jQuery supports.

Below is a piece of code from a project I've been working on. Basically the issue was that there needed to be a submit button appended after the last input box on the page. If that input box is inside of table, append the button after the table. The issue was, I had not idea what the TABLE may be in, could have been a DIV that is inside of a DIV and so on. Also keep in mind that as of this writing I see at least one better way to have written out this code but for this post this example should work fine.

Let me try to explain what is going on, please refer to the comments in the code for what the variables are reference to, line 2 I am grabbing a reference to the last INPUT in the inlineTextQuestion variable. Line 3 I grabbed a reference to the all the parents of that INPUT. Line 6/7 I loop through all the parents checking , at line 11, to see if the current element's parent is the DIV with the ID of "bodyText." If that returns true we set a reference to that element and at line 18 I append the submit button after that referenced element.

Closing

In this post we discussed using the children(), siblings(), parent(), and parents() methods and I try to explain them the way I see them. These are the ones I use the most and the ones I think you will find the love for.

If there is anything with the above you don't under stand or, god forbid, I got incorrect, please feel free to drop me a line.

I've been wanting to write some jQuery tips for a while now and just never know what to really say until I saw Marc Grabanski's 5 Tips for Better jQuery Code.  Although I have tips, I don't think I have any that are Earth shattering or ones that I can rank higher then the other, but these are ones that I use daily and are asked about just as often.

Caching

If there are items you will be referencing more than once, cache it!  Even if you won't be referencing an item more than once still get in the habit of setting up references.

Now, what do I mean references?  If you are going to be playing with you main nav group or probably going to be messing with inputs, set up a variable and store the reference to those element in it.

[Update #1: as Sean O points out, doing $mainNav may help you remember that the variable is a jQuery object and may be good practice.]

[Update #2: Another good point from Dan G. Switzer, you could easily have cached your jQuery objects when you initiated your events/behaviors like below]

Traversing (Filtering)

This is a topic I plan to put some more effort into in a later post but there are four methods you should use: eq, hasClass, is, and not.

The use of these methods will filter out your selection to mat

eq() will filter your selection down to one element eq(1) will select the second element since the jQuery object that is returned by $('#main_nav a') is basically a zero based array.

A combination of eq and hasClass; hasClass is exacly what it sounds like, it checks the element to see if it has a class of "selected" and returns true if it does have that class

Once again, a combination of eq and is; is simply checks the element in question against the expression in the brackets and returns true if is has the class selected or if the tag is A

Checks to see if element has text in it of "special text" returns true if it has that text

.not() will return elements that do not match the expression.

So if you were to put a class of active on one of the links, that call will return all links in mainNav that you did not put a class of active.

Closing

Ok, I wanted to keep this short and point out some of the items I personally deal with and some items that I get asked about daily.  There are a few other items that I will address in another post that will make your life easier.

If there is anything with the above you don't under stand or, god forbid, I got incorrect, please feel free to drop me a line.

When jQuery UI first came out it was huge, but with as huge as it was the list of issues with it were also pretty big. The months since it's initial release the UI developers have been working tirelessly to squash these bugs and add better cross browser support for IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+.

The problem I have had in the past is envisioning just what a library can do and now with the new release you can see some really good examples of what jQuery UI can do. You need the initial structure to build an image cropper? How about an image manager with drag and drop capabilities? You like the Apple slider gallery and you want it for yourself? All these and more are now available for your consumption.

At the same time they were able to merge in the jQuery Enchant library which was a library to compete with Scriptaculous. Scriptaculous has always provided great effects to Prototype users; something jQuery was lacking and consistently was one of the issues brought up about jQuery. With having Enchant merged into jQuery UI the proverbial playing field is now level.

But since jQuery is not one to sit on its hands, they took it a bit further - with the help of Filament Group in Boston - and developed a theme builder. If you are like me this is huge; trying to got thru the code to make changes to a component to get it to look like the design I am working on can be a pain. With the theme build you simple select the colors and style you want, click the "Download This Theme" link and you are on your way.

All in all the jQuery UI team have been very very busy and have really done a great job with this release. I want to send out a personal thank you to the jQuery and jQuery UI developments teams for the hard work they put in to the jQuery and jQuery UI libraries. I also want to put a thank you out there for the Filament Group in Boston and LIFERAY for their support and contributions to the jQuery community. It is really great that they stepped up and helped make something good great!

Full release notes can be found at the jQuery blog.

So without rambling on anymore, here is the presentation screencast.

The purpose

So the purpose of this post is a) show you how to build an unobtrusive image gallery or photo gallery, how ever you want to say it, and b) show you have to create a jQuery plugin.

Step 1

So what I am going to do here is show you have to create an unobtrusive image / using a, "gasp," table. Why a table? Tables are so 1.0? Well, the definition of basically breaks down to, if the user has JavaScript AND CSS off, the gallery should still work and be laid out as planned.

Below is the structure we are going to start of with; nothing fancy, just old fashion html. Each image sites in a cell of the table which we can control the basic look by adjusting the cellpadding or cellspacing attributes.

Current progress

I am using the caption element to give the gallery a title, you could have simply done the below as well:

Step 3: The Style

Since we are planning for this gallery to still look good if JavaScript is turned off, we are going to need to give it some style, make it pretty. At this point, you are only limited by your imagination and, well IE 6, but that should never hold you back. That is another topic for another day.

We are going to keep it simple and just add some very basic styles:

Current progress

As it stands now, you can leave well enough alone and for the most part, people will be happy with your creation. They have a simply style, low bandwidth, accessible and functional photogallery that will do exactly what you want, display images and open an image when clicked.

But lets, kick it up an notch and add in the JavaScript; enter jQuery and the beauty of plugins.

Step 4: The JavaScript and the framework that we love, jQuery

For those who don't know what jQuery is, it is a JavaScript framework that helps you "write less, do more." Have a look over at http://jquery.com for more info.

We are going to create our plugin now that will take our current gallery and spice it up.

The basic pattern for a jQuery plugin is as followed:

Here we are using closures, I am not an expert, so I'll post some links at the bottom to other resources to help you understand why we are using this structure. But this is the structure we will be using for our plugin. What I can tell you is that the return this part of the code makes this plugin chainable.

We are going to keep this very simple, so we will not be passing any options or are we going to be creating any really complex situations.

What we are going to do is create some structure, get some data, and add some functionality.

The Variables

We will start out with creating some variables for use through-out our plugin:

The purpose of "var element = this;" is to keep us from getting confused when using this in other parts of the code.

The purpose of "element.index = index;" is for if we have more then one gallery on a page we will be able to reference the correct one if needed.

The purpose of "var $this = $(this);" is so that we don't have to do $(this) multiple times slowing down our plugin. This way, we can do $this.Method() and jQuery will not have to keep looking for what this is.

The purpose of "var $img = $('img', $this);" is to create a reference to all the images that are within our element.

The Structure

Our structure is going to be very simple and will look like:

With the DIV of "imageItem" having the same count as the images in your default gallery.

Why not just use the structure that is already created with the table? I personally feel you get more flexibly to style the Gallery and really punch it up by restructuring the gallery.

Lets get to building this structure:

The Thumbnails

Next up is getting our images and their respective links and then add our click event:

Ok, what do we have here, line 1 we start to loop through our images, line 2 setting a reference to the jQuery object for the image.

Line 3 is a reference to this.
Line 4 is our index
Line 5 is our reference to the link url

Line 6 and 7 is the height and width, this could be done a different way by create a new Image and creating a onload event where you grab the height and width and have the option to have a "loader" animated gif or notice text. I did nether to keep this as simple as possible.

You will notice starting at line 9 that I am using what is called chaining, this is a process of linking one method to another. But also notice that I put the new methods on separate lines. Why would I do this when I could have chained the one right after another? Because you actually need to be able to read your code. Although chaining is great and you can chain a ton of methods one right after another after another, if you can't follow what is going on, it is pointless.

You will see at line 9 I am using the clone(), this allows me to quick duplicate the DIV that I created in my structure code.

Line 10 I am appending the image to the newly cloned DIV and at line 11 I am appending both to the container that is housing our thumbnails.

At line 13 I bind a click event, which can also be done by doing $(SELECTOR).bind('click',function(){});, to the thumbnail.

Inside that click event at line 14 I take the reference to the larger image and set the src to the full url that I collected at line 5. But notice that I am using the .get(0) method with the .src attribute and not doing $(SELECTOR).attr('src',img.fullurl);. Why did I do it this way? To show you another example of the flexibility of
jQuery. JavaScript has a ton of built in attributes for each DOM element and using $(SELECTOR).get(0) is more or less the equivalent of getElementById. The 0 is referencing the first element found, so if you want to get the fifth element found, you can do .get(4).

Lets take a look at our Current progress. (note: this is unstyled and will just be a single column of thumbnails with the larger showing up at the bottom when a thumbnail is clicked. We will cover the styling in another post because there will be more then style that will need to be done.)

What you will see in the final example is just a list of thumbnails and once clicked you will see the full size image appear.

The Follow-up

I know I covered a lot and I was trying to keep it as simple as possible, so let review what we did. We create a basic photogallery using basic (x)Html and styles that will work fine if JavaScript is turned off or if a Screen-reader was used to view the photogallery. We then took that gallery and with the help of JavaScript and jQuery we created a very basic photogallery and a reusable jQuery plugin. We learned how to use some of jQuery's basic methods to grab an element and do something with it.

What we did not do is actually quite a lot. We did not add styles. We did not add any indicators that an image is loading. We did not resize the large image to fit with in a confined area. We did not create any preloading code that will preload the next large image in our list.

The Closing

I will be writing another post that will take care of our "We did not do" items. The purpose of the post was to show you how to build your own plugin and even how to build an effective photogallery.

The may be some items that you don't understand or would like me to elaborate on, feel free to let me know what those items are and I will try to clarify.

Table of contents for Select anything

1. jQuery: Select what you want – part 1
2. jQuery: Select what you want – part 2

In my first post about jQuery Selectors call Select what you want, I went over some basic selectors that I use on a daily basis within a web based training framework I put together using jQuery. What I would like to cover are some of the situations I have ran into over the past year while using jQuery are my frameworks backbone.

Some of the selections we will cover are searching for links with an specific extension, images, images that wrapped in a link, links and definition lists.

Let me give you some background on the process. We have a content writer who supplies us with with a storyboard for the content and flow. We then create a separate Html page for each page within that storyboard. Each one of these pages is brought into the main page using the .load method for jQuery. All the selections are being done in the callback of the .load method, like:

The following will be the functional request that the writer asks for. Note the "this" in my selector calls is referring to textArea. Also note that these will not be optimized calls, for instance, if I were going to check for images or links multiple times for different things, I would do something like:

But for the purpose of this post, I will code as if there is only one thing we are looking for and most of these will be very simple selections.

Functional request: Have smaller image open a bigger image in a jqModal box

The Html

The JavaScript

Functional request: Have a "how-to" open in a jqModal iframed box

The Html

The JavaScript

Functional request: Have pdfs alert before opening

The Html

The JavaScript

Functional request: Have glossary of words and when those words a clicked, show it's definition

The Html

The JavaScript

Functional request: Have have a group of radio buttons and when clicked, have them show a response

The Html

The JavaScript

Functional request: Have external links prompt that they are going outside of site

The Html

The JavaScript

The Final Word

Each project comes with different requirements; the requirements above were only a small part of the requirements for the most recent project but the rest of the list was pretty simple stuff. Feel free to post question or corrections.

Table of contents for Select anything

1. jQuery: Select what you want – part 1
2. jQuery: Select what you want – part 2

In an earlier post I wrote about what are the fastest basic selectors and found out some interesting stuff with regards to speed for some basic selectors. In this post I am going to go over some not-so-basic selectors. I am going to try not to repeat what Karl has said in his two posts, "How to Get Anything You Want - part 1" and "How to Get Anything You Want - part 2", but some may be worth repeating.

To keep my searches confined to a certain div with a class of "theDiv" using calls like:

Basically what this does is searches for the element with the class of "theDiv" and then searches for "SELECTOR" within that result.

We are are going to start off with some "Attribute Filters"

$("[name]") Gets each element with an attribute of "name". Note that the last text field did not get highlighted, although it does have an attribute "name" , it is empty, so therefore not selected.

$("input[name]") Is the same as above, except we are limiting the return to inputs and if you run each with firebug running on "Profile," this one takes more calls to find the correct element(s).

$("[name=getMe]") This one is only grabbing the elements that have the "name" attribute with a value of "getMe"

$("[name!=getMe]") This one is only grabbing the elements that don't have the "name" attribute with a value of "getMe" and as you can see it even grabbed the elements that did not have the "name" attribute at all.

$("[type^=b]") This one matches elements that have the "type" attribute and the value of the "type" attribute starts with a "b". (in my test area the one submit button has a type of button)

$("[type$=t]") This one gets all the elements that has the "type" attribute and it's value ends with "t."

$("[value*=no]") This one will match all elements with "no" in it.

$("[id*=no]") Same as "Test 7" except we are grabbing all elements with "no" in the ID

$("[id*=no][name=getMe]")

Wow, that was fun, what did we learn? You can select anything you want by attribute alone. Let's get into some "Content Filters"

$(":contains('Cell')") Here we are getting all element with the word "Cell" in it and since we did not filter out what element we wanted, the TABLE, TBODY, TR, and the TD all got selected because they all contained the word "Cell". Note my earlier comment that I am using $(":contains('Cell')", ".theDiv") in my javascript to limit the return results to the containing div, otherwise the BODY and HTML tag and the other elements between BODY and the items with the "Cell" text.

$("td:contains('Cell')") Here is the same approach but we will be restricting our search to just the TD.

$(":empty") Selects every element that is empty. If you don't limit your search to items that are not form elements, you will get the input fields.

$(":has(span)") Selects all elements that has a span in it

$(":parent") Selects all elements that are "parent" elements

Oh; you want to be able to get hidden elements? Visible elements?

$(":hidden") Selects all elements that are hidden, this includes items with a style of display:none or visibility:hidden and input elements with a type of "hidden."

$(":visible") Selects all elements that are visible.

Where do we go from here

If you have visited the jQuery Documentation on Selectors you will see that I have not gone over anything new, just maybe rephrased it in "my terms." These, for the most part, are the selectors I would use on a daily basis, so I felt that these were the best place to start. Some approaches my be faster, so I would suggest that you take some "me" time and see which ones will work the best in your situation.

In a future alticle, I am going to cover some of the approaches I take with a web base training framework that I think will benifit you

I've been using jQuery for over a year now and have built some pretty big apps with it as my "selector" engine and had always wondered what were the fastest ways to select an element. After reading a post on the mailing list I decided to put some selectors to test. First thing I had to figure out what was the best way to really test out some selectors. So I went about just grabbing some site I came across while Stumbling, but after doing some testing using that sites content I came to the realization that I would not know how to implement a "test" suite on my site. So what I decided was to just implement an on the fly test suite on my content.

With that said, here we go:

If you do not have firebug installed, you will have a Firebug lite console pop up at the bottom of the screen. If you do have Firebug installed, be sure to open it to follow along.

This page has x DOM elements on it. So, what ever selection we make will cycle/search through that total number of elements.

First up is to find an element with the ID of "shareThisBookmarkThisone" (this is the "Share this..." div that is currently hidden) and to select this element we will do:

After running that test you should have a number around 10 - 20 milliseconds. In this case, it is the equivalent of "getElementById" which is a built in JavaScript method that searches for an element node with an id attribute whose value is "shareThisBookmarkThisoneButton."

Pretty simple selector, lets move onto another simple one that should be pretty fast.

On this page, I have x DIV elements.

After running that one, you should be looking at something between 0 - 10ms with Firefox about the 100ms range, once again, pretty simple.

Now let start getting into what selection methods are faster, say we want one of those DIVs with a class of "adspace," which approach would be faster? One this page, I know we only have one to work with, so we should be able to get a reasonable return time.

Our first approach would be:

For "Test 3" we should get about 15ms in Firefox 2, Safari 3, between 0 - 16ms in Opera 9.2 and 0ms in IE6 and IE7, whereas we get 0ms across the board for "Test 4." Now in "Test 5" we get 0ms for all except Firefox, where we get around 15ms.

What does the above tell us? That if there is only one element things are quicker? Not sure, but lets put that to the test, I posted some empty DIVs, some with a class of "selectMe" and others with some random classes, you can view the source to see what these DIVs look like.

With "Test 6" we are looking getting back 153 results and I really must say that I am a little shocked by the results:

• IE7
  • 6.1: 16ms
  • 6.2: 15ms
  • 6.3: 0ms
• Safari
  • 6.1: 16ms
  • 6.2: 0ms
  • 6.3: 0ms
• Opera
  • 6.1: 31ms
  • 6.2: 0ms
  • 6.3: 0ms
• Firefox with firebug
  • 6.1: 141ms
  • 6.2: 109ms
  • 6.3: 109ms
• Firefox with firebug lite
  • 6.1: 31ms
  • 6.2: 0ms
  • 6.3: 0ms

Final Notes

Before we get into what we learned let me put a bit of a disclaimer here. I have not really looked into the full workings of the jQuery framework, so anything I say is based off of my assumptions and what I learned as I have built with it. The numbers you see above are from browsers that are running on a not so average computer, so they are not from the average user's/client's computer.

What did we learn? That if you are looking for all elements with a certain class and they are all of the same tag name, do $("TAGNAME.CLASSNAME") or $("TAGNAME").filter(".CLASSNAME"). That if you have only a single element that needs to be called and there will not be duplicates, your fastest selector is going to be the $("#ID") selector. That, with the exception of Firefox, the leading browsers handle a TAG search pretty quickly. Firefox had comparable speeds to the other browsers once firebug is turned off.

Something to keep in mind is that we did not do any manipulations, ie. css(), append(), animate(), or any really complex selectors and those will add time your actions.

jQuery is the library of choice for me, you are free to use any of the many libraries out there.