Blogfreakz - Web Design and Web Development resources » JQuery

SimpleWeather – Display The Weather Using jQuery

Keith@Blogfreakz — Mon, 21 May 2012 02:24:33 +0000

Today’s featured plugin comes from the guys over at monkeecreate and it is called SimpleWeather, a jQuery plugin that creates a widget that displays the current weather in the specified locale. The data it displays is pulled from the public Yahoo! Weather feed via the YQL API, which means that it can only recognize US zip codes so if you are to set a location outside the US you’ll have to type in the name of the city together with the corresponding country.

Customization of the plugin is easy. The script simply returns the data for you to do as you want, which means that you control the entire HTML and utilize the current CSS classes. Click on the image for the demo and documentation.

Incoming search terms for the article:

Quicksand – Recorder and Filter

Marvin@Blogfreakz — Mon, 21 May 2012 01:55:21 +0000

Created by Jacek Galanciak, Quicksand allows you to organize and record items to make your search get easier.

Click on the image to find out how it works and download its file.

Incoming search terms for the article:

travel write for us

kiNotice: A jQuery Notification Plugin

Keith@Blogfreakz — Fri, 11 May 2012 06:41:49 +0000

There are a few ways you can introduce a notification message window to a visitor; at the top, in the middle, or at the bottom of the screen (the side are usually reserved for ads and widgets like social media icons). I for one personally think that the best place to put your notification without the risk of obstructing your visitor’s view of your site is at the bottom of the page, which brings us to the main focus of this article.

Serban Ghita developed and introduced a nice versatile jQuery plugin called kiNotice that lets you put a nifty notification box at the bottom right corner of the page. There are eight different styles for you to choose from.

Get the DEMO and DOWNLOAD.

Below are some random examples and the code you put in your HTML to call in the plugin:

Static string example:

$.fn.kiNotice({

autoOpen: true,

hideOnClose: true,

title: 'Today\'s announcement',

content: 'Quisque a nunc felis, vel bibendum diam. Phasellus a velit libero. Aliquam consectetur arcu vitae massa pellentesque accumsan.
'
 });

With DOM object inserted into the body of the notice:

$.fn.kiNotice({

autoOpen: true,

content: $('#important-message')
 });
With AJAX content loaded:
$('#content').kiNotice({

autoOpen: true,

hideOnClose: true,

ajaxSettings: {

url: 'ajax.php?page=get_message&response=html',

type: 'GET'

}
 });

You can also use extra classes to customize the notice, and a custom notice animation (see sample code below):

$.fn.kiNotice({

autoOpen: false,

ajaxSettings: {

url: 'ajax.php?action=inbox&response=json',

type: 'GET',

success: function(data){

this._setToggleIcon('^{'+data.notice_count+'}');

this.kiNoticeContent.html(data.notice_content);

this._open();

},

extraClasses: 'AlmaTheme',

extraNoticeInterval: 1000
 });

This plugin has been successfully tested on the following browsers:

IE6, IE7, IE8, IE9
Firefox
Chrome
Opera
Safari

Moreover, it works on jQuery 1.3.1 but it is highly recommended to be ran on versions 1.4 and above. Hope you guys find this plugin very useful in your site!

Incoming search terms for the article:

NetEye Touch Gallery

Marvin@Blogfreakz — Thu, 10 May 2012 02:10:09 +0000

Upgrade your mobile browser’s photo-viewing apps with the NetEye Touch Gallery. It’s a type of lightbox that’s written and optimized for Mobile Safari on iPad/iPhone, has photo gallery for any touch devices, has touch support and it works with Desktop Safari, Firefox 4, Opera, Chrome and limited for IE which may have no transition.

Click on the image to download the zip file.

Usage:

You may alter it by providing the getSource function like this:

See Touch Gallery’s full DEMO and DETAILS.

Incoming search terms for the article:

Make Your Website Behave Like An Image Slider With Revolver Plugin

Keith@Blogfreakz — Wed, 09 May 2012 06:04:23 +0000

Revolver is a jQuery plugin developed by kernelstudio from codecanyon, and it lets you turn your entire website into a slider. Instead of simply clearing out the entire window and loading the next page, Revolver simply causes the current webpage to slide off the screen and introduces the next one just like your typical image slider.

Click on the image to try the DEMO.

The plugin lets you customize attributes like the speed and of the transition and the animation of the easing. It supports the following browsers: IE7 to IE9, FireFox 4, Safari 5, Opera, and Chrome.

Incoming search terms for the article:

Creating Reveal: jQuery Modal

Marvin@Blogfreakz — Fri, 04 May 2012 09:50:55 +0000

Reveal is the latest modal creation of Zurb which is based on jQuery. It is lightweight, simple to use, cross-browser accessible and simply works great.

Click on the image to download the zip file.

It has three basic steps:

Step 1:
Attach needed files

/* Attach the Reveal CSS */

/* jQuery needs to be attached */
 /* Then just attach the Reveal plugin */ 

code hosted by snipt.net

Step 2:
Modal Markup

Modal Title

Any content could go in here.

×

code hosted by snipt.net

Step 3:
Attaching Handler

Click Me For A Modal

/* Programmatic Launching Of Reveal */

OPTIONS:

$('#myModal').reveal({

 animation: 'fadeAndPop',                   //fade, fadeAndPop, none

 animationspeed: 300,                       //how fast animtions are

 closeonbackgroundclick: true,              //if you click background will modal close?

 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal

});

With default values:

Click for a modal

Incoming search terms for the article:

Real Shadow: A jQuery Plugin For Creating Realisitc Shadows

Keith@Blogfreakz — Thu, 03 May 2012 02:56:31 +0000

Here’s a pretty neat jQuery plugin created by Indamix that you can use on your website! It’s called Real Shadow, and what it does is it gives an element a shadow that changes its attributes depending on the location of the mouse cursor. The plugin works by manipulating the value of the CSS property box-shadow. The shadow’s size and position is determined by the element’s distance to the mouse cursor.

Check out the DEMO. As always, feel free to tell the author what you think about his plugin by forking it over at his GitHub page.

Incoming search terms for the article:

How to Create an Elastic Image Slideshow with Thumbnail Preview

Marvin@Blogfreakz — Thu, 03 May 2012 02:32:56 +0000

Web developer Mary Lou shows an easy-to-follow tutorial on how you can make a cool elastic image slideshow with thumbnail preview. The slideshow automatically adjusts and you can navigate the slides by using thumbnail preview.

Click on the image to view her tutorial.

Check out the DEMO and DOWNLOAD as well.

Incoming search terms for the article:

AnimaDrag: Drag-and-Drop Plugin with Animation

Marvin@Blogfreakz — Mon, 30 Apr 2012 08:40:32 +0000

AnimaDrag is a great drag-and-drop plugin that is small and lightweight. Created by web and software developer Abel Mohler, it’s independent of jQuery UI framework and is easily draggable thanks to jQuery animation.

Check out the demo and tutorial by clicking on the image.

Incoming search terms for the article:

Create An Animated 3D Bar Graph/Chart

Keith@Blogfreakz — Fri, 27 Apr 2012 09:02:41 +0000

Kendra Schaefer and Ken Breeden’s great tutorial shows you how to create a pretty-looking bar graph/chart that’s not only animated but three-dimensional as well! The difficulty rating of the tutorial is rated at Intermediate level since it requires some understanding of jQuery, HTML, and CSS but it is nonetheless very easy to follow.

Click on the image to view the demo.

Alternatively, you can check out the code in their step-by-step tutorial over or just download it here.