Pivot

Change of direction. I’m going to write about whatever strikes my fancy. Sometimes code, other times not so much. Since I’m the only one reading this, I’m sure this will disappoint no one.

Posted in Uncategorized | Leave a comment

Event Handling

This post contains a question. It’s not a difficult question, but one that I’m interesting in hearing other’s answers on. First though let me give you some background.

I needed to have the ‘x’ in the search input actually clear out the term in the search input in some mobile browsers. While it does do this by default, some of the mobile browsers decide it’s beneath them to do it. The ‘x’ still fires off a search event so it can be captured and then the input can be cleared out. I added a listener for the search event and had it do it’s thing.

Since the search input is also inside a form I needed to do some things on the form submit as well, validation and the like. I wrote the listener for the submit event, included my validation code, then thought it would be nice and clean if I could include the listener for the search and submit events in one call. Alas this was not to be. The issue I ran into was this, in all cases except when the ‘x’ is pushed the search input fires off both the search event and the submit event. It is, as far as I can tell, very difficult to get the two events to interact, e.g. if a test fails from the search event, cancel the submit event. So my idea to put the validation code in the search event listener was dashed, but the research in leading up to this conclusion is what brought up the question.

Reading through the input element explanation in the standard I discovered a new attribute for HTML5, form. This attribute allows an input to be associated to a form element even if the input is not a descendent of a form element. I take this to mean that it is now acceptable for form elements to live outside of the forms themselves. If this is the case, than should it also be acceptable to associate form elements to a form not with the form attribute, but with a data attribute? By maintaining the connection to the form with a data attribute, you can put all the code related to a event in the specific listener and then pull the form to submit it. This solves my issue of multiple events being fired off and allows cleaner code to be written and maintained. So that’s my question, but for ease of use let me give you some examples.

First, let’s do search since it was on my mind. Currently you would have to place the code like this with a form element (of course with the proper labels that aren’t needed for the example):

<form class='searchForm' action='doSomething'>
<input type='search' class='searchSomething' />
</form>

When you type something in the search input and click enter, two separate events, a search and a submit are fired off and so you put your validation code in the submit listener to make your life easier. Following the HTML5 example, though you could do it like this:

<input type='search' class='searchSomething' data-form='searchForm' />
<form class='searchForm' action='doSomething'></form>

Now when you type something into the search input and hit enter only one event is fired off, so you can put your search only validation code in the listener for the that event and when everything is copacetic you just do this:

$('.searchSomething').on('search', function() {
var form = $(this).data('form');

// Code as necessary

if(success) {
$(‘#’ + form).submit();
}
});

(or the like if you’re not using JQuery). Now you can also put in your clearing code as well and contain them inside just one function.

A second example uses the other big form element that fires off it’s own event and that’s the button element. You know what it does so here’s the code:

<form class='entryForm' action='enroll'>
<input type='text' class='name' />
<input type='button' class='entryButton' />
</form>

Once again like the search input the button fires off both the click and submit events, leaving you to probably choose the submit event to do most of your actions. Write it like this though:

<input type='text' class='name' data-form='entryForm' />
<input type='button' class='entryButton' data-form='entryForm' />
<form class='entryForm' action='enroll'></form>

and you can separate out your listener functions once again.

There’s one caveat however. The input element as it stands with the data attribute will not submit the form without a little javascript help, which presents a problem if javascript is turned off. In order to make it behave correctly in this case the form needs to be specified in the markup to begin with and then swapped into the data-form attribute if javascript is run. Here’s the code to handle that:

$('[form]').each(function() {
$(this).attr('data-form',$(this).attr('form'));
$(this).removeAttr('form');
});

This also means that the validation code will need to replicated to handle the situation when the form is submitted from browsers with Javascript turned off, but you probably should be doing this anyway.

So that’s it. Please let me know what you think. Here’s a code pen with the working code so you can see it in action.

Posted in Code | Tagged , | Comments Off on Event Handling

Check in

Ok it’s becoming obvious that I’m really no good at publishing on any sort of schedule, which may or may not be a bad thing depending on who you ask. Anyway I’m still here and continuing to field emails from the spam bots so I will post some more shortly as I’m sure all of you my dear readers are waiting with baited breath for.

Posted in Uncategorized | Leave a comment

Todo App with Flight Framework

Along the lines that I mentioned two weeks ago about working on a comparison of different Javascript frameworks, I was looking into the new Flight framework that Twitter just released. In the process of my research I had discovered the TodoMVC project that Addy Osmani and Sindre Sorhus had started here. I found the ability to compare frameworks over the same app very useful, but was disappointed that they hadn’t created a Flight one yet. Rather than wait around (and having not worked directly on a stand alone project recently) I decided to tackle it myself and see what I could do. About a day and half later I was done with something I was happy with. The demo can be found here and the code can be found here. I was going to submit it to the project, but checking their issues log on github showed me that they already had one reaching release status so I’m putting it here. I’ll do a more in-depth write up when I finish my research on the other frameworks, hopefully sometime next week.

Posted in Case Study, Code | Tagged , , | Leave a comment

Upcoming Posts

Nothing new last week, but hopefully shortly I’ll have a slide deck looking at a number of Javascript frameworks and I’m going to start a series, mostly for personal understanding, of what happens in javascript when you do something in JQuery. This will be mostly for my benefit, but anybody is welcome to learn with me.

Posted in Uncategorized | Leave a comment

JQuery Animate

I was working on a defect for the mobile site dealing with the left navigation drop down. In the process of fixing it we discovered an unanticipated side effect of the fix. The issue was that the left navigation should be persistant to the page that is currently displayed. Once the fix was in upon clicking on the back arrow to travel up one level in the navigation, the navigation would once again scroll down the page. This was another error that had to be fixed.
Continue reading

Posted in Case Study, JQuery | Tagged , , , | Leave a comment

Responsive Images POC

So I was tapped to complete a proof of concept to incorporate a responsive image solution into our responsive redesign of the ecomm site that I work for. This post is to cover the steps that I took to get to the best fit solution. The code can be found here: github.com/andrewLittle/Responsive-Image-Demo

tl;dr; After some research I eventually rolled my own solution to best fit the site’s needs.

I started as I do with every project by attempting to see what already exists. No need to reinvent the wheel. I eventually stumbled on Chris Coyer’s post on his CSS-Tricks site. Digging in I found the very useful spreadsheet that conveniently listed out all the Continue reading

Posted in Case Study | Tagged , , | Leave a comment

First!

Hello world. I guess I’m now an official blogonaut (my blog I get to make up words). I’m not really sure what’s going to become of this at this point, I always start with such big plans. This space will be used by my brain to cover a wide range of topics, but to start I’m going to try and keep it web development related, something about being a thought leader (which always sounded Orwellian to me). I guess we’ll see what arrives next Friday.

Later.

Posted in Uncategorized | Leave a comment