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. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. 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 Pagination Navigation 7) jQuery Treeview Plugin 8 ) Coda-Slider- Amazing jQuery Coda-Slider can be used for Nice, slick content presentation. Forms
bassistance.de 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)
Experiments | Accordion - Heading/DIV the script In these examples accessibility is taken into account. The expand/collapse functionality is keyboard accessible by tabbing to the section of interest and pressing 'ENTER' to expand/collapse. With JavaScript turned off the whole content is expanded. If you are looking for a nested accordion plugin, see jQuery: Nested Accordion. 1.Accordion slide effect with first section initially expanded First title here [Show/Hide] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Second title here [Show/Hide] Third title here [Show/Hide] 2.Accordion slide effect with first section initially expanded. Fourth title here [Show/Hide] Fifth title here [Show/Hide] Sixth title here [Show/Hide] 3.Accordion queued slide effect with first section initially expanded. Seventh title here [Show/Hide] Eight title here [Show/Hide] Ninth title here [Show/Hide] If you find a bug or have a suggestion/request, please send me an e-mail.
jQuery Tips and Tricks 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. Actually, it is only needed to place DIV element to the column (first, last or any other) and to define class="drag row". 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!
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) {
jQuery Intellisense in VS 2008 Last month I blogged about how Microsoft is extending support for jQuery. Over the last few weeks we've been working with the jQuery team to add great jQuery intellisense support within Visual Studio 2008 and Visual Web Developer 2008 Express (which is free). This is now available to download and use. Steps to Enable jQuery Intellisense in VS 2008 To enable intellisense completion for jQuery within VS you'll want to follow three steps: Step 1: Install VS 2008 SP1 VS 2008 SP1 adds richer JavaScript intellisense support to Visual Studio, and adds code completion support for a broad range of JavaScript libraries. You can download VS 2008 SP1 and Visual Web Developer 2008 Express SP1 here. Step 2: Install VS 2008 Patch KB958502 to Support "-vsdoc.js" Intellisense Files Step 3: Download the jQuery-vsdoc.js file We've worked with the jQuery team to put together a jQuery-vsdoc.js file that provides help comments and support for JavaScript intellisense on chained jQuery selector methods. Scott
wiki:retrieving_data With the first release of jqGrid, the only possible way to obtain data was via XML as described in the tutorial above. Later, many people requested the ability to obtain data via JSON, then with an array and finally with 'real' names. After lot of work and with the help of the community we now have a wide range of methods for obtaining data. The related options (in options array) for manipulating different types of data are: datatype: the possible options are xml json jsonp array xmlstring jsonstring script function (…) It is very important to read this chapter, in order to understand how you should work with the data! The default mapping for XML data is as follows: If your server can provide data in this structure, you need to do nothing more; but if not, there is a way (several ways) to handle the data you are given. The default mapping for JSON data is as follows: will cause jqGrid to search in the XML data for an 'amt' tag (when the repeatitems option is set to false. XML Data root element