I have three inputs. I want them all to start and end with the same width but in the event one of them is clicked, i want that one to increase width and ALL THE OTHERS to decrease widths. Is there a way that, if one input is focused and the others are NOT focused but NOT YET blurred, I can apply a new class to the inputs?
A sort of working model can be found at: http://testserver1.staceylanehosting.net
Here is my jQuery code:
$(document).ready(function() {
$('#wrapper-newsletter input[type="text"]').addClass("idleField");
$('#wrapper-newsletter input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('#wrapper-newsletter input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField-shrink");
if ($.trim(this.value == '')){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
Here is the HTML Markup:
<div id="wrapper-newsletter" class="grid_8">
<h4>Receive Updates</h4>
<p>To recieve notifications when our site is updated, enter your email address and name below!</p>
<form>
<input type="text" class="idleField" name="newsletter-name" value="Name" />
<input type="text" class="idleField" name="newsletter-surname" value="Surname" />
<input type="text" class="idleField" name="newsletter-email" value="Email" />
<a href="#" title="Subscribe" class="button-blue">
<span>Subscribe</span>
</a>
</form>
</div><!-- div#wrapper-newsletter -->
And the relevant CSS:
#wrapper-newsletter input[type=text] { width: 102px; }
.idleField { }
.idleField-shrink{ width: 63px !important; }
#wrapper-newsletter input[type=text]:focus { width: 180px; }
Figured it out. If you're curious to see the outcome or are here looking for the answer to the question: