Demo

You can check out an example on the demonstration page.

Usage

There’s nothing simpler than to use BkgSlide : you just have to include the jQery library and the BkgSlider plugin in your page and instanciate the plugin with its options.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bkgslide.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
    $('#target').bkgSlide({
        images: ['images/img1.jpg', 'images/img2.jpg']
    });
});

Options

images

An array containing the name of the images to use.

imagePath

The path where to find the images.
The script automatically adds an ending slash if necessary.

speed

The duration in milliseconds between two image changes.
Default : 7000
If you don’t want autoplay, set this value to 0.

direction

The direction to go to when changing image.
Possible values : ‘random’, ‘next’, ‘prev’
Default : ‘random’

wrap

Defines wheter or not to wrap around when reaching one end of the imges list.
Default : true

nav

Defines the navigation tools.
Possible values : true, an option as a string, an array of navigation tools in the order you want to see them

true / ‘all’ : all the navigation tools
‘list’ : list of shortcuts to each image
‘prev’ : button to go to the previous image
‘next’ : bbutton to go to the next image
‘toggle’ : button to start or stop the slideshow

Default : ['prev', 'list', 'next', 'toggle']

stopOnNav

Defines wheter or not to stop the slideshow when the user interacts with one of the navigation tools.
Default : false

width

The width to give to the image containers.
With the ‘auto’ value, the script will use the width of the target element.
Default : ‘auto’

height

The height to give to the image containers.
With the ‘auto’ value, the script will use the height of the target element.
Default : ‘auto’

containersClass

Used to add a custom class to the image containers.
Default : null

effect

The effect to apply when transitioning between two images.
Possible values : ‘fadeOut’, ‘slideUp’, ‘hide’
Default : ‘fadeOut’

duration

The transition duration between two images (in milliseconds)
Default : 500

afterInit

A callback function to do something right after the BkgSlider initialization.
This function will have has parameter the target element and its BkgSlider.

Methods

move

Move within the images list.
Possible values : ‘next’, ‘prev’, ‘random’
If no parameter is passed, the direction set in the options is used.

changeTo

Move to the specified image index.
This method requires the index of the image in the array as a parameter (a number between 0 and the number of images -1).

play

Begin the slideshow.
This method accepts a number of milliseconds as a parameter, representing the time interval between two image changes.
If no parameter is passed, the speed set in the options will be used.

stop

Stop the slideshow.

Let’s take an example : you’ve just made a div that you can drag at will with the mouse. We click, the dragging begins… we let go of the mouse button, the dragging stops. But here’s the thing : if we let go of the mouse button while outside the browser’s viewport, no event is triggered, and we keep on dragging our div indefinitely !

The best way to prevent that is to stop the dragging as soon as we leave the browser’s viewport. But : javascript doesn’t trigger any event in that case. One has to cheat…

We begin by saying that if we stop hovering the dragged object, we’ll stop the dragging…
And we soon realise it’s not cool at all ! Indeed, the mouse will nearly always go faster that the div and the dragging will stop instantly, except if we move in slow motion.

To prevent that, one can check toward which element the mouse left the div, and only stop the dragging if that element is not within the html tag.
Easy… in theory. But all browsers don’t use the same attributes for the event, and of course IE will be causing trouble !

Without any further introduction, here is a bit of jQuery (“code less do more”) that will help you a lot to solve that issue :

$('div#dragged').bind('mouseleave.dragged',function(e) {
	var ev = e || window.event;
	if(ev.relatedTarget){
		if(ev.relatedTarget == $('html').get(0)){
			stopDrag();
		}
	} else {
	// IE
		if(!ev.toElement){
			stopDrag();
		} else if(ev.toElement.tagName == "HTML"){
			stopDrag();
		}
	}
})

Now, the explanations :

$('div#dragged').bind('mouseleave.dragged',function(e) {

We associate a function to the ‘mouseleave’ event on the draggable div.
Please note that jQuery allows us to associate a name to that function (here: ‘.dragged’), which is very useful to then handle the events by name, specially in the case where several events of the same type are associated with this object.

	var ev = e || window.event;

We get the triggered event. Firefox and the standard compliant browsers will have it as a parameter of the function (here : ‘e’), for Internet Explorer we’ll have to fetch it from the window.event.
the double pipe (‘||’) allows us to give to the variable ‘ev’ the value of ‘e’ if it exists, and the value of ‘window.event’ if that’s not the case.

	if(ev.relatedTarget){
		if(ev.relatedTarget == $('html').get(0)){
			stopDrag();
		}

For the standard browsers, the event contains a ‘relatedTarget’ property.
If it exists, we are in the case of a standard browser, else we’re probably dealing with IE.

This property contains the ‘html’ element when we leave the browser’s viewport.
Here we’ll use a jQuery syntax to compare the content of that property to the html content (‘get(0)’ on the jQuery object) of the ‘html’ tag. If they’re identical, we can stop the dragging.

	} else {
	// IE

If the ‘relatedTarget’ property doesn’t exist, we’re in the case of IE. Two case are then to be taken care of :

		if(!ev.toElement){
			stopDrag();

For some versions of IE, the ‘toElement’ property of the event is undefined. This is enough information to stop the dragging.

		} else if(ev.toElement.tagName == "HTML"){
			stopDrag();
		}
	}
})

For some other versions of IE, the ‘toElement’ property exists. We’ll then have to check that the ‘tagName’ property of the ‘toElement’ is indeed ‘HTML’. If that’s the case, we’ll stop the dragging.

Here it is, I hope this short explanation may help you out, it’s not always easy to find on the internet the needed resources to do that thing that seems so basic !

It appears that in the 7th version of this browser beloved by masochists deveveloppers, we still don’t have the useful possibility of disabling an option in a ‘select’.

Hopefully, javascript (enhanced by jQuery) allows us to fix many issues of that browser we love to hate.

Here is a bit of script found on the internet that may help you if you face this problem :

$(document).ready(function(){
  // Disabled options fix for Internet Explorer
  $('select').each(function(){
    this.rejectDisabled = function(){
      if (this.options[this.selectedIndex].disabled){
        if (this.lastSelectedIndex) {
          this.selectedIndex = this.lastSelectedIndex;
        } else {
          var first_enabled = $(this).children('option:not(:disabled)').get(0);
          this.selectedIndex = first_enabled ? first_enabled.index : 0;
        }
      } else {
        this.lastSelectedIndex = this.selectedIndex;
      }
    };
    this.rejectDisabled();
    this.lastSelectedIndex = this.selectedIndex;
    $(this).children('option[disabled]').each(function(){
      $(this).css('color', '#CCC');
    });
    $(this).change(function() {
      this.rejectDisabled();
    });
  });
});

Thank you jQuery

Not being able to find any equivalent to use in a web admin, I’ve decided to write one by myself. So I’ve used the convenience of jQuery to write a javascript plug-in that simulates the pickwhip’s behaviour.

Demo

Basically, we bind to a source element a list of target elements to which it can link. From then on, when we click on that source element, we activate a pickwhip that will react differently to a rollover on a target element, on an already linked element, or on a non-target element, and commit the linking when needed.

A demonstration being better that a long speech, you can test the pickwhip.

In practice

To use the pickwhip, you first need to load jquery.js and jquery.pickwhip.js, preferably in the <head> section of your page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pickwhip.js"> </script>

Then you have to initialize the pickwhip.

$(document).ready(function(){
	$.pickWhip.init({
		imageDir: 'whipImg/'
	});
});

If you want to move the pickwhip images, you can replace ‘whipImg/’ by the path to their new location, else you can just launch $.pickWhip.init() with no parameter.

Now you just have to declare the targets and the options for each pickwhip, as in the present example :

$('#src1').pickWhip('.dropzone, .dropzone2',{
	unlinkedHoverClass	: 'whipHover1',
	linkedHoverClass	: 'whipHoverLinked1',
	linkList		: Array( $('#drop2') ),
	showLinks		: true,
	linkedClass		: 'whipLinked1',
	unlinkedClass		: 'whipUnlinked1',
	callback		: function(source, target){
		alert("The link between the source " + source.attr('id') + " and the target " + target.attr('id') + " has been updated.";
	}
});

This code binds a pickwhip to an element of id ‘src1′.

The first parameter passed to the pickWhip() method is a String to be interpreted by the jQuery selector.

Here, we ask elements of class ‘dropzone’ and ‘dropzone2′ to react to this pickwhip.

The second parameter is a list of options formatted in json…

Options available :

• linkedHoverClass : css class to set to a target element already linked to this source when hovered.
  Type : String
  default: linkedWhipHoverTarget
• unlinkedHoverClass : css class to set to a target element not linked to this source when hovered.
  Type : String
  default: unlinkedWhipHoverTarget
• linkedClass : css class to set to a target element already linked to this source showLink is active.
  Type : String
  Par défaut : linkedWhipTarget
• unlinkedClasss : css class to set to a target element not linked to this source when showLink is active.
  Type : String
  Par défaut : unlinkedWhipTarget
• showLinks : set the linkedClass/unlinkedClass classes to the targets when the user activates this pickwhip.
  Type : Boolean
  default : true
• linkList : list of jQuery elements or associative arrays (source, target) already linked to this source.
  Type : Array( [jQuery Object target], [Array( jQuery Object source, jQuery Object target)], [...] )
• callback : function to run after linking.
  Type : Function
  Note : This function can take 2 parameters, that will respectively be the source and the target being linked together.

The linkList option will prove very useful to initialize the current state of associations. You can pass it targets for this pickwhip, the pickwhip’s source will be considered as linked to them. But you can also pass it asscociative arrays formatted like Array(source, target), because it’s not always to the source of the pickwhip that you want to link the target.  For example, you may want to link the target to the parent element of the pickwhip… or exploit in a more straight forward way what’s in your database !

To get the current associations list, you can check the global list $.pickWhip.allLinks as described in this example :

function showLinks(){
	var links = '<p>Current associations are :<\/p>
<ul>';
	for (var i=0; i<$.pickWhip.allLinks.length; i++) {
		for (var j=0; j<$.pickWhip.allLinks[i].length; j++) {
			links += '<li>source : '+$.pickWhip.allLinks[i][j][0].html()+' _ dest : '+$.pickWhip.allLinks[i][j][1].html()+'<\/li>';
		}
	}
	links +='<\/ul>';
	$('#links').html(links);
}