Tag Archive for plugin

Remove Encoded Spans From SlideDeck Title

jQuery('.slidedeck dt').each(function(){
	this.innerHTML = this.innerHTML.replace(/<(.*)>(.*)<(.*)>/,'$2'); 
});

source

jsCookies – my simple easy pure js javascript cookies function

//  create my jsCookies function
var jsCookies = {

	// this gets a cookie and returns the cookies value, if no cookies it returns blank ""
	get: function(c_name) {
		if (document.cookie.length > 0) {
			var c_start = document.cookie.indexOf(c_name + "=");
			if (c_start != -1) {
				c_start = c_start + c_name.length + 1;
				var c_end = document.cookie.indexOf(";", c_start);
				if (c_end == -1) {
					c_end = document.cookie.length;
				}
				return unescape(document.cookie.substring(c_start, c_end));
			}
		}
		return "";
	},

	// this sets a cookie with your given ("cookie name", "cookie value", "good for x days")
	set: function(c_name, value, expiredays) {
		var exdate = new Date();
		exdate.setDate(exdate.getDate() + expiredays);
		document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toUTCString());
	},

	// this checks to see if a cookie exists, then returns true or false
	check: function(c_name) {
		c_name = jsCookies.get(c_name);
		if (c_name != null && c_name != "") {
			return true;
		} else {
			return false;
		}
	}

};
// end my jsCookies function

// USAGE - get    ::   jsCookies.get("cookie_name_here");  [returns the value of the cookie]
// USAGE - set    ::   jsCookies.set("cookie_name", "cookie_value", 5 );  [give name, val and # of days til expiration]
// USAGE - check  ::   jsCookies.check("cookie_name_here");  [returns only true or false if the cookie exists or not]

source

Custom Select Box CSS Style Plugin: jQuery + CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">" >http://www.w3.org/1999/xhtml"></a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Style Select Boxes Using jQuery + CSS</title>
<script type="text/javascript" src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" >http://code.jquery.com/jquery-latest.min.js"></script></a> 
<script type="text/javascript">
(function($){
 $.fn.extend({
 
 	customStyle : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
	  
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));			
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				//selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
// Thanks to Juarez Filho & PaddyMurphy
			});
			
	  });
	  }
	}
 });
})(jQuery);


$(function(){

$('select').customStyle();

});
</script>

<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
span.customStyleSelectBox { font-size:11px; background-color: #f5f0de; color:#7c7c7c; padding:5px 7px; border:1px solid #e7dab0; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; }
span.customStyleSelectBox.changed { background-color: #f0dea4; }
.customStyleSelectBoxInner { background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right; }
</style>
</head>

<body>

<select class="styled">
<option>one</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>


</body>
</html>

source

Image Resize

{img}

attributes
src = image-filename.jpg
path = path to your image
width = width to resize to
height = height to resize to
alt = Alt text to be outputted
assign = resizes the image, and saves the path / name to the variable nominated

source

jQuery Plugin to Truncate text based on width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">" >http://www.w3.org/1999/xhtml"></a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Truncate by Width Plugin</title>
<script src="<a href="http://code.jquery.com/jquery-latest.min.js"" >http://code.jquery.com/jquery-latest.min.js"</a> type="text/javascript"></script>
<script type="text/javascript">

//////////////////////////// this part is the plugin, copy into a seperate document if you wish ////////////////////////////////
(function($){
 $.fn.extend({
 
 	widthTruncate: function(options) {
		var defaults = {
			width: 'auto',
			after: '...'
		};
		
	  var options = $.extend(defaults, options);
	  
	  return this.each(function() {
	  if(options.width=='auto'){ truncateWidth=$(this).width()-8; }else{ truncateWidth = options.width}
			 if($(this).width()>truncateWidth){		 
			 var smaller_text = $(this).text();
			 $(this).html('<span id="truncateWrapper" style="display:inline;">'+options.after+'</div>');
			 		i=1;
			         while ($('#truncateWrapper').width() < truncateWidth) {
						$('#truncateWrapper').html(smaller_text.substr(0, i) + options.after);
						i++;
					}
					$(this).html($('#truncateWrapper').html());
			}
		
	  });
	  
	}

 });
})(jQuery);
//////////////////////////// end plugin ////////////////////////////////

//////////////////////////// initiate the plugin ////////////////////////////////
$(document).ready(function(){
	$('.autoTruncate').widthTruncate(); //by default, it will truncate to its initial width
	$('.truncateMe').widthTruncate({width:400}); // you can override by passing in your own width
});
</script>

<style type="text/css">
	/*some example styling... you can remove this*/
	body{ font:22px Arial, Helvetica, sans-serif;}
	#myParagraphs{width:700px; padding:28px; background-color:#99CCFF; }
</style>
	
</head>

<body>
<div id="myParagraphs">

<p class="autoTruncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>

<p class="truncateMe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>

</div>

</body>
</html>

source

jQuery Default-text plugin

<script type="text/javascript">
(function($){
	var className="DefaultText";
	function DefaultText(target){
		if(target) {
			this.init(target);
			if(!this.target.data("init")) 
				this.target.data("init",[]);
			this.target.data("init").push(function(e){
				new DefaultText(e);
			});
		}
	}
	DefaultText.prototype.init=function(target){
		this.className=className;
		this.target=$(target).data(className,this);
		this.defaultText=""+this.target.attr("rel");
		if(this.isDefault()) 
			this.setDefault();
		else 
			this.setNormal();
		this.seed=Math.round(Math.random()*10000);
		this.target.addClass(className+this.seed)
		.closest("form").submit(function(){
			$("input:text",this).each(function(){
				if(typeof $(this).data(className)!="undefined" 
				&& $(this).data(className).isDefault()) 
					$(this).data(className)
					.clear();
			})
		})
	}
	DefaultText.prototype.setDefault=function(){
		this.target
		.css({color:"#AAA"})
		.val(this.defaultText);
	};
	DefaultText.prototype.setNormal=function(){
		this.target
		.css({color:"#000"});
	};
	DefaultText.prototype.clear=function(){
		if(this.target.attr("value")==this.target.attr("rel"))
			this.target
			.css({color:"#000"})
			.attr("value","")
	};
	DefaultText.prototype.isDefault=function(){
		return (this.target.attr("value")==this.target.attr("rel") 
			|| this.target.attr("value")=="")
	};
	DefaultText.prototype.live=function(){
		if (!this.goLive){
			$("."+className+this.seed)
			.live("click",function(){
				if(!$(this).data(className)) new DefaultText(this);
				$(this)
				.unbind("blur")
				.blur(function(){
					if($(this).data(className).isDefault()) 
						$(this).data(className)
						.setDefault();
					else 
						$(this).data(className)
						.setNormal();
				})
				.data(className)
				.clear();
			}).live("keydown",function(){
				if(!$(this).data(className)) new DefaultText(this);
				$(this)
				.unbind("blur")
				.blur(function(){
					if($(this).data(className).isDefault()) 
						$(this).data(className)
						.setDefault();
					else 
						$(this).data(className)
						.setNormal();
				})
				.data(className)
				.clear();
			});
			this.goLive=true;
		}
		return this
	};
	$.fn.addDefaultText=function(){
		this.each(function(){
			new DefaultText(this).live();
		});
		return this
	};
})(jQuery);
</script>

source

Simple Slideshow

$.fn.slideShow = function(timeOut) {
   var $elem = this;
   this.children(':gt(0)').hide();
   setInterval(function() {
    $elem.children().eq(0).fadeOut().next().fadeIn().end().appendTo($elem);
   }, timeOut || 3000);
  };

  $(function() {
   $('.fadein').slideShow();
  });

source

jQuery Crossfade Plugin

(function($) {

	$.fn.dfcrossfade = function(options) {

		//options, obviously
		var defaults = {
			speed: 800,
			pause: 3000
		},

		options = $.extend(defaults, options);

		this.each(function() {
			
			//grab this item and the list items (children)
			//this way, the children are cached and not your
			//not constantly selecting the items from the dom
			var $this = $(this),
				$children = $this.children("li");
			
			//set css styling for selected item and the children
			$this.css({
				'position' : 'relative',
				'list-style' : 'none',
			});
			
			$children.css({
				'position' : 'absolute',
				'left' : 0,
				'z-index' : 0
			});
			
			var $first = $children.eq(0), //grab first element (top item)
				$next, //initalize variable to hold the next item
				length = $children.length, //determine length of the array
				index = 0; //initialize an index variable
				
				//set z-index of the first item to 2, above all others
				//because all others are 0
				$first.css({ 'z-index' : 2 }); 
			
			//start yor timer
			var timer = window.setInterval(function() {
				
				//determine if your at the end of the array
				//if so, set index to the first item
				//otherwise, increment to the next index
				if (!$children.eq(index+1).length) { index = 0; }
				else { index++; }
	
				//grab the next item
				$next = $children.eq(index);
				
				//set z-index for the next item so that it is, one above all other elements
				//but one under the top item
				$next.css({ 'z-index': 1 });
				
				//fade the top item out, revealing the next item
				$first.fadeTo(options.speed, 0, function() {
					
					//then just set the z-index to the lower level
					//and fade it back in
					$first.css({ 'z-index' : 0 }).fadeTo(0,1);
					
					//set the next, now the top, item to the top level
					$next.css({ 'z-index' : 2 });
					
					//make the new top item, $first
					$first = $next;
				});
				
			}, options.pause);
			
		});

		return this;

	};

})(jQuery);

source

checks for selector on current page

// function as jquery plugin to test if selector is found on the current page
(function($){ $.fn.onpage = function() { return ($(this).length>0) ? true : false } })(jQuery);

source

GNU search plugin for Firefox

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>GNU</ShortName>
<Description>Search GNU.org</Description>
<InputEncoding>UTF-8</InputEncoding>
<Tags>gnu</Tags>
<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAADe0lEQVRIx+WTXUjTURjGnzP/f/yay+XXhsYMFKXcTHH8QzIVgyTLUohEImjqxUokAq/yI6gu8kYqFPMDo4z0okEQxEKtiR/o5gfJqDBiU0T8mM7ZZtL07WIMvWgag676XR3Oe3ie933OOYAPBgaGh6emiF686Ol5944IfqLV3r7d0ECUkZGbe/36PjpW69zcwgJRSYlGU1Pjv+FBCMKZM+Xlf9Dv6dHpensPNm5re/78zRui0tKKivr63fONje3tfX1EGk1l5YMHvnWqq+vqnjzZrYuGh0dHP30ievtWrx8c9G3c2/vxo9FINDJiNJrNwMbGzo5cDmi1tbU6HVFHR3e3wQDMzs7Pr6wAmZlnz1ZUECUnq9VXruwaZmScOJGcvKsryswUBJWKsdDQkJDgYODYMUEoKSHq6xsYMJmI9Pr+/rExoubm7u7paSAlJS0tOxvQaq9dy8sDwsLE4uBg4NKlgoKsLCAgQCJJSgJWVmw2ux2Qy2WyyEggJ+f8+Rs3iAyGoaGpqT0NeBepqUplYiJQWHju3OnTgNVqtS4sAGVlVVUNDUB6ulJ59CjgdLpcP38CLS1dXQYDwPMcxxjQ2dnR0d4OzMyYzSMjgEQSE5OSAgjCqVP5+UBgYGAgzwOjoxMTZvMfGtBqNZriYsZcLo/B/fuNjS9fAmFhUqlMBkRFHT4sFgMyWXR0eDjw+fP09NgYsLm5tbWzA9TV1dRUVwNut9u9vQ2sr6+uLi0BRUX5+WlpgF7/+vWjR4yNj3/48OwZY15fBh/Ex6enX71KVFBQWHj5MtDUdPfuxYuM6XTv33/5QjQ/v7i4vg6EhAQF8TywvLy66nQCk5Nms9UKhIcfOhQaCjx9eu9eURHz6SPyVbBYJia6uhjzGnv3OS4ggDFgaMho/PYNWFtzODY3AaUyKUkmAyQSz5tQq1UqheKgP7VPAr54+LC1dXCQiOc5TiTyTDw3B5hMJpPJBHCcZ39jw25fXAQslvHxvZH/dQK+WFqy2RwOgOd5nuOAO3du3szLA06eFAS1GpBKIyLkckAuVyiUyn+QgJfS0lu3Xr0i+vp1Zub7d8BuX162WIDtbbf71y/PFe43ud8JeImMjIgQiwGHw2abnQUUioQElQqQSmNiEhL+XsfvBh4/rq29cIGx2Nj4+OPHgR8/nE6XCzhyJC4uOtpf1f+R3+pKe58Lih1gAAAAAElFTkSuQmCC</Image>
<Url type="text/html" method="GET" template="http://www.google.com/search?q=site:www.gnu.org+info+{searchTerms}"/>
</OpenSearchDescription>

source