http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf

js

1

iQuery cheatsheet

http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf

copy | embed

• jquery

//FadeOut
$('#hideButton').click(function() {
$('#disclaimer').fadeOut();
});

//Toggle
$('#toggleButton').click(function() {
$('#disclaimer').toggle('slow');
});

//Slide
$('#toggleButton').click(function() {
$('#disclaimer').slideToggle('slow');
});

$('#disclaimer').slideToggle('slow', function() {
alert('The slide has finished sliding!')
});


$('#disclaimer').slideUp('slow', function() {
$('#hideButton').fadeOut();
});

//Hover effects
$('#celebs tr').mouseover(function() {
$(this).addClass('zebraHover');
});
$('#celebs tr').mouseout(function() {
$(this).removeClass('zebraHover');
});
// ^ Same as
$('#celebs tbody tr').hover(function() {
$(this).addClass('zebraHover');
}, function() {
$(this).removeClass('zebraHover');
});

//Toggle class
$('#celebs tbody tr').click(function() {
$(this).toggleClass('zebraHover');
});


//Spoiler alert
Who lost their recording contract today?
<span class='spoiler'>The Zaxntines!</span>

$('.spoiler').hide();
$('<span class="revealer">Tell me!</span>').insertBefore('.spoiler');
$('.revealer').click(function() {
$(this).hide();
$(this).next().fadeIn();
});

//Animate
$('#navigation li').hover(function() {
$(this).animate({paddingLeft: '+=15px'}, 200);
}, function() {
$(this).animate({paddingLeft: '-=15px'}, 200);
});
//-----or
$('#disclaimer').animate({
opacity: 'hide',
height: 'hide'
}, 'slow');

//Transition (easing)
$('p:first').toggle(function() {
$(this).animate({'height':'+=150px'}, 1000, 'linear');
}, function() {
$(this).animate({'height':'-=150px'}, 1000, 'swing');
});

//Chaining actions
$('p:first').hide().slideDown('slow').fadeOut(); //.delay(2000) to pause

js

1

jQuery animations

//FadeOut
$('#hideButton').click(function() {
$('#disclaimer').fadeOut();
});

//Toggle
$('#toggleButton').click(function() {
$('#disclaimer').toggle('slow');
});

//Slide
$('#toggleButton').click(function() {
$('#disclaimer').slideToggle('slow');
});

$('#disclaimer').slideToggle('slow', function() {
alert('The slide has finished sliding!')
});


$('#disclaimer').slideUp('slow', function() {
$('#hideButton').fadeOut();
});

//Hover effects
$('#celebs tr').mouseover(function() {
$(this).addClass('zebraHover');
});
$('#celebs tr').mouseout(function() {
$(this).removeClass('zebraHover');
});
// ^ Same as
$('#celebs tbody tr').hover(function() {
$(this).addClass('zebraHover');
}, function() {
$(this).removeClass('zebraHover');
});

//Toggle class
$('#celebs tbody tr').click(function() {
$(this).toggleClass('zebraHover');
});


//Spoiler alert
Who lost their recording contract today?
<span class='spoiler'>The Zaxntines!</span>

$('.spoiler').hide();
$('<span class="revealer">Tell me!</span>').insertBefore('.spoiler');
$('.revealer').click(function() {
$(this).hide();
$(this).next().fadeIn();
});

//Animate
$('#navigation li').hover(function() {
$(this).animate({paddingLeft: '+=15px'}, 200);
}, function() {
$(this).animate({paddingLeft: '-=15px'}, 200);
});
//-----or
$('#disclaimer').animate({
opacity: 'hide',
height: 'hide'
}, 'slow');

//Transition (easing)
$('p:first').toggle(function() {
$(this).animate({'height':'+=150px'}, 1000, 'linear');
}, function() {
$(this).animate({'height':'-=150px'}, 1000, 'swing');
});

//Chaining actions
$('p:first').hide().slideDown('slow').fadeOut(); //.delay(2000) to pause

copy | embed

• animation, 
• jquery

$('p').html('good bye, cruel paragraphs!');
$('h2').text('All your titles are belong to us');

//Getting content
alert($('h2:first').text());

js

1

modifying content jQ

$('p').html('good bye, cruel paragraphs!');
$('h2').text('All your titles are belong to us');

//Getting content
alert($('h2:first').text());

copy | embed

• jquery

<p id="no-script">
We recommend that you have JavaScript enabled!
</p>

$('#no-script').remove();


$('#celebs tr').remove(':contains("Singer")');

js

1

remove elements jQ

<p id="no-script">
We recommend that you have JavaScript enabled!
</p>

$('#no-script').remove();


$('#celebs tr').remove(':contains("Singer")');

copy | embed

• jquery

$('<p>A new paragraph!</p>')
$('<p>A new paragraph!</p>').addClass('new');

$('<input type="button" value="toggle" id="toggleButton">')
.insertAfter('#disclaimer');
$('#toggleButton').click(function() {
$('#disclaimer').toggle();
});

$('<strong>START!</strong>').prependTo('#disclaimer');
$('<strong>END!</strong>').appendTo('#disclaimer');

js

1

adding elements jQ

$('<p>A new paragraph!</p>')
$('<p>A new paragraph!</p>').addClass('new');

$('<input type="button" value="toggle" id="toggleButton">')
.insertAfter('#disclaimer');
$('#toggleButton').click(function() {
$('#disclaimer').toggle();
});

$('<strong>START!</strong>').prependTo('#disclaimer');
$('<strong>END!</strong>').appendTo('#disclaimer');

copy | embed

• jquery

//Hide
<input type="button" id="hideButton" value="hide" />

$('#hideButton').click(function() {
$('#disclaimer').hide();
});

//Show
<input type="button" id="showButton" value="show" />

$('#showButton').click(function() {
$('#disclaimer').show();
});

//Show/Hide
<input type="button" id="toggleButton" value="toggle" />

$('#toggleButton').click(function() {
if ($('#disclaimer').is(':visible')) {
$('#disclaimer').hide();
} else {
$('#disclaimer').show();
}
});

//Toggle
$('#toggleButton').click(function() {
$('#disclaimer').toggle();
if ($('#disclaimer').is(':visible')) {
$(this).val('Hide');
} else {
$(this).val('Show');
}
});

js

1

jQuery show/hide/toggle

//Hide
<input type="button" id="hideButton" value="hide" />

$('#hideButton').click(function() {
$('#disclaimer').hide();
});

//Show
<input type="button" id="showButton" value="show" />

$('#showButton').click(function() {
$('#disclaimer').show();
});

//Show/Hide
<input type="button" id="toggleButton" value="toggle" />

$('#toggleButton').click(function() {
if ($('#disclaimer').is(':visible')) {
$('#disclaimer').hide();
} else {
$('#disclaimer').show();
}
});

//Toggle
$('#toggleButton').click(function() {
$('#disclaimer').toggle();
if ($('#disclaimer').is(':visible')) {
$(this).val('Hide');
} else {
$(this).val('Show');
}
});

copy | embed

• jquery

$('div').addClass('class_name');
$('div').addClass('class_name1 class_name2 class_name3');

$('#celebs tr.zebra').removeClass('zebra');

js

1

add/remove class using jQuery

$('div').addClass('class_name');
$('div').addClass('class_name1 class_name2 class_name3');

$('#celebs tr.zebra').removeClass('zebra');

copy | embed

• jquery

http://visualjquery.com/

text

1

jQuery toolbox

http://visualjquery.com/

copy | embed

• jquery, 
• tools

$(document).ready(function() {
var fontSize = $('#celebs tbody tr:first').css('font-size');
alert(fontSize);
});

$('#celebs tbody tr:even').css(
{'background-color': '#dddddd', 'color': '#666666'}
);


//better to add class with the css attributes to avoid inline css
$('div').addClass('class_name');
$('div').addClass('class_name1 class_name2 class_name3');

js

1

reading/changing CSS properties

$(document).ready(function() {
var fontSize = $('#celebs tbody tr:first').css('font-size');
alert(fontSize);
});

$('#celebs tbody tr:even').css(
{'background-color': '#dddddd', 'color': '#666666'}
);


//better to add class with the css attributes to avoid inline css
$('div').addClass('class_name');
$('div').addClass('class_name1 class_name2 class_name3');

copy | embed

• jquery

:odd 
:even
:first
:last
:eq(3)
...

js

1

jQuery selectors

:odd 
:even
:first
:last
:eq(3)
...

copy | embed

• jquery, 
• selectors

$(document).ready(function() {
alert($('#celebs tbody tr:even').length + ' elements!');
});

js

1

selecting even rows

$(document).ready(function() {
alert($('#celebs tbody tr:even').length + ' elements!');
});

copy | embed

• even, 
• jquery, 
• table

$(document).ready(function() {
alert($('#celebs tbody tr').length + ' elements!');
});

//without tbody it selects also the table header, thus returning an incorrect number of elements

js

1

checking selection

$(document).ready(function() {
alert($('#celebs tbody tr').length + ' elements!');
});

//without tbody it selects also the table header, thus returning an incorrect number of elements

copy | embed

• jquery, 
• selection

$(document).ready(function() {
alert('Welcome');
});

$(function() { alert('Ready to do your bidding!'); }); //shorthand

js

1

jQuery alert on page load

$(document).ready(function() {
alert('Welcome');
});

$(function() { alert('Ready to do your bidding!'); }); //shorthand

copy | embed

• jquery

var $j = jQuery.noConflict();
$j(document).ready(function(){
  $j('#content').hide();
});

js

1

Using JQuery with Blogengine

var $j = jQuery.noConflict();
$j(document).ready(function(){
  $j('#content').hide();
});

copy | embed

• blogengine, 
• jquery

<script type="text/javascript" src="http://www.especialistasweb.com.mx/jquery/jquery.js"></script>
<script type="text/javascript" src="http://www.especialistasweb.com.mx/jquery/lightbox/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" 
	href="http://www.especialistasweb.com.mx/jquery/lightbox/css/jquery.lightbox-0.5.css" 
		media="screen" />
 
<!-- Activando plugin jQuery lightBox -->
<script type="text/javascript"> 
	$(function() {
		$('#gallery a').lightBox();
	});
</script>

<div id="gallery">
	<a href="http://www.paneldecontrol.com.mx/admin/<?=$servicio['imagen']?>" 
           title="<?=$servicio['titulo']?>">
		<img src="http://www.paneldecontrol.com.mx/admin/<?=$servicio['imagen']?>" 
		width="365" height="240" />				
	</a>	
</div>

js+php

1

Plugin jQuery lightBox

<script type="text/javascript" src="http://www.especialistasweb.com.mx/jquery/jquery.js"></script>
<script type="text/javascript" src="http://www.especialistasweb.com.mx/jquery/lightbox/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" 
	href="http://www.especialistasweb.com.mx/jquery/lightbox/css/jquery.lightbox-0.5.css" 
		media="screen" />
 
<!-- Activando plugin jQuery lightBox -->
<script type="text/javascript"> 
	$(function() {
		$('#gallery a').lightBox();
	});
</script>

<div id="gallery">
	<a href="http://www.paneldecontrol.com.mx/admin/<?=$servicio['imagen']?>" 
           title="<?=$servicio['titulo']?>">
		<img src="http://www.paneldecontrol.com.mx/admin/<?=$servicio['imagen']?>" 
		width="365" height="240" />				
	</a>	
</div>

copy | embed

• jquery, 
• lightbox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ch" lang="fr-ch">
<head>
<title>A Light weight RTE jQuery Plugin</title>
<link type="text/css" rel="stylesheet" href="jquery.rte.css" />
<style type="text/css">
body, textarea {
    font-family:sans-serif;
    font-size:12px;
}
</style>
</head>
<body>

<div id="main" style="width:800px;">
    <p>
        <textarea name="form[info2]" id="test" class="rte2" method="post" action="#"></textarea>
    </p>
</form>
<div id="test"></div>
    
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rte.js"></script>
<script type="text/javascript" src="jquery.rte.tb.js"></script>
<script type="text/javascript" src="jquery.ocupload-1.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var custom_toolbar = {
		disable: {},
		bold: {command: 'bold', tags:['b', 'strong']},
		italic: {command: 'italic', tags:['i', 'em']},
		underline: {command: 'underline', tags:['u']},
		font: {command: 'fontname', select: '\
			<select>\
				<option value="">Font Family</option>\
				<option value="andale mono">Andale Mono</option>\
				<option value="arial">Arial</option>\
				<option value="georgia">Georgia</option>\
				<option value="impact">Impact</option>\
				<option value="trebuchet ms">Trebuchet MS</options>\
				<option value="verdana">Verdana</options>\
			</select>\
		', tags: ['font']},
		size: {command: 'fontsize', select: '\
			<select>\
				<option value="">Font Size</option>\
				<option value="9">9 (9pt)</option>\
				<option value="11">11 (11pt)</option>\
				<option value="14">14 (14pt)</options>\
				<option value="16">16 (16pt)</option>\
				<option value="18">18 (18pt)</options>\
				<option value="20">20 (20pt)</option>\
				<option value="24">24 (24pt)</options>\
				<option value="28">28 (28pt)</options>\
				<option value="32">32 (32pt)</option>\
				<option value="48">48 (48pt)</options>\
				<option value="64">64 (64pt)</options>\
			</select>\
		', tags: ['font']},
		color: {exec: lwrte_color}
	}
	$('.rte2').rte({
		css: ['default.css'],
		width: 450,
		height: 200,
		controls_rte: custom_toolbar,
	});

	$('li > .disable').hide();

	$('.rte2').bind('iframe_keyup', function() {
		console.log('iframe_keyup');
	});
});
</script>

<hr>
</body>
</html>

html

1

Custom TC RTE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ch" lang="fr-ch">
<head>
<title>A Light weight RTE jQuery Plugin</title>
<link type="text/css" rel="stylesheet" href="jquery.rte.css" />
<style type="text/css">
body, textarea {
    font-family:sans-serif;
    font-size:12px;
}
</style>
</head>
<body>

<div id="main" style="width:800px;">
    <p>
        <textarea name="form[info2]" id="test" class="rte2" method="post" action="#"></textarea>
    </p>
</form>
<div id="test"></div>
    
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rte.js"></script>
<script type="text/javascript" src="jquery.rte.tb.js"></script>
<script type="text/javascript" src="jquery.ocupload-1.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var custom_toolbar = {
		disable: {},
		bold: {command: 'bold', tags:['b', 'strong']},
		italic: {command: 'italic', tags:['i', 'em']},
		underline: {command: 'underline', tags:['u']},
		font: {command: 'fontname', select: '\
			<select>\
				<option value="">Font Family</option>\
				<option value="andale mono">Andale Mono</option>\
				<option value="arial">Arial</option>\
				<option value="georgia">Georgia</option>\
				<option value="impact">Impact</option>\
				<option value="trebuchet ms">Trebuchet MS</options>\
				<option value="verdana">Verdana</options>\
			</select>\
		', tags: ['font']},
		size: {command: 'fontsize', select: '\
			<select>\
				<option value="">Font Size</option>\
				<option value="9">9 (9pt)</option>\
				<option value="11">11 (11pt)</option>\
				<option value="14">14 (14pt)</options>\
				<option value="16">16 (16pt)</option>\
				<option value="18">18 (18pt)</options>\
				<option value="20">20 (20pt)</option>\
				<option value="24">24 (24pt)</options>\
				<option value="28">28 (28pt)</options>\
				<option value="32">32 (32pt)</option>\
				<option value="48">48 (48pt)</options>\
				<option value="64">64 (64pt)</options>\
			</select>\
		', tags: ['font']},
		color: {exec: lwrte_color}
	}
	$('.rte2').rte({
		css: ['default.css'],
		width: 450,
		height: 200,
		controls_rte: custom_toolbar,
	});

	$('li > .disable').hide();

	$('.rte2').bind('iframe_keyup', function() {
		console.log('iframe_keyup');
	});
});
</script>

<hr>
</body>
</html>

copy | embed

• jquery

/*
 * Lightweight RTE - jQuery Plugin, version 1.2
 * Copyright (c) 2009 Andrey Gayvoronsky - http://www.gayvoronsky.com
 */
jQuery.fn.rte = function(options, editors) {
	if(!editors || editors.constructor != Array)
		editors = Array();
		
	$(this).each(function(i) {
		var id = (this.id) ? this.id : editors.length;
		editors[id] = new lwRTE (this, options || {});
	});
	
	return editors;
}

var lwRTE_resizer = function(textarea) {
	this.drag = false;
	this.rte_zone = $(textarea).parents('.rte-zone');
}

lwRTE_resizer.mousedown = function(resizer, e) {
	resizer.drag = true;
	resizer.event = (typeof(e) == "undefined") ? window.event : e;
	resizer.rte_obj = $(".rte-resizer", resizer.rte_zone).prev().eq(0);
	$('body', document).css('cursor', 'se-resize');
	return false;
}

lwRTE_resizer.mouseup = function(resizer, e) {
	resizer.drag = false;
	$('body', document).css('cursor', 'auto');
	return false;
}

lwRTE_resizer.mousemove = function(resizer, e) {
	if(resizer.drag) {
		e = (typeof(e) == "undefined") ? window.event : e;
		var w = Math.max(1, resizer.rte_zone.width() + e.screenX - resizer.event.screenX);
		var h = Math.max(1, resizer.rte_obj.height() + e.screenY - resizer.event.screenY);
		resizer.rte_zone.width(w);
		resizer.rte_obj.height(h);
		resizer.event = e;
	}
	return false;
}

var lwRTE = function (textarea, options) {
	this.css		= [];
	this.css_class	= options.frame_class || '';
	this.base_url	= options.base_url || '';
	this.width		= options.width || $(textarea).width() || '100%';
	this.height		= options.height || $(textarea).height() || 350;
	this.iframe		= null;
	this.iframe_doc	= null;
	this.textarea	= null;
	this.event		= null;
	this.range		= null;
	this.toolbars	= {rte: '', html : ''};
	this.controls	= {rte: {disable: {hint: 'Source editor'}}, html: {enable: {hint: 'Visual editor'}}};

	$.extend(this.controls.rte, options.controls_rte || {});
	$.extend(this.controls.html, options.controls_html || {});
	$.extend(this.css, options.css || {});

	if(document.designMode || document.contentEditable) {
		$(textarea).wrap($('<div></div>').addClass('rte-zone').width(this.width));		
		$('<div class="rte-resizer"><a href="#"></a></div>').insertAfter(textarea);

		var resizer = new lwRTE_resizer(textarea);
		
		$(".rte-resizer a", $(textarea).parents('.rte-zone')).mousedown(function(e) {
			$(document).mousemove(function(e) {
				return lwRTE_resizer.mousemove(resizer, e);
			});

			$(document).mouseup(function(e) {
				return lwRTE_resizer.mouseup(resizer, e)
			});

			return lwRTE_resizer.mousedown(resizer, e);
		});

		this.textarea	= textarea;
		this.enable_design_mode();
	}
}

lwRTE.prototype.editor_cmd = function(command, args) {
	this.iframe.contentWindow.focus();
	try {
		this.iframe_doc.execCommand(command, false, args);
	} catch(e) {
	}
	this.iframe.contentWindow.focus();
}

lwRTE.prototype.get_toolbar = function() {
	var editor = (this.iframe) ? $(this.iframe) : $(this.textarea);
	return (editor.prev().hasClass('rte-toolbar')) ? editor.prev() : null;
}

lwRTE.prototype.activate_toolbar = function(editor, tb) {
	var old_tb = this.get_toolbar();

	if(old_tb)
		old_tb.remove();

	$(editor).before($(tb).clone(true));
}
	
lwRTE.prototype.enable_design_mode = function() {
	var self = this;

	// need to be created this way
	self.iframe	= document.createElement("iframe");
	self.iframe.frameBorder = 0;
	self.iframe.frameMargin = 0;
	self.iframe.framePadding = 0;
	self.iframe.width = '100%';
	self.iframe.height = self.height || '100%';
	self.iframe.src	= "javascript:void(0);";

	if($(self.textarea).attr('class'))
		self.iframe.className = $(self.textarea).attr('class');

	if($(self.textarea).attr('id'))
		self.iframe.id = $(self.textarea).attr('id');

	if($(self.textarea).attr('name'))
		self.iframe.title = $(self.textarea).attr('name');

	var content	= $(self.textarea).val();

	$(self.textarea).hide().after(self.iframe).remove();
	self.textarea	= null;
	
	var css = '';
	
	for(var i in self.css)
		css += "<link type='text/css' rel='stylesheet' href='" + self.css[i] + "' />";

	var base = (self.base_url) ? "<base href='" + self.base_url + "' />" : '';
	var style = (self.css_class) ? "class='" + self.css_class + "'" : '';

	// Mozilla need this to display caret
	/*if($.trim(content) == '')
		content	= '<br>';*/

	var doc = "<html><head>" + base + css + "</head><body " + style + " style='padding:5px'>" + content + "</body></html>";

	self.iframe_doc	= self.iframe.contentWindow.document;

	try {
		self.iframe_doc.designMode = 'on';
	} catch ( e ) {
		// Will fail on Gecko if the editor is placed in an hidden container element
		// The design mode will be set ones the editor is focused
		$(self.iframe_doc).focus(function() { self.iframe_doc.designMode(); } );
	}

	self.iframe_doc.open();
	self.iframe_doc.write(doc);
	self.iframe_doc.close();

	if(!self.toolbars.rte)
		self.toolbars.rte	= self.create_toolbar(self.controls.rte);

	self.activate_toolbar(self.iframe, self.toolbars.rte);

	$(self.iframe).parents('form').submit( 
		function() { self.disable_design_mode(true); }
	);

	$(self.iframe_doc).mouseup(function(event) { 
		if(self.iframe_doc.selection)
			self.range = self.iframe_doc.selection.createRange();  //store to restore later(IE fix)

		self.set_selected_controls( (event.target) ? event.target : event.srcElement, self.controls.rte); 
	});

	$(self.iframe_doc).blur(function(event){ 
		if(self.iframe_doc.selection) 
			self.range = self.iframe_doc.selection.createRange(); // same fix for IE as above
	});

	$(self.iframe_doc).keyup(function(event) { self.set_selected_controls( self.get_selected_element(), self.controls.rte); $(self.iframe).trigger('iframe_keyup'); });

	// Mozilla CSS styling off
	if(!$.browser.msie)
		self.editor_cmd('styleWithCSS', false);
}
    
lwRTE.prototype.disable_design_mode = function(submit) {
	var self = this;

	self.textarea = (submit) ? $('<input type="hidden" />').get(0) : $('<textarea></textarea>').width('100%').height(self.height).get(0);

	if(self.iframe.className)
		self.textarea.className = self.iframe.className;

	if(self.iframe.id)
		self.textarea.id = self.iframe.id;
		
	if(self.iframe.title)
		self.textarea.name = self.iframe.title;
	
	$(self.textarea).val($('body', self.iframe_doc).html());
	$(self.iframe).before(self.textarea);

	if(!self.toolbars.html)
		self.toolbars.html	= self.create_toolbar(self.controls.html);

	if(submit != true) {
		$(self.iframe_doc).remove(); //fix 'permission denied' bug in IE7 (jquery cache)
		$(self.iframe).remove();
		self.iframe = self.iframe_doc = null;
		self.activate_toolbar(self.textarea, self.toolbars.html);
	}
}
    
lwRTE.prototype.toolbar_click = function(obj, control) {
	var fn = control.exec;
	var args = control.args || [];
	var is_select = (obj.tagName.toUpperCase() == 'SELECT');
	
	$('.rte-panel', this.get_toolbar()).remove();

	if(fn) {
		if(is_select)
			args.push(obj);

		try {
			fn.apply(this, args);
		} catch(e) {

		}
	} else if(this.iframe && control.command) {
		if(is_select) {
			args = obj.options[obj.selectedIndex].value;

			if(args.length <= 0)
				return;
		}

		this.editor_cmd(control.command, args);
	}
}
	
lwRTE.prototype.create_toolbar = function(controls) {
	var self = this;
	var tb = $("<div></div>").addClass('rte-toolbar').width('100%').append($("<ul></ul>")).append($("<div></div>").addClass('clear'));
	var obj, li;
	
	for (var key in controls){
		if(controls[key].separator) {
			li = $("<li></li>").addClass('separator');
		} else {
			if(controls[key].init) {
				try {
					controls[key].init.apply(controls[key], [this]);
				} catch(e) {
				}
			}
			
			if(controls[key].select) {
				obj = $(controls[key].select)
					.change( function(e) {
						self.event = e;
						self.toolbar_click(this, controls[this.className]); 
						return false;
					});
			} else {
				obj = $("<a href='#'></a>")
					.attr('title', (controls[key].hint) ? controls[key].hint : key)
					.attr('rel', key)
					.click( function(e) {
						self.event = e;
						self.toolbar_click(this, controls[this.rel]); 
						return false;
					})
			}

			li = $("<li></li>").append(obj.addClass(key));
		}

		$("ul",tb).append(li);
	}

	$('.enable', tb).click(function() {
		self.enable_design_mode();
		return false; 
	});

	$('.disable', tb).click(function() {
		self.disable_design_mode();
		return false; 
	});

	return tb.get(0);
}

lwRTE.prototype.create_panel = function(title, width) {
	var self = this;
	var tb = self.get_toolbar();

	if(!tb)
		return false;

	$('.rte-panel', tb).remove();
	var drag, event;
	var left = self.event.pageX;
	var top = self.event.pageY;
	
	var panel	= $('<div></div>').hide().addClass('rte-panel').css({left: left, top: top});
	$('<div></div>')
		.addClass('rte-panel-title')
		.html(title)
		.append($("<a class='close' href='#'>X</a>")
		.click( function() { panel.remove(); return false; }))
		.mousedown( function() { drag = true; return false; })
		.mouseup( function() { drag = false; return false; })
		.mousemove( 
			function(e) {
				if(drag && event) {
					left -= event.pageX - e.pageX;
					top -=  event.pageY - e.pageY;
					panel.css( {left: left, top: top} ); 
				}

				event = e;
				return false;
			} 
		)
		.appendTo(panel);

	if(width)
		panel.width(width);

	tb.append(panel);
	return panel;
}

lwRTE.prototype.get_content = function() {
	return (this.iframe) ? $('body', this.iframe_doc).html() : $(this.textarea).val();
}

lwRTE.prototype.set_content = function(content) {
	(this.iframe) ? $('body', this.iframe_doc).html(content) : $(this.textarea).val(content);
}

lwRTE.prototype.set_selected_controls = function(node, controls) {
	var toolbar = this.get_toolbar();

	if(!toolbar)
		return false;
		
	var key, i_node, obj, control, tag, i, value;

	try {
		for (key in controls) {
			control = controls[key];
			obj = $('.' + key, toolbar);

			obj.removeClass('active');

			if(!control.tags)
				continue;

			i_node = node;
			do {
				if(i_node.nodeType != 1)
					continue;

				tag	= i_node.nodeName.toLowerCase();
				if($.inArray(tag, control.tags) < 0 )
					continue;

				if(control.select) {
					obj = obj.get(0);
					if(obj.tagName.toUpperCase() == 'SELECT') {
						obj.selectedIndex = 0;

						for(i = 0; i < obj.options.length; i++) {
							value = obj.options[i].value;
							if(value && ((control.tag_cmp && control.tag_cmp(i_node, value)) || tag == value)) {
								obj.selectedIndex = i;
								break;
							}
						}
					}
				} else
					obj.addClass('active');
			}  while(i_node = i_node.parentNode)
		}
	} catch(e) {
	}
	
	return true;
}

lwRTE.prototype.get_selected_element = function () {
	var node, selection, range;
	var iframe_win	= this.iframe.contentWindow;
	
	if (iframe_win.getSelection) {
		try {
			selection = iframe_win.getSelection();
			range = selection.getRangeAt(0);
			node = range.commonAncestorContainer;
		} catch(e){
			return false;
		}
	} else {
		try {
			selection = iframe_win.document.selection;
			range = selection.createRange();
			node = range.parentElement();
		} catch (e) {
			return false;
		}
	}

	return node;
}

lwRTE.prototype.get_selection_range = function() {
	var rng	= null;
	var iframe_window = this.iframe.contentWindow;
	this.iframe.focus();
	
	if(iframe_window.getSelection) {
		rng = iframe_window.getSelection().getRangeAt(0);
		if($.browser.opera) { //v9.63 tested only
			var s = rng.startContainer;
			if(s.nodeType === Node.TEXT_NODE)
				rng.setStartBefore(s.parentNode);
		}
	} else {
		this.range.select(); //Restore selection, if IE lost focus.
		rng = this.iframe_doc.selection.createRange();
	}

	return rng;
}

lwRTE.prototype.get_selected_text = function() {
	var iframe_win = this.iframe.contentWindow;

	if(iframe_win.getSelection)	
		return iframe_win.getSelection().toString();

	this.range.select(); //Restore selection, if IE lost focus.
	return iframe_win.document.selection.createRange().text;
};

lwRTE.prototype.get_selected_html = function() {
	var html = null;
	var iframe_window = this.iframe.contentWindow;
	var rng	= this.get_selection_range();

	if(rng) {
		if(iframe_window.getSelection) {
			var e = document.createElement('div');
			e.appendChild(rng.cloneContents());
			html = e.innerHTML;		
		} else {
			html = rng.htmlText;
		}
	}

	return html;
};
	
lwRTE.prototype.selection_replace_with = function(html) {
	var rng	= this.get_selection_range();
	var iframe_window = this.iframe.contentWindow;

	if(!rng)
		return;
	
	this.editor_cmd('removeFormat'); // we must remove formating or we will get empty format tags!

	if(iframe_window.getSelection) {
		rng.deleteContents();
		rng.insertNode(rng.createContextualFragment(html));
		this.editor_cmd('delete');
	} else {
		this.editor_cmd('delete');
		rng.pasteHTML(html);
	}
}

js

1

Modified jquery.rte.js

/*
 * Lightweight RTE - jQuery Plugin, version 1.2
 * Copyright (c) 2009 Andrey Gayvoronsky - http://www.gayvoronsky.com
 */
jQuery.fn.rte = function(options, editors) {
	if(!editors || editors.constructor != Array)
		editors = Array();
		
	$(this).each(function(i) {
		var id = (this.id) ? this.id : editors.length;
		editors[id] = new lwRTE (this, options || {});
	});
	
	return editors;
}

var lwRTE_resizer = function(textarea) {
	this.drag = false;
	this.rte_zone = $(textarea).parents('.rte-zone');
}

lwRTE_resizer.mousedown = function(resizer, e) {
	resizer.drag = true;
	resizer.event = (typeof(e) == "undefined") ? window.event : e;
	resizer.rte_obj = $(".rte-resizer", resizer.rte_zone).prev().eq(0);
	$('body', document).css('cursor', 'se-resize');
	return false;
}

lwRTE_resizer.mouseup = function(resizer, e) {
	resizer.drag = false;
	$('body', document).css('cursor', 'auto');
	return false;
}

lwRTE_resizer.mousemove = function(resizer, e) {
	if(resizer.drag) {
		e = (typeof(e) == "undefined") ? window.event : e;
		var w = Math.max(1, resizer.rte_zone.width() + e.screenX - resizer.event.screenX);
		var h = Math.max(1, resizer.rte_obj.height() + e.screenY - resizer.event.screenY);
		resizer.rte_zone.width(w);
		resizer.rte_obj.height(h);
		resizer.event = e;
	}
	return false;
}

var lwRTE = function (textarea, options) {
	this.css		= [];
	this.css_class	= options.frame_class || '';
	this.base_url	= options.base_url || '';
	this.width		= options.width || $(textarea).width() || '100%';
	this.height		= options.height || $(textarea).height() || 350;
	this.iframe		= null;
	this.iframe_doc	= null;
	this.textarea	= null;
	this.event		= null;
	this.range		= null;
	this.toolbars	= {rte: '', html : ''};
	this.controls	= {rte: {disable: {hint: 'Source editor'}}, html: {enable: {hint: 'Visual editor'}}};

	$.extend(this.controls.rte, options.controls_rte || {});
	$.extend(this.controls.html, options.controls_html || {});
	$.extend(this.css, options.css || {});

	if(document.designMode || document.contentEditable) {
		$(textarea).wrap($('<div></div>').addClass('rte-zone').width(this.width));		
		$('<div class="rte-resizer"><a href="#"></a></div>').insertAfter(textarea);

		var resizer = new lwRTE_resizer(textarea);
		
		$(".rte-resizer a", $(textarea).parents('.rte-zone')).mousedown(function(e) {
			$(document).mousemove(function(e) {
				return lwRTE_resizer.mousemove(resizer, e);
			});

			$(document).mouseup(function(e) {
				return lwRTE_resizer.mouseup(resizer, e)
			});

			return lwRTE_resizer.mousedown(resizer, e);
		});

		this.textarea	= textarea;
		this.enable_design_mode();
	}
}

lwRTE.prototype.editor_cmd = function(command, args) {
	this.iframe.contentWindow.focus();
	try {
		this.iframe_doc.execCommand(command, false, args);
	} catch(e) {
	}
	this.iframe.contentWindow.focus();
}

lwRTE.prototype.get_toolbar = function() {
	var editor = (this.iframe) ? $(this.iframe) : $(this.textarea);
	return (editor.prev().hasClass('rte-toolbar')) ? editor.prev() : null;
}

lwRTE.prototype.activate_toolbar = function(editor, tb) {
	var old_tb = this.get_toolbar();

	if(old_tb)
		old_tb.remove();

	$(editor).before($(tb).clone(true));
}
	
lwRTE.prototype.enable_design_mode = function() {
	var self = this;

	// need to be created this way
	self.iframe	= document.createElement("iframe");
	self.iframe.frameBorder = 0;
	self.iframe.frameMargin = 0;
	self.iframe.framePadding = 0;
	self.iframe.width = '100%';
	self.iframe.height = self.height || '100%';
	self.iframe.src	= "javascript:void(0);";

	if($(self.textarea).attr('class'))
		self.iframe.className = $(self.textarea).attr('class');

	if($(self.textarea).attr('id'))
		self.iframe.id = $(self.textarea).attr('id');

	if($(self.textarea).attr('name'))
		self.iframe.title = $(self.textarea).attr('name');

	var content	= $(self.textarea).val();

	$(self.textarea).hide().after(self.iframe).remove();
	self.textarea	= null;
	
	var css = '';
	
	for(var i in self.css)
		css += "<link type='text/css' rel='stylesheet' href='" + self.css[i] + "' />";

	var base = (self.base_url) ? "<base href='" + self.base_url + "' />" : '';
	var style = (self.css_class) ? "class='" + self.css_class + "'" : '';

	// Mozilla need this to display caret
	/*if($.trim(content) == '')
		content	= '<br>';*/

	var doc = "<html><head>" + base + css + "</head><body " + style + " style='padding:5px'>" + content + "</body></html>";

	self.iframe_doc	= self.iframe.contentWindow.document;

	try {
		self.iframe_doc.designMode = 'on';
	} catch ( e ) {
		// Will fail on Gecko if the editor is placed in an hidden container element
		// The design mode will be set ones the editor is focused
		$(self.iframe_doc).focus(function() { self.iframe_doc.designMode(); } );
	}

	self.iframe_doc.open();
	self.iframe_doc.write(doc);
	self.iframe_doc.close();

	if(!self.toolbars.rte)
		self.toolbars.rte	= self.create_toolbar(self.controls.rte);

	self.activate_toolbar(self.iframe, self.toolbars.rte);

	$(self.iframe).parents('form').submit( 
		function() { self.disable_design_mode(true); }
	);

	$(self.iframe_doc).mouseup(function(event) { 
		if(self.iframe_doc.selection)
			self.range = self.iframe_doc.selection.createRange();  //store to restore later(IE fix)

		self.set_selected_controls( (event.target) ? event.target : event.srcElement, self.controls.rte); 
	});

	$(self.iframe_doc).blur(function(event){ 
		if(self.iframe_doc.selection) 
			self.range = self.iframe_doc.selection.createRange(); // same fix for IE as above
	});

	$(self.iframe_doc).keyup(function(event) { self.set_selected_controls( self.get_selected_element(), self.controls.rte); $(self.iframe).trigger('iframe_keyup'); });

	// Mozilla CSS styling off
	if(!$.browser.msie)
		self.editor_cmd('styleWithCSS', false);
}
    
lwRTE.prototype.disable_design_mode = function(submit) {
	var self = this;

	self.textarea = (submit) ? $('<input type="hidden" />').get(0) : $('<textarea></textarea>').width('100%').height(self.height).get(0);

	if(self.iframe.className)
		self.textarea.className = self.iframe.className;

	if(self.iframe.id)
		self.textarea.id = self.iframe.id;
		
	if(self.iframe.title)
		self.textarea.name = self.iframe.title;
	
	$(self.textarea).val($('body', self.iframe_doc).html());
	$(self.iframe).before(self.textarea);

	if(!self.toolbars.html)
		self.toolbars.html	= self.create_toolbar(self.controls.html);

	if(submit != true) {
		$(self.iframe_doc).remove(); //fix 'permission denied' bug in IE7 (jquery cache)
		$(self.iframe).remove();
		self.iframe = self.iframe_doc = null;
		self.activate_toolbar(self.textarea, self.toolbars.html);
	}
}
    
lwRTE.prototype.toolbar_click = function(obj, control) {
	var fn = control.exec;
	var args = control.args || [];
	var is_select = (obj.tagName.toUpperCase() == 'SELECT');
	
	$('.rte-panel', this.get_toolbar()).remove();

	if(fn) {
		if(is_select)
			args.push(obj);

		try {
			fn.apply(this, args);
		} catch(e) {

		}
	} else if(this.iframe && control.command) {
		if(is_select) {
			args = obj.options[obj.selectedIndex].value;

			if(args.length <= 0)
				return;
		}

		this.editor_cmd(control.command, args);
	}
}
	
lwRTE.prototype.create_toolbar = function(controls) {
	var self = this;
	var tb = $("<div></div>").addClass('rte-toolbar').width('100%').append($("<ul></ul>")).append($("<div></div>").addClass('clear'));
	var obj, li;
	
	for (var key in controls){
		if(controls[key].separator) {
			li = $("<li></li>").addClass('separator');
		} else {
			if(controls[key].init) {
				try {
					controls[key].init.apply(controls[key], [this]);
				} catch(e) {
				}
			}
			
			if(controls[key].select) {
				obj = $(controls[key].select)
					.change( function(e) {
						self.event = e;
						self.toolbar_click(this, controls[this.className]); 
						return false;
					});
			} else {
				obj = $("<a href='#'></a>")
					.attr('title', (controls[key].hint) ? controls[key].hint : key)
					.attr('rel', key)
					.click( function(e) {
						self.event = e;
						self.toolbar_click(this, controls[this.rel]); 
						return false;
					})
			}

			li = $("<li></li>").append(obj.addClass(key));
		}

		$("ul",tb).append(li);
	}

	$('.enable', tb).click(function() {
		self.enable_design_mode();
		return false; 
	});

	$('.disable', tb).click(function() {
		self.disable_design_mode();
		return false; 
	});

	return tb.get(0);
}

lwRTE.prototype.create_panel = function(title, width) {
	var self = this;
	var tb = self.get_toolbar();

	if(!tb)
		return false;

	$('.rte-panel', tb).remove();
	var drag, event;
	var left = self.event.pageX;
	var top = self.event.pageY;
	
	var panel	= $('<div></div>').hide().addClass('rte-panel').css({left: left, top: top});
	$('<div></div>')
		.addClass('rte-panel-title')
		.html(title)
		.append($("<a class='close' href='#'>X</a>")
		.click( function() { panel.remove(); return false; }))
		.mousedown( function() { drag = true; return false; })
		.mouseup( function() { drag = false; return false; })
		.mousemove( 
			function(e) {
				if(drag && event) {
					left -= event.pageX - e.pageX;
					top -=  event.pageY - e.pageY;
					panel.css( {left: left, top: top} ); 
				}

				event = e;
				return false;
			} 
		)
		.appendTo(panel);

	if(width)
		panel.width(width);

	tb.append(panel);
	return panel;
}

lwRTE.prototype.get_content = function() {
	return (this.iframe) ? $('body', this.iframe_doc).html() : $(this.textarea).val();
}

lwRTE.prototype.set_content = function(content) {
	(this.iframe) ? $('body', this.iframe_doc).html(content) : $(this.textarea).val(content);
}

lwRTE.prototype.set_selected_controls = function(node, controls) {
	var toolbar = this.get_toolbar();

	if(!toolbar)
		return false;
		
	var key, i_node, obj, control, tag, i, value;

	try {
		for (key in controls) {
			control = controls[key];
			obj = $('.' + key, toolbar);

			obj.removeClass('active');

			if(!control.tags)
				continue;

			i_node = node;
			do {
				if(i_node.nodeType != 1)
					continue;

				tag	= i_node.nodeName.toLowerCase();
				if($.inArray(tag, control.tags) < 0 )
					continue;

				if(control.select) {
					obj = obj.get(0);
					if(obj.tagName.toUpperCase() == 'SELECT') {
						obj.selectedIndex = 0;

						for(i = 0; i < obj.options.length; i++) {
							value = obj.options[i].value;
							if(value && ((control.tag_cmp && control.tag_cmp(i_node, value)) || tag == value)) {
								obj.selectedIndex = i;
								break;
							}
						}
					}
				} else
					obj.addClass('active');
			}  while(i_node = i_node.parentNode)
		}
	} catch(e) {
	}
	
	return true;
}

lwRTE.prototype.get_selected_element = function () {
	var node, selection, range;
	var iframe_win	= this.iframe.contentWindow;
	
	if (iframe_win.getSelection) {
		try {
			selection = iframe_win.getSelection();
			range = selection.getRangeAt(0);
			node = range.commonAncestorContainer;
		} catch(e){
			return false;
		}
	} else {
		try {
			selection = iframe_win.document.selection;
			range = selection.createRange();
			node = range.parentElement();
		} catch (e) {
			return false;
		}
	}

	return node;
}

lwRTE.prototype.get_selection_range = function() {
	var rng	= null;
	var iframe_window = this.iframe.contentWindow;
	this.iframe.focus();
	
	if(iframe_window.getSelection) {
		rng = iframe_window.getSelection().getRangeAt(0);
		if($.browser.opera) { //v9.63 tested only
			var s = rng.startContainer;
			if(s.nodeType === Node.TEXT_NODE)
				rng.setStartBefore(s.parentNode);
		}
	} else {
		this.range.select(); //Restore selection, if IE lost focus.
		rng = this.iframe_doc.selection.createRange();
	}

	return rng;
}

lwRTE.prototype.get_selected_text = function() {
	var iframe_win = this.iframe.contentWindow;

	if(iframe_win.getSelection)	
		return iframe_win.getSelection().toString();

	this.range.select(); //Restore selection, if IE lost focus.
	return iframe_win.document.selection.createRange().text;
};

lwRTE.prototype.get_selected_html = function() {
	var html = null;
	var iframe_window = this.iframe.contentWindow;
	var rng	= this.get_selection_range();

	if(rng) {
		if(iframe_window.getSelection) {
			var e = document.createElement('div');
			e.appendChild(rng.cloneContents());
			html = e.innerHTML;		
		} else {
			html = rng.htmlText;
		}
	}

	return html;
};
	
lwRTE.prototype.selection_replace_with = function(html) {
	var rng	= this.get_selection_range();
	var iframe_window = this.iframe.contentWindow;

	if(!rng)
		return;
	
	this.editor_cmd('removeFormat'); // we must remove formating or we will get empty format tags!

	if(iframe_window.getSelection) {
		rng.deleteContents();
		rng.insertNode(rng.createContextualFragment(html));
		this.editor_cmd('delete');
	} else {
		this.editor_cmd('delete');
		rng.pasteHTML(html);
	}
}

copy | embed

• jquery

jQuery('.menu li').html(function(i,h){
		return h.replace('&amp;', '<div class="reg">&amp;</div>');								 
});

js

1

Find and replace HTML string

jQuery('.menu li').html(function(i,h){
		return h.replace('&amp;', '<div class="reg">&amp;</div>');								 
});

copy | embed

• javscript, 
• jquery

/**
 * jquery.scrollstay.js
 * scrollFollow for minimalists.
 *
 * Derived from jquery.scrollFollow.js by R.A. Ray,
 * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/)
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 * 
 * Removed all animation, delay, cookies and killSwitch.
 * 
 * @author Dylan McCall
 *
 * @projectDescription	jQuery plugin that quietly keeps an element visible as the user scrolls
 * 
 * @version 0.4.0
 * 
 * @requires jquery.js (tested with 1.2.6)
 * 
 * @param offset			int - Number of pixels box should remain from top of viewport
 * 								default: 0
 * @param container	string - ID of the containing div
 * 								default: box's immediate parent
 * @param relativeTo	string - Scroll animation can be relative to either the 'top' or 'bottom' of the viewport
 * 								default: 'top'
 */

( function( $ ) {
	
	$.scrollStay = function ( box, options ) {
		// Convert box into a jQuery object
		box = $( box );
		
		// 'box' is the object to be animated
		var position = box.css( 'position' );
		
		function update() {
			// A bunch of values we need to determine where to animate to
			var viewportHeight = parseInt( $( window ).height() );
			var pageScroll =  parseInt( $( document ).scrollTop() );
			var parentTop =  parseInt( box.cont.offset().top );
			var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
			var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
			var aniTop;
			
			/* Make sure the user wants the animation to happen, and it
			   will be helpful. (It isn't helpful if the user is trying
			   to scroll within the box!) */
			if ( viewportHeight > boxHeight ) {
				// If the box should animate relative to the top of the window
				if ( options.relativeTo == 'top' ) {
					// Don't animate until the top of the window is close enough to the top of the box
					if ( box.initialOffsetTop >= ( pageScroll + options.offset ) ) {
						aniTop = box.initialTop;
					} else {
						aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );
					}
				}
				// If the box should animate relative to the bottom of the window
				else if ( options.relativeTo == 'bottom' ) {
					// Don't animate until the bottom of the window is close enough to the bottom of the box
					if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) ) {
						aniTop = box.initialTop;
					} else {
						aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );
					}
				}
				
				box.css({ top: aniTop });
			}
		};
		
		// If no parent ID was specified, and the immediate parent does not have an ID
		// options.container will be undefined. So we need to figure out the parent element.
		if ( options.container == '') {
			box.cont = box.parent();
		} else {
			box.cont = $( '#' + options.container );
		}
		
		// Finds the default positioning of the box.
		box.initialOffsetTop =  parseInt( box.offset().top );
		box.initialTop = parseInt( box.css( 'top' ) ) || 0;
		
		// Hack to fix different treatment of boxes positioned 'absolute' and 'relative'
		if ( box.css( 'position' ) == 'relative' ) {
			box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );
		} else {
			box.paddingAdjustment = 0;
		}
		
		// Animate the box when the page is scrolled
		$( window ).bind('scroll resize', function () {
			update();
		} );

		// Run an initial animation on page load
		update();
	};
	
	$.fn.scrollStay = function ( options ) {
		options = options || {};
		options.relativeTo = options.relativeTo || 'top';
		options.offset = options.offset || 0;
		options.container = options.container || this.parent().attr( 'id' );
		
		this.each( function() {
			new $.scrollStay( this, options );
		} );
		
		return this;
	};
})( jQuery );

js

1

jQuery scrollFollow for minimalists

/**
 * jquery.scrollstay.js
 * scrollFollow for minimalists.
 *
 * Derived from jquery.scrollFollow.js by R.A. Ray,
 * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/)
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 * 
 * Removed all animation, delay, cookies and killSwitch.
 * 
 * @author Dylan McCall
 *
 * @projectDescription	jQuery plugin that quietly keeps an element visible as the user scrolls
 * 
 * @version 0.4.0
 * 
 * @requires jquery.js (tested with 1.2.6)
 * 
 * @param offset			int - Number of pixels box should remain from top of viewport
 * 								default: 0
 * @param container	string - ID of the containing div
 * 								default: box's immediate parent
 * @param relativeTo	string - Scroll animation can be relative to either the 'top' or 'bottom' of the viewport
 * 								default: 'top'
 */

( function( $ ) {
	
	$.scrollStay = function ( box, options ) {
		// Convert box into a jQuery object
		box = $( box );
		
		// 'box' is the object to be animated
		var position = box.css( 'position' );
		
		function update() {
			// A bunch of values we need to determine where to animate to
			var viewportHeight = parseInt( $( window ).height() );
			var pageScroll =  parseInt( $( document ).scrollTop() );
			var parentTop =  parseInt( box.cont.offset().top );
			var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
			var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
			var aniTop;
			
			/* Make sure the user wants the animation to happen, and it
			   will be helpful. (It isn't helpful if the user is trying
			   to scroll within the box!) */
			if ( viewportHeight > boxHeight ) {
				// If the box should animate relative to the top of the window
				if ( options.relativeTo == 'top' ) {
					// Don't animate until the top of the window is close enough to the top of the box
					if ( box.initialOffsetTop >= ( pageScroll + options.offset ) ) {
						aniTop = box.initialTop;
					} else {
						aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );
					}
				}
				// If the box should animate relative to the bottom of the window
				else if ( options.relativeTo == 'bottom' ) {
					// Don't animate until the bottom of the window is close enough to the bottom of the box
					if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) ) {
						aniTop = box.initialTop;
					} else {
						aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );
					}
				}
				
				box.css({ top: aniTop });
			}
		};
		
		// If no parent ID was specified, and the immediate parent does not have an ID
		// options.container will be undefined. So we need to figure out the parent element.
		if ( options.container == '') {
			box.cont = box.parent();
		} else {
			box.cont = $( '#' + options.container );
		}
		
		// Finds the default positioning of the box.
		box.initialOffsetTop =  parseInt( box.offset().top );
		box.initialTop = parseInt( box.css( 'top' ) ) || 0;
		
		// Hack to fix different treatment of boxes positioned 'absolute' and 'relative'
		if ( box.css( 'position' ) == 'relative' ) {
			box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );
		} else {
			box.paddingAdjustment = 0;
		}
		
		// Animate the box when the page is scrolled
		$( window ).bind('scroll resize', function () {
			update();
		} );

		// Run an initial animation on page load
		update();
	};
	
	$.fn.scrollStay = function ( options ) {
		options = options || {};
		options.relativeTo = options.relativeTo || 'top';
		options.offset = options.offset || 0;
		options.container = options.container || this.parent().attr( 'id' );
		
		this.each( function() {
			new $.scrollStay( this, options );
		} );
		
		return this;
	};
})( jQuery );

copy | embed

• javascript, 
• jquery

 $("img").lazyload({
     placeholder : "img/grey.gif",       
     effect      : "fadeIn"
 });

js

1

lazyload script

 $("img").lazyload({
     placeholder : "img/grey.gif",       
     effect      : "fadeIn"
 });

copy | embed

• jquery, 
• lazyload