CODEWITHSUNDEEP
javascriptjquery
Chase Florell
Chase Florell

Reputation: 47417

Magnify search box similar to that on Apple.com

If you go to http://apple.com and click in the search box, you'll notice it grows/magnifies onfocus, and onblur it collapses back to it's original state.

I'm wondering if there's a jquery plugin or similar to do this job easily.

I don't want to use the JS that's on the Apple website since it's not fully cross browser. I also don't have time to roll my own. If there's nothing prebuilt, that's ok, but if anyone knows of anything pre-made, I'd be very grateful.

Upvotes: 0

Views: 943

Answers (4)

Pratik.S
Pratik.S

Reputation: 470

Look at this article I think it can help you to certain extent.....the search box doesn't get focus when clicked but it's size is increased......http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/

Upvotes: 0

Vitalia Fedorchuk
Vitalia Fedorchuk

Reputation: 36

search box like at apple.com without JS: http://www.kvadracom.com/en-projects-blog.html#1

Upvotes: 2

Anupam
Anupam

Reputation: 8016

I guess you want something like this.It is working in IE,firfox,chrome.I didnt check for others

$('input').focus(function() {
         $(this).css({'width': '50px'});
});

$('input').blur(function() {
         $(this).css({'width': '100px'});
 });

Similarly you could use background-color property to toggle between color

----- Edit by OP ---

I marked this as answer, however I did modify it to be a lot more like the Apple website.

$('input').focus(function() {
         $(this).animate({width: 150}, 'slow');
});

$('input').blur(function() {
         $(this).animate({width: 100}, 'slow');
 });

Upvotes: 1

Karl Andrew
Karl Andrew

Reputation: 1555

It's been there a while, here's another SO post:

Mimic apple.com globalsearch input field with HTML and CSS

Upvotes: 1

Related Questions