Archive for the 'JavaScript' Category

Mapping Ryan

Published
by
ethan
on March 10, 2010
in JavaScript, PHP and RSS
. 0 Comments

Recently my brother got a SPOT emergency beacon. One of the features is a non-emergency “check in” feature. He hits a button and it logs his location. Turns out, that log has an RSS feed. So I built an application to take the feed and put the items in a database. Then I build a page with a Google Map. The map pulls coordinates from the database and puts little markers on the map. Each marker is clickable, and a little balloon pops up that says “At such and such a date and time, I was at some address.” The markers are connected chronologically by lines. The most recent marker is a different color, and the map centers on that location.

Automatic Highslide

Published
by
ethan
on February 19, 2010
in JavaScript and jQuery
. 0 Comments

Assumes you are familiar with jQuery and Highslide…

// prep "a img" for highslide
$('a').each(function() {
  if ($(this).children('img').length > 0) {
    $(this).addClass('highslide');
    this.onclick = function() {	return hs.expand(this); }
  }
});

jQuery Logo Rotator/Slider

Published
by
ethan
on October 8, 2009
in JavaScript, Source and jQuery
. 0 Comments

For a client’s site, we had some partner logos in the lower left corner. Rather than let them take up a lot of space, we decided to have them rotate. Here’s the HTML.

<div id="partners">
	<a href="http://www.nationalgrid.com" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosNATGRID.gif" alt="National Grid" /></a>
	<br />
	<a href="http://www.nystar.state.ny.us/" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosNYSTAR.gif" alt="NYSTAR" /></a>
	<br />
	<a href="http://www.mep.nist.gov/" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosMEP.gif" alt="NIST/MEP" /></a>
	<br />
	<a href="http://www.nist.gov/" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosNIST.gif" alt="NIST/MEP" /></a>
	<br />
</div>

And here’s the jQuery.

var imageFader;
 
$(document).ready(function() {
  // get the images in the lower left going
  $('#partners').each(function() {
    $(this).children('br').hide();
 
    var speed = 1500;
    var pause = 5000;
    var next = 1;
    var counter = 0;
 
    // how many images are there?
    var max = $(this).children('a').length;
 
    $(this).children('a:gt(0)').hide();
 
    function fadeImages() {
      if (counter >= max) counter = 0;
      next = counter + 1;
      if (next >= max) next = 0;
 
      $("#partners").children('a:eq(' + counter.toString() + ')').slideUp(speed, function() {
        $("#partners").children('a:eq(' + next.toString() + ')').slideDown(speed);
      });
 
      counter++;
    } // end function fadeImages
 
    imageFader = setInterval(fadeImages, pause); 
  });
});

Javascript CheckAll/UncheckAll

Published
by
ethan
on November 12, 2008
in JavaScript and Source
. 0 Comments

For posterity:

function checkAll(fieldname, check) {
 
	check = typeof(check) != 'undefined' ? check : true;
 
	var fn_length = fieldname.length;
	var F = document.forms[0];
	for (var i = 0; i < F.elements.length; i++) {
		var element = F.elements[i];
		if (element.type == "checkbox") {
			var n = element.name;
			if (n.substr(0, fn_length) == fieldname) {
				var checkbox = document.getElementsByName(n);
				checkbox[0].checked = check;
			}
		}
	}
 
	return false;
}

And to use:

<a href="#" onclick="return checkAll('states');">Check All</a> |
<a href="#" onclick="return checkAll('states', false);">Uncheck All</a>

This assumes that your checkboxes are prepped for array structure in PHP. This means that you have a bunch of checkboxes with names like “states[1]” and “states[34]” …

ReviewAnything

Published
by
admin
on January 12, 2007
in AJAX, CSS, JavaScript, MySQL, PHP, ReviewAnything and Source
. 0 Comments

ReviewAnything was a short-lived project to set up a web application which would allow people to register user accounts and post quick reviews about anything. Users would tag reviews in any way they saw fit, be it “movies” or “downtempo.” It uses a lot of the same classes I use in other projects, which is what OOP is good for. It was also a place to experiment with AJAX, and I was able to get a type-ahead feature working for the tags. The entire thing is available here.

My First AJAX

Published
by
admin
on January 10, 2007
in AJAX, JavaScript and Source
. 0 Comments

I wrote my first bit of AJAX the other day and thought I’d post it here. We had an order form which allowed people to signup for the forums at the same time. Next to the “forum username” field I wanted a button to check if the username was available. Here’s the easy part:

<input type="button" onclick="checkUsername();" value="Check availability" />

And here’s the JavaScript that does the fancy bit:

var xmlhttp;
function checkUsername() {
    var br = navigator.appName;
    if (br == "Microsoft Internet Explorer") {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xmlhttp = new XMLHttpRequest();
    }
 
 
// these are the fields we use to check availability
    var un = document.forms[0].vtforums_username.value;
    var em = document.forms[0].x_Email.value;
    if ((em == "") || (un == "")) {
    } else {
        var params = "username=" + un + "&email=" + em;
 
        xmlhttp.onreadystatechange = triggered;
 
 
// this is a url, with parameters, to a php script
// the php does the actually checking and returns some text
        xmlhttp.open("GET", "vtf_username_avail.php?" + params);
 
        xmlhttp.send(null);
    }
}
 
function triggered() {
// this is where we display the text we got back from our php script
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
 
        document.getElementById("vtf_username_avail").innerHTML = xmlhttp.responseText;
    }
}

List Field Functions

Published
by
admin
on September 27, 2005
in JavaScript and Source
. 0 Comments

Previously I posted some LotusScript code to handle list fields in Lotus Notes/Domino. Here’s the JavaScript equivalent- because we wanted it to work on the web too. The form for adding an entry had this code…

function AddValue(field, v) {
// appends v to the list field f
	if (!opener.document.getElementById(field)) { return; }
	var newV = opener.document.getElementById(field).value;
 
	if (newV == "") {
		newV = v;
	} else {
		newV += "; " + v;
	}
	return newV;
} // end AddValue

The form to update/edit an entry had this code…

function UpdateValue(field, vindex, newvalue) {
// updates value at vindex with newvalue
 
	var newV = "";
	if (!opener.document.getElementById(field)) { return; }
	if (vindex < 0) { return; }
	var fSplit = opener.document.getElementById(field).value.split("; ")
	if (vindex > fSplit.length) { return; }
 
	for (j = 0; j < fSplit.length; j++) {
		if (j != vindex) {
 
			newV += fSplit[j] + "; ";
		} else {
			newV += newvalue + "; ";
		}
	}
 
	return newV.substring(0, newV.length - 2);
 
} // end UpdateValue

And the code to remove an entry went right on the form will all the list fields…

function RemoveValue(field, vindex) {
// removes the value at vindex
	var newV = "";
	if (!document.getElementById(field)) { return; }
	if (vindex < 0) { return; }
	var fSplit = document.getElementById(field).value.split("; ")
	if (vindex > fSplit.length) { return; }
 
	for (j = 0; j < fSplit.length; j++) {
 
		if (j != vindex) {
			newV += fSplit[j] + "; ";
		}
	}
 
	return newV.substring(0, newV.length - 2);
 
} // end RemoveValue

Here’s a bit of code to show you how I was using it. This will remove the selected entry from the third set of fields (Steps3, etc). An entry exists as a value in each of four fields.

var F = document.forms[0];
var selectedIndex = F.dispSteps3.selectedIndex;
 
if (selectedIndex < 0) {
	alert("Please select a task to remove");
	return false;
}
 
F.Steps3.value = RemoveValue("Steps3", selectedIndex);
F.WorkEffort3.value = RemoveValue("WorkEffort3", selectedIndex);
F.WorkEffortType3.value = RemoveValue("WorkEffortType3", selectedIndex);
F.Assignees3.value = RemoveValue("Assignees3", selectedIndex);
 
F.__Click.value = '$Refresh';
F.submit();