JavaScript | Michael Hartmayer

Archive for the ‘JavaScript’ Category

Loading JavaScript Better :) July 20th, 2010

Michael Hartmayer

After watching some very stimulating google tech talks on YouTube, I walked away with some new insight on how browsers load content. The following is a technique I picked up that allows for all included javascripts to load in parallel (instead of sequentially), and to prioritize the loading of your visible page content first.

The following code is placed before the closing body tag (and not in the head, as is traditionally done).

<script type="text/javascript"> 
	var DocumentHead = document.getElementsByTagName('head')[0];
 
	function jsOptimizedLoader(src) {
		var Script = document.createElement('script');
			Script.src = src;
			Script.type = 'text/javascript';
			DocumentHead.appendChild(Script);
	}
 
	jsOptimizedLoader('js/app/foo.js');
	jsOptimizedLoader('js/app/bar.js');
	jsOptimizedLoader('js/app/boo.js');
	jsOptimizedLoader('js/app/far.js');
</script>

Once your DOM has finished loading, all the scripts tags are added to the head via javascript. Allowing your page to display PRIOR to spending the time loading all of those scripts will win you usability points and ease of access points with your audience.

Share and Enjoy:

No Comments »

IE6 / IE7 jQuery Fix: Anchor Image Clickable Area September 25th, 2009

Michael Hartmayer

IE6 and IE7 both experience a problem in which images inside of block elements inside of anchors lose their click ability. Here’s an example:

<a href="rss-icon.png">
	<span style="display:block; width:100px; height:100px;">
		<img src="someImage.png" />
	</span>
</a>

Every area of the link remains click-able except for the surface consumed by someImage.png. (Note, this problem will not show in IE8, or FF)

Here’s a very small jQuery plugin I wrote to fix this particular issue.

(function($){
	$.fn.fixClick = function() {
		return this.each(function(){
			$(this)
				.css({cursor:'pointer'})
				.click(function(){
					window.location.href = $(this).attr('href'); 
				});
		});
	}
})(jQuery);

Simply select your target element(s) and use this plugin to make the entire anchor click-able again. Here’s an example:

$(document).ready(function(){
   $('a').fixClick();
});

Share and Enjoy:

4 Comments »

Alternating Styles in jQuery (Plug-In) July 16th, 2009

Michael Hartmayer

This is a little script that I wrote, that lets you easily alternate the style of repeating class elements, or w/e elements you want to select. This is particularly useful for lists, and the like.

function($){
$.fn.styleAlternation = function(aClass, bClass) {
    var i = 0;
    return this.each(function() {
        if (++i % 2 != 0 && aClass!='') {
            $(this).addClass(aClass);
        } else if(bClass!='') {
            $(this).addClass(bClass);
        }
    });
}(jQuery);

The usage is very simple. Here’s the JavaScript:

$("#awesomeTable tr").styleAlternation("cssClass1","cssClass2");

From there, all you need to do is create your CSS. Example:

.cssClass1 { background: #000; color: #444; }
.cssClass2 { background: #999; color: #333; }

Here’s a screenshot:

Share and Enjoy:

No Comments »

AJAX Calendar Loader Using jQuery July 15th, 2009

Michael Hartmayer

My good pal Austin needed help turning his static calendar into one that could change the month, using AJAX. The calendar itself was written in PHP. Here is the quick and easy solution I came up with for him, using jQuery:

$(document).ready(function() {
 
   // Create Date Object
   var jsDateObject = new Date();
 
   // Create Calendar Object ( Holds all your variables, etc )
   var jsCalendar = {};
       jsCalendar.currentMonth = jsDateObject.getMonth();
 
   // Controls the NEXT button
   $("#jsCalendarNext").click(function() {
      // Update Active Month
      jsCalendar.currentMonth++;
         if(jsCalendar.currentMonth>12) { jsCalendar.currentMonth=1; }
 
      // Get New Calendar
      ajaxUpdateCalendar();
   });
 
   // Controls the PREV button
   $("#jsCalendarPrev").click(function() {
      // Update Active Month
      jsCalendar.currentMonth--;
         if(jsCalendar.currentMonth<1) { jsCalendar.currentMonth=12; }
 
      // Get New Calendar
      ajaxUpdateCalendar();
   });
 
   // Use AJAX to update the Calendar
   function ajaxUpdateCalendar() {
      $.post(
         "phpCalendarLoader.php",
         { calendarMonth: jsCalendar.currentMonth },
         function(data) {
            $("#jsCalendarContainer").html(data);
         },
         "html"
      );
   }
 
});

From here, all Austin had to do was set his $month variable to $_POST['calendarMonth'];.

Share and Enjoy:

No Comments »

Michael Hartmayer – Portfolio

Archive for the ‘JavaScript’ Category

Loading JavaScript Better :) July 20th, 2010

IE6 / IE7 jQuery Fix: Anchor Image Clickable Area September 25th, 2009

Alternating Styles in jQuery (Plug-In) July 16th, 2009

AJAX Calendar Loader Using jQuery July 15th, 2009

Categories

Archives