In the world of web aesthetics a nice principle to follow is the less clutter the better. Traditional forms have contained a label and then a text input usually. More and more we’re beginning to see the labels being placed inside the text field until the user selects them, at which point they can type whatever. The reason we may be seeing it more often is because jQuery, as usual makes what is otherwise a fairly time-consuming task and makes it simple.  To get an idea of what I’m talking about you can see a demo here.  I checked the demo.  I’m pretty sure that the tooltips work fine in Firefox, but are incorrectly positioned in Safari, and I don’t even want to know for IE.  I’m sure this is no fault of the plugin, but that there is just some conflict in the plugin CSS and my demo template CSS.  I just really didn’t feel like figuring it out.  On top of all that, if you don’t have Firefox to view the demo with shame on you

Let’s think about what it is we are wanting to accomplish.  Generally we want a form with no labels.  Instead our labels are a prefilled value inside the form field.  However, when a field with one of these prefilled labels is clicked or tabbed to we want to empty the field and ready it for typing.  Next if new data is entered the data should stay in the field, and if no data is entered the field should return to the prefilled label.  Lastly, if the user focuses a field that they have already entered data into we want to make sure that we don’t empty the field, but instead just select the entered data and ready it for editing.  One last thing.  Because our field label disappears when the field is selected I felt that it made sense to make sure that the user doesn’t forget what they are typing into the field.  To accomplish this I used the jQuery Tools tooltip plugin.  I won’t explain this too much, but for this demo I pretty much just copied and pasted their demo code from their site.  Nonetheless, this is a really powerful and flexible plugin, and on top of everything really looks great.

On to the code.  First we’ll take a look at the HTML.

The HTML

<!-- div that will show our tooltip -->
<div id="mytooltip">&nbsp;</div>

<!-- form with labels in the field label in the 'id' and tooltip in the 'title' -->
<form name="myForm" id="myFormId" method="post" action="#">
    <input type="text" name="firstname" id="Your First Name" value="" title="Enter Your First Name" /><br /><br />
    <input type="text" name="lastname" id="Your Last Name" value="" title="Enter Your Last Name" /><br /><br />
    <input type="text" name="mycolor" id="Your Favorite Color" value="" title="Enter Your Favorite Color" /><br /><br />
    <input type="text" name="mycat" id="Your Favorite Cat" value="" title="Enter Your Favorite Cat" /><br /><br />
    <input type="submit" name="mySubmit" />
</form>

(more…)

Sometimes we need to disable an entire form based upon user input. The example I thought of was in the case of asking how a person wants to pay for something. So for example, if a user wishes to pay for their product with a check we don’t need a form, but if they wish to pay with a credit card then we need to give the user a form to fill in their credit card information. You can see an example of this here.

I would normally just not show the form unless the user chose to pay with credit card.  In my opinion this is less intimidating to the user and keeps them scrolling as little as possible.  Nonetheless, here we’re just going to disable it if the user is paying with check, and enable it if the user is paying with credit card.  So let’s take a look at the HTML.

(more…)

I had a little issue with jQuery yesterday evening.  The problem I was running into was running an event on an element created by jQuery.  Let me explain.  If I create a button in my HTML, and in jQuery write a $(“.button”).click(function(){//append a ’1′ to some element}); method, each time I click the button I will get a single 1 on the screen that has been added to the existing HTML.  For example, if I click my button five times, I will end up with ’11111′ being output the the page.  Wonderful.  This is how it’s supposed to work.  Click here to see a demo of this.  My HTML and jQuery look like the following for this example.

The HTML

The jQuery

(more…)

Adding DOM elements with jQuery is super simple and this post is a little more than what the title would lead one to believe.  So let me elaborate.  What I want to show here is a way to add DOM elements to a page with jQuery that falls into a certain slot of the available child elements.  More specifically choosing the index in which to insert your data in an array of children elements.  Check out a demo here just so we’re all on the same page of what is being done.

We’ll be working with three files for this demo.  First is our html (add_child_dom.html), our javascript (add_child_dom.js), and our css (add_child_dom.css).  The file paths here assume that all of these files live in the same directory.  If your files do not you will need to change the paths.  Let’s take a look at our html page first.

The HTML (add_dom_child.html)

(more…)

It’s fairly standard practice to set a form field to focus on page load.  This allows the user to immediately start typing, as opposed to having to select a form field before proceeding.  See a demo of a simple login screen here.  Notice that the username field focuses once the page has loaded.  We have pretty simple HTML for this so let’s take a look at it first.

The HTML (form_focus.html)

(more…)

Nothing frustrates me more than having to hone in my mouse pointer on a tiny radio button. That’s why many web forms today are allowing the area around the radio button to be clickable. I personally believe that if a radio button and its label is isolated in its own td or div tag the entire div or td should be clickable. A more common approach to this issue is making the label clickable.

Let’s take this example

The idea is that when a user clicks ’1 to 24′ the first radio button is selected, when ’25 to 99′ is clicked the second radio button is selected, and so on.  As usual to pull this off we need three resources: some HTML, CSS, and javascript (jQuery since we want this to be easy, right!).

(more…)

As we know, jQuery not only makes things once considered impossible on the web possible, but makes those things pretty easy to do. I just built a sliding navigation for pukkared.com portfolio and thought I’d share here. Pulling this off requires both CSS and javascript knowledge. I’ll do my best to explain the CSS involved, but maybe Adri can follow up on this post with some more detail on why it works. I’ll also note that practically this navigation would be dynamically driven, but for the sake of simplicity I’m going to hard code the navigation. Maybe I’ll follow this up with a post on outputting your navigation from your database.

(more…)