jQuery Responsive Horizontal Layout with CSS3

jQuery Responsive Horizontal Layout with CSS3

Today we want to show you how to create a horizontal layout in jQuery and CSS3 with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.

JavaScript Browser Determiner

JavaScript Browser Determiner

It is a lightweight (4kb) JavaScript library that can help web-developers, especially HTML/CSS coders, to easily write CSS or JavaScript code for any specific browser without any CSS hacks. It is indispensable solution for building cross-browser and cross-platform web-sites and web-applications.

How it works? Very simple. It generates a list of classes with the detailed information about browser, layout engine, OS, device and then attach it to <html> tag.

Unlike well-known Modernizr, the CSS/JS Browser Determiner is mostly focused not on the browser features but on the browser and the device itself. But it also determines the support of common CSS features.

Creating Custom File Input With PHP, CSS3 and jQuery

Creating Custom File Input With PHP, CSS3 and jQuery

This tutorial will help you in developing jQuery plugin which will assist you to replace that complex file input with support for multiple files.You must be knowing that file inputs are very limited in terms of customization and many complex plugins are avaialble with multiple evacuations that allows you to customize those file inputs, but its is still a challenging task to get it worked.

Photobox: CSS3 image gallery jQuery plugin

Photobox: CSS3 image gallery jQuery plugin

Photobox is a lightweight image gallery modal window script which uses CSS3 heavily for silky-smooth animations and transitions. The goal was to great an image gallery script that utilizes GPU rending instead is the 90% scripts out there which are using javascript to move things around the old fashioned way.

Benefits:

  • Both the script & CSS are only 7k each (minified script, not gziped)
  • Uses silky-smooth, hardware accelerated, CSS3 transitions and animations (for better performance)
  • Pretty UI and easy UX
  • CSS3 preloader, tailored-made. The only image you need is the arrow.png (soon even not that)
  • Works also on IE9 and above, but clearly not as nice as in normal browsers
  • Uses event-delegation on all thumbnails events

Create a Cool Website with Fancy Scrolling Effects in jQuery

Create a Cool Website with Fancy Scrolling Effects in jQuery

In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.This tutorial will be a walkthrough of my design process for a simple portal site that presents all of my websites and social profiles. Each website has its own individual section in a series of ‘slides’ laid out vertically. With the help of some cool jQuery plugins clever scrolling and parallax illusions are added to inject an element of fun and novelty to the site.

Wikipedia Instant Search In Jquery With Integrated Voice Search

Wikipedia Instant Search In Jquery With Integrated Voice Search
I created a Wikipedia instant search in jquery with integrated voice search, with little differences  in UI with jquery and html, by using Wikipedia  API Call Back function. And  by using the instant search  function  .keyup(function(e)). This brings the meta-title information of Wikipedia as you type on the search box with smooth and fast as well as you can search with your voice as i included the voice search system by adding this html
code in input field = (x-webkit-speech note :this voice search will be working only in Google chrome browser

Create a Pinterest Feed jQuery Plugin Using AJAX & jQuery Isotope

Create a Pinterest Feed jQuery Plugin Using AJAX & jQuery Isotope

In our latest jQuery social network tutorial we are going to create a jQuery plugin to display Pinterest feeds via AJAX from either a username or pinterest board and display them in a masonry style wall using jQuery Isotope.

The plugin will also include code to display time since posted, options to set the number of feed items to display plus Facebook and Twitter share links to help boost the traffic to your pins.

jQuery UI FlipBook

jQuery UI FlipBook

FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.

Features:

  • set the animation speed
  • change animation direction
  • exclude specific images
  • single step through the images
  • resizes to fit the images

jqMetro : jQuery plugin for metro UI controls

jqMetro : jQuery plugin for metro UI controls

jqMetro is jQuery plugin for metro UI controls. Using this plugin you can convert your categorized items into a pivot-style view. This page itself is a good example of how the pivot control will look like in your browser.

Live Album Previews with CSS3 and jQuery

Live Album Previews with CSS3 and jQuery

Today we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.