.JavaScript

Below is a list of my JavaScript code samples.

Image Overlay (jQuery)

This is a simple couple of jQuery lines that takes image tags, which are links to videos, and overlays a little play icon on top. I’ve attached it to the window load event instead of the window ready event because with some browsers (Safari if I remember correctly) the image width isn’t available on the onready event, at least not on Windows. I used the original image tag’s width to position the icon in the lower right over the image as requested by the client.

The jQuery filter immediately following the window load line literally translates into:

Take all anchor tags which have ‘.swf’ in them but aren’t targeting ‘_blank’ (new window) and contain image tags. This icon is only to be displayed on videos which should play in-line using lightbox or similar.
Same as above but the link contains ‘youtube’ and ‘/v/’. The ‘/v/’ is the old embed code for YouTube links.

After selecting these specific anchor tags, the next line wraps them with a div with class playButtonWrap that I use, with the original image width, to include and position the play icon.

Show the code


<script>
//<!--
$(window).load(function () {
	$('a[href*=".swf"]:not([target="_blank"])>img,a[href*="youtube"][href*="/v/"]:not([target="_blank"])>img').each(function(){
		$(this).wrap('<div class="playButtonWrap" style="position:relative"></div>').parent().css({width:$(this).width()+'px',height:$(this).height()+'px',cursor:'hand'}).append('<img src="/includes/images/play.png" style="position:absolute;right:2px;bottom:2px;margin:0px"/>');
	});
});
//!-->
</script>

Example Image Slider (jQuery and plugins)

There is no end to JavaScript image sliders. Rather than using one which probably had a lot of bells and whistles that I wasn’t going to use (and may have taken me just as long to rewrite the client’s markup), I just created one from scratch. The snippet of code below uses jQuery and the preLoadImages plugin.

Show the code


<script type="text/javascript">
	//List the images in the slides var as an array
	slides = ['1.jpg','2.JPG','new.JPG'];
	//Preload the slides, original plugin found at: http://plugins.jquery.com/project/preloadImages
	$.preLoadImages(slides);

	var changeSlides = ({
		// Set some initial values
		interval: 8000,
		refreshSlides: true,
		slideNum: 0,
		do: function (event) {
			// Function to change slides either on interval or on click
			// sni = slide number indicator (clickable numbers to change slides manually)
			if (event) {
				event.preventDefault();
				if (event.originalEvent) this.refreshSlides = false;
				obj = event.target;
				if (intID) clearInterval(intID);
			}
			else {
				slideNum++;
				obj = '#sni_'+(this.slideNum+1);
				if ($(obj).length == 0) {obj = '#sni_1';slideNum = 0;}
			}
			$('#mainslide_2').children('a').attr('href',$(obj).attr('href'));
			pos = $(obj).attr('id').replace('sni_','')-1;
			$('#mainslide_2 img').css("display","none").attr('src',slides[pos]).fadeIn();
			$('.slidebar a').removeClass('selectedSlide');
			$(obj).addClass('selectedSlide');
			return false;
		},
		init: function () {
			$(function () {
				$('.slidebar a:eq(0)').addClass('selectedSlide');
				//Setup interval for changing slides
				intID = setInterval(function () {changeSlides.do();},changeSlides.interval);

				//Attach changeSlides function to click event for slide chooser numbers
				$('.slidebar a').click(function (event) {changeSlides.do(event);});
			});
		}
	});

	changeSlides.init();
</script>

SheetChanger

I built the stylesheet changer, over 6 years ago, primarily to cycle through a handful of stylesheets in order to give the user some freedom to customize the site environment easily. I also, from day to day, like to change things up a bit especially when working on the same site (like this portfolio) often.

The changer will ignore stylesheets that are inline (don’t have a href value) and by manipulating the sheetPattern you may filter out other linked sheets. To remember and load your last enabled stylesheet on page load you’ll want to add changeSheets(‘set’,”); to your onload event like I’ve done below. Also, I’ve added it on the double click event in the example so to use it otherwise you may want to remove that.

Below I’ve given the html, event and full function.

Show the code


<link rel="stylesheet" type="text/css" media="screen" href="/css/style2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />


<script>
onload=function () {changeSheets();}
document.ondblclick=function () {changeSheets();}

function changeSheets() {
  function jitter() { window.scrollTo(0,10); window.scrollTo(0,0); }
  //limit style sheets considered to this pattern,
  //default pattern: '/\/css\/[^.\/]+\.css/i' only considers sheets
  //with a href pointing to files in a directory called 'css'
  sheetPattern = /\/css\/[^.\/]+\.css/i;
  rsheets = new Array(); var rs=0;
  sheets = document.styleSheets;
  if(sheets){
    for (var i=0;i<sheets.length;i++) {
      //since there can be many different style sheets we build another array
      //with only the sheets we want to enable/disable or cycle through using this function
      if (sheets[i].href&&sheets[i].href.search(sheetPattern) != -1) rsheets[rs++] = sheets[i];
    }

    if (rsheets.length > 0) {
      var sheetCount = rsheets.length;
      if (typeof sheet != 'number'||sheet >= sheetCount-1) sheet=false;
      for (var i=0;i<sheetCount;i++) {
        if (typeof this.loaded == 'boolean') {
          if (rsheets[i].disabled == false) {
            rsheets[i].disabled = true;
            //if there is a sheet in the array one key higher, let's enable it
            //otherwise loop back to the first sheet
            if (sheetCount > i+1) sheetNumber = i+1;
            else sheetNumber = 0;
            //if a specific sheet has been selected let's enable that one
            if (sheet) sheetNumber = sheet;
            //if the selected sheet is the one we're on and it's disabled, enable it and quit
            if ((!sheet||sheetNumber == sheet)&&rsheets[sheetNumber].disabled == true) {
              rsheets[sheetNumber].disabled = false;
              setCookie("stylesheet",sheetNumber);
              location.reload();
              return;
            }
          }
        }
        if (typeof this.loaded == 'undefined') {
          //this action initializes the sheets we can play with (rsheets)
          //disables all sheets unless it's already been stored in a cookie
          if (getCookie("stylesheet")&&getCookie("stylesheet") == i) { rsheets[i].disabled = false; jitter();}
          else {rsheets[i].disabled = true;}
        }
      }
      this.loaded = true;
      //if cookies aren't enabled or we haven't set one yet, make sure a sheet is enabled.
      //pick the last one loaded into rsheets
      if (!getCookie("stylesheet")) { rsheets[sheetCount-1].disabled = false; setCookie("stylesheet",sheetCount-1); jitter();}
    }
  }
}
</script>

searchSuggest

The search suggest function that I built for my previous portfolio site is a quick demonstration of timers, stopping timers, objects, events and AJAX. It has one dependent function that’s called ‘findPos’ which I found on quirksmode – it’s a cross-browser function that finds and returns the position of an element.

Show the code


<div id="searchbox">
<form action="?s=search" method="get" name="search">
<input type="text" name="keywords" id="keywords">
</form>
<div id="keywordsuggestions" style="display:none;position:absolute;top:0px;left:0px;"></div>
</div>


<script>
var kwsug_url = 'http://jeaster.net/index.php?s=search&ajax=1&keywords=';

var kwsug_timer = "";
var kwsug_kw = "";

var searchSuggest = ({
setup: function () {
  df = document.forms; if (!df||!df.search) return;
  kwsug = document.getElementById("keywordsuggestions");
  kw = df.search.keywords;
  if (!kwsug||!kwsug.style) return;

  if (typeof kw.onkeyup != "function") {
    kw.onblur = function () {setTimeout("kwsug.style.display='none'",100);};
    kw.onkeyup = function () {searchSuggest.setup();};
    kw.onclick = function () {searchSuggest.setup();kwsug.style.display="";};
	}
	else {
    if (kw.value == '') {
      kwsug.style.display="none";
    }
    else {
      if (kwsug_kw != kw.value) {
        if (kwsug_timer != "") clearTimeout(kwsug_timer);
        kwsug_timer = setTimeout("searchSuggest.send('"+kw.value+"')",200);
        kwsug_kw = kw.value;
      }
    }
    return;
	}
},
send: function (str) {
  if (str.length >= 1) {
    var url = kwsug_url+encodeURI(str);
    if (window.location.protocol == 'https:') url = url.replace(/^http:/,'https:');
    xmlHttp=this.GetXmlHttpObject(this.stateChanged);
    if (!xmlHttp) return;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
  }
},
stateChanged: function () {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    kwsug.innerHTML="";
    kwsug.style.display="none";
    if (xmlHttp.responseText) {
      response = xmlHttp.responseText;
      if (response.search(/<keyword_suggest>/) != -1) {
        if (kw.value=='') return;
        response = response.replace(/<keyword_suggest>|<\/keyword_suggest>/,'');
        if (response.search(/href/) != -1) {
          kwsug.innerHTML=response
          kwpos = findPos(kw)
          kwsug.style.left = kwpos[0]+'px';
          kwsug.style.top = kwpos[1]+20+'px';
          kwsug.style.display="";
        }
        else {
          kwsug.innerHTML="";
          kwsug.style.display="none";
        }
      }
    }
  }
},
GetXmlHttpObject: function (handler) {
  var objXmlHttp=null;
  if (navigator.userAgent.indexOf("Opera")>=0) return false;
  if (navigator.userAgent.indexOf("MSIE")>=0) {
    var strName="Msxml2.XMLHTTP";
    if (navigator.appVersion.indexOf("MSIE 5.5")>=0) strName="Microsoft.XMLHTTP";
    try {
      objXmlHttp=new ActiveXObject(strName);
      objXmlHttp.onreadystatechange=handler;
      return objXmlHttp;
    }
    catch(e) {
      return false;
    }
  }
  if (navigator.userAgent.indexOf("Mozilla")>=0) {
    objXmlHttp=new XMLHttpRequest();
    objXmlHttp.onload=handler;
    objXmlHttp.onerror=handler;
    return objXmlHttp;
  }
  return false;
}
});

function findPos(obj) {var curleft = curtop = 0;if (obj.offsetParent) {do {curleft += obj.offsetLeft;curtop += obj.offsetTop;} while (obj = obj.offsetParent);return [curleft,curtop];}}
</script>