PUBLIC MARKS from decembre with tags javascript & demo

A switching title effect where a fixed text element changes with an animation depending on the scroll position.The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Main features Keyframes: Chain multiple animation properties. Timeline: Synchronize multiple instances together. Playback controls: Play, pause, restart, seek animations or timelines. CSS transforms: Animate CSS transforms individually. Function based values: Multiple animated targets can have individual value. SVG Animations: Motion path, line drawing and morphing animations. Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

As per the jQuery documentation there are following ways to check if a checkbox is checked or not. Lets consider a checkbox for example (Check Working jsfiddle with all examples)

jquery.udraggable.js This plugin provides an API similar to jQueryUI's draggable but with support for unified mouse and touch events. It builds on Michael S. Mikowski's jquery.event.ue unified event plugin.

Here's another updated code: $(document).ready(function() { var $dragging = null; $('body').on("mousedown", "div", function(e) { $(this).attr('unselectable', 'on').addClass('draggable'); var el_w = $('.draggable').outerWidth(), el_h = $('.draggable').outerHeight(); $('body').on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - el_h / 2, left: e.pageX - el_w / 2 }); } }); $dragging = $(e.target); }).on("mouseup", ".draggable", function(e) { $dragging = null; $(this).removeAttr('unselectable').removeClass('draggable'); }); });​

$ (selector, context).draggable (options) Method The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved. Syntax $(selector, context).draggable(options); You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows − $(selector, context).draggable({option1: value1, option2: value2..... });

The recipe for the best user experience: Start with POSH, a simple set of heading/div pairs Add ARIA (role, aria-selected, aria-hidden, aria-labelledby) and tabindex attributes using JavaScript as these would be confusing if there was no behavior attached to the widgets. Use JavaScript to also plug a class on the component according to its type (accordion or tabpanel). Style the widget using the selector inserted by the script, this way containers are not hidden if there is no script support. Use cursor to style the tabs because those behave like buttons (default), not links (pointer). In case the component is displayed as a Tab Panel, style it as an Accordion before its tabs start wrapping (to accomodate user’s font-size) or at narrow widths...... ../..

I like to use: - Tiny Scrollbar for the minimalist design - JQuery Custom Content Scroller

Video play on hover

Here are different options for this: You can use this: $($("ul > li").get().reverse()).each(function (i) { $(this).text( 'Item ' + (++i)); }); ===or==== $($(".block-item").get().reverse()).each(function (i) { $(this).text(++i); });

Enforcing a maximum character length for text and textarea form fields is fairly easy to do.

I think there are many developers who don’t realize that most of the jQuery methods they use have native equivalents that require the same or only a slighter larger amount of code to use. Below are a series of code samples showing some popular jQuery functions along with their native counterparts.

nous allons vous montrer comment créer les légendes des images avec diverses transitions simplement en utilisant CSS3. Simple transition effect with only CSS3.How to create image captions with various transitions simply using CSS3, dependent on transform and transition properties.