# Wednesday, 04 August 2010

Normally forms don’t have much of a visual queue to the end user showing them where they are on a page.

image

Wouldn’t it be nice though?

image

That just seems like a step in the right direction.  Making this happen is a lot easier than I thought.  Most browsers can handle this with the css pseudo-class selector.  The css to make this happen for all your inputs would look like this:

input:focus
{
    background-color:LightYellow;
    border-color:Red;
    border-style:dotted;
    border-width:2px;
}

Pretty simple.  However, If you are need to support IE7 and lower the css above won’t do anything. IE7 doesn’t respect the focus selector.  Don’t fret. jQuery to the rescue.

if ($.browser.msie && $.browser.version == "7.0") {
    $("input").focus(function() {
        $(this).addClass('FocusFix');
    }).blur(function() {
      $(this).removeClass('FocusFix');
  });
}

Be sure to add the FocusFix class to your css:

input:focus, input.FocusFix
{
    background-color:LightYellow;
    border-color:Red;
    border-style:dotted;
    border-width:2px;
}

That should get you going in IE7.  You might notice though all your input types are doing this even buttons for example.  You can fix this by telling jQuery and css to select on certain types of inputs.

CSS:

input[type="text"]:focus, input[type="password"]:focus
And with jQuery:
if ($.browser.msie && $.browser.version == "7.0") {
  $("input[type='text'], input[type='password']").focus(function() {
      $(this).addClass('FocusFix');
  }).blur(function() {
    $(this).removeClass('FocusFix');
});

I have done all my targeting with the input element. You can just as easily have done this with classes for your elements. In my case, the application is already well underway and it seemed an easier approach to select the input types I wanted. You could also add your textareas easily this way.

Happy Coding!

Posted 08.04.2010  #    Comments [0]  | 
# Tuesday, 03 August 2010

I replaced all my buttons in my web application with the jQuery buttons widget to get a quick and easy look and feel going that was better than the drab stock buttons. It worked great and was simple.

Unfortunately, the login button was not changing until after I logged in successfully (hint!!!!).  I ended up spending far too long trying to figure out why it wasn’t working, even setting up a brand new project to “repeat” my results. I ended the day no better on what was occurring. duh

 

As a new day began I realized I had never even tried my app in Fiddler to see if it could give me a clue.  Besides taking a few minutes to remember why my localhost wasn’t being inspected, (Did I remember to add a . after the localhost? Of course not.) fiddler showed me the error of my ways quickly.

I had forgotten to allow my scripts folder access.  Duh!

 

 

fiddler

looser

Unfortunately, I imagine this situation is familiar to many developers. Spending way too long on a problem that once the answer appears we know we should have solved it a lot sooner. Here’s your slice of humble pie. Enjoy!

Moral of the story?  Lean on your tools and stepping away from the problem (or sleeping on it in this case) will almost always get you to the end faster.

 

 

 

Happy Coding!

Posted 08.03.2010  #    Comments [0]  | 
# Monday, 02 August 2010

Over the past week our team has been crunching out an asp.net webforms app to help manage our flood response situation that has been a very unfortunate side effect of the fire here in Coconino County.  We have been going pretty fast, releasing one to two updates a day in order to get functionality out quickly to those who need it.

Today, we had a breather and I decided to go back and spruce up our work.  One item on my plate was to help the users more easily enter dates.  The main entry form has over 10 date fields.  A little excessive but it’s what they need.  I could just use the AJAX calendar extender but that would mean quite a bit of clicking and properties to set manually.

I had a hunch that the jQuery way may have an easier solution.  Using Selectors, the solution ended up being one line of code.

<script type="text/javascript">
    $(function() {
        $("input[name*='dte']").datepicker();
    });
</script>

How awesome is that. All of our date inputs have a prefix of 'dte' allowing a simple selector over all inputs with 'dte' in the name attribute.  Normally, one would give all date inputs a class that can be use instead but they all already had this in common.

With the same idea in mind, I decided to change all of our buttons to use the jQuery button widget to get a nice and quick improvement on the look and feel.

<script type="text/javascript">
    $(function() {
        $(":submit, :button").button();
    });
</script>

In our case, we defined buttons two different ways in our code.  Again, with selectors we can handle this with one line of code.

Downloading and using jQuery UI couldn’t be simpler.  I customized the download (you don’t have to) to only use the date picker and button widgets and added the customized jQuery to a script tag.  jQuery UI depends on jQuery but instead of using the version downloaded I used the google CDN to help speed things up a bit.  Last, I added the theme for the controls to the app and referenced the stylesheet.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.2.custom.min.js"></script>
<link href="~/stylesheets/jqueryUIcss/ui-lightness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" type="text/css" /> 

The ability to do this so easily and quickly with jQuery is a big WIN.  I wonder if this is easily replicated with MS AJAX?  My hunch is it’s probably doable but can’t possibly be easier and I imagine it’s not nearly as easy.  I could be wrong though…

Happy Coding!

Posted 08.02.2010  #    Comments [0]  |