| How jQuery spices up your website? |
There comes a time in each site design when you just want to give the internet site a little spice to affect the visitor and make it memorable. You need that exciting interaction to capture the user's attention. In our prior articles, we showed you the easiest way to boost your internet site with attractive buttons, practical elements and fascinating visible effects. In this post, we'll debate the simple way to seduce your visitors with a little JavaScript action. In our examples, we'll be using jQuery, a fastly and concise JavaScript library that simplifies HTML document traversing, event handling, animation and Ajax interactions for quick Web development. Let's get things rolling! Image uploads will be far better after your read this. By employing a little bit of jQuery, we are able to upload photographs with previews. How does one upload photographs now? You choose a file and click upload. Straightforward , right? Except that after you choose your image, you can't see what was selected. The name of the file is at the end of the input fields and if the input field is short or the file path is deep, you will not see anything handy. You will forget what you selected and haven't any idea what you are about to upload.Now try this adaptation on uploading an image. We ditch the Upload button in favour of a Save button and fire the Ajax upload event as fast as a file is selected. The image is under processed server-side, and a thumbnail is loaded onto the current page. Doesn't that feel miles better? We presently have a visible illustration ( imagine that ) of the image we selected. This is very helpful in bigger forms where many fields will be submitted in a single action. It permits the user to check the form before pressing Save and see what image ( or pictures ) they selected. When the image has been uploaded, we have to do 2 things : * First, we've got to set the src feature of our preview img tag to the new thumb. If we simply execute these things in that order, then we might see an exasperating flicker of the old image when the loading class has been removed but the new image hasn't yet loaded. We avoid the exasperating flicker of the old image by waiting to get rid of the loading class till after the preview image's load event fires. We also unfasten our listener after it has fired because we wish to capture this event only once. Lastly, we set the source code of the preview image to the thumbnail that our server has just made. In this example, the reply from the Ajax call is just the thumbnail's URL as text. You might return it in whatever fancy format you like.If JavaScript-support is disabled in user's browsers, they're going to get the reliable submit form without the interactive preview. Clean functional solution, with rich interactions for users with more able browsers. |