background preloader

Miscellaneous

Facebook Twitter

Checkboxes and radio buttons customization (jQuery and Zepto) plugin. Ehynds/jquery-idle-timeout. Maxfierke/jquery-sessionTimeout-bootstrap. jQuery Popup Overlay. PACE. Include pace.js and the theme css of your choice on your page (as early as is possible), and you're done!

PACE

Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again! Waypoints. Xing/wysihtml5. Use CSS3 to Create a Dynamic Stack of Index Cards. 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.

Use CSS3 to Create a Dynamic Stack of Index Cards

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. If you want you can download the icons I used at Tutorial 9.

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. Remark Quicktip. CSS3 Floating Follow Tab with Rollover Effects. By Willis J.

CSS3 Floating Follow Tab with Rollover Effects

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. CSS3 3D Rotating Card. 22nd February 2011 - For Safari ONLY (at the moment) 7th March 2012 - Now working in Safari, Chrome and Firefox 8th January 2013 - Now also working in IE10, iPad, iPhone and iPod Touch (Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds.

CSS3 3D Rotating Card

It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). Source Wikipedia copyright © stu nicholls - CSS play Information Absolutely NO javascript, and as far as I know this cannot easliy be done with jQuery etc.. Using just CSS3 to rotate a card so that you can see the information on the reverse. jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.

jQuery Autosize. A plugin to automatically adjust textarea height.

jQuery Autosize

Fork me on GitHub Demo Download Released under the MIT License. Source on Github (changelog). 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! '). Custom Styled Checkboxes. Download CPArticleDownload - 14.62 KB What's Supported Right out of the box, this checkbox widget provides support for most of the typical checkbox functions.

Custom Styled Checkboxes

The key features are listed below. 2 States (checked, unchecked) (* Note: no support for tri-state check boxes) Enabled / Disabled Mouse support Keyboard support including tab ordering Tooltips Simple grouping Customizable images for the 2 states + enabled/disabled. Images can be customized for the whole page or on a checkbox by checkbox basis, as needed. Works with standard input type=checkbox elements to sync up state.

SUPERSCROLLORAMA. SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine.

SUPERSCROLLORAMA

Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Formly. The form glamorizer for jQuery. An unbelievably easy way to add style and validation to your forms.

Formly. The form glamorizer for jQuery

Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function. Download. RubberBand. Easily add the iOS style pull-to-refresh functionality to any page. I recently spotted Hook.js, which I was really excited about.

RubberBand. Easily add the iOS style pull-to-refresh functionality to any page.

I was let down when I noticed that it only reloaded the page and was triggered every time I reached the top of the page. It didn't feel natural to me and I wanted the ability to make an AJAX request. So I made RubberBand to do just that. Demos This page is actually a demo. Using. Progress and Meter Elements. Tocify. Requirements jQuery 1.7.2+ (It is always recommended to use the latest version of jQuery) jQueryUI Widget Factory 1.8.21+ (It is always recommended to use the latest version of the jQueryUI Widget Factory) Optional Dependencies Twitter Bootstrap or jQueryUI CSS Theme Note: A Twitter Bootstrap or jQueryUI theme is only required if you want to use either framework to style your table of contents. Notable Features Supports support Supports styling with or Supports show/hide animations with Supports. Live Preview jQuery Plugin. Many web applications (such as this blog) allow users to enter HTML as a comment.

Live Preview jQuery Plugin

For security reasons, the set of allowed tags is tightly constrained by logic running on the server. Because of this, it’s helpful to provide a preview of what the comment will look like as the user is typing the comment.