prosoxi.com | Tag Archive | jquery

Tag Archive | "jquery"

Bootbox.js – alert, confirm and flexible dialogs for twitter’s bootstrap framework

Posted on 03 January 2012. Tags: alert, dialog, jquery, modal

I’ve been using twitter’s bootstrap framework for a number of site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Version 1.3 introduced some JavaScript plugins to complement the array of stylistic elements it already provided – notably code to invoke dialog boxes, or modals. A recent project I’ve been working on required extensive use of JavaScript’s native alert and confirm dialogs, but their crude behaviour and wildly varying appearance between browsers is always somewhat dissatisfying, so I wanted combine their basic functionality with bootstrap’s slick looking dialog boxes. Enter bootbox.js – alert() and confirm() like behaviour using twitter’s modal dialog boxes.

Read the full story

Posted in JavaScript - AjaxComments (0)

nanoscroller MAC STYLE SCROLL FOR JQUERY

Posted on 03 January 2012. Tags: jquery, scroll

nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .content. The other scrollbar div elements.pane > .slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

Read the full story

Posted in JavaScript - AjaxComments (0)

Jquery fullscreen gallery

Posted on 25 November 2011. Tags: fullscreen, gallery, jquery, Jquery fullscreen gallery

A simple, yet elegant fullscreen image gallery created with the jQuery frameworkand some simple CSS.

Read the full story

Posted in JavaScript - AjaxComments (0)

jquery Backstretch

Posted on 25 November 2011. Tags: background, Backstretch, fullscreen, jquery, streach

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

Read the full story

Posted in JavaScript - AjaxComments (0)

Roundabout for jQuery

Posted on 22 November 2011. Tags: carousel, jquery

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

Read the full story

Posted in JavaScript - AjaxComments (0)

Reflection for jQuery

Posted on 22 November 2011. Tags: canvas, image, jquery, reflect

Introduction

This is an improved version of the reflection.js script rewritten for the jQuery javascript library. It allows you to add instantaneous reflection effects to your images in modern browsers, in less than 2 KB.

Read the full story

Posted in JavaScript - AjaxComments (0)

jQuery Print Element 1.2

Posted on 17 November 2011. Tags: jquery, print

jQuery Print Element 1.2

Sample

Download

Download (Minified)

Copyright (c) 2009 Erik Zaadi

Read the full story

Posted in JavaScript - AjaxComments (0)

jQuery Masonry

Posted on 02 November 2011. Tags: float, jquery

A dynamic layout plugin for jQuery
The flip-side of CSS floats

Read the full story

Posted in ProgrammingComments (0)

Quicksand

Posted on 01 November 2011. Tags: ajax, filter, jquery

Reorder and filter items with a nice shuffling animation.

Read the full story

Posted in JavaScript - AjaxComments (0)

HTML5 Canvas Image Effects: Black & White

Posted on 31 October 2011. Tags: canvas, html5, jquery

The new canvas tag in HTML5 is known for its illustration power. It’s basically an empty element on which you can write and sketch using Javascript. But there’s a hidden power: image manipulation.

Read the full story

Posted in HTML - XHTML, JavaScript - AjaxComments (0)

Jquery effects demo

Posted on 21 October 2011. Tags: easing, effect, jquery, jquery tween, tween

All easings provided by jQuery UI are drawn above, using a HTML canvas element. Click a diagram to see the easing in action.

Read the full story

Posted in JavaScript - AjaxComments (0)

jQuery Before/After Plugin

Posted on 18 October 2011. Tags: ajax, javascript, jquery

About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:

Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

Download

Go to the Before/After download page

What’s So Great About this Plugin?

Slick effect, no Flash needed
It’s just 7K (4K compressed)
Reusable on multiple containers
Degradable. If the visitor doesn’t have JavaScript they will still see both images.

How to Use

First, your before and after images must be the same size. Each image must be inside its own div, and both of those within a containing div which must have an ID. See this example.

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of jQuery and the jQuery UI, or point to jquery on Google andjqueryui on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.

Options

The following options are configurable:

animateIntro – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default false)
introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default 1000)
introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Options are added when calling the script:

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Enjoy!

Demos

Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images. Please be sure to read the license before using.

Posted in JavaScript - AjaxComments (0)

Drupal image Rotator / Slider modules

Posted on 18 October 2011. Tags: drupal, jquery, slider

This page came about as a result of this post that lists Tabs and Slideshow Modules in the Similar Module Review group. The linked post lists several modules that provide either tabbed content or rotating content.
There are two general use cases here:

Read the full story

Posted in PHPComments (0)

Jplayer

Posted on 01 October 2011. Tags: audio, html5, jquery, player, video

The jQuery HTML5 Audio / Video Library

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. AjQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

Read the full story

Posted in JavaScript - AjaxComments (0)

Popcorn.js

Posted on 01 October 2011. Tags: jquery, media, video

The HTML5 Media Framework

Read the full story

Posted in JavaScript - AjaxComments (0)

jFlow Slider

Posted on 27 September 2011. Tags: jquery, slider

Attention: jFlow Plus is Out

This article uses an outdated version of jFlow and, although it works just fine, lacks some enhancements. Please check out jFlow Plus on my other websiteWordImpressed.com! There you can read about jFlow Plus and view a cool demo.

Read the full story

Posted in JavaScript - AjaxComments (0)

« Newer Entries

Older Entries »

Popular
Latest
Comments
Tags
Subscribe