Home

Javascript

Simple and Cool jQuery CAPTCHA Plugin - Real Person

Simply create a form as you normally would and include a text field to use for the real person verification. In this example, my field would have a class of "your-captcha".

<script type="text/javascript">
$(function() {
	$('input.your-captcha').realperson();
});
</script>

So after you have the front-end working, we need to verify that the code entered was correct. Use this:

Hide HTML Title Tooltip when hovering an Anchor (<a>) element

Great looking images and design can be thrown off when annoying title tag tooltips show when hovering links. Some people set empty title tags to resolve the problem but if you do that, you are hurting your SEO. So, why not throw in a few lines of jQuery and set when the link is hoverd, set the title to empty so there is no tooltip. When the link is no longer being hovered, throw the title back in there. The important part is that your markup will contain title tags for search bots.

Here is the code. Put it in your document.ready or page load event that you are using.

Resize Image and Maintain Aspect Ratio with jQuery

// IMAGE MANIPULATION and MAINTAIN ASPECT RATIO
function resizeImageWithAspectRatio(img) {
	var maxWidth = 250; // Max width for the image
	var maxHeight = 75;    // Max height for the image
	var ratio = 0;  // Used for aspect ratio
	var width = img.width();    // Current image width
	var height = img.height();  // Current image height
 
	// Check if the current width is larger than the max
	if(width > maxWidth){
		ratio = maxWidth / width;   // get ratio for scaling image
		img.css("width", maxWidth); // Set new width
		img.css("height", height * ratio);  // Scale h

jQuery animate() Example with Callback Function

Use a callback function to display a message once the animation is completed. This snippet will animate every

html element and then replace the html with the message when the #link-id element is clicked.

$("#link-id").click(function() {
    $("p.animate").animate(
            {"height": "100px", "width": "250px"},
            "slow", function(){
                $(this).html("Animation Completed");
            });
});

Vertically Align an Element with jQuery - Vertical Align an Anchor or Div

//align text vertically
var i = 1; // for debugging
$('div.view-home-colored-circles div.view-content ul li a').each(function(){
 
		var ah = $(this).height();
 
                // insert the element/id/class to center within
		var ph = $(this).parents('li').height();
 
		var mh = Math.ceil((ph-ah) / 2);
 
                // may choose to use margin-top - depends on your case
                $(this).css({'padding-top':mh});
 
                // for debugging
                console.log('a position: ' + i + 
					'a height: ' + ah + 
					'li height:' + ph +
					'p

Browser and Operating System (OS) Detection with Javascript

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.

Custom Dropdown Menu for Pretty GUIs

Pretty Dropdowns

A Javascript Playground - JsFiddle

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.

jsfiddle.net

setInterval() and clearInterval() Example

var t;
 
function show_uploaded_logo() {
   if($('div.form-item div.image-widget div.image-preview img').is('*'))
   {
      // use console.log to test that the function has stopped running
      //console.log('running');
      if(!$('img#step-1-preview-image').is('*'))
      {
            //code here
      }
      else
      {
           clearInterval(t);	
      }
 
   }   
}
 
t = setInterval(show_uploaded_logo,1000);

Use jQuery to hide a DIV when the user clicks outside of it

$('div#personalize-window').hover(function(){
     mouse_is_inside = true;
},
function()
{ 
     mouse_is_inside=false; 
});
 
 
$("body").mouseup(function(){
     if(! mouse_is_inside)  $('div#personalize-window').fadeOut('slow');
});

Syndicate content