Douglas on Web Applications

Loading JSON via jQuery

 
$(document).ready(function(){
  $('#id-to-be-clicked' .class-name').click(function(){
    $.getJSON('file-name.json', function(data){
      $('#id-to-insert-html').empty();
      $.each(data, function(entryIndex,entry){
        var html = '
<div class="entry">';
        html += '
<h2 class="main-title">' + entry['title'] + '</h3>
 
';
        html += ...(cont.);
        $('#id-to-insert-html').append(html);
      });
    });
  });
});

Text Resizing with jQuery

 
$(document).ready(function(){
    // reset size
    var defaultSize = $('html').css('font-size');
    $(".resetSize").click(function(){ //button or link class
        $('html').css('font-size', defaultSize);
    });
 
    // increase size
    $(".increaseSize").click(function(){ //button or link class
        var current = $('html').css('font-size');
        var currentSize = parseFloat(current, 10);
        var newSize = currentSize*1.2;
        $('html').css('font-size', newSize);
        return false;
    });
});
 

Multiple File Upload with jQuery

Source: Tutorials:Multiple_File_Upload_Magic

Javascript:

$(document).ready(function(){
    var fileMax = 3;
    $('#asdf').after('
<div id="files_list" style="border:1px solid  black;padding:5px;background:#fff;
font-size:x-small;"><strong>Files (maximum '+fileMax+'):</strong></div>
 
');
    $("input.upload").change(function(){
        doIt(this, fileMax);
   });
});	
 
function doIt(obj, fm) {
    if($('input.upload').size() &gt; fm) {alert('Max files is '+fm); obj.value='';return true;}
    $(obj).hide();
    $(obj).parent().prepend('
<input class="upload" name="fileX[]" type="file" />').find("input").change(function() {
doIt(this, fm)});
    var v = obj.value;
    if(v != '') {
        $("div#files_list").append('
<div>'+v+'
<input class="remove" type="button" value="Delete" /></div>
 
')
        .find("input").click(function(){
            $(this).parent().remove();
            $(obj).remove();
            return true;
        });
    }
};

HTML:
<h1>Multiple File Upload</h1>
<form action="test.php" method="post" enctype="multipart/form-data" name="asdf" id="asdf">
    <div id="mUpload">
        <input type="file" id="element_input" class="upload" name="fileX[]" /><br />
        <input type="button" name="Submit" value="Submit" id="send" />
    </div>
</form>

Add Javascript before closing BODY tag:

$('#send').click(function(){
   alert('Demonstration Only: file upload disabled');
});

Rounded Corners with Images using jQuery

Source: http://docs.jquery.com/Tutorials:Rounded_Corners

Javascript:

 
$(document).ready(function(){ $("div.roundbox") .wrap('
<div class="dialog">'+
'
<div class="bd">'+
'
<div class="c">'+
'
<div class="s">'+
'</div>
 
'+
'</div>
 
'+
'</div>
 
'+
'</div>
 
');
$('div.dialog').prepend('
<div class="hd">'+
'
<div class="c"></div>
 
'+
'</div>
 
')
.append('
<div class="ft">'+
'
<div class="c"></div>
 
'+
'</div>
 
');
});
 

HTML:

 
<div class="roundbox">
</div>
 

CSS:

 
body {
 font:normal 76% georgia,helvetica,verdana,tahoma,arial,"sans serif";
 background: #fff;
}
a { color: white; text-decoration: none;}
a:hover { border-bottom: 1px dashed #fff;}
.dialog {
 width:67%;
 margin:0px auto;
 min-width:20em;
 color:#fff;
}
 
.dialog .hd .c,
.dialog .ft .c {
 font-size:1px; /* ensure minimum height */
 height:13px;
}
 
.dialog .ft .c {
 height:14px;
}
 
.dialog .hd {
 background:transparent url(tl.gif) no-repeat 0px 0px;
}
 
.dialog .hd .c {
 background:transparent url(tr.gif) no-repeat right 0px;
}
 
.dialog .bd {
 background:transparent url(ml.gif) repeat-y 0px 0px;
}
 
.dialog .bd .c {
 background:transparent url(mr.gif) repeat-y right 0px;
}
 
.dialog .bd .c .s {
 margin:0px 8px 0px 4px;
 background:#000 url(ms.jpg) repeat-x 0px 0px;
 padding:1em;
}
 
.dialog .ft {
 background:transparent url(bl.gif) no-repeat 0px 0px;
}
 
.dialog .ft .c {
 background:transparent url(br.gif) no-repeat right 0px;
}
 
/* content-specific */
 
.dialog h1 {
 /* header */
 font-size:2em;
 margin:0px;
 padding:0px;
 margin-top:-0.6em;
}
 
.dialog p {
 margin:0.5em 0px 0px 0px;
 padding:0px;
 font:0.95em/1.5em arial,tahoma,"sans serif";
}
 
html>body .dialog pre {
 font-size:1.1em;
}
 

Inserting “Back to Top” Links with jQuery

When content forces multiple scrolls a common solution is add a "Back to Top" link. Since this is not typically considered semantic markup, jQuery can make easy work of it:

 
$(document).ready(function() {
    //inserts after ever paragraph
    $('<a href="#top">back to top</a>').insertAfter('div.class-name p');
    //alternatively, starts inserting only after 4th paragraph
    //$('<a href="#top">back to top</a>').insertAfter('div.class-name p :gt(3)');
    $('<a id="top" name="top"></a>').prependTo('body'); //add top top of page
}
 

Simple Centered Inline Div Popup

/*
    source: Brian Reindel
    The viewport object is mainly for the cross-browser mess
    that is unfortunately necessary to get a DIV to center.
 
    There is also an officially supported plugin called "Dimensions"
    that can manage some of this on your own projects. Check it out at:
    http://jquery.com/plugins/project/dimensions
*/
 
var viewport = {
    o: function() {
        if (self.innerHeight) {
	    this.pageYOffset = self.pageYOffset;
	    this.pageXOffset = self.pageXOffset;
	    this.innerHeight = self.innerHeight;
	    this.innerWidth = self.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            this.pageYOffset = document.documentElement.scrollTop;
            this.pageXOffset = document.documentElement.scrollLeft;
	    this.innerHeight = document.documentElement.clientHeight;
	    this.innerWidth = document.documentElement.clientWidth;
        } else if (document.body) {
	    this.pageYOffset = document.body.scrollTop;
	    this.pageXOffset = document.body.scrollLeft;
	    this.innerHeight = document.body.clientHeight;
	    this.innerWidth = document.body.clientWidth;
        }
        return this;
    },
	init: function(el) {
	    $(el).css("left",Math.round(viewport.o().innerWidth/2)
                   + viewport.o().pageXOffset - Math.round($(el).width()/2));
	    $(el).css("top",Math.round(viewport.o().innerHeight/2)
                   + viewport.o().pageYOffset - Math.round($(el).height()/2));
	}
    };
    $(".simple_popup_info").each(function(){
	$(this).css("display","none").siblings(".simple_popup").click(function(){
	    $(".simple_popup_div").remove();
	    var strSimple = "
<div class="simple_popup_div">
<div class="simple_popup_inner">";
	    strSimple += "
 
[ x ] <a href="#">Close</a>
 
";
	    strSimple += $(this).siblings(".simple_popup_info").html();
	    strSimple += "</div>
</div>
 
";
	    $("body").append(strSimple);
	    viewport.init(".simple_popup_div");
	    $(".simple_close").click(function(){
	        $(".simple_popup_div").remove();
		return false;
	    });
	    return false;
    });
});

Usage:

<a class="simple_popup" href="#">This Is a Link with More than Meets the Eye</a>
<span class="simple_popup_info">This is some additional information about this link.</span>

Limit Textarea with Countdown Using jQuery

//src Brian Reindel
var countdown = {
  init: function() {
    countdown.remaining = countdown.max - $(countdown.obj).val().length;
    if (countdown.remaining > countdown.max) {
      $(countdown.obj).val($(countdown.obj).val().substring(0,countdown.max));
    }
    $(countdown.obj).siblings(".remaining").html(countdown.remaining + " characters remaining.");
  },
    max: null,
    remaining: null,
    obj: null
};
$(".countdown").each(function() {
    $(this).focus(function() {
        var c = $(this).attr("class");
        countdown.max = parseInt(c.match(/limit_[0-9]{1,}_/)[0].match(/[0-9]{1,}/)[0]);
        countdown.obj = this;
        iCount = setInterval(countdown.init,1000);
    }).blur(function() {
        countdown.init();
        clearInterval(iCount);
    });
});

Usage:

<form action="" name="">
    <p>
    <textarea rows="3" class="countdown limit_100_"></textarea>
    <br />
    <span class="remaining"><!-- --></span>
    </p>
    <p>
    <textarea rows="3" class="countdown limit_75_"></textarea>
    <br />
    <span class="remaining"><!-- --></span>
    </p>
</form>

Pre-Populate Form Fields with jQuery

defaultValues = [];
$(".elements_by_class").each(function(i){ //act on array
    defaultValues[i] = $(this).val();
    $(this).focus(function(){
        if ($(this).val() == defaultValues[i]) {
            $(this).val("");
        }
    }).blur(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(defaultValues[i]);
        }
    });
});

Using Prototype with jQuery

In theory jQuery plays nice with other libraries as its library, most plugins and "global" objects are stored inside the jQuery namespace. However, both Prototype and jQuery utilize the "$" as a shortcut. jQuery provides an easy workaround. Once the libraries have been loaded, at any time you can call:

 
//tells jQuery to ignore "$" and look for "jQuery" prefix
jQuery.noConflict();
 
//alternative, you can create your own shortcut
var q = jQuery.noConflict(); //assign to variable to create new shorthand
//example usage
q("div p").hide();
 

Why Use jQuery

Good article on the benefits of using jQuery in place of standard JavaScript:
http://www.ibm.com/developerworks/library/x-ajaxjquery.html