Reputation: 816
I am trying to create a simple effect that whenever anybody enters anything into my search field, upon hitting "enter", a simple little loading gif appears inside of the input box.
You can see my code here: http://jsfiddle.net/9KEKa/1/, and here is the raw HTML, CSS, and JS:
HTML
<form>
<input type="text" placeholder="Search..." class="transition-width" />
<input type="submit" value="Search" class="hide" />
</form>
CSS
/* General */
.hide {
display: none;
visibility: hidden;
}
.transition-width {
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
transition: width 0.5s ease;
}
/* Search Form */
form input {
background: url('http://i.imgur.com/7BKx4xr.png') no-repeat right;
border: none;
cursor: pointer;
float: right;
margin-right: 100px;
width: 61px;
}
.searching { background: url('http://i.imgur.com/ayJ7sYg.gif') no-repeat right; }
form input::-webkit-input-placeholder { color: #fff; }
form input::-moz-input-placeholder { color: #fff; }
form input:-moz-input-placeholder { color: #fff; }
form input:-ms-input-placeholder { color: #fff; }
form input:focus {
background: #efefef;
border: 1px solid #aaa;
cursor: auto;
width: 200px;
}
form input:focus::-webkit-input-placeholder { color: #666; }
form input:focus::-moz-input-placeholder { color: #666; }
form input:focus:-moz-input-placeholder { color: #666; }
form input:focus:-ms-input-placeholder { color: #666; }
JavaScript (jQuery)
$(function () {
$('.search form').on('submit', function (e) {
e.preventDefault
$('.search form input.transition-width').addClass('searching');
});
});
All I'm trying to do is add the class "searching" which contains the animated gif that I want as the background.
A lot of my code seems correct, but I may just be having a mental block. Hopefully it's a simple issue that can be solved.
Upvotes: 0
Views: 169
Reputation: 1790
Your capture key for enter was incorrect. Also, the "loading effect" will only work for a use case where one hits "enter." I have left your CSS and HTML as intact and without change.
$('.transition-width').keydown(function(event){
if (event.keyCode == 13){
event.preventDefault();
event.stopPropagation();
$('input.transition-width').blur();
$('input.transition-width').addClass('searching');
}
});
Upvotes: 2
Reputation: 77288
3 Things:
.searching
isn't specific enough. It's being
overriden by input:focus
and thus having no effect.e.preventDefault();
Upvotes: 1
Reputation: 9476
Try e.preventDefault();
instead of e.preventDefault
.
And your selector should not be .search form
.. when your sourcecode has no such class element before the form in question. It should be just form
in that case.
Upvotes: 0