Learn how to use jQuery at the Blog

Logogala « visit

  • Added 11 months ago
  • 260 Lines of Code shown
  • 3 Links of Interest
http://logogala.com
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to Logogala - http://logogala.com

/* Navigation Subscribe Box Popup */

	$(function() {
	    var showit = function() {
		$('#rssInfo').slideDown("fast");
		return false;
		}
		
		var hideit = function() {
		$('#rssInfo').slideUp("fast");
		return false;
		}
		
		$('a#subscribeRollover').click(showit);
		$('a#subscribeActive').click(showit);
		$('#rssInfoRight a').click(hideit);
	});
	
	
	
	
/* Search Box Value Toggle */

	$(function() {
		$.fn.search = function() {
			return this.focus(function() {
				if( this.value == this.defaultValue ) {
					this.value = "";
				}
			}).blur(function() {
				if( !this.value.length ) {
					this.value = this.defaultValue;
				}
			});
		};
		$("#search").search();
	});
	
	
	
	
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.rel +"' alt='Preview' /></p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});


/*
 * Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};
// starting the script on page load
$(document).ready(function(){
	tooltip();
});




/* Magic Preview (Comment Form) */

$(function () {
	$('form#comment_form textarea').magicpreview('mp_');	
});



/* FileStyle */

$(function() {
	$("input[type=file]").filestyle({ 
	    image: "images/browse.gif",
	    imageheight : 22,
	    imagewidth : 77,
	    width : 150
	});
});




/* Form Validation */

jQuery.validator.addMethod("lettersonly", function(value, element) {
	return this.optional(element) || /^[a-z ]+$/i.test(value);
});

$(function() {
	$("#comment_form").validate({
	errorPlacement: function(error, element) {   
             error.insertBefore(element);  
         },
		rules: {
			name: {
				required: true,
				lettersonly: true
			},
			email: {
				required: true,
				email: true
			},
			comment: "required"
		},
		messages: {
			name: {
			  	required: "Please enter your name",
			  	lettersonly: "Letters only please"
			},
			email: {
			  	required: "Please enter your email",
			  	email: "Please enter a valid email address"
			},
			comment: "Please enter a comment"
		}
	});
	$("#submit").validate({
	errorPlacement: function(error, element) {   
             error.insertBefore(element);  
         },
		rules: {
			name: {
				required: true,
				lettersonly: true
			},

			email: {
				required: true,
				email: true
			},
			designer_name: {
				required: true,
				lettersonly: true
			},
			designer_url: {
				required: false,
				url: true
			},
			logo_url: {
				required: false,
				url: true
			}
		},
		messages: {
			name: {
			  	required: "Please enter your name",
			  	lettersonly: "Letters only please"
			},
			email: {
			  	required: "Please enter your email",
			  	email: "Please enter a valid email address"
			},
			designer_name: {
			  	required: "Please enter the designer's name",
			  	lettersonly: "Letters only please"
			}
		}
	});
	$("#contact").validate({
	errorPlacement: function(error, element) {   
             error.insertBefore(element);  
         },
		rules: {
			name: {
				required: true,
				lettersonly: true
			},
			email: {
				required: true,
				email: true
			},
			message: "required"
		},
		messages: {
			name: {
			  	required: "Please enter your name",
			  	lettersonly: "Letters only please"
			},
			email: {
			  	required: "Please enter your email",
			  	email: "Please enter a valid email address"
			},
			message: "Please enter a message."
		}
	});
});