Home/ Questions/Q 4002062
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:58:49+00:00

Would someone be able to point in the right direction for a similar jquery

  • 0

Would someone be able to point in the right direction for a “similar” jquery plug-in, for example, that could replicate apple’s new search stick functionality?

When using Safari or Chrome, the search stick located in apple’s global navigation will increase in size when clicked. I’d like to incorporate this same effect for a project of mine.

Link: http://www.apple.com/about/webbadges/

I appreciate your help!

Evan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d say just write it yourself! It isn’t as hard as you might think. This might help get you started:

    <html><body>

<style>
#search {
    background-color: #999;
    width: 100px;
    border: 1px solid #ddd;
    outline: none;
}
</style>

<input id="search" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ width: '200px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ width: '100px', backgroundColor: '#999' });
    });
});
</script>

</body></html>
    • 0