Hello all those in the Geekdom. Bob the Geek here with a quick post about a useful little feature.

A co-worker had asked me about using jQuery to highlight (change the background color of) a form row when the user focused on any of the fields in that particular row. So, I decided to write a quick post on how to do this. It is really simple and provides a nice bit of extra polish to your forms. So here ya go:

Table Based Forms

 We will assume you have a number of textbox and select fields, as well as a submit button, all laid out in a standard HTML table. If so, then you want the background color of the entire table row to change when any INPUT or SELECT object is focused on, with the exception of buttons. Additionally, you want the background color of that row to change back when the focus is removed from the field.

All of this can be accomplished using the following jQuery script:

        $(document).ready(function () {
            //we want to highlight the row only if the item focused on is a textbox,
            //password or select list. Buttons should be ignored...
            $(":input").not(":button")
                .focus(function () {
                    //highlight the containing table row...
                    $(this).parents("tr").css({ 'background': '#14BDF4' });
                })
                .blur(function () {
                    //remove the background attribute from the inline style...
                    $(this).parents("tr").css({ 'background': '' });
                });
        });

So let’s take a quick look at what is happening here. Our selector looks like this:

$(":input").not(":button")

Basically we are first getting a collection of all input elements, using the :input custom filter selector provided by jQuery. This selector will select all form elements on the page of the type input, select, textarea and button. Of course, in our scenario, we want to ignore buttons.

So we add to our selector by using the not() method, which will allow us to remove items from our collection by using any valid jQuery selector. In this case, we will make use of :button, which is another custom jQuery filter selector and selects any button on the page defined with input type = submit, reset or button as well as button. By combining this with our not() method, we are essentially removing any buttons from the object array.

So,  now that we have selected all form elements on the page, other than buttons, we simply need to bind both the focus and blur events to each of these. Thankfully, jQuery makes this easy, especially due to the chaining feature which allows us to apply multiple events to any given object.

On the focus event, we want to change the background color of the table row that ultimately contains the focused object. In jQuery we can do this by using the parents() method. This should not be confused with the parent() method, which will only return the direct parent of any wrapped elements, in this case the focused form field.

The parents() method will return a wrapped set consisting of ALL ancestors of the wrapped element. This will include not only the direct parent, but its parent and so on until, but not including, the document root. Of course, don’t want to affect all of this, so we have to use a selector to recuce the wrapped set. We can accomplish this simply by adding “tr” to the parents() method. Now we will only select the table row that contains the focused form field.

Now all thats left to do is change the background color, which is done simply using the jQuery css() method, which allows you to add or remove inline css style from all elements in a wrapped set. One of the great things about this method is that to remove an inline style, you simply need to specify the attribute and then set its value to be two single apostrophes (basically, an empty string).

So on our focus event, we set the inline background style to be “#14BDF4″, which will make our background a nice, bright aqua blue. Then on our blur event, we simply set the background attribute to a blank string which will effectively return it to its original value.

Click here to see a working example.

This feature is also very easy to apply in a form layed out using DIVs or some other method. At the end of the day, you simply need to write your initial selector to return only the single parent element you are interested in, and everything else should work the same.

As usual feel free to let me know if you have any questions.

Cool Tricks · jQuery · Web Development

Hello, my fellow geeks! Bob the Geek here, bringing you more of that sweet, sweet web dev goodness.

On a recent project I had a need to create a control that would allow me to lock and unlock the HTML table header, at will. Thinking this had to be a common requirement, I opened a shiny new Google page and began to search. Surprisingly, while I found a number of posts asking how to do this, I could find nothing in the way of a solution.

Actually, that is not entirely true. The solution I eventually came up with is based, in part on this post by Stu Nicholls over at CSS Play.

I took Stu’s trick, based on CSS, and combined it with some nifty jQuery to achieve the final result. If you want to just skip to the good stuff, you can see the complete, working example here.

“The Setup” or “Kiss’s Revolving Door Policy”

For our example, let us say we are creating a report that details all the members of the band, Kiss, since they were formed (and that is no small feat, I can assure you). Given our marching orders, we create the following table:

Here is our exciting, and informative, table  detailing Kiss’s high turnover rate. Here is the complete HTML for the table and its surrounding tags: Easy jQuery Locking Table Headers – List 1.

There a couple of important things to notice about this code:

The first, is that we have wrapped our table in two DIV tags, to which we have applied the CSS classes “outer” and “inner”, like so:

<div class="outer">

 <div class="inner">

 ...table HTML...

The outer DIV will serve as the container for our table header, which we will absolutely position when the locking header feature is turned on, while the inner DIV will serve to contain the rest of our table data and act as the scrollable container.

Also, notice that the first table row, contained within our THEAD tag, has a class of “header”.

Next, we need to take a look at the CSS stylesheet info we have setup. You can view that here: Easy jQuery Locking Table Headers – Listing 2.

Notice that while our table is set to a width of 800px, we actually set the width of the outer and inner DIVs to 820px and 818px, respectively. We do this to accommodate the extra space used by the scroll bar. (You could actually make both 820px. I just made the inner DIV slightly less to make sure that my scroll bar appears right up against the right side of my table. I am anal that way) If you made the width the same as the table, when the user activated the locking header, they would get a horizontal scroll bar at the bottom of the table and the header would look “off”.

Also, you can see that we set our outer DIV to position: relative. We do this because when the locking header is turned on, we will set its CSS position property to “absolute”. This means it will be absolutely positioned within the first parent container that has a position value other than static (the default).

Additionally, by setting the overflow attribute of the inner DIV to “auto”, we are essentially telling it that we don’t it to scroll and that it should expand to fit whatever content we fit into it, which is our default behavior.

Finally, we need a switch for our locking header magic. In this case, I have an icon that I place in the left-most column of the table header. In it’s initial state, the icon appears faded and transparent, to indicate that the feature is currently turned off. When the user activates the locking header feature, we will swap this icon for another which is complete opaque to indicate that the feature is now turned on.

“The Trick” or “jQuery Triggers My Love Gun”

So, now that we have everything setup, you can see that our table looks great and that Peter Criss has a definite on-again, off-again relationship with the band (I hate those will-they, won’t they things).

Now, however, we make the real magic happen with the assistance of jQuery. (Let me go on record saying that I was made for loving jQuery and jQuery was made for loving me. It truly is an amazing time and effort saver). To view the complete jQuery code, go here: Easy jQuery Locking Table Headers – Listing 3

The first thing we do is add a zebra-striping function to the $(document).ready handler. This will simply apply a pre-defined class from our style-sheet, called “striped”, to every other row in our table.


//zebra stripe your rows to make 'em look pretty...
$("table tr:nth-child(even)").addClass("striped");

Now, however we get to the good part. Essentially, when a user clicks on our lock icon, we want the following to occur:

• The script should check to see what state the table is currently in; locked or un-locked.
• If it is currently un-locked, then we want to activate the locked header feature.
• If it is currently locked, then  we want to turn off the locked header feature and revert to the original appearance.

The jQuery .toggle() method

One of the many incredible event handlers that jQuery offers is the .toggle() method. Basically, this binds two event handlers to each of the matched elements from the selector. Each of the two event handlers are executed on alternate clicks. So as you can see, this is a wonderfully quick and easy way to allow our lock/un-lock icon to turn the locking header feature on and off.

First, to bind the toggle event to our image, we will use the following jQuery selector followed by the toggle function:

//bind the toggle event to the lock/unlock image...
$("img.icon-lock").toggle(function () {
...

Our selector is looking for any IMG tag with a class of “icon-lock” and then adding a the toggle event to it.

When the user clicks on the icon for the first time, we know that the table is unlocked by default, so the first event handler will turn on the locking header function. To do this, we will first change the src attribute of the image to display the locked header icon (“images/icon_header_locked.png”):


//set the image source to be the locked version...
$(this).attr("src", "images/icon_header_locked.png");

Notice that since the toggle event was bound to the image, itself, within our function we can refer to the image simply by using $(this). We then use the jQuery attr method which simply allows us to specify a specific, HTML attribute and the value to be applied all objects matched by the selector.

Next, in order to make the locking header feature work, we have to do several things:

• We want to change the CSS position attribute for the header row to be “absolute”. This will position the header, absolutely, withing the first parent container with a position other than static. Since we have already set our outer DIV to have a position of “relative”, it fits the bill. We will also set the left and top values to 0, so that it will be anchored to the top left of the outer DIV:

  $("tr.header")
.css({ 'position' : 'absolute', 'left' : 0, 'top' : 0 })
.after("<tr id=\"inserted\"><td style=\"height: 20px; background: #fff;\" colspan=\"5\">&nbsp;</td></tr>");

• Additionally, we need to add an additional, empty row to the top of the table. This is because once we change the position attribute of the header, it will be like we removed it, entirely from the table, so the table will actually shift upward and behind the header, hiding our first row of data. By adding a new first row which is blank and the same height as the other rows, it will appear as if the table has not shifted at all. We accomplish this by using the jQuery after() method, which will simply insert the provided content after each element in the set of matched elements, which in this case is the table header row:
  
  $("tr.header")
  .css({ 'position' : 'absolute', 'left' : 0, 'top' : 0 })
  .after("<tr id=\"inserted\"><td style=\"height: 20px; background: #fff;\" colspan=\"5\">&nbsp;</td></tr>");

• Finally, we need to set an absolute height on the inner DIV, so that it will scroll anything that goes beyond that height. In this example, I simply set it to 200px, since we have such a small amount of data. This is made wonderfully easy, thanks to jQuery’s css function, which allows us to set one or more CSS properties for the set of matched elements. Remember, as we said earlier, this will always add these properties as inline style attributes:
  
$("div.inner").css({ 'height' : '200px' });

And that’s it! Your table should now be scrolling smoothly and your header will stay locked in place.

Now, when the user clicks on the icon again, if the table is in it’s locked state, we want to un-lock it and essentially return everything to normal. To do this, the second handler needs to do the following:

• First, we change the images src attribute back to the “faded” version of the icon:
  
  $(this).attr("src", "images/icon_header_unlocked.png");

• Next, we remove the absolute position property from the table header.
  
  $("tr.header").css({ 'position' : '', 'top' : 0 });

• Then, we delete the additional “spacer” row we created earlier from the page. We accomplish this using the jQuery remove() method, which simply removes the set of matched elements from the DOM.
  
  $("tr#inserted").remove();

• Finally, we change the inner DIV’s height attribute back to auto:
  
$("div.inner").css({ 'height' : 'auto' });


Once again, you can see the complete, working example here.

Of course, this is a simplified scenario. Most of us won’t be hired by a group of international rock stars in makeup and platform shoes to create something so simple. However, I have applied this to far more complex solutions, including to an ASP.NET GridView control.

Please write me and let me know what you would like to see me write about. Perhaps you have a particular feature or function you have been struggling with or you just want to learn more about a particular topic. Give me a shout and I will see what I can do. As always, comments and feedback are welcome.

Cool Tricks · CSS · jQuery · Web Development

Multi-level marketing is a huge industry with endless opportunities to fit your passion and lifestyle. Many people make a full or part-time living through MLM. In recent years, the Internet has made this even easier and most MLM companies provide their people with their own websites.

The Problem

As useful as these websites are for both promoting your MLM business and increasing your sales through online retail, they do involve a couple of inherent issues with regards to both marketing your business and the image of your business.

Most, if not all, multi-level marketing companies will provide you with your own website, whose address is simply a sub-directory of their primary website. Some examples of this are:

www.supervitamins.comm/johndoevitaminworld
www.sellcosmetics.com/megansmithcosmetics

The issue is that you must using these web site addresses to promote your business. As a general rule of business, your website should appear on all print materials and online postings, including business cards, brochures, blog posts, etc.

These sorts of addresses are:

• long and difficult to remember
• promote the primary companie’s brand more than your own
• look less professional that your own domain

Now, consider the issue of email. Email has become the communication medium of business. While phone calls are still prevalent, many users turn to email as a way of connecting with yoru company and asking questions.

When you are running a multi-level marketing business, you generally have two options: use an email address provided by the company, which uses their domain name, or use your personal email account, which for many people, means a free, online email service such as Gmail, Hotmail, Yahoo, etc.

For years I have told my clients that relying on these sorts of services for you business is a less than desirable solution, if you can avoid it. Users are more trustworthy of a business that appears “solid”. That means it has its own web address and its own brand. Free email accounts make your business appear part-time and less professional. (Even if your business IS part time, we always want to give the impression of a full-time professional company)

So, as we have seen, relying on website and email addresses that are not taylored to your business, reduces your appearance of professionalism and credibility and makes targeted marketing more difficult. So what’s the answer?

The $30 Solution

Thanks to our friends at GoDaddy.com, the solution to this problem becomes simple and very cost effective.

Before going further, I should explain that I have no affiliation with GoDaddy.com, other than being a customer, myself. I am not part of an affiliate program or making money in any way by promoting them. I do think they offer an incredible group of services for a very good price. With that out of the way…

The first thing you need to do is register your own domain name with GoDaddy. As of the time of writing this article, a 1-year registration currently costs $10.69 a year.

Navigate to GoDaddy.com and use their simple domain search to see if your desired web address is available. Some basic rules about domains:

• They can not contain spaces or special characters other than a dash “-”.
• Shorter is better. Consider abbreviating or re-working if you have a long name. For example, instead of using megansmithcosmetics.com you want to try makeupbymegan.com. Or, instead of davidjoneshealthdrinks.com, you might try davidjoneshealth.com
• Even these days, .COM is still the preferred domain extension. That does not mean you should not go with a .NET or, if you a non-profit, a .ORG. It just means you should try to find something here, first.
• As a personal preference, I stay away from incorporating dashes in my domains. This is simply because we tend to say domain names as they sound. I might say “Check out my website, John Doe Health dot com.” However, if my domain is actually john-doe-health.com, the user won’t hear that unless I point out the dashes, specifically, which makes the domain harder to recall, later on.

Once you have your domain name, you will also want an email address for your shiny new domain. GoDaddy provides some very affordable email hosting services. If you are the only “employee” of your MLM operation, you can get a single email address with 1GB of storage for $1.19 a month (or $14.28 a year).

If you need multiple addresses, either for multiple distinct users or perhaps because you want separate emails for info and billing, then you can get up to 5 addresses with 2GB of storage for $1.67 a month (or $20.04 a year).

GoDaddy makes setting up your email easy, especially if you have also bought your domain through them.

So you have your domain and your email address. How do you get it to work with the website your MLM provider has given you? Thankfully, this is easy and will take only a couple of minutes.

Simply login to your GoDaddy.com account and then go to Domains&gt;My Domains on their navigation bar. This will open a new browser window with your domain management control panel. Click on your domain name in the list, which will bring up the properties for your domain.

Among the various options and settings, you will see one called “Forwarding” whose current status will be “Off”. Click on the blue “Manage” link to the right to change this.

A popup will appear and ask you to enter the web address you want to forward this domain name to. enter your current web address (Example: www.supervitamins.comm/johndoevitaminworld) Then, click on the “Show Advanced Options” link, which will give you some more choices. Click on “Forward With Masking” This will not only forward everyone visiting your domain to your original site, but will keep your domain displayed in the browser’s address bar so that they won’t even realize they have been re-directed.

There are some optional fields you can fill out that deal with your website’s title, keywords, etc. These are not required, but are a good idea to fill in since they could help your website’s position in search engine rankings.

Once you are all set, click “OK” and you are done! Generally, the change will take about an hour or so before you notice it. So, after a while try entering your new web address into your browser and watch in amazement as your new, personalized, website is available.

So, $10.69 for your domain and $20.04 for your email (less, if you go for the single address option). For just about $30, you now have your own website address that you can, and should, include on all of your marketing materials and promote widely. Not only will it improve the image of your multi-level marketing venture, but it will make it easier for people to remember your website address and find you in the future.

Hosting · MLM · Website Marketing