Tag Archive for jQ

jQuery dynamic loader – load jquery using pure js javascript if jQ is undefined or does not exist

// jQuery dynamic loader - load jQuery using pure javascript js
// if jQuery is undefined or does not exist, then load it

if ( !window.jQuery ) {
	var jqscript = document.createElement('script');
	jqscript.setAttribute("type", "text/javascript");
	jqscript.setAttribute("src", "<a href="http://code.jquery.com/jquery.min.js");" >http://code.jquery.com/jquery.min.js");</a>
	document.getElementsByTagName("head")[0].appendChild(jqscript);
};

source

javascript function within a function to repeat itself js jquery jq loop looping

// animation functions
		zlpFX = {
			show1: function() {
				$('div#mainBackground2').fadeOut(3000);
				$('div#transMoving').animate({
					paddingLeft: "180px",
					paddingTop: "20px"
				},
				4000).find('h3').fadeOut(2000);
				setTimeout("zlpFX.show2()", 14000);
			},
			show2: function() {
				$('div#mainBackground2').fadeIn(4000);
				$('div#transMoving').animate({
					paddingLeft: '220px',
					paddingTop: '75px'
				},
				4500).find('h3').fadeIn(6000);
				setTimeout("zlpFX.show1()", 14000);
			}
		};




		// now start the animation functions
		setTimeout("zlpFX.show1()", 11000);

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

js jQueryLoader – check if $ is undefined, then load jquery with pure javascript if needed

/* I used to use (!$) or ($ == undefined) but that doesn't work sucka! */

if (!window.jQuery) {
	var jqscript = document.createElement('script');
	jqscript.setAttribute("type", "text/javascript");
	jqscript.setAttribute("src", "<a href="http://code.jquery.com/jquery.min.js");" >http://code.jquery.com/jquery.min.js");</a>
	document.getElementsByTagName("head")[0].appendChild(jqscript);
};

source

IE6 Double Margin Bug / Duplicate Characters Bug Fix using jQuery

$('*').each(function() {
if ($(this).css('float') !== 'none') {
$(this).css('display', 'inline');
}
});

source

JQuery Slider

<!DOCTYPE html>
<html>
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
		<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">
			* { margin: 0; padding: 0; }
			
			body {
				background: #282828;
				font: 62.5%/1.2 Arial, Verdana, Sans-Serif;
				padding: 0 20px;
			}
			
			h1 { font-family: Georgia; font-style: italic; margin-bottom: 10px; }
			
			h2 {
				font-family: Georgia;
				font-style: italic;
				margin: 25px 0 5px 0;
			}
			
			p { font-size: 1.2em; }
			
			ul li { display: inline; }
			
			.wide {
				border-bottom: 1px #000 solid;
				width: 4000px;
			}
			
			.fleft { float: left; margin: 0 20px 0 0; }
			
			.cboth { clear: both; }
			
			#main {
				background: #fff;
				margin: 0 auto;
				padding: 30px;
				width: 1000px;
			}
		</style>
	</head>
	<body>
		<div id="main">			
			<h2>Gallery 2</h2>
			<ul class="gallery clearfix">
				<li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]" title="How is the description on that one? How is the description on that one? How is the description on that one? "><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="This is a pretty long title" /></a></li>
				<li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]" title="Description on a single line."><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/7.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/8.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/9.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/10.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/11.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/12.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/13.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
				<li><a href="images/fullscreen/14.jpg" rel="prettyPhoto[gallery itemtag="div" icontag="span" captiontag="p"2]" title="How is the description on that one? How is the description on that one? How is the description on that one?How is the description on that one? How is the description on that one? How is the description on that one? "><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
			</ul>
			<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				$("area[rel^='prettyPhoto']").prettyPhoto();
				
				$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',slideshow:3000, autoplay_slideshow: false});
				$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
		
				$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
					custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
					changepicturecallback: function(){ initialize(); }
				});

				$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
					custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
					changepicturecallback: function(){ _bsap.exec(); }
				});
			});
			</script>
	
	</div>
	</body>
</html>