In the last post: Drag and drop with HTML5, i explained how to drag and drop using HTML5 and Javascript (jQuery). I mentioned that touch devices such as iPhone, iPad, BlackBerry, Samsung…. etc, does not support HTML5 Drag and Drop features. Now, in this post, i want to explain how to make Drag and Drop [...]
Drang n’ Drop in HTML 5 is supported by: IE9+, Firefox 3.6+, Safari 4+, Opera 11+ and Chrome 12+. But its not supported yet for touch devices like Touch Mobiles and Tablets. To make things more clear, its not only HTML 5.. Its a combination between HTML 5, CSS 3, and Javascript. Why we combine [...]
Hellow reader, You may have a normal HTML Form, like: contact form, feedback form or any other forms in your website or any website you work on.Did you think how diffecult converting this FORM into AJAX? Let me say, it will be very simple. Simple as 1 minute of changes. How is that, right? 0 [...]
1) Nivo Slider: A stunning jQuery image gallery with 16 unique transition effects. Comes with many featrues and compatible with most browser versions (IE 7+, Firefox v3+, Google Chrome v4+, Safari v4+ and Opera v10+). I like this plugin and i recommend it. 2) Gloss: Gloss is not an image gallery, it’s a lightweight jQuery [...]
jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads. The plugin is based on open standards like HTML5-JavaScript and No Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution. Multiple files can be selected, they can even be drag ‘n’ dropped from the desktop and [...]
It’s lovely to make you webpage interactive. jQuery plugins add effects to multiple elements of HTML. jQuery Gloss adds a Gloss (shining) effect to images by simple and lightweight code. This effect is added on hover effect (mouseover, mouseout). This plugin is ~2.2 Kb and it’s simple as: Add a DIV element to hold the [...]
In the last jQuery Animate article I wrote, I mentioned how to use the .animate() function with few tricks. But here, I am going to write about jQuery Animate function in general and I will explain few things and some tricks. The jQuery Animate is a smart object because could be used at any syntax. [...]
Lot of jQuery projects relies on keyboard/mouse event like pressing “p” for previous and “n” for next also using the arrows. Because this is important, I have managed a code to get the keyboard character on 3 events: – Keypress – Keyup – Keydown I have created a function to return the key as below: [...]
Here I will mention how to use the jquery animate function and the usability and flexibility of it. The syntax of this function is: $.animate(options, settings, callback); /* you can replace setting with duration (in milliseconds) or words: ‘slow’, ‘normal’ or ‘fast’. callback is optional */ Below is a list of popular and most used [...]
Using jQuery animate() function to do a smooth scrolling: I have also created a div as follow: <div id=”scrollToHere”> Scroll to here </div> You need something to run your script. Create a button like this: <input type="button" onclick="scollWin();" value="Scroll up" /> The jQuery Code will be like this: function scrollWin(){ $(‘html,body’).animate({ scrollTop: $("#scrollToHere").offset().top }, 2000); [...]
Follow me!