Ajax Updates » images

Wrap Content Around Images: jQSlickWrap

alyaspk — Mon, 21 Dec 2009 11:06:34 +0000

If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS’s float, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image.

Tell me about what it can do…

* Client-side, Sliced and Diced Sandbags using HTML 5’s new
* CSS-based padding.
* Sandbag “resolution” is configurable.
* Written with Progressive Enhancement in mind.
* Optional “bloom” mode provides ultra-precise padding.

What browsers does it work on?

jQSlickWrap requires that your browser support HTML 5’s element, and in particular it needs to have support for the toDataURL() function on canvases (meaning it won’t work with excanvas, for now). jQSlickWrap is known to work on the following browsers:

* Mozilla Firefox 3.5+
* Google Chrome
* Apple Safari 4+

If you happen to know that it works on additional browsers, let me know on twitter.
How does it work?
Man with a shovel.

Not interested in the nitty gritty low down on how jQSlickWrap works its “magic”? Skip ahead to the examples.

As stated in the features list above, jQSlickWrap implements a client-side version of the Sliced and Diced Sandbags method of wrapping text around an irregularly-shaped object (all bundled in a nice tidy jQuery plugin, of course).

To do this, it needs to have access to the individual pixels of the images it’s operating on — which is why for jQSlickWrap to work, you need to have a browser that supports HTML 5’s new element.
Here’s an overview of the algorithm:

1. If necessary, pre-load the image.
2. Determine the CSS styles for the image (float and padding).
3. Create a element and set its dimensions to the size of the image plus its padding.
4. Draw the image onto the canvas in the top-left location.
5. Figure out the “background” color of the image by examining the pixel data at the top-left corner of the image.
6. Fill the < c anvas> with this background color.
7. Re-draw the image contents onto the < c anvas>, but now in the correct location as specified by its padding.
8. Iterate through the image to find the “edge” of the image’s contents at each row – save this width. (the size of a row is defined to be the resolution in the settings to a call to slickWrap).
9. Using the widths collected in the previous step, generate < div > elements of those sizes.
10. Float the < div>s to the correct side, and set their clear style to the same side.
11. Set the background-image to a non-repeating image described by a call to canvas.toDataURL() for the original’s containing element.
12. Hide the original image.
Basic SlickWrapping
All you need to SlickWrap your images is to call the slickWrap function on the results of a jQuery query:

jQSlickWrap Demo 1

Lots of text goes here..

Note: the images selected by the query should have some sort of float styling applied to them. Either float: right or float: left

SlickWrapping With Style
jQSlickWrap is capable of figuring out what kind of padding you want to use when you SlickWrap an image by looking at each image’s styling. Just make sure you’ve got the padding css style on your image:

jQSlickWrap Demo 2

Lots of text goes here..

Specifying Settings
In addition to being able interpret some settings from the CSS styling on image elements, it is also possible to specify several other settings to customize the way SlickWrapping will be done.
Settings:

1. bgColor – The background color to use when examining the contents of the images resulting from a query. If no value is given, jQSlickWrap will try to determine the background color of the image from the image’s top-left pixel.
2. cutoff – The maximum allowable “distance” between a pixel’s color and the background color that will qualify that pixel as being considered as part of the background. Defaults to 5.
3. resolution – The height of the
elements to be created. Default value is 20.
4. bloomPadding – Whether or not to use the advanced “bloom” algorithm to calculate precise padding distances. This is very slow in the current version, so the default value is false.

jQSlickWrap Demo 3

Lots of text goes here..

Demo: http://jwf.us/projects/jQSlickWrap/example3.html
Download: http://code.google.com/p/jqslickwrap/downloads/detail?name=jquery.slickwrap.min.js
Source: http://jwf.us/projects/jQSlickWrap/

Related Listings:

Making A Slick Content Slider Introduction Web masters constantly search for ways to optimize the...
Tabbed Content Area : jQuery Plugin One of the biggest challenge to web designers is finding...
Lights Out – Dimming – Covering Background Content with jQuery This is a quick and easy approach that tackles a...

Bumpbox – Images, Html files, Flv Videos, Swf files and PDFs – Lightbox

alyaspk — Wed, 07 Oct 2009 17:49:07 +0000

Bumpbox – Images, Html files, Flv Videos, Swf files and PDFs – Lightbox
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.

Basic Steps:

Copy the images to your root folder or adapt the image paths in the bumpbox.js according to your folder settings

Place the included mootools12.js, the bumpbox.js and – in case you want to use flv files, the flowplayer.min.js as well as the flowplayer.swf and flowplayer.controls.swf into your document root.

If your paths differ, adapt the paths inside the bumpbox.js to your directory structure.

Open the page you want bumpbox to be used. Now add these lines to the head section of your site:

How to modify your links to use bumpbox:

Show me

Explanation:

rel = “” this is used to specify the size of the bumpbox window.

class=”bumpbox” tell the script to check which links should use the bumpbox function.

Demo: http://www.artviper.net/bumpbox.php
Download:http://www.artviper.net/download/bumpbox.rar
Source: http://www.artviper.net/bumpbox.php

Related Listings:

Videobox: Lightbox for videos Videobox is a 6kb script, which shows your videos in...
mooSocialize – Bookmarks Widget Based on ajax, this small widget allows to integrate many...
MooMessageBox – Image Box for Lighbox If you want to display a customized image box like...

mParallax – Mootools Plugin

alyaspk — Mon, 28 Sep 2009 18:06:06 +0000

mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”.

How to use ?

new mParallax(myElement [, options]);

Do not forget to declare the doctype !
You can also easily add rounded corners on your parallaxed element by creating img elements and injecting them with the adopt() function.
If you use .png images, you can use the fixPNG() function on your parallax element in order to get transparency on IE6. ( i.e : fixPNG($(‘myElement’)); )
Documentation:
Here are the several class options :

 new mParallax($('parallax'),{triggers:$$('a.goto'),triggerExposesEdges: true});

mouseResponse (boolean) true
mouseport ($(‘element’)) same as parallaxed element
triggers (array) elements on which to add triggered events
triggerResponse (boolean) true
triggerExposesEdges (boolean) true
takeoverFactor (0-1) 0.68
takeoverThresh (0-1) 0.002
frameDuration milliseconds 25
xparallax (boolean) true
yparallax (boolean) true
xorigin (‘left’ | ‘centre’, ‘center’, ‘middle’ | ‘right’ | 0-1) ‘centre’
yorigin (‘top’ | ‘centre’, ‘center’, ‘middle’ | ‘bottom’ | 0-1) ‘centre’

Demo:

Download: http://www.piksite.com/downloads/mParallax.zip
Source:http://www.piksite.com/mParallax/

Related Listings:

jParallax – Stunning Animation Effects jParallax has had a major overhaul in readiness to be...
MooTools Table Plugin MooTables are created from standard html tables, they degrade nicely....
ImageCaption – a MooTools Plugin for Auto-Captioning Images ImageCaption is a MooTools 1.2+ plugin for easily adding figure...

Leopard Desktop jQuery Plugin

alyaspk — Wed, 16 Sep 2009 16:59:25 +0000

A neat looking Dashboard/Desktop. You guys are gonna totally FLIP when you hear what’s in this jam packed tutorial! More focus on the Dashboard (I swear it’s cooler than it sounds, and requires a lot of code), and I’ll even go into how to create a stack (seperate from the dock, sorry jqDock doesn’t like nestled

Preface

As with the previous tutorial, I must note this disclaimer! I don’t own any of the images used in this tutorial, nor do you. They are copyright to their vendors, whether it be Apple, inc, Adobe, etc. Using icons is a bit of an integrity issue, so don’t abuse it!

Secondly, a new jQuery.UI file will replace the draggable js file. This is basically all the interaction packs. Download jQuery.UI code. You’ll also need the final product of last week’s tutorial! Make sure you expand that into it’s own directory! We’ll be adding onto that. A whole lot if images are needed too. New Images. Make sure you expand that zip into the ‘images’ directory, so that any new folders are merged with their counter parts from last week. I apologise for the confusion with this. Stupid file structure, my bad. So. Files that need adding:

* jQuery.ui package
* Last week’s code (If you didn’t follow it)
* All new images needed. (A few widgets and widget thumbs, so merge the folder rather than replacing!)

Just the same, the jQuery.ui links need editing.

Plan of Attack

Though it might not look like it, a whole lot of code is needed for these few things:

1. Stacks
2. Dashboard
1. Opening/Closing the Adding Widgets Panel
2. Dragging Widgets onto the Dashboard list
3. Closing Widgets
3. Some extra bits (improving dock, adding desktop items)

Changes

Just before we start, I really do apologise, but there were a few things that needed changing from last week. the #dock css should read:

#dock{
	position: fixed;
	margin: 0 auto;
	bottom: 38px;
	left: 40%;
	z-index: 0;
	list-style: none;
}

The #closeZone’s zIndex in dashboard.js on line 24 should be 99 not 9999
Step 1 – Stacks

So lets dive right into it, and start with Stacks. Or more a Stack. Unfortunately due to the way that jqDock works, it’s impossible to nestle stacks within the jqDock without editing the core js, which is much further than this tutorial intends. So instead, we’ll be creating a stack to the bottom right of the page. The harder parts of coding stacks is a) the incrementing height for each item, and the curve. Luckily, a loop combined with maths can do this hard work for us.

Step 1:1 – HTML

Lets begin with adding the HTML structure of the stack. Now due to the nature of the stack, if you wish to use it on a different website, you can! Basically anything inline within the < li >s work. The positioning just needs tweaking. Regardless, we use spans (and you could always wrap the images in < a >.


	
	
		Acrobat
		Aperture
		Photoshop
		Safari
		Finder

The first image is the folder placeholder. This is what activates the dock, so it’s necessary. (When we use the jQuery selectors, however, I’m sure you could use :first to get the first dock item if you /really/ don’t want a containing basket).
Step 1:2 – CSS

Contrary to the first tutorial, I’m going to include the CSS and jQuery for each step, just so the design doesn’t muddle up completely. Open up style.css from last week and add to the bottom:

.stack{
	position: absolute;
	bottom: 0;
	right: 100px;
}

.stack ul{
	list-style: none;
	position: absolute;
	top: -30px;
	z-index: -9;
}

.stack ul li{
	position: absolute;
}

.stack ul li span{
	display: none;
}

/*I'm for the jquery*/
.stack .openStack li span{
	display:block;
	position:absolute;
	top: 17px;
	right:60px;
	height: 14px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	color: #fcfcfc;
	text-align: center;
	opacity: .85;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	opera-border-radius: 10px;
	text-shadow: #000 1px 1px 1px;
}

Your stack will now look like a closed stack, but you can’t open it. This just stacks (hah, no pun intended) all the icons on top of each other, so they’re compressed into a small square. The last selector is for the jQuery. When the stack is opened, the class ‘openStack is added to the ul. I apologise to those CSS3 haters, It’s the fastest most efficient way to get it right in most modern browsers.

Step 1:3 – jQuery

In plain english, the stack needs to open when the img is clicked, pushing each (hint…) li up in incrememnts, and to the right a little, whilst resizing to a smaller size. Then when clicked again, everything returns to normal.

$('.stack>img').toggle(function(){
	//this function, for each element increases the top position to by 50px,
	//and across using, the equation: value = (value+1)*2. Both variables
	//start at 0.

}, function(){
	//this one just reverses the above.

});

The second function is easy, but the first is a pain.

var vertical = 0;
var horizontal = 0;
$('~ul>li'this).each(function(){
	$(this).animate({top: '-' +vertical + 'px', left: horizontal + 'px'}, 300);
	vertical = vertical + 50;
	horizontal = (horizontal+1)*2;
});
$('~ul', this).animate({top: '-50px', left: '10px'}, 300).addClass('openStack');
$('~ul>li>img', this).animate({width: '50px', marginLeft: '9px'}, 300);

Woo, jampacked with string interrupting, variables and math. Interesting selectors, huh? The ~ is ’siblings of’ Erg. Math. Let me explain. The first 2 variables are for the vertical position and the horizontal position (curve).

Top incrementing is the same each time, where as unless you want a horizontal straight line, each horizontal position has to be slightly more than the rest. In this case, it increases by the previous number plus one, times 2. so it’ll go 2, 6, 14, 30, 62, 126, etc. I know they’re weird numbers, but it works. Use any equation you like!

The ‘each’ function is similar to, say a WordPress loop. This function happens every time the next element is used. The equation ‘value = (value+1)*2′, means ‘new value equals old value plus one, then this times two.

The first animate line adds the variables (within the plus) every time it’s looped via string splitting. The last two lines are just the size. The other half of the toggle function, just resets everything back to normal:

$('~ul', this).removeClass('openStack').children('li').animate({top: '20px', left: '-10px'}, 300);
$('~ul>li>img', this).animate({width: '79px', marginLeft: '0'}, 300);

Simple! Now your jQuery stacks will successfully animate, even curving! Unfortunately rotation is a tad more difficult. Though when HTML5 comes out in 2022 (-_-) the canvas tag might have full support for that.

Demo: http://nettuts.s3.amazonaws.com/082_leopard2/preview/index.html
Download: http://nettuts.s3.amazonaws.com/082_leopard2/source.zip
Source: http://net.tutsplus.com/tutorials/javascript-ajax/adding-to-our-leopard-desktop-with-jquery/

Related Listings:

Tabbed Content Area : jQuery Plugin One of the biggest challenge to web designers is finding...
jQuery Slider to control Text Size JQuery’s UI can add so much to a web page....
Dynamic Poll with jQuery When you combine some neat functionality courtesy of PHP with...

Product highlight : Mootools

alyaspk — Sun, 13 Sep 2009 05:17:42 +0000

Believe it or not, there’s a lot of powerful interactivity you can bring to your site using javascript besides slick navigation menus! This tutorial will help you find your inner cow by introducing you to one of the most powerful and modular javascript libraries—MooTools! We’ll be creating a flexible tool for highlighting your sites products or services using the MooTools javascript framework. Also, learn some of the many reasons why MooTools just might be the right javascript library for all of your future projects!

I know what you’re thinking… What could MooTools possibly have to offer that might cause me to break off my long-standing relationship with jQuery—Or Prototype and Scriptaculous for that matter!

One of the biggest problems I’ve ran into with using jQuery in the past, is the fact that so many of their plugins are created and developed independently—which MEANS, you’re placing your trust in a stranger to be actively updating their plugin as the jQuery library continues to release newer and newer versions as well. When this fails (and often times it does) you’ll find yourself searching for the proper version of the core library that’ll allow your script to function correctly!

Maybe Prototype and its well known partner in crime, Scriptaculous, are more your style. In this particular case you’ll be deprived of your right of modularity, and you’re forced to include two beefy sized libraries on all of your pages—or in some cases a plugin file as well!

So if MooTools is so great then… why isn’t it used more? Why aren’t there gazillions of tutorials and books on every library shelf?! There’s a handful of reasons:

1. MooTools is geared more towards the intermediate to advanced scripter.
2. You won’t find collections of cut and paste plugins that allow for immediate implementation.
3. MooTools users are (for whatever reason) associated with having an elitest disposition.

However, you will find ample tools for working with more unique areas of scripting, like JSON file parsing, cookies, and flash embedding to name a few. Also, a convenient download page that lets you choose exactly what you need for your project so you can ensure the smallest file size possible.

Usage:
Step 1 – Get MooTools!

Head over to the MooTools Core Builder page! For this particular project, you’ll want to select Fx.Morph, Element.Event, DomReady, and Selectors and hit “Download” using YUI Compressor. All dependencies are automatically chosen for you. Be mindful, as certain browsers will add a ‘.txt’ extension to a javascript file for your protection. This will obviously need to be removed, and feel free to trim off some of the beefy characters in the file name.
Step 2 – Attach MooTools to your HTML document

Create the HTML document you’ll be using for this project, and attach the MooTools library. My page head looks something like this:

	
	
	Mootools - Product Highlights!

	

	...

Step 3 – Lay down your CSS and HTML

Take a look at the following styles and HTML to see how I’ve laid out the page.

HTML code:

Notice how I have the HTML laid out. I will not be using ID’s to select any of the page or bubble elements, and instead creating arrays of all elements containing the two classes, which will allow for this script to scale regardless of how many items you choose to highlight! All bubbles and pages are contained in a wrapper which is absolutely positioned within the site wrapper (which contains our background where all of this is sitting on top of).
Step 4 – Add your javascript

We’ll start by creating a wrapper function for our javascript code which places an event listener on the window object, firing once the DOM is loaded and ready. This is important because we need our script to immediately begin altering the DOM once its available.

If we DON’T use this wrapper function, it’s quite likely you’ll get errors claiming that certain elements don’t exist. Another option could be to place the embedded javascript at the end of the document body. However, if you decide to attach the script externally, you’ll run into this problem once again, so it’s a good habit to get into now!

Another option for ‘domready’ is to use ‘load’ which will fire once the page (images included) is completely loaded. We don’t want this for this particular project because it means images (such as our bubbles) might intitally flash on the screen before being hidden by our script.

One other important thing to note—if you DO decide to link this script from an external ‘.js’ file, you’ll want to ensure you link it AFTER you’ve linked the MooTools library in the document head.

window.addEvent('domready', function() {
	...
});

Next we start by creating the arrays for both our page and bubble elements and set some initial in-line styles.

window.addEvent('domready', function() {

	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page');
	var myBubbles = $$('.bubble');

	// Set bubbles opacity to zero so they're hidden initially
	// and toggle visibility on for their container	back on
	myBubbles.setStyle('opacity', 0);
	$('bubbleWrap').setStyle('visibility','visible')

});

Lastly, we’ll attach event listeners to the page icons to fire morph effects on their corresponding bubbles. Note that the order of the bubbles as laid out in the HTML is the SAME order of the page icons. This is important!

window.addEvent('domready', function() {

	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page');
	var myBubbles = $$('.bubble');

	// Set bubbles opacity to zero so they're hidden initially
	// and toggle visibility on for their container	back on
	myBubbles.setStyle('opacity', 0);
	$('bubbleWrap').setStyle('visibility','visible')

	// Add our events to the pages
	myPages.each(function(el, i) {
		/* Here we change the default 'link' property to 'cancel' for our morph effects, which
		   ensures effects are interrupted when the mouse is leaving and entering
		   to immediately begin the morph effect being called */
		el.set('morph', {link : 'cancel'});

		el.addEvents({
			'mouseenter': function() {
				myBubbles[i].morph({
					'opacity' : 1,
					'margin-top' : '-15px'
				});
			},
			'mouseleave' : function() {
				myBubbles[i].morph({
					'opacity' : 0,
					'margin-top' : 0
				});
			}
		});
	});
});

You’ll notice that we’re attaching a function using the each() method to all of the elements of the ‘myPages’ array. And for each function we pass in ‘el’ which represents the page element, and ‘i’ which is an integer representing the placement of that page element within its array. We use the ‘i’ variable for calling the morph effect on the appropriate and corresponding bubble element within the ‘myBubbles’ array.

Demo: http://nettuts.s3.amazonaws.com/022_Mootools/example.html
Download: http://nettuts.s3.amazonaws.com/022_Mootools/Archive.zip
Source: http://net.tutsplus.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/

Related Listings:

Page Peel Effect Using MooTools A great script back in May titled Simple Page Peel...
ImageCaption – a MooTools Plugin for Auto-Captioning Images ImageCaption is a MooTools 1.2+ plugin for easily adding figure...
Dynamic Text Effects – MooTools Dynamic text effects (fade ins, moving text, etc.) can enhance...

jQuery Gradient Plugin

alyaspk — Thu, 23 Jul 2009 14:36:52 +0000

Adds a dynamically created configurable gradient to the background of an element without the use of images.

Above you’ll see a screenshot of the network graph of my god repository (click it for the real deal). On the left hand side is a list of GitHub users. Across from each user is drawn a graph of commits. Since I’ve asked for the graph to be drawn with me (mojombo) as the root, every commit on every branch that I currently have in my repository (mojombo/god) will be graphed across from my name. If you look at the second user in the list (Bertg), you’ll see that only commits that appear in his repository (Bertg/god) but not mine are drawn across from him. The third user (kevinclark) has commits that appear in neither my repo nor Bertg’s repo. And so on.

When you look at the graph you are seeing every commit on every branch of every repository that belongs to a network. But you are seeing each commit only once. Let that sink in for a second. I find that many coders are so used to a centralized SCM that they miss the fact that our Graph Visualizer is actually showing and connecting disparate repositories. Git makes this possible and once it hits you, it can change everything.

Think of it like this. If I draw the graph with myself as root, then the graph shows a sort of to-do list of code that I haven’t pulled into my repo yet. When I want to catch up on what the community has been doing in their forks of my repo, I can hit up the graph and see immediately what others have been up to. If I were to pull in Bertg’s changes, the next time I see the graph, Bertg will no longer be shown at all because he will no longer have any commits that I do not. Keep thinking to-do list and you’ll understand the graph.

This method of drawing the graph may seem odd at first. If both Alice and I contribute to merb-core and at some point Alice pulls my commits into her repo, then I may not be shown on the network graph at all (if the graph ordered her before me). My commits would have already been drawn in her repo. It is important to realize that the graph is about code not ego. My code may be in my repository and yours and many others. Our individual repos are simply vehicles for introducing our code to the world. If we learn to let go of our code a little bit, we are rewarded ten-fold by what the community or our coworkers will do with that code.

You can move around the graph by clicking and dragging it with your mouse. If you click in the graph, then you can use the arrow keys or vim movement keys (hjkl). Hold down the shift key while hitting left or right and you’ll go to the beginning/end of the graph. Press t to show/hide the tag markers. Hover over a commit for details about it. Click on a commit to be taken to that commit in a new window (makes it easy to come back to the graph without losing your place). Click a username to redraw the graph with that person as the root.

Demo: http://www.ajaxupdates.com/gradient_demo/
Download: http://www.ajaxupdates.com/jquery_gradient.zip
Source: http://plugins.jquery.com/project/gradient

Related Listings:

Gradient : jQuery Plugin It allows you to define a gradient fill and have...
jQuery Binary Tree Plugin This script allows you to, with just one call, rearrange...
Form Wizard using Jquery Plugin The form wizard plugin is a plugin based on...

Delayed Image Loader Script for Prototype

alyaspk — Wed, 24 Jun 2009 15:23:14 +0000

lazierLoad is Bramus! his take at writing a delayed javascript image loader for use with PrototypeJS.

lazierLoad automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads. The images not located in the viewport, are not loaded until they appear within it (viz. when the user scrolls down).

The idea for lazierLoad was inspired upon Lazy Load (which is built for use with jQuery), yet the code differs quite a lot.

Installation:
#

Include the needed javascript (2 files) in your HTML document
PLAIN TEXT
HTML:

2: That’s it, you’re done!

Configuration
Automatic hooking of lazierLoad – Configuring the default options

If you are not happy with the default settings, you can tweak lazierLoad by editing the lazierLoadDefaultOptions Object in the lazierLoad.js file.

Possible options to tweak are:

* treshold: images which appear treshold pixels from the bottom will be loaded
(defaults to “100”)
* replaceImage: image to replace the non-loaded images with until they are loaded (most likely a transparent 1 by 1 pixel image)
(defaults to “blank.gif”)
* loadingImage: image to show while a non-loaded image is being loaded
(defaults to “spinner.gif”)
* extensions: array of extensions to lazyLoad
(defaults to “['gif','jpg','png','jpg']”)
* minWidth: minimum width an image must have in order to be lazyLoaded
(defaults to “100”)
* minHeight: minimum height an image must have in order to be lazyLoaded
(defaults to “100”)

Manual hooking of lazierLoad – Configuring page-specific options

If you want different options on different pages, then set lazierLoadAutoHook to false and manually create a new JS_BRAMUS.lazierLoad instance yourself. Within that manual instantiation you can pass in specific parameters. If set, these parameters will override the default parameters set in the lazierLoadDefaultOptions Object.

Some examples are (only include one instantiation per page though!):

JavaScript:

Event.observe(document, 'dom:loaded', function() {
	myCustomLL = new JS_BRAMUS.lazierLoad({treshold: 200});  // Override treshold
}, false);

Event.observe(document, 'dom:loaded', function() {
	myCustomLL = new JS_BRAMUS.lazierLoad({loadingImage: 'bigspinner.gif', minWidth : 200, minHeight; 200}); // Override spinner, minWidth and minHeight
}, false);

Demo: http://www.bram.us/projects/js_bramus/lazierload/#demo
Download: http://www.bram.us/wordpress/download.php?file=http://www.bram.us/wordpress/wp-content/uploads/2008/02/lazierload_04.zip
Source: http://www.bram.us/projects/js_bramus/lazierload

Related Listings:

UvumiTools Image Crop As the web grows and becomes more dynamic (“Web 2.0″),...

jQuery Plugin: betterTip

alyaspk — Mon, 22 Jun 2009 16:28:49 +0000

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

To use BetterTip you first have to obtain the jQuery Library. Next you’ll need to Download BetterTip. This download contains a compressed version of BetterTip as well as an uncompressed version. It also contains all the images and a css file. The compressed version with the images and css is 10.4KB and the uncompressed version is 12.4KB.

In the header section of the page you want to use BetterTip, you’ll need to add references to jQuery, BetterTip, and the BetterTip css file as follows:
To use BetterTip you first have to obtain the jQuery Library. Next you’ll need to Download BetterTip. This download contains a compressed version of BetterTip as well as an uncompressed version. It also contains all the images and a css file. The compressed version with the images and css is 10.4KB and the uncompressed version is 12.4KB.

In the header section of the page you want to use BetterTip, you’ll need to add references to jQuery, BetterTip, and the BetterTip css file as follows:

Now you can set BetterTip options. This step is optional.
There are only three options, and they are as follows:

* openWait — the number of milliseconds the user should hover before the tooltip opens (default: 500)
* closeWait — the number of milliseconds the tooltip stays open after the user moves the mouse out (default: 0)
* enableCache — true or false, indicating whether or not AJAX calls should be cached (default: true)

You can tell BetterTip to open a tooltip over a div or an a element. You can create a tooltip on an a element as follows:


    Dynamic tooltip an 'a' element

The a element must have an id and have its class attribute set to betterTip. The title attribute indicates what the title of the tooltip should read. There are two special values you can use for the title. Use $none if you do not want a title or a title bar, and you can use $content if you want the title to be the same as the text the user hovers over. The href attribute specifies where the content of the tooltip should come from. You can specify how wide you want the tooltip to be by adding a width parameter to the querystring. The default width is 250px. If the href attribute starts with a $, it tells BetterTip to grab the content from another element on the page. For example, an href value of $mydiv?width=500 will use the text stored in a div with id=”mydiv” and set the width of the tooltip to 500px, as in this example:


    Static tooltip an 'a' element


    Here is the content for the tooltip!

To make a tooltip appear above a div, the same concept applies. Here is the format:


    
    Dynamic tooltip for a div

You simply put a blank a inside a div. Again, make sure that both the a and the div have unique ids and that both of them have a class attribute equal to betterTip.
Demo: http://edgarverle.com/BetterTip/default.cfm
Download: http://edgarverle.com/BetterTip/bettertip.zip
Source: http://edgarverle.com/BetterTip/default.cfm

Related Listings:

ToolTip using MooTools Tooltip let’s you create mouse over tooltips to your content...

Mobile Tooltip Widget

alyaspk — Sun, 21 Jun 2009 04:19:01 +0000

I am making an Ajax application using GWT and I need some kind of facility to display a tooltip on an image when I hover my mouse over it. Unfortunately GWT does not provide such widget that I can use directly. After spending some time on GWT forum, I found two neat posts (refer to post 1 and post 2), which included some source code for making tooltip widget.

I made a mod version of the tooltip widget which supports mouse movement event. Check it out. The source code is available for free.

Usage:

//create a new image
Image image = new Image("images/bear.bmp");
//create a tooltip
MobileTooltip tooltip = new MobileTooltip("tooltip 1");
//add mouse listener to the image
image.addMouseListener(new MobileTooltipMouseListener(tooltip));
//add the desired image to your page
RootPanel.get().add(image);

By default, the name of CSS style is tooltip, you can change it to anything to fit your need. Below is the style used in the demo:

.tooltip {
        border: 1px solid black;
        padding: 2px 3px 3px 3px;
        font-size: smaller;
        background-color: #ffffcc;
}

Demo: http://test.thecodecentral.com/demos/mobiletooltip/
Download: http://thecodecentral.com/wp-content/uploads/2007/04/mobile-tooltip.zip
Source:

Related Listings:

ToolTip using MooTools Tooltip let’s you create mouse over tooltips to your content...
Loading Panel Widget Probably needless to say, but here it is. A web...
Cut & Paste Ajax Tooltip script v1.2 Description: This Ajax script enhances the default “title” attribute of...

Sliding Tabs using Moo Tools Plugin

alyaspk — Tue, 16 Jun 2009 15:13:17 +0000

The script relies on width and height of tabs and content, so if you want to use it to display images (like below) you have to hard-code the dimensions of your images in your css, or preload them.

If you want to create vertical tabs you must set a concrete height for your tabs.

This isn’t really a bug, but I didn’t add any style to the css, so if you want it to look pretty you’ll have to do some css work.

As a new feature, I’m working on adding some ajax functionality.

If you have any suggestions for other features or find some bugs feel free to email me at meweltman(at)yahoo.com.

Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space. Thanks for visiting my site.

First, you must include mootools and the scripts and css in your page.:

Then just create a new sliding_tabs object with a set of tab elements and a set of tab content elements. These must be in the same order i.e.:

tab1
tab2
tab3
tab_content1
tab_content2
tab_content3
Then create the object:
new sliding_tabs($$('.tab'),$$('.tab_content'),{active_tab_class:'active_tab'});

NOTE:
For horizontal tabs, you must set a width value for #tab_overflow in your CSS. Similarly, for vertical tabs you must set an height value for #tab_overflow. This will define how wide or tall you want the visible tabs to be. Play with it, and have fun!

Options:

The third argument (much like many mootools plugins) are options, they are:

active_tab_class – The className of the active tab.
scroll_fx_duration – The duration of the scroll between tabs. For no effect set to 0. Defaults to 500.

To create horizontal tabs:
orientation – set to ‘horizontal’
tab_margin_left – The margin to the left of the left-most tab
tab_margin_right – The margin to the right of the right-most tab

To create vertical tabs (note: your tabs must have a set height):
orientation – set to ‘vertical’
tab_margin_top – The margin to the top of the top-most tab
tab_margin_bottom – The margin to the bottom of the bottom-most tab

-silding tabs can reposition itself to the center of a container or window (see below). to accomplish this you need to enable 3 options

container_reposition – set this to true
container – the container your tabs are in
outer_container – the container you want the tabs to center inside of. To center in the window, set to ‘window’
offset – The offset +/- where the container will be centered.

Demo: http://www.mattweltman.com/sliding_tabs.html

Download: Java: http://www.mattweltman.com/scripts/sliding_tabs.js
Css: http://www.mattweltman.com/css/sliding_tabs.css

Source: http://www.mattweltman.com/sliding_tabs.html

Related Listings:

Tabs with Moo tools plugin This is MooTabs! Using a slightly modified CSS file and...
Fancy Sliding Tabs Menu The Fancy Sliding Tab Menu is back and better than...
Featured articles plugin for Wordpress with Moo Tools Featured articles gives the wordpress blog admin the possibility to...