background preloader

jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.

jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.
Related:  pluginsJqueryPlugins jsMiscellaneous

jQuery TourBus jQuery TourBus takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators, on and on, all built in... too much stuff! Less is more! Basic Usage Start by including the jQuery plugin and base styles on your page, of course. Then we can define some 'legs' of our tour. <ol class='tourbus-legs' id='my-tour-id'><li data-orientation='centered'><h2>This is a modal-like tour leg</h2><p>It isn't attached to a specific element. This is the general idea, and there are quite a lot of properties you can specify on your legs to customize the behavior (we'll get to that stuff in a bit). $(window).load( function() { var tour = $('#my-tour-id').tourbus( {} ); } ); Now the tour variable has the ordered list of legs we defined above. tour.trigger('depart.tourbus'); Here are the events it responds to: If you prefer, you can get a reference to the Bus instance itself and call methods directly. tour.data('tourbus').depart(); Leg CSS

jScrollPane - cross browser styleable scrollbars with jQuery and CSS jQuery Autosize A plugin to automatically adjust textarea height. Fork me on GitHub Demo Download Released under the MIT License. Usage $(document).ready(function(){ $('textarea').autosize(); }); Drop Autosize into any existing website and it should Just Work™. Manual Triggering Autosize has no way of knowing when the value of a textarea has been changed through JavaScript. $('#example').val('New Text!'). The autosize.resize event only accounts for changes in value. Removing Autosize Trigger the autosize.destroy event to remove autosize from a textarea element: $('#example').trigger('autosize.destroy'); Settings Known Issues & Solutions Incorrect size with hidden textarea elements Autosize needs to be able to calculate the width of the textarea element when it is assigned. Possible ways to resolve: Specify an exact width for the textarea element in your stylesheet.Trigger the autosize.resize event after the element has been revealed. $.autosize.show.trigger; Incorrect size when zoomed in Chrome Incorrect size in IE8:

Use CSS3 to Create a Dynamic Stack of Index Cards | DesignLovr Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3. Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us. We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling). Let’s start with the simple HTML-markup, which consists of simple, unordered list, filled with random content. Now the CSS. The fonts Note This and Kulminoituva, both of which are available in @font-face kits (with all necessary font-formats and preformatted CSS-file) on Font Squirrel, are the ones used in my example design. Then we’ll need to style the index cards. Remark Quicktip

mmkjony/enllax.js untitled Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle jQuery jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[2] It was released in January 2006 at BarCamp NYC by John Resig. It is currently developed by a team of developers led by Dave Methvin. Used by over 80% of the 10,000 most visited websites,[3] jQuery is the most popular JavaScript library in use today.[4][5] The set of jQuery core features—DOM element selections, traversal and manipulation—enabled by its selector engine (named "Sizzle" from v1.3), created a new "programming style", fusing algorithms and DOM-data-structures; and influenced the architecture of other JavaScript frameworks like YUI v3 and Dojo. Microsoft and Nokia bundle jQuery on their platforms.[7] Microsoft includes it with Visual Studio[8] for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into the Web Run-Time widget development platform.[9] jQuery has also been used in MediaWiki since version 1.16.[10]

CSS3 Floating Follow Tab with Rollover Effects | Demo By Willis J. Abbot Preface Not since gunpowder was first employed in warfare has so revolutionary a contribution to the science of slaughtering men been made as by the perfection of aircraft and submarines. The former have had their first employment in this world-wide war of the nations. The latter, though in the experimental stage as far back as the American Revolution, have in this bitter contest been for the first time brought to so practical a stage of development as to exert a really appreciable influence on the outcome of the struggle. Comparatively few people appreciate how the thought of navigating the air's dizziest heights and the sea's gloomiest depths has obsessed the minds of inventors. In this book the author has sketched swiftly the slow stages by which in each of these fields of activity success has been attained. Opportunities for the peaceful use of airplanes are beginning to suggest themselves daily.

Pixabay/jQuery-autoGrowInput jQuery slideViewer 1.2 Download slideViewer 1.2 (last updated july 9 2010) What's this? slideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images: slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture). You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips. You can choose where to put the user interface (the numbered links); it can be above or below your set of images. You don't need to specify the width and height for your images (but all the images within a single gallery must have the same width/height!) New!

Related: