Filed in Programming, jquery
With 15 Comments
Nifty Yoyo Animation on TextBox Using jQuery
This idea headed off in my mind when I open the Acid Play website to search Mario Bros game. I love Mario game soo much.. :red_heart:. Forget it.
When I focus my cursor on the textbox area to enter keywords, the texbox width is changing. The textbox become longer then I set focus to the textbox, and the texbox reflux again after I lost focus from the textbox. Very interesting animation, isn’t it?
Then I go to jQuery.com to get the lastest jQuery and see some demo and I get what I want. But the demo is using div tag for example. So I reconstruct the code and make another example that you could use on your wordpress.
First, you must have jQuery library. Here i use jQuery library version 1.3.2(the latest library when I write this post). You’d better download a minified version. After you download, copy jquery-1.3.2.min.js file to your javascript folder of your current theme. Example, ..\wp-content\themes\your-theme\javascript and put it below javascript folder.
Open header.php of your current theme and add following code before wp_head() function is called. For this example, I used textbox of search form in wordpress.
<script src="<?php bloginfo('template_directory'); ?>/javascript/jquery-1.3.2.min.js"></script> <script> $(function() { $("#s").focus( function() { $("#s").animate({width: 200}, 1000); } ); }); $(function() { $("#s").blur( function() { $("#s").animate({width: 140}, 1000); } ); }); </script> </script>
You see in the javascript code above we set 140 pixel after the textbox losing the focus. So for initiation phase(after you load your blog and not give any interaction yet) set the textbox width to 140 pixel. You can see css code below. Remember to add float:left to the text box and float:right to the button, so that your button will not move to bottom of textbox when animation is running.
#s { border: 1px solid #666; width: 140px; padding: 3px; color: #666; float:left;} .searchbutton { border: 1px solid #666; cursor: pointer; color: #666; font-size: 0.9em; padding: 3px !important; height: 21px; float:right; }
Be sure that the textbox of your search form has id equal to s.
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" /> <input type="submit" value="Search" class="searchbutton" />
Save the file and run again your blog from your most favourite browser. See the animation when you put the cursor at the textbox and see whats happen.
Note : I’ve try this code and this animation work for Wordpress 2.7 and using my plainBox theme. But this script is not working if you include prototype.js at your theme. May be it is compability issue between prototype.js and jQuery 1.3.2.
15 Comments so far
cool post.
nice to meet you
i just subscribe this blog. would you like to subscribe back?
haha
mantab gan…
makasih tutorialnya..:D
kapan-kapan kasih tutorial ajax untuk facebook apps dong..
ditunggu..
gak ada live demonya bang?
How are u today gands? fine right..?
that’s awesome animation, thanks 4 share :victory:
Keren gand, lumayan bikin blog jd lebih hidup
@my blog 4 … : sure. :big_smile
@d3ptzz : maksudnya membuat widget facebook untuk di pasang di blog?
@nomercy : gak ada. hehehe..
@ mike : thankx bang. I’m fine..
@aspirasiputih : ini hanya contoh aja. Boleh di pasang boleh tidak mengingat kapasitas bandwith di indonesia sangat kecil
sudah ngeliat demonya di link game yang sameyan berikan. EH, lha kok saya malah mencari street fighter 2, hohoho.. ini sedang download… wekekeke…
@ndop : wakaka.. si anak malah jadi nyasar.
bukan…
bikin facebook application…
yang nanti dipasang di apps.facebook.com
saya mentok di ajaxnya.. bingung euy.. belum belajar ajax.. haha
Hi, tuker link yuk…!
Linkmu udah tak pasang lho…
Salam kenal
@d3ptzz : Actually, I don’t interested in Facebook apps. but i’ll give a try.
@the best gadget : your link has been added.
Makasih sekali.. Saya cuma request bagian ajaxnya.saya masih bingung menggunakan FBJS..
Tampaknya sangat bertentangan dengan prinsip yang saya anut sekarang :haha:
Mau tanya bang:
1. Berapa ukuran JavaScript yg dibutuhkan?
2. Bisa ga kalau menggunaka JS library? Bisa diambil (dijalankan) langsung dari sumbernya ga, tanpa harus mengupload ke server kita?
3. Kenapa JavaSriptnya harus dipanggil di bagian wp_head? Kenapa ga tepat sebelum form pencarian. Dan alangkah lebih baiknya jika form pencarian tsb berada di bawah konten, sehingga konten akan ditampilkan lebih cepat tanpa perlu menunggu waktu panggil javascript selesai.
Wah, menarik nih tuk dicoba mas gands….. :red_heart:
@d3ptzz, mudah2an bisa cepat. :big_smile:
@rismaka : haha.. makanya gak saya aplikasikan di blog ini. Saya juga pecinta simple and clean theme. Halah.. :big_smile:
1. Ukurannya jQuery versi 1.3.2 ini cukup besar. sekitar 56KB, padahal sudah minified edition.
2. Bisa. Sebenarnya bisa kita buat script sendiri. Karena sebenarnya gampang banget kok membuatnya. Server untuk scriptnya tersedia kok. Ada di Google code. Saya lupa linknya, tapi boleh ngacak2 isi jquery.com untuk menemukannya. hehehe…
3. Sengaja. Agar orang lain bisa menemukan best practices dan berkomentar seperti bang adi ini. Saya sudah pikirkan kok, klo script ini ada kelemahan, klo gak di pancing gitu, gak ada jadinya diskusi. hahahaha… Masak mau terima bersih aja. YA gak? hahahahah…
Menurut saya, form searchnya tetap aja di atas, tapi summoning librarynya di bawah. Gitu lebih baik. Mudah2an ada visitor yang baca diskusi kita ini bang. :big_smile: