HTML5 Quickstart Template – Mobile Viewport, CSS3, Google Font, Latest jQuery – All Ready

Posted by & filed under HTML, Javascript, jQuery, Website Development.

Whenever I want to quickly make a webpage, I don’t want to have to build the whole page everytime. Here is my starter code for an HTML5 page. The key points are : HTML5 Doctype – Ready Viewport and Mobile – Ready Title tags, Character Set, Keyword and Description Meta, Favicon, Stylesheet tags – Ready… Read more »

Reset your form after submit using jQuery

Posted by & filed under Javascript, jQuery.

After you submit a form, you reset it with the following code: $(“form#myform”)[0].reset(); For example on my Magic8Ball website, I created a function to submit the form and reset it immediately, clearing out the input elements. var formData = $(“#form”).serializeArray(); $.ajax({ url : “speaktome.php”, type: “POST”, data : formData, success: function(result) { $(“.youranswer”).hide().html(” + result… Read more »

Change your cursor to waiting or in-progress with jQuery.

Posted by & filed under jQuery.

Found this great bit of code on SO. Basically, it changes your cursor to the progress or wait symbol whenever AJAX is started on your page. Nice for forms or submissions by the user. $(‘body’).ajaxStart(function() { $(this).css({‘cursor’:’wait’}) }).ajaxStop(function() { $(this).css({‘cursor’:’default’}) }); By the way here is a great page from w3schools on cursor types!

Ultra-easy image rollover solution with jQuery (no plug-ins needed)

Posted by & filed under jQuery.

Found a fantastic image rollover solution on StackOverflow recently, with this little piece of jQuery and no other plug-ins needed your rollovers works easily and seamlessly… HTML <img data-other-src=”big-zebra.jpg” src=”small-cat.jpg”> <img data-other-src=”huge-elephant.jpg” src=”white-mouse.jpg”> <img data-other-src=”friendly-bear.jpg” src=”penguin.jpg”> Javascript $(‘img’).on(‘mouseenter mouseleave’, function() { $(this).attr({ src: $(this).attr(‘data-other-src’), ‘data-other-src’: $(this).attr(‘src’) }) });