Blog search

Tuesday 31 December 2013

PSHADOW – A JQUERY EXTENSION FOR GORGEOUS DROP SHADOWS



pShadow, short for paper shadow', is a jQuery extension that adds realistic drop shadows to HTML elements, which works in Internet Explorer (IE8, IE7, IE6 with some clever trickery), Firefox, Chrome, Safari, Opera, and any other modern browser you care to mention. It's free to download and use, and you can see an example on the demo page.
We all know that modern browsers (apart from IE anyway) support the lovely CSS3 box-shadow property. But there are times when we need to cater for IE too, and sometimes a simple box-shadow just doesn't cut the mustard. The pShadow jQuery extension does what all great performers do - it masters the art of illusion.
The shadow itself is actually a .png image, carefully designed to sit on the bottom edge of an element and give impression of depth and shadow, as if the element was a piece of paper sitting on your screen. No shadows are needed on the other edges, because the bottom shadow does all the work for you. Your eyes do the rest and turn it into a 3-dimensional object.

GREYBOX : SMART WINDOW IN JAVASCRIPT



GreyBox can be used to display websites, images and other content in a beautiful way.We can use it in Showing external pages,AJAX uploading of files,Showing internal pages (login, user preference, properties, contact formulas etc.),Showing a video or a flash animation,Showing images,Showing product information,Admin sections.
Why use GreyBox:
  • It does not conflict with pop-up blockers
  • It’s only 22 KB!
  • It’s super easy to setup
  • It’s super easy to use
  • You can easily alter the style as it is controlled through CSS

JSON INPUT STRING USING JQUERY



If you are working with Restful API's and you must need to send a JSON input response via web project, especially for Node projects. This post helps you to create a JSON input string using JavaScript. It’s very useful, converting Data objects to JSON data format implemented with $.toJSON Jquery plugin.

Monday 30 December 2013

EZEDITTABLE - ENHANCE HTML TABLES IN JQUERY



ezEditTable 2.0 is a javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation. With just a line of code you can easily convert a regular HTML table in an advanced editable and selectable grid control.
Features:
  • Attach to an existing HTML table
  • Advanced selection model
  • Extended keyboard navigation
  • Inline cell or row editing
  • Insert and remove rows
  • Send changes to server via GET or POST methods by form submission or by including script elements in the head section (only GETs)
  • Integration with any server-side technology as this is a pure client-side solution
  • Callbacks for all events, and delegates for most actions
  • Based on plain javascript, that is, independent from any javascript framework but compatible with any of them (no for..in etc.)
  • Exhaustive documentation and API

PORTFOLIO FLIPPING SLIDER USING JQUERY AND CSS3



There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I'm going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.
The slider will change our portfolio images when it's flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.
We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. These effects will be randomly choosen when displaying the image.

ON SCROLL HEADER EFFECTS WITH JQUERY AND CSS3



You've surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down.
Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations.
We've also created a Blueprint for an On-Scroll Animated Header to get you started.
Today we'd like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website's starting element and give it some life.

Sunday 29 December 2013

JQUERY COLOUR PICKER 2.0



Use this Colour Picker plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in the drop-down as well as enter their own, preferred, custom colour. Only about 1k compressed.

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

ANIMELT : JQUERY PLUGIN FOR COMPLEX ANIMATIONS



The jQuery plugin for complex animations.

JQUERY PHOTO ZOOM PLUGIN



Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector, take a look this live demo.

IE ALERT JS : LET YOUR VISITORS UPGRADE THEIR BROWSER WITH JQUERY



IE Alert is a handy jQuery plugin that shows a well designed warning message to the visitor who’s trying to view your site with an older version of Internet Explorer browser, this warning message will convince your visitors to upgrade their browser to a newer version of Internet Explorer or to an another web browser.

MAKE A GOOGLE POWERED SHOPPING SEARCH WEBSITE WITH JQUERY AND PHP



In this tutorial, we will be making a simple product search engine. Using jQuery and PHP, we will tap into Google's Shopping Search API and return a list of items available for purchase, along with prices, photos and other useful information. The Shopping Search API gives us direct access to Google's large database of products and prices, obtained from partnering online stores. Another benefit to using this service, is that products are automatically ranked and filtered for us behind the scenes to better match with the user's search query.

JQUERY TOP BLACK MENU BAR OF GOOGLE SEARCH WITH DEMO



Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously), Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.
I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple jQuery and CSS.
Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :
  • Creating the red ribbon like effect for the current page
  • creating the drop down menu when more button is clicked
  • keeping the bar fixed even when the rest of the page is scrolled
  • Styling the elements of the menu exactly to those found on Google

GRIDDY : SIMPLE GRID OVERLAY PLUGIN FOR JQUERY



Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space.

Friday 27 December 2013

JMAPPING : JQUERY PLUGIN FOR CREATING GOOGLE MAPS FROM SEMANTIC MARKUP



This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.
The plugin tries to allow as much graceful degradation as possible by having the HTML be as semantic as possible. The plugin expect the HTML for the locations to be grouped under a common element. Additionally, it expects the links and Map Info Window content to be grouped under the location elements. It also expects the necessary metadata to be on the location element. This way the HTML semantically reflects that all of those parts and information are associated with the specific location or place.

JQUERY HIDDEN PANEL



A jQuery plugin which added the hidden panel to the 4 position of the browser corner. You can use it to display a image gallery or video showcase.
Features:
  • Support 4 position, top, right, bottom and left.
  • Trigger by click or mouseover.
  • Chainable, works fine with other plugin.

Thursday 26 December 2013

JQUERY SPEEDO POPUP



Speedo Popup is a small, powerful and real customizable jQuery plugin. Speedo Popup is not just a popup, Speedo Popup is:
  • a Popup Plugin
  • a Notification Plugin
  • a Lightbox Plugin
  • an Alert Box Plugin
And that's not all.
You can play videos, you can make a light box of videos and mixed content or you can notify the user when you want, you have the possibility to do whatever you want.It has full compatibility for HTML5 and full fallback for older browsers.

JQUERY TAGIT PLUGIN



The jQuery Tagit Plugin transforms an html unordered list into a unique tagging plugin.
Features:
  • Convenient way for users to enter a list of items
  • Fully integrated with jQuery ui auto complete
  • Automatically adds current input as tag if input loses focus
  • Easy to use public methods
  • Easy to theme (single css file)
  • Customizable trigger keys
  • Backspace on empty input deletes previous tag
  • Ability to provide initial tags on creation though options
  • Ability to provide initial tags on creation via list items
  • Option to toggle usage of a hidden select so the tags can be sent using a normal form!
  • Ability to re-arrange tags by drag and drop!
  • Optional ThemeRoller compatibility!
  • Fully HTML5 Data-attributes compliant!

COLORJOE : JQUERY SCALEABLE COLOR PICKER



Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. Supports touch and AMD module definition as well.
colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.
In addition it’s relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.

Wednesday 25 December 2013

SLIDERJS : A SIMPLE JQUERY FULL-SCREEN SLIDER



A simple jQuery plugin for full screen image slideshows.Options you can pass into the config JSON that the slider consumes.
Features Options:
  • Integer : The index of the first element to start with.
  • draggable : Will allow images to be dragged via touch events if supported, otherwise mouse events.
  • sizeConstraint : which fills the image to the browser, cropping what exceeds.
  • manualShift : if you want to shiftLeft and shiftRight manually, rather than on click.
  • enableKeys : if you want to disable keyboard navigation

JQUERY TOP BAR OFFERS PROMOTER



The jQuery Top Bar Offers Promoter is the best way to emphasize the offers on your website. All the special offers will be instantly seen by your potential buyers.
Features:
  • Over 50 js options from where you can customize the plugin.
  • You have parameters to change anything: colors, images, backgrounds, borders, dimensions.
  • The top bar promoter is responsive for both fixed dimensions or full width versions.
  • It is compatible with IOS and Android operating systems.
  • Options to add social icons in order to promote your website on all the available channels.
  • SEO Friendly
  • Centered or full width

TABSWITCH : JQUERY TAB/SLIDER PLUGIN



tabSwitch is a tab/slider plugin for jQuery. You could make a tab box system with the least of code and still fully customizable. Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime.
  • There is no limit what kind of HTML tag you use.
  • You could move to next, prev tab or jump to a specific tab.
  • All the controls could be anywhere in the website, on top of a tab, inside a tab
  • Multi-level tab system.
  • You could change the style of the viewport, you could add a class for every single tab

KOOL SWAP : AJAX LOAD SUPPORT FOR WEBSITES WITH JQUERY



Kool Swap enables impressively ajax page load support with history for websites. Just tell the plugin what should be switched and what are the triggers and swap pages in a nice way!

FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3



In this tutorial we'll create a fullscreen slideshow with a twist: we'll cut the current slide open in order to reveal the next or previous slide. Using jQuery and CSS animations we can create unique slide transitions.Using different data-attributes, we'll define the type, rotation angle and scale of a slide's parts, giving us the possibility to create unique effects of each slide transition.

Tuesday 24 December 2013

3D THUMBNAIL HOVER EFFECTS WITH CSS3 AND JQUERY



Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.
In our examples, we'll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.

FLOT : JAVASCRIPT PLOTTING LIBRARY FOR JQUERY



Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
Just include the Javascript file after you’ve included jQuery.Generally, all browsers that support the HTML5 canvas tag are supported.For support for Internet Explorer < 9, you can use Excanvas, a canvas emulator; this is used in the examples bundled with Flot. it’s not working on your development IE 6.0, check that it has support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support.

FOOL.JS : JQUERY PLUGIN FOR APRIL FOOLS DAY JOKES



As a long-running fan of both practical jokes and the A-Team, I love April Fools’ Day. So much, in fact, that it’s like a birthday to me. And what kind of birthday would it be if I didn’t give presents? Probably the day I was actually born.
Anyway, this is a jQuery plugin that lets you play one or more fun practical jokes on an unsuspecting visitor, and it’s crazy easy to set up.The plugin can feature various jokes including falling scrollbar, displaying annoying videos, hiding random elements, turning the page upside down and more.

FILTER SLIDER : JQUERY IMAGE MANIPULATION



The main goal of FilterSlider is to manipulate images and HTML content using canvas, jQuery library and Javascript.It uses advanced techniques to produce some of the popular effects like grayscale, sepia and saturation along with 13 other useful effects.These effects work on all major browsers that support the canvas' element.
features:
  • Responsive layout
  • 16 filter effects for images and html content
  • Full width support
  • Powerfull API : init, destroy, next item, previous item, jump to item, stop auto, resume auto, action on each slide
  • Adjustable speed, transition, easing and effects for each caption or slide
  • Multiple sliders on the same page
  • Support for inline content
  • Animated blocks
  • Easily customizable via CSS file
  • Loading screen
  • Set start slide index
  • Can be easily loaded using ajax
  • Smart scale mode for images
  • 7 transition effects
  • Autoplay and stop parameters
  • Show/hide arrows and navigation
  • Randomize slides
  • Constant support and upgrades
  • Mouse wheel support

Monday 23 December 2013

BLUEPRINTUI: JQUERY RESPONSIVE MODAL WITH CSS3



BlueprintUI Responsive Modal is a super simple fully featured jQuery modal plugin with more than 30 CSS3 powered animation possibilities and 7 home made themes to use it.
Features:
  • Responsive Design - The layout adpats to the viewing environment.
  • CSS3 Animation - 31 funny and really smooth animations.
  • Themeable - 7 provided themes and simple api to create more.
  • 3D Scaling - If the browser support 3D, you can add a super smooth scaling effect to the overlay.
  • Extensive Documentation - The plugin is provided with an extensive documentation to help you use it

Sunday 22 December 2013

NESTABLE JQUERY PLUGIN



Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens. If you're familiar with the way WordPress allows the user to manage menus, this will be used for a similar UI.Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin).

SKETCH.JS : JAVASCRIPT CREATIVE CODING FRAMEWORK



Sketch.js handles all that tedious but necessary stuff that would normally slow you down – setting up an animation loop, creating and managing a graphics context for Canvas or WebGL, cross browser and device event binding and normalisation for mouse, touch and keyboard events, handling window resizes You get the idea.

STORAGE.JS : SIMPLE JQUERY HTML5 PAGE EDITS WITH DEMO



Simple HTML5 page edits. Storage.js uses the new HTML5 contenteditable attribute and localStorage to bring you HTML5 awesomeness. A jQuery plugin around the localStorage api. Formerly known as Storagify.

ISOMETRIC INTERACTIVE INTERIOR GUIDE WITH JQUERY AND CSS3



During browsing internet, I have noticed new interesting thing - it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery.

TABSELECT JQUERY PLUGIN



A plugin to select one or more array or form entries visually, for example to filter a list or replace a multiselect form element.If you toggle an option, the text changes automatically, in other words, you can use that text field in a form to submit the selection. In such a case you would of course hide the text field first.
You’re completely free to style your elements. Default setting for the tabs is a span element, but you can change that in the settings (check the plugin source, the default settings are right at the top).

Saturday 21 December 2013

BETWEENJS API : JS TWEENING ENGINE



BetweenJS is Tweening Engine for JS.Highly inspired from BetweenAS3.Creates a Tween and apply it with an immediate effect, accurate for setting desired values in the time-range of the tween.Different type of tweens available are regular tween, bezier tween, time-unrelated tween, Physical tween, Reversed tween, repeatable tween, delayed tween, lsliced tween, time-streched tween, ActionTween.

OFF-CANVAS NAVIGATION FOR RESPONSIVE WEBSITES WITH JQUERY AND CSS3



In this article, I'll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web's future.

HANDSONTABLE : JQUERY EXCEL-LIKE TABLE EDITOR



Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery.
  • Type in any cell and see how the grid adds new rows and cols automatically.
  • The legend feature, which makes the first row uneditable and have an green font
  • You can define rules for autocompletition.
  • You can drag it (drag-down) to repeat the values from the cell.
  • Right click to see the context menu.
  • Use the onChange callback to track changes made in the table.
  • There is also the NEW onBeforeChange callback, which can be used to validate changes before they are applied to the table.

Thursday 19 December 2013

SORTEDLIST : JQUERY PLUGIN TO SORT A LIST OF DOM ELEMENTS



SortedList is a jQuery plugin to sort a list of DOM elements the way you want. Think about LI, TR, OPTION and even DIVS.

SWIPEBOX : A TOUCHABLE JQUERY LIGHTBOX



Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.
Features:
  • Swipe gestures for mobile
  • Keyboard Navigation for desktop
  • CSS transitions with jQuery fallback
  • Retina support for UI icons
  • Easy CSS customization

JQUERY MONTE : A CAROUSEL PLUGIN FOR IMAGES AND/OR HTML



A small jQuery carousel script for images or HTML.
Things to know:
  • All slides are set to the same width and height as the first slide.
  • A minimum of 3 elements to use as slides are required.
  • The left slide will be aligned to the left side of the parent, and the right slide will be aligned to the right side of the parent.
  • Monte will turn every child element of the parent into a slide. This can be any mix of HTML and/or IMG elements.

Wednesday 18 December 2013

FOKUS : EMPHASIZED TEXT-HIGHLIGHTING USING JAVASCRIPT



Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.
The library has no dependencies and weighs in at around 3kb. A <canvas> element is used to paint the cut-out cover. Works in most modern browsers except IE and touch devices.

MELONHTML5 AND JQUERY ROYAL TAB



Royal Tab is all in one, performance optimized Tab Solution that provides full tab functionalities and its own unique features. It can be easily integrated into any websites with simple & clean HTML markup. All major browsers (Chrome, Firefox, Safari, IE7+, Opera) and Mobile Devices are supported. Royal Tab also comes with Responsive Design, 4 Themes and full API Methods that can be used to interact with your Web App in your own way.

VERTICAL SHOWCASE SLIDER WITH JQUERY AND CSS TRANSITIONS



In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions. The idea for this kind of opposite transition comes from the beautiful website of the National LGBT Museum which moves the left and right side in the same manner when navigating or scrolling the page.

CSS3 BUTTONS GENERATOR WITH JQUERY



Use this powerful Generator to generate your own buttons for all your websites. No Image needed.
This pack is easily customization, you can change more than 20 parameters, as radius, size, color, border parameters, text parameters etc. in a very easy way.

Features:
  • No images requried
  • Oncly CSS
  • Fully and easy customisable
  • 20 customisable parameters
  • Only 3 easy steps to follow
  • Compatible with all browsers
  • No plugin needed
  • Instructions & example included

Tuesday 17 December 2013

TRIP.JS : JQUERY PLUGIN THAT CUSTOMIZE A TUTORIAL TRIP EASILY



Trip.js is a jQuery plugin that can help you customize a tutorial trip easily with more flexibilities.

FRAMEWARP : JQUERY PLUGIN FOR DISPLAYING PAGES IN A NEAT OVERLAY



There is the option of using one of the numerous lightbox plugins to do this, but the plugin we will be creating in this tutorial has a lot of advantages over a generic lightbox script:
  • Lightweight - it is created specifically for showing pages, not images;
  • No UI, so the page feels like a dialog window;
  • The page can close itself, and can also send messages to the parent window;
  • Can optionally use a cache for faster subsequent page loads;
  • Uses a neat CSS animation with a JavaScript fallback.

Monday 16 December 2013

JQUERY PHOTOSET GRID



A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for our Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but we have since expanded it for use outside of the themes.

IGORESCOBAR : JQUERY MASK PLUGIN



A jQuery plugin to make field masks.

Features :
  • String/Numeric/Alpha/Mixed masks.
  • Reverse Mask.
  • Data type validation.
  • Automatic maxlength.
  • Live event’s for ajax/realtime apps.
  • Callbacks.
  • On-the-fly mask change.

Sunday 15 December 2013

LOAD JSON DATA WITH JQUERY, PHP AND MYSQL AND DEMO



This post shows how to populate a select box based on the value of the another, by getting JSON data with jQuery from a PHP script that gets the data from a MySQL database.

TWEET TO UNLOCK WITH JQUERY AND PHP



In this tutorial article, let's create simple Tweet to Unlock feature for your web page using jQuery Ajax and PHP.
Events are triggered when user successfully tweets the page, to capture some information from Twitter, we can add a  listeners to the actions users perform in Web Intents. Once we know the user has Twitted the page, we can make an Ajax request to a PHP file, which will respond to this request by sending the unlocked data to user browser.
Here's complete code example of a page which has some content to be unlocked by Twitting.