WebDesign Collection » Plugin

Very Simple & Tiny Lightboxing: Lightbox_me

admin — Wed, 02 Jun 2010 04:36:10 +0000

Lightbox_me is a jQuery lightbox plugin that doesn’t come with many features but simply enables you to lightbox any element. And, it is only 1kb compressed.

It can position the modal box smartly in every situation whether the windows is resized or the window is smaller than the modal.

The plugin has various options like defining:

the effect used while appearing
the speed of the overlaying process
lightbox being closed with the escape button and/or when clicked on the overlay
CSS class names and styles

To sum up, Lightbox_me is very functional for anyone who doesn’t need features like image/video gallery support but only a simple and good-looking lightbox.

gMap – google maps plugin for jquery

admin — Thu, 29 Apr 2010 01:30:18 +0000

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

Requirements
There are a two requirements you need to meet before you can use gMap to display Google Maps on your website. First you need to sign up for a Google Maps API key. Second you need the jQuery library at least in version 1.3.

Installation
Download the latest version of gMap and include the Google Maps API along with jQuery and gMap in the section of your website. Don’t forget to replace “API_KEY” with your actual API key or the map won’t work when used on a real domain!

You can also customize the map in different ways.

Visit the site to get more: http://gmap.nurtext.de/

Here’s another article about 10 ways of google map installation: 10 jQuery Plugins for Easier Google Map Installation.

Contextual Slideout Tips With jQuery & CSS3

admin — Thu, 29 Apr 2010 01:09:25 +0000

This is an interesting solution for showcasing the new features of products – using contextual slideout tips.

Knowing the importance of HTML standards, the development team is making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

The main idea is to create an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

To create a slideout element, you need to include a regular paragraph p tag to the page. This means that all the content is visible to search engines in a semantic way. The paragraphs are replaced with the markup for the slideouts by jQuery on page load, with the title, class and style attributes of the paragraph passed to the newly created element.

Go to the site to download the code and learn how to use it: http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/

TipTip jQuery Plugin

admin — Thu, 29 Apr 2010 00:53:14 +0000

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

How It Works

TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.

TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div elements and are appended to the end of the body element.

There are specific CSS class names added to the “tiptip_holder” div element when it appears depending on the orientation it appears in. Here is a list of the class names along with it’s orientation:

tip_top – When the tooltip appears above the element.
tip_bottom – When the tooltip appears below the element.
tip_left – When the tooltip appears to the left the element.
tip_right – When the tooltip appears to the right the element.
tip_left_top – When the tooltip appears to the left and above the element.
tip_left_bottom – When the tooltip appears to the left and below the element.
tip_right_top – When the tooltip appears to the right and above the element.
tip_right_bottom – When the tooltip appears to the right and below the element.
TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.

You can visit and download the free code here: http://code.drewwilson.com/entry/tiptip-jquery-plugin

admin — Mon, 22 Mar 2010 03:18:05 +0000

The transform property of CSS allows rotating, scaling, and skewing objects in HTML.

However, as expected, it doesn’t work consistently on every browser (specially IE) and requires a different rule for almost each of them like:

-moz-transform for Mozilla
-o-transform for Opera
-webkit-transform for Webkit engines (like Safari)

cssSandpaper is a JavaScript library which enables IE to support CSS transforms and every other browser to work with the same rule definitions.

The library requires its own CSS rules like -sand-transform, -sand-box-shadow or -sand-gradient.

Once they are defined, it searches for these rules in the CSS file and applies the browser-specific transformations via JavaScript.

There is an impressive demo provided which can be tested with every browser.

Sprite Animations With jQuery: Spritely

admin — Mon, 15 Mar 2010 16:23:53 +0000

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.

You can use it on any html web page, and any part of the page can interact with a sprite (click anywhere on this page and wait and you’ll see what we mean).

With the power of JavaScript, the animations can be controlled on events (clicks, mouseovers) easily.

SPRITELY HAS THE FOLLOWING GREAT ADVANTAGES

it works well on iPhone/iPod Touch/iPad – check out this page on an iPhone.
It has been tested successfully on all the major browsers – even Internet Explorer 6
it’s a great alternative to Flash if your desired platform does not support it.
it’s light-weight so you can do fill the whole window with movement without draining bandwidth.
animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.
you should be able to make fully accessible web pages in pure html and javascript without any problem

Website: http://www.spritely.net/

Tracking Statistics Tools for Websites

admin — Sun, 14 Mar 2010 12:42:52 +0000

Original article from http://wparena.com/how-to/tracking-statistics-and-bringing-in-visitors-for-websites.

By knowing and understanding your site visitor numbers, one can get help how to increase them. WordPress offers many tools for doing just that. Getting someone to visit your blog is half the battle; helping them get the most out of it is the other half.

You might want—and you can get—many alternatives for statistics for your blog. The built-in statistics in WordPress are probably the best quick overview you’re likely to get. If you also pay much attention to blog site statistics, though, it really does become a full-time job. That’s because increasing—let alone truly maximizing—traffic to your site is like running a rapid-response room in politics. You need to be working on an hour-by-hour basis to see what’s happening in the world, the response on blogs similar to yours, and how you can make your voice heard in the fray.

Just for your convince i have compiled a best resources, these are scripts, hacks, JQuery Plugins, WordPress Plugins, a list of Websites providing web stats included in this article. If you know any other, mention it in comment.

1. Google Analytics Extensive Tracking Analysis of Websites

I believe most of us are using Google Analytics in order to track our visitors daily. With This excellent Tool you can track and compare all your ads, email newsletters, affiliate campaigns, referrals, paid links, and keywords on Google and other search engines. Use Google Analytics to learn which online marketing initiatives are cost effective and see how visitors actually interact with your site. Make informed site design improvements, drive targeted traffic, and increase your conversions and profits.
Search Engine Journal has compilied a list of advanced Google Analytics tips that open up plenty of possibilities to track and evaluate.

2. Google Analytics API is Now Available to Developers

A Google Analytics API has long been one of our most widely anticipated features. Developers can integrate Google Analytics into their existing products and create standalone applications. For example, Polaris is a cross-platform desktop widget for Google Analytics. With 8 standard reports it’s the easiest way keep your data always instantly available. The rich interface and swift navigation make it a pleasure to use.

3. Yahoo! Web Analytics – Highly Customizable & Powerful

Yahoo! Web Analytics is a highly customizable, enterprise-level website analytics system designed to help website businesses increase sales and visitor satisfaction, reduce marketing costs and gain new insight on online customers. By storing data in raw, non-aggregated form, Yahoo! Web Analytics is more than simply a reporting tool. It is a powerful, and highly flexible, data analysis tool. Both near real-time AND historical data can be segmented instantly and even visualized with advanced graphs to help marketers and site designers answer specific business questions and find new insights to improve their business.

4. How to Create a “Who is Online” Widget

A well explained and very good Tutorial written by TutorialZine on “Who is online” widget with PHP, MySQL and jQuery. This widget display the number of visitors, their country and display it in a slide out panel.

Demo | Download

5. Apigee Provides Analytics, Protection and Control for APIs

Understand customers, usage patterns and app behavior with detailed analytics and alerts on API traffic, clients, errors, and data volumes. I provide Free up to 10,000 Messages per hour.

6. Open Source Web Analytics Framework in PHP

The Open Web Analytics (OWA) framework provides a generic set of PHP and HTTP APIs that application developers can use to integrate web analytics into any application. The Framework also has built-in support for popular web applications such as WordPress and MediaWiki.

7. GoingUp – Combines Web Analytics with SEO Tools

GoingUp’s web stats features a fully customizable desktop with easy-to-read graphs and data charts. See visitors, referring URLs and even search engine traffic! Show only the data you want to see with slick AJAX interface! Set custom tracking events to see sales, downloads and subscribes!

8. Get a Full Featured Pingdom Account for Free

Pingdom is a service that monitors websites and servers from the Internet and alerts you if there is a problem. It acts like a watchdog, making sure that your website is up and running 24/7. You handle all your settings from an online control panel. No need to install anything. You can get error alerts via both email and SMS.

9. Odometer Style Javascript Counter in Mootools

UvumiTools Odometer is an odometer style Javascript counter, where you can actually see the numbers spining. It is a Mootools plugin requires no Flash, it’s all CSS and Javascript.

10. Crowd Science

Crowd Science Demographics is a new audience measurement service that gives website publishers insight into the demographics and attitudes of their audience. Focusing on more than page views, clicks and behavior, Crowd Science Demographics builds an audience profile including age, gender, income level and other demos that provide you insight to your audience.

11. Compare Traffic with Google Trends for Websites

With Google Trends for Websites, you can get insights into the traffic and geographic visitation patterns of your favorite websites. You can compare data for up to five websites and view related sites and top searches for each one.

12. Comparing FeedBurner Subscriber Numbers

A free web application that you can use for comparing FeedBurner feeds. This tool is great for checking out your competition and noticing trends in growth.

13. W3Counter – Hosted Realtime Website Analytics Solution

Demo

14. Woopra Realtime Web Tracking & Analytics Tool

Woopra is the world’s most comprehensive, information rich, easy to use, real-time Web tracking and analysis application. We deliver the richest library of visitor statistics in the industry through our innovative desktop application. But Woopra is more than simply statistics.

15. Piwik – Open Source Web Analytics

Piwik is a downloadable, open source (GPL licensed) web analytics software program. It provides you with detailed real time reports on your website visitors: the search engines and keywords they used, the language they speak, your popular pages… and so much more

Demo

16. Track, Monitor and Analysis Your Flash (SWF) with Mochibot

MochiBot give Flash developers an easy and effective way to track their Flash movies. Other tools in the market are either not made to track Flash content, too expensive, or just too hard to use.

Demo

17. Free Web Counter for Your Website from SiteMeter

Site Meter is a comprehensive real time website tracking and counter tools give you instant access to vital information and data about your sites audience.

Demo

18. Snoop Tracks Your Visitors and Events On Your Desktop

Reinvigorate measures your influence on the web in real-time. Gain up-to-the-minute insight into your audience, then adapt to meet their needs and watch your site grow.

Demo

19. StatCounter is Another Free Reliable Web Tracker

A free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats. Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time!

20. SlimStat – Open Source Extensive Analytics Program

SlimStat is an extensible web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, browsers versions, platforms and searches can all be taken in at a glance.

Wordpress Stat Plugins

1. WassUp

This is the statistic plugin that I am currently using. It gives you real-time statistics which is the part that I really like.

2. WP-Stats

This is another great Wordpress plugin for finding out your statistics. This may be the most popular one among Wordpress users. But don’t think that means it is the best.

3. WordPress Blog Stats

This helps you integrate the W3Counter service into your self hosted blog.

4. Official StatCounter Plugin

If you use the great service StatCounter for getting your blogs statistics, then you will likely love this plugin. This allows you to use their service in your admin area. This means that you will not have to go to their web site to get statistics.

5. CyStats

This is another great statistic plugin that I also use. It shows you a little more information about your statistics. A lot of times I like as much information as I possibly can get.

6. StatPress Reloaded

This was made to keep the Statpress plugin alive. The original creator does not keep the original updated anymore so this was created. Also one of the most popular plugins to get your statistics.

Original article from http://wparena.com/how-to/tracking-statistics-and-bringing-in-visitors-for-websites.

JavaScript-based Geo-Enable Websites: YQL Geo Library

admin — Sun, 14 Mar 2010 12:24:22 +0000

Geolocation is one of the most popular subjects for today’s web & there are many solutions that help geo-enabling web applications.

YQL Geo Library is an impressive resource for geolocation as it is totally free & JavaScript-based.

It has various powerful features like:

detecting the visitor’s location with the W3C geo API and with IP as a fallback
find geo location from text
find location from lat/lon pair
find locations in a certain web document (by URL)
get the location for a certain IP number

The library is lightweight (4kb uncompressed) & non-complicated. It just works by calling a function like:

yqlgeo.get('217.12.14.240',function(o){
  alert(o.place.name + ',' + o.place.country.content +
        ' (' + o.place.centroid.latitude + ',' +
               o.place.centroid.longitude + ')'
        );
});

will get you the city, country, latitude & longitude of any given IP.

Website: http://isithackday.com/hacks/geo/yql-geo-library/

9 JavaScript jQuery techniques on Forms, Buttons & Navigation

admin — Sun, 14 Mar 2010 10:54:02 +0000

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Original article from smashing magazine.