elementTransitions.js : jQuery CSS3 Transitions Effect Plugin

elementTransitions.js : jQuery CSS3 Transitions Effect Plugin

This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.

Ultimate Google Web Fonts – code generator

Ultimate Google Web Fonts - code generator

Ultimate Google Web Fonts code generator is a tool that allows you to instantly access all of Google’s open source web fonts, preview and generate code to use them with any website, regarding of technology used (PHP, Joomla, Magento, ROR, pure HTML, ASP.net, etc). List of available fonts is updated from Google automatically, and currently there are more than 650 fonts to choose from.

With its unique system for previewing fonts on any website, it is fun and easy to use. You can take full control over typography in your site in a matter of minutes.

Features:

  • Live, instant preview of any Google Web font with any site
  • Top-notch performance: only 1 css file and one style block for any number of fonts added
  • Supports all available font variants (e.g. light, bold, italic, black, etc.)
  • Allows additional custom CSS for each font (e.g. red color, etc.)
  • Ajaxed, easy interface
  • Loads a list of fonts automatically

Slimmage : Sane & Simple Responsive Images

Slimmage : Sane & Simple Responsive Images

Your wait for a sane, easily managed path to responsive images has now ended.With Slimmage, CSS controls which image size is downloaded, not HTML

Features:

  • Media queries, breakpoints, nested percentages, & max-width work as expected.
  • Works on > 99% of browsers. 3KB minified vanilla js, 1.5KB compressed.
  • Cookie-free; works on first page load. Works with CDNs.
  • Fully accessible; degrades gracefully without javascript
  • Massive bandwidth reduction. No duplicate requests. Can auto-enable WebP and adjust compression based on pixel density
  • Works with any RIAPI-compliant backend. ImageResizer is preferred.

Strength.js : Ultimate jQuery password input plugin

Strength.js : Ultimate jQuery password input plugin

The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password.

Strength.js provides a toggle feature for password input fields that allows the user to view or asterisk the password. It also features a strength indicator to show how secure a users password is.

Controlling History: the HTML5 History API with jQuery

Controlling History: the HTML5 History API with jQuery

Today we’re going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We’re effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable.

This technique effectively allows ‘selective’ loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. By doing this we save load times There are two main reasons why you would want to only load certain elements when your user uses the back and forward button to navigate through history. This cuts out all the unnecessaries and creates a faster web experience.

Easiest Way to Retrieve Twitter Timeline with PHP & jQuery

Easiest Way to Retrieve Twitter Timeline with PHP & jQuery

Twitter terminated its old API, and all of our Twitter tutorials have stopped working! So, here is a follow up to show you how easy is it to retrieve user timeline and hashtag with Twitter REST API 1.1. Of course, I don’t just stop there. I integrated my previously written script and modified it to work with Grid-A-Licious plugin to create something that’s similar with Pinterest.

jHtmlArea : WYSIWYG HTML Editor for jQuery

jHtmlArea : WYSIWYG HTML Editor for jQuery

A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.

Vertical Responsive Navigation with jQuery & CSS3

Vertical Responsive Navigation with jQuery & CSS3

Vertical Responsive Navigation is a navigation component based in CSS and Javascript code. It’s responsive navigation, collapsible on mobile devices, has two themes and 12 preset colors.

Features:

  • Light and Dark themes
  • 12 preset colors
  • Responsive
  • Collapsible
  • Major Browsers Compatible
  • 361 icons available

visualNav : jQuery navigation menu with smooth scrolls into view

visualNav : jQuery navigation menu with smooth scrolls into view

A jQuery plugin that modifies a navigation menu to highlight / change when the menu’s target smooth scrolls into view.

Features:

  • Smooth scrolling page navigation.
  • Easing can easily be defined for both horizontal and vertical scrolling.
  • Auto-updating menu which highlights both the currently viewed content & other content in view.
  • User can cancel auto-scroll by pressing any key, clicking on the page or scrolling the mousewheel.
  • Can be set up to work with any menu elements. Integrates easily with Bootstrap!

Create a Vertical, Horizontal and Diagonal Sliding Content with jQuery

Create a Vertical, Horizontal and Diagonal Sliding Content with jQuery

In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! Don’t worry, we won’t rely on javascript too much, we will use css/html for the layout and javascript only do the scrolling. And hey, it will still work even if your browser doesn’t support javascript.