jQuery Tutorials for Designers. Realistic Hover Effect With jQuery — Adrian Pelletier. SimpleModal Demos / Eric Martin / ericmmartin.com. Basic Modal Dialog A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel. Demo Download Basic Modal Dialog For this demo, SimpleModal is using this "hidden" data for its content. Examples: $('#basicModalContent').modal(); // jQuery object; this demo$.modal(document.getElementById('basicModalContent')); // DOM$.modal('<p><b>HTML</b> elements</p>'); // HTML More details...
OSX Style Dialog A modal dialog configured to behave like an OSX dialog. Inspired by ModalBox, an OSX style dialog built with prototype. Demo Download OSX Style Modal Dialog Hello! SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. (or press ESC or click the overlay) Interface elements for jQuery - About Interface. Building a jQuery Image Scroller. In this tutorial, we're going to be building an image scroller, making use of jQuery's excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action.
This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser and perform as expected in the latest versions of all of the most common browsers. We'll also build in some interaction by adding controls that allow the visitor to change the direction of the animation. We'll be working with just jQuery and a little HTML and CSS in this tutorial and should be able to run the examples without a full web server setup. Getting Started Styling the Widget Bringing the Widget to Life. A Colorful Clock With CSS & jQuery – Tutorialzine. Martin Angelov The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months.
And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own).
Go ahead, download the demo files and continue with step one. Step 1 – XHTML As usual, we start with the XHTML markup. The difference is, that the XHTML is not contained in demo.html, but is dynamically inserted into the page by jQuery (well there is some markup left there after all we need at least one container div for the clock to be inserted in). Lets take a look at the XHTML that is inserted by jQuery: jquery.tzineClock.js This code is contained in jquery.tzineClock/jquery.tzineClock.js.