jLabel : A jQuery Label plugin

jLabel : A jQuery Label plugin

jLabel is a jQuery plugin that formats text input fields with unobtrusive labels featuring interactive suggestions. This allows input fields to be labelled clearly and presented with minimal interface obstruction.

bootstrap-ajax : Adding declarative ajax functionality to your website

bootstrap-ajax : Adding declarative ajax functionality to your website

This plugin is designed to work with Twitter Bootstrap to enable declarative AJAX support.

No more writing the same 20 line $.ajax blocks of Javascript over and over again for each snippet of AJAX that you want to support. Easily extend support on the server side code for this by adding a top-level attribute to the JSON you are already returning called "html" that is the rendered content. Unlike a backbone.js approach to building a web app, bootstrap-ajax leverages server side template rendering engines to render and return HTML fragments.

jQuery Responsive Megamenu with CSS3

jQuery Responsive Megamenu with CSS3

Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It’s has a responsive and fluid layout.

Features:

  • 11 Styles
  • Javascript/CSS3 effects
  • Grid system
  • Responsive layout
  • Fluid layout
  • Collapsible
  • Major browsers compatible

Create Apple navigation using jQuery Greensock

Create Apple navigation using jQuery Greensock

Apple’s website is always full of small innovative details and fancy CSS3 transitions. Designers talk about the clean and simple interface, while front-end developers wonder how some of these elements were created.

Today we will recreate the new Apple navigation using jQuery Greensock. If you look at it in a desktop browser, you will see a nice elastic animation between the two slides and that’s our goal for today.

How to Make a Digital Clock with jQuery and CSS3

How to Make a Digital Clock with jQuery and CSS3

It all started last week when I saw this pretty dribbble shot. I immediately felt the urge to convert it into a working clock and share it with Tutorialzine’s readers. If you’d like to learn how I made it, read on!

To make the clock work, we will have to use jQuery to generate the markup for each of the digits, and set a timer to update the classes every second. To make our lives easier, we will use the moment.js library to compensate for the lacking JavaScript native date and time functions.

lazyBlock : Conditionally load content in Responsive designs with JavaScript

lazyBlock : Conditionally load content in Responsive designs with JavaScript

lazyBlock is a proof-of-concept to show how content can be conditionally loaded in responsive designs without relying on AJAX to fetch that content. Content is included in the original mark-up but is placed within <script> tags with the type text/html. Based on user action or screen width, the content can then be moved from the <script> tag and then injected into the DOM by lazyBlock.

Creative Button Styles with JavaScript & CSS3

Creative Button Styles with JavaScript & CSS3

Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.

ZoomBox 2 – The Photographer’s Premium Lightbox in jQuery & CSS3

ZoomBox 2 - The Photographer's Premium Lightbox in jQuery & CSS3

ZoomBox 2 – The Photographer’s Lightbox ! What makes ZoomBox unique to the other lightbox scripts ? In short – quality, user-friendliness, design and social media connectivity. Take a look at the demos and be convinced.

Features:

  • HTML5 technology - this gallery uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
  • fully responsive – looks great from mobile to HD
  • touch optimized – touch devices are not forgotten
  • two skins – two full skins to fit every brand
  • CSS3 technology - this player uses cutting-edge css3 definitions
  • Retina-ready - graphics have double resolution for smooth retina viewing
  • easy install – purchase, download the zip, read the docs
  • iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
  • Android optimized – this component has been tested on Android 4.0 and works awesome
  • truly social – Zoombox 2 is truly social. It features the Facebook Like widget and Facebook Chat so your fans can comment on your art. And because deeplinking is done right in ZoomBox 2, each photo has it’s own likes and comments, even if on the same page. Wow!

Twitter Bootstrap Hover Dropdown jQuery Plugin

Twitter Bootstrap Hover Dropdown jQuery Plugin

An unofficial Twitter Bootstrap plugin to enable Twitter Bootstrap dropdowns to activate on hover and provide a nice user experience.

Creating Multi Level Dropdown Menu CSS & jQuery

Creating Multi Level Dropdown Menu CSS & jQuery

I’ve been playing with a layout that needed an good looking dropdown menu, so I’ve decided to create one myself, and also created this tutorial, hopefully it will prove to be useful to those who needs similar drop down menu. We will be creating 3 level sub menus in pure CSS, it should work without any JavaScript, and at the end we will add jQuery for that sliding effect.