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.

The presentation will break from the normal jQuery presentations you see on the web and will be approached in the way I explain jQuery to co-workers, people through my site, or Tweeter.  I will point you to the resources you need to know about and get familiar with, which all presentations do.  But I will not be giving you the history of jQuery, I don't believe people come to these presentations or meetups to learn the history of something, they want to know how it works.  And that is what I will tell you, how jQuery works with in the context of your everyday projects.  I will give you some tips on how to structure your code, what selectors are faster and how to use some of those fancy traversing methods.

I have not decide exactly which methods to focus on, I am still research which ones I really use most often and which ones other developers use most often.  But be sure that the ones I pick will be ones that you will start using immediately.

So come on out and see me ramble on on how good jQuery is or just come out to see how sexy i really am, it will be a good time either way.

Be sure to RSVP!

Note: this will only work in WebKit browsers as of this writing so don't tell me it does not work in IE7 or below or in Firefox 3 or below, I know, it is meant to be a test for WebKit.

So, lets assume you have the following conversation:

You are so cute :)

No, you are ;)

But I said it first >:(

Why are you getting mad :O

I don't know :S

:/

Great convo right? Not let's put some JavaScript into the mix here:

Basically what that is saying is grab all the paragraphs, grab the HTML out of them.  Use some RegEx to search through the characters to find the emotional icons, and then replace them with a SPAN and the characters that are being replaced (that would be the $1).

Now lets add some style to the mix:

And this is what we get:

You are so cute :)

No, you are ;)

But I said it first >:(

Why are you getting mad :O

I don't know :S

:/

Neat trick, nothing real special, but the possibilities are really beginning to open up.

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.

credit: AdamNF

Imagine this, you are a seasoned web developer and have encountered just about every situation as a developer.  Now imagine that an unseasoned developer, not quite under your care, stresses that something that is overly basic - as a seasoned developer it would be overly basic - can't be done or require just way to much time to achieve.  Now imagine since this developer can't (or won't) do this overly simple task you now have to take this project on your shoulders and spend countless hours recoding close to 500 lines of code plus add an extra 300 lines of bloat - all of which are against your better judgment and coding philosophy -  to achieve the goals for this project.   How would you react?  What would you do?  Well, I will tell you how I originally reacted and what I eventually did.

My initial reaction was poor, very poor and embarrassing, I flipped out and stopped short of calling him name.

My initial reaction was poor, very poor and embarrassing, I flipped out and stopped short of calling him name.  I did yell, which I never do.  When the project was start all requirements were laid out and I explicitly told the developer exactly what I needed and made him repeat those needs back to me.  I also ask him what he need from me and I confirmed those items with him in emails, in person and on conference calls.  So when you get a call on a Sunday afternoon stating that you have recode code that has been done for over a month and a half that has been tested and was working a 100%,  getting mad is just about all you can do.  So I yelled and cursed; recited email after email, notes after notes about prior discussions and what was agreed on.

Like I said, reacted very poorly.  After this call I stepped outside to collect myself and get my thoughts together.  Once I calmed down I decided that I would treat this situation as if I were back being a supervisor at UPS.  What made me one of the best - if not the best - supervisors at UPS was my ability to train, cross-train, communicate and making my employees think that my ideas were actually their ideas.

...debating only waste time and will frustrate you.

I went ahead and did all the recoding and set things up to have this developer come up with my ideas.  At UPS having someone come up with your idea was pretty easy, it's manual labor so convincing someone to do something smart not hard is quite simple.  Convincing a person that sits in front of a keyboard that you never see (I telecommute) to work smarter, not harder is complicated.  I had to keep in constant communication with him and our supervisor - our supervisor works in the office with him and can relay messages to him without making it seem like it came from me.  In these communications I had to bring up a small problem that only really had one outcome and would be the outcome I was looking for.  Much like a lawyer should never ask a question they don't already know the answer too, I made sure to ask questions that only benefited my philosophy.  I tried to stay away from items that I knew would cause a debate, even if in my mind it was a simple topic, debating only waste time and will frustrate you.

After about three weeks - yes, three weeks is a long time but keep in mind that I don't see this person everyday and I am working four other projects so very little time to focus - we were getting complaints that the app was moving too slow.  Which was one of the seeds I was planting over the three weeks was about load time and processing time.  I had gone into the office to discuss everything face to face with him and our supervisor to see "what we can do to fix it."  I had planted quite a few seeds so all I really needed to do at this point was to add water.  Water in this instance was me walking thru that app looking ever-so frustrated that I could not come up with an answer on fixing it.  I start out by pointing out the the obvious, the page took too long to load and once we were sure everything was loaded there was still a hand in the app.  The load time was do to a massive XML document being loaded, well over 4,000 lines, and the hand was the bloated code I needed to put in to achieve what this developer could not do on his end.

Before I go further, let me clear up who is doing what.  I am, on this project, the front end developer dealing with the JavaScript framework I build on top of jQuery, building out the design and making it 508 compliant.  He is building a CMS of sorts to maintain and track the content.  When I say track, I mean the content can be versioned and have comments for changes appended to it.  He is building everything out in ASP.NET.

...sometimes you have to baby step people till the see the big picture.

After pointing out exact what might be causing the load time and the hand, xml and the code bloat, I suggested something simple for the load time in the form of a question to the developer.  "What would happen if we shrunk the tag name for one specific tag in the XML down to one letter?"  He was like "Hmmm... the change would be pretty easy on my end, maybe we comment out some attributes that are not needed."  And that is where he started taking off with the idea (please note, this was one of the ideas I've been pushing from the very beginning but its only a band-aide to a bigger problem.  Baby steps.) and shrinking the other tags.  Basically were shrank a 500kb file down to 250kb, not great, but a huge improvement, remember, sometimes you have to baby step people till the see the big picture.

Once we got that particular issue "resolved" it was time to move onto issue two, the code bloat.  When I coded this I made sure to make it expendable, the moment it was not needed anymore it was gone.  The framework basically works off the hash by default, much like gmail does so you can go back and forth in your history.  But instead of sending me the hash as my code expects, he was sending me an ID of the page and I had to transverse the XML to build out the needed hash.  But before I had the chance to start explaining the problem and how we "might" resolve it he blurts out "Oh, I think I can just send you the hash.  Shouldn't be to hard."  I litterally sat there with my mouth open for what felt like an hour.  To rehash, the number one issue that he was unable to do was the building out of the hash.  For those that don't know, a hash is what you see in your URI (#somehash).  In our case, the hash looks like #m-1000-0-0-0 which is #m-Module-lesson-topic-page; its zero based so 0 is the first lesson/topic/page, 1 is the second and so on.

So what did we learn here?  Well, a few things.

For Senior Developers:

1. Communicate
2. Be willing to let the unseasoned learn from their own mistakes.  You may need to take a hit every now and then but in the end the unseasoned will become season and an asset.
3. You are allowed to get mad and frustrated, but keep your composure.  Step outside and take a breather if you need, but keep your cool and be a leader.
4. You made your mistakes to get where you are at, so remember that when the unseasoned make a mistake that makes your work harder to do.
5. Be willing to teach, that kinda goes hand in hand with letting the unseasoned make mistakes, but the difference here is preemptive.  If you have an opportunity to truly explain why something is done a certain way, do it.

For Juniour/Entry level Developers

1. Communicate
2. Learn from your mistakes; don't make the same ones over and over again.
3. Understand that people will get frustrated with you if you "don't know everything they know."  But be willing to ask for help.  99% of the time that will bring the frustration level down and give them an ego boost.
4. This one bares repeating: Learn from your mistakes; don't make the same ones over and over again.
5. Be willing to learn.  Simple as that.  You don't know everything and there is always someone, even for seasoned developers, that knows much more than you.

With that said, I am looking to build one, I already have a decent footprint down but I know there are many features that should be included.  Mind you, they should not all be turned on at first, but the end user should be able to turn some on and some off to fit their needs.

So my question to you is, what features would you like to see in a WordPress Events Manager plugin?  I have quite a few ideas myself but I don't want to taint your opinion.  Leave your comment below and lets discuss.

If you are interested in helping in anyway, let me know and maybe we can sync up.

Feel free to check it out at Image Browser Extenders page and download it from the WordPress extend site.

Some screen shots to hold you over:

With this plugin adding functionality has become a simple as clicking a few check boxes, no need to fuss with code.  Go ahead and check out the plugins page or download it from WordPress.org.

One of which was the ability to update the files you posted, you can edit the titles and captions, you can event delete the file but you can't upload a new version of the file. You would need to delete and repost the file which is a process not easily communicated to a customer or a wife using WordPress. So I create the Attachment Manager to fill that void. What it gives you is the ability to re-upload a new version of a photo or a pdf or what ever you are trying to update without cause a bunch of hardships.

You can grab yourself a copy over at http://wordpress.org/extend/pl.....-extender/</