ScriptPlazza » JavaScript

Custom Facebook Fan Box Widget

admin — Tue, 20 Jul 2010 19:06:29 +0000

The custom widget was not very complicated itself; however, Facebook doesn’t provide the way to modify widget’s look & feel rather than assigning a new CSS file to its iframe code. Some of you may say that they can do the widget modification by using only this CSS file – go ahead, I am not that crazy one.

Fancybox – Fancy lightbox alternative

admin — Wed, 14 Jul 2010 14:29:25 +0000

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Features:

* Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
* Customizable through settings and CSS
* Groups related items and adds navigation.
* If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
* Support fancy transitions by using easing plugin
* Adds a nice drop shadow under the zoomed item

JPolite – Newsvine Clone Script

admin — Mon, 10 May 2010 13:00:26 +0000

JPolite is a pure front-end portal framework based on jQuery & BlueTrip CSS, with a handful of jQuery plugins integrated.
It provides a compact yet powerful foundation for custom AJAX web applications with Netvibes-like user experiences.

MooTools – Javascript Framework

admin — Thu, 22 Apr 2010 20:14:27 +0000

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Image Power Zoomer

admin — Sun, 14 Mar 2010 23:00:10 +0000

Some images are worth a closer look, which is why there’s Image Power Zoomer. It gives any image on your page the ability to be magnified when the mouse rolls over it. A “magnifying glass” that appears over the image lets the user zoom in on any portion of it as it follows the cursor around. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs. Lets take a closer look at this script’s features:

* Applies the zoom effect to any image on the page without adding any additional markup to it.
* The default zoom level (ie: 2x) can be changed for each image.
* When the user scrolls the mouse wheel while over the image, the zoom level decreases or increases based on the scroll direction. The range of zoom can be changed (ie: 2x to 10x).
* The size of the “magnifier” can be changed for each image.

It’s time to shine the spotlight on deserving images on your site with this script!

Featured Content Slider Using jQuery

admin — Sun, 07 Feb 2010 05:12:23 +0000

jQuery Content Slider – a featured content slider for your website using the jQuery UI library.

Bumpbox – A Lightbox with PDF Support

admin — Fri, 05 Feb 2010 05:12:23 +0000

Bumpbox is another lightbox clone with a few advantages over other lightboxes – it supports not only all common media types but also PDF’s.

Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll.

Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration.

COMPATIBILITY

Bumpbox works in all modern browsers. Here’s a list in which browsers it has been successfully tested:

Firefox 3 – 3.5
Internet Explorer 6 | 7 | 8
Google Chrome
Apple Safari 3 | 4
Opera 9.04

jPaginate – A Fancy jQuery Pagination Plugin

admin — Thu, 21 Jan 2010 05:12:23 +0000

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.

You can call the plugin in the following way:

$(elementID).paginate()

You can configure the plugin with the following properties:

1. count: The total number of pages
2. start: With which number the visible pages should start
3. display: How many page numbers should be visible
4. border: If there should be a border (true/false)
5. border_color: Color of the border
6. text_color: Color of the text/numbers
7. background_color: Background color
8. border_hover_color: Border color when hovering
9. text_hover_color: Text color when hovering
10. background_hover_color: Background color when hovering
11. images: If the arrows should be images or not (true/false)
12. mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
13. onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.