Pixafy

Last time we looked at select boxes and how to hide them in a technique we call “Hidden Box.” I am going to take you through a different approach to making a style select box. But this technique doesn’t use a drop down box at all! That’s why it’s called:

“The Total Faker”

Building the HTML for this one is very similar to the hidden box. We want a wrapper div encompassing everything, and we need a drop down list. The down arrow div can be copied over as well.

What we do not need is the blank div to hold text from our JQuery. Finally, instead of a select box with a list of options, we have an unordered list. Here’s the HTML:

Now you may notice two element I have not explained yet. They are the SPANs and INPUTS inside the LI’s. These war important but will be explained later on. For now just copy this structure.

The next step is adding the CSS. As you may have noticed above, the UL has a class of “select-box” because that is what it is emulating. The LI’s have a class of ‘option’ to show that they are the equivalent of an <option> tag.

The first li has an additional class of ‘active’. This is going to be the LI that is visible from the start of the page. The rest of the LIs will be hidden with display:none; Here is the CSS:

As you can see the style for the down arrow copy over nicely. Be sure to have position:relative on you wrapping div .select-wrapper  or else it’s position will be really far off. The only difference with the arrow is the z-index. It has changed from 10 to 1!

Why? Take a look at the select box. It has a z-index of 5 with a transparent background. If you recall in the “Hidden Box” the select box was transparent thanks to opacity 0 and was above everything else.

This is the same idea. We want to be able to click on our faked select box without the arrow-down DIV getting in the way.

So at this point you should have a what looks very much like a styled drop down box. Down arrow on the right, text that reads “Select” on the left, but now comes the hard part. We need to make it so when we click this box, the other “options” appear.

If you do not have one already, create new document.ready  to put all of our jQuery in. I will use the shortcut version from last time:

So what we need now is a click event. We want to use an ID to make the selector work faster, but there are no IDs on the LIs. This is because you could have a HUGE list here and if we used an ID we would need to have a click event for each one.

Not a very efficient way to program. So what do we do here? We use the ID of the wrapper! Alternatively you can have an ID on the UL and use that.

The first line of code in MOST click events should be to prevent the default action from occurring because we want to do something different. To do that I use e.preventDefault() where the “e” matches the variable in the line above next to the word function.

Now here is the most complex part of the jQuery:

If you have copied all of the code above exactly then this will work for you, but let’s break it down. The first thing after the e.preventDefault() is we are checking to see if the LI we clicked on has the class ‘active’. We also want to check if ALL the LIs are showing.

That is this line:

What this is checking for is all elements with a class of  ’option’ but do NOT have a class of ‘active’ and are not visible, aka a display of ‘none’. (Extra tip: the :not() selector is new from CSS3 and is great for form inputs).

The next part is inside the if statement. It removes all ‘active’ classes from the list. It then adds a display block or ‘list-item” (depending on the browser) by the .show(). Basically this exposes the list.

But we need to close the list and show the selected one. That is the else statement. When the list is open, we will always hit this else statement because there is no ‘active’ class while the list is open. And what is the first thing we do? Add an acitve class to the list item we clicked of course! Then we remove the style attribute to hide the other list items. You may be tempted to use .hide() but I’d advise against it. You would need to make sure to add a :not(“active”)  to the selector otherwise the one we clicked on will also be hidden.

Now you may have noticed I skipped over the variable at the start of the ready function called showing. What I started with was the a hard coded value of the first selector. If you do not know the value, I suggest looking up the .first() jQuery function. What we are doing now is finding the hidden input that we had been ignoring up until this point and saving it as the showing variable. This you can use for forms to submit the value clicked.

So now you have an awesome box that opens and closes. However doesn’t it seem lacking compared to a normal select box? That’s because if you click outside the box when it is open, it does not close! But writing a click even for every other item is a total pain and a terrible idea! The answer is this second function:

Most of the time selecting the document for something other than the ready function is not a great idea. But in this case it saves the day. Here we have added not a click but a mouse-up function. The first thing we do is declare a variable with the ID of our wrapper. Next is the if statement. To state is plainly this is way to check if the element ID on the mouse triggered event does not match the container variable. If it does we already have the click event to take care of what we need there. If it does not match we do what we did before and remove the style attributes. Then how do we show the previously active class? This is where the showing variable has it’s moment.

We find the input with the same unique value as the showing variable and add a class to it’s parent LI.Thus we always have our active class showing no matter where we click and if we click outside the box the list closes! Exactly what we wanted! Now get out there and play with this code. If you want a background color or image set it on the wrapper. Change the text color by targeting spans next to the hidden input fields. Tie it into a full form entry, It’s all about how you take the Total Faker from here.

Here’s the jsfiddle so that you can see a working version! http://jsfiddle.net/GecJg/58/

Have you styled a select box in a different way?  Let us know in the comments.