/**
* The Sexy Curls JQuery Plugin
* By Elliott Kember - http://twitter.com/elliottkember
* Released under the MIT license (MIT-LICENSE.txt)
*
* My only request is: please don't over-use this plugin.
* If this ends up being used all over the internets, and becomes "that annoying effect", I'll be upset.
*
* I dragged a curl, and I liked it - I hope @jeresig don't mind it.
*/
(function($){
$.fn.fold = function(options) {
/* this doesn't work with IE8
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
// We just won't show it for IE5.5 and IE6. Go away. I'm really tempted to write "document.location= 'http://www.getfirefox.com';" here.
if (ie55 || ie6) {this.remove(); return true;}
*/
// MSIE must be 8 or greater
if (navigator.appName == "Microsoft Internet Explorer"){
var ary = navigator.appVersion.match(/MSIE..../g);
var msieVersion = 8; // in case our test fails try it anyway
for(var i=0; i<ary.length; i++){
msieVersion = parseInt(ary[i].substr(ary[i].indexOf(' ')+1));
if (msieVersion > 7) break;
}
}
// New - you don't have to specify options!
options = options || {};
// Default awesomeness
var defaults = {
directory: '.', // The directory we're in
side: 'left', // change me to "right" if you want rightness
turnImage: 'fold.png', // The triangle-shaped fold image
maxHeight: 400, // The maximum height. Duh.
startingWidth: 80, // The height and width
startingHeight: 80, // with which to start (these should probably be camelCase, d'oh.)
autoCurl: false // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
};
// Change turnImage if we're running the default image, and they've specified 'right'
if (options.side == 'right' && !options.turnImage) defaults.turnImage = 'fold-sw.png';
// Merge options with the defaults
var options = $.extend(defaults, options);
// Set up the wrapper objects
var turn_hideme = $('<div id="turn_hideme">');
var turn_wrapper = $('<div id="turn_wrapper">');
var turn_object = $('<div id="turn_object">');
var img = $('<img id="turn_fold" src="'+ (options.directory+'/'+options.turnImage) +'">');
// Set starting width and height of our turn-o-ma-bob
turn_object.css({
width: options.startingWidth,
height: options.startingHeight
});
// There are different CSS considerations for a top-right fold.
if (options.side == 'right') turn_wrapper.addClass('right');
// Rappin', I'm rappin' - I'm rap-rap-rappin'.
this.wrap(turn_wrapper).wrap(turn_object).after(img).wrap(turn_hideme);
// If you want autoCurl, you don't get scrolling. Why? Because it looks silly.
turn_wrapper = $('#turn_wrapper');
turn_object = $('#turn_object');
if (!options.autoCurl) {
// Hit 'em with the drag-stick because it ain't gonna curl itself!
turn_object.resizable({
maxHeight: options.maxHeight,
aspectRatio: true,
handles: options.side == 'left' ? 'se' : 'sw'
});
} else {
// Thanks to @zzzrByte for this bit!
turn_wrapper.hover(
function(){
turn_object.stop().animate({
width: options.maxHeight,
height: options.maxHeight
});
},
function(){
turn_object.stop().animate({
width: options.startingHeight,
height: options.startingHeight
});
}
);
}
};
})(jQuery);