Focusify is a simple jQuery plugin for visually enhancing forms and form elements. Problems surface when there is a requirement to provide visual cues from interactions with form fields. Since CSS works from a top down, left to right hierarchy, there is no simple way to style an element that precedes, or is the parent of, an active field in the form. Focusify intends to resolve this issue by dynamically altering the class name of the related focused element, therefore providing a hook for the custom styling of the element’s states.
Archive for 2013
StarTube : YouTube Video Gallery Powered by jQuery
StarTube is a powerful yet easy to use video gallery based on the brand new StarTube jQuery Plugin. It’s a perfect choice if you wish to bring your favorite videos from YouTube to your website and display them nicely inside a categorized gallery. Developed in best practises of HTML5, CSS3, and Javascript.
Features:
- A responsive design that looks great on desktops, tablets and smart phones
- Add unlimited number of videos to the gallery
- Optionally group videos by categories
- Assign videos to multiple categories to best match your gallery structure
- Navigate using the keyboard as well as the on-page controls
- Set custom player width value for best responsive performance on all devices
- Set the number of thumbnails to show per page in the navigation panel
- Set the video quality for the YouTube player
- Enable or disable continuous video loop
- Lite and dark color schemes available to switch between for smooth design integrations
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
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
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
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 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
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 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!
