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
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
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
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
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.
JavaScript Gauges in Metro Style
JavaScript Gauges in Metro Style is a set of 8 gauges created in the modern Windows8 or Metro style which can be added to virtually any web application: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails, and simple HTML pages.The gauges included into the package are not just separate meters, sliders, etc. They can be used as full featured ready gadgets intended to display the information in a visually appealing way.
Features:
- Cross-platform compatibility. The gauges can be used on any platforms: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails and simple HTML pages and accessed from any devices: desktop, laptop, mobile (including iPhone and iPad), and via any browsers: IE, Mozilla Firefox, Google Chrome, Opera, Safari, etc.
- Declarative description. The gauges are described using declarative selection of the parameter in JSON.
- Customization. You can set any parameters describing your gauge and create custom objects using JSON.
- Interactivity and Animation. Every gauge provides customizable interactivity and animation.
- Easy styling. A gauge styling can be easily modified in CSS.
- Callback support. You can get notifications about changes of the gauge value and handle it in JavaScript.
- Easy integration. To integrate a gauge you just need to specify gauge name and area of a webpage where it should be inserted (“div” tag); and all this with JavaScript.
- WinRT compatible. The gauges can be integrated into HTML5-based WinRT applications to effectively visualize data.
Link Scrapper TextBox – jQuery Plugin
This jquery plugin displays a textbox to enter text. When you enter a URL in the textbox, the plugin creates a data box for a link having the link title, description and an image. The plugin works like a URL scrapper and these scrapped values about the URL are available to you as javascript variables.
Wave Text Effect : jQuery Plugin
Need a waving text? There is no need to use static images any more. This script will help you! Wave Text Effect is a jQuery plugin that creates a “wave effect” out of an HTML header. Most important – waving text will be friendly for search engines, editable, selectable. You can use wave period, amplitude and spacing between the letters to customize your effect. For further styling you can still use style sheets – changing your font type, size, colour, background, etc.
Features:
- Wave configuration (amplitude, period and letter spacing).
- You can use CSS to style your text, change color, fonts, add backgrounds etc.
- Generated text is still selectable.
- This transformation is SEO friendly!