background preloader

SimpleModal Demos / Eric Martin / ericmmartin.com

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)

Fancybox - Fancy lightbox alternative 45 Fresh Out of the oven jQuery Plugins - Noupe Design Blog Mar 05 2008 Two month ago we’ve presented the 50 favorite jQuery plugins many developers use and we promised that the second version will be coming soon. Today, we are going to introduce 45+ more jquery plugins that were recently created, so you don’t have to do the search as we did it and will continue to do it to build a useful library of jquery plugins and solutions. Image SlideShows and Galleries 1) Galleria -Is a javascript image gallery written in jQuery. 2) jQuery Multimedia Portfolio -Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player. 3) wSlide -Change your lists in animated box (with pagination) Tag Clouds 4) Hover Sub Tags- Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. Pagination Navigation 7) jQuery Treeview Plugin Tables and Grids

Interface elements for jQuery - About Interface The #1 Javascript Pop Up - Get TopUp! - Home Nivo Slider - The Most Awesome jQuery Image Slider Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. Responsive and mobile ready The generated image sliders are completely responsive. Everyone loves Nivo! Time to make the best of your website’s’ image galleries. Pre-built slider themes You can choose the style of your sliders from the awesome pre-built themes. Create sliders from categories or galleries Besides the classic image sliders, Nivo allows you to choose between Category and Gallery sliders. Post types support Image sliders created with the Nivo Slider plugin are compatible with WordPress post types. Create carousels Testimonials 30 day money back guarantee

jQuery Tips and Tricks 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. Getting Started Let's create the underlying HTML page first of all; in a new page in your text editor add the following code: Save this as imageScroller.html inside a new folder. Our widget consists of a series of nested containers and a bunch of images wrapped in links. Styling the Widget Bringing the Widget to Life Changing Direction

Best jQuery Plugins of 2010 For our “Best of 2010″ series we’ve already shown your our picks for best free WordPress themes and free fonts. So for this week the focus in on jQuery. This javascript framework continued to grow in popularity during 2010, which meant an abundance of plugins being released. Nivo Slider A super smooth slider with loads of settings including 9 transition effects. Quicksand Reorder and filter items with a nice shuffling animation. Spritely Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. Lettering.js Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography. Colortip Colortip converts the title attributes of elements withing your page, into a series of colorful tooltips. Masonry Masonry is a layout plugin for jQuery. gvChart gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. Animated table sort YoxView Read More

Drag and drop table rows with JavaScript | Redips | spideR Net REDIPS.drag was initially built to drag and drop table content. After publishing first version of REDIPS.drag, I received a lot of questions about dragging table rows also. Now is possible to drag and drop table rows as well as table content. First column and contained DIV element in this demo is a row handler, so you can try to drag table rows. It is very easy to define a row handler. event.rowChangedevent.rowClickedevent.rowClonedevent.rowDeletedevent.rowDroppedevent.rowDroppedBeforeevent.rowDroppedSourceevent.rowMovedevent.rowNotClonedevent.rowNotMovedevent.rowUndeleted Each event handler has access to the obj and objOld objects. REDIPS.drag has a new method: rowOpacity(el, opacity, color) to change color and opacity of the source row and mini table. REDIPS.drag takes care about background color of table cells and table rows. Happy dragging and dropping!

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. This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds). 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. Lets continue with the next step. A Colorful jQuery & CSS Clock Step 2 – CSS

Visual jQuery 1.2.6 Use jQuery - Blog - Create a unique Gallery by using z-index and jQuery In this tutorial we want to create a unique picture gallery utilizing the CSS property z-index. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures. Preparing the xHTML, CSS and Pictures We have the wrapping container gallery, a container pictures for the pictures and two controls prev and next for swapping the pictures. We can add as many pictures as we want because our script will pick them up dynamically. If the class names of the DIV’s don’t look fimilar to you, they are from the 960 Grid System and just there to positioning the blocks. The pictures container has relative position (under the heading) and a height of one picture. Pictures The principle of changing z-index The Code function swapFirstLast(isFirst) {

Related: