techrageo.us » Javascript

jQuery For Firebug

bill — Thu, 06 Mar 2008 01:00:43 +0000

Load jQuery in a Firebug session.

When debugging or poking around in sites where jQuery is not already used, I had been pasting the following code into the multi-line FireBug console and hitting Run. This makes jQuery available for debugging, etc.

j=document.createElement("SCRIPT");
j.src="http://code.jquery.com/jquery-latest.pack.js";
document.getElementsByTagName("HEAD")[0].appendChild(j);

If you use Firebug, this is a handy way to make it even more powerful.

Make it a bookmarklet.

Of course, that whole process got old fast, so I created a bookmarklet to do the same thing, but save me from having to paste and run it in Firebug.

Drag this link: Load jQuery to your Firefox bookmark toolbar, then just click it to inject jQuery into a page.

The bookmarklet code:

javascript:void((function(){j=document.createElement("SCRIPT"); j.src="http://code.jquery.com/jquery-latest.pack.js"; document.getElementsByTagName("HEAD")[0].appendChild(j);})())

And nicely formatted:

javascript:void((function(){
  j=document.createElement("SCRIPT");
  j.src="http://code.jquery.com/jquery-latest.pack.js";
  document.getElementsByTagName("HEAD")[0].appendChild(j);
})())

Then in Firebug, you can use jQuery selectors and so forth to debug the page. Obviously you’ll have to re-inject each time the page (or a new page) is loaded.

Great, I’ve reinvented the wheel.

Of course, a bit of searching revealed that John Resig himself posted a bookmarklet called jQuerify–almost identical to this one–linked in this Ajaxian article.

The bookmarklet envelopes are different, but both do a simple script injection into the DOM.

Show Password Fields

bill — Wed, 21 Nov 2007 04:48:52 +0000

Update: had a case-sensitive bug in the code. Fixed now.

A simple Javascript bookmarklet shows password field values.

In form fields where a password is entered, it is usually obscured by asterisks or bullets to prevent someone from seeing what you type. This is a great feature but where a long password is being typed or a remembered password is filled in by the browser, you might want to actually see the actual password itself.

Show Password Bookmarklet

Here is a bookmarklet (a snippet of Javascript that can be pasted into the address bar of your web browser), that will show any passwords on a page that contain password form fields.

javascript: (function() { var s="",F=document.forms,j,f,i;for (j=0; j&lt;F.length; ++j) { f=F[j]; for (i=0; i&lt;f.length; ++i) { if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("Password fields:\n\n" + s); else alert("No password fields on this page."); } )();

Just paste the above javascript into the address bar of your browser and press Enter, or create a bookmarklet link with the javascript as the URL. On this page you’ll see the password for the mock sign on form below.

User Name:

Password:

This is nothing new.

This or similar javascript has been around for a while. This particular one was on raymond.cc (via etc.), but it needed to be fixed for some forms where fields have a null type property (an example is the sign on form for LinkedIn). The fix was adding f[i].type && to the if statement inside the inner for loop.

Formatted Javascript Code

If you’re interested in what is happening to make this work the formatted code is below.

Essentially, the variable F is set to the collection of forms on the page, which is looped through, examining every input field in each form testing if it’s of type “password.” If it is a “password” field, its value is appended to the string variable s. Once all the input fields in all the forms on the page have been sniffed, the string value is displayed in an alert.

javascript:
(function() {
  var s="", F=document.forms,j,f,i;
  for (j=0; j&lt;F.length; ++j) {
      f = F[j];
      for (i=0; i&lt;f.length; ++i) {
          if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n";
        }
    }
  if (s) alert("Password fields:\n\n" + s);
  else alert("No password fields on this page.");
}
)();

But Firefox already…

And yes, we know Firefox will show you passwords in the clear with Tools/Options/Security/Show Passwords.

This javascript, however, is easier to access if you have created a bookmarklet for it, plus it works in other browsers.

jQuery 1.2

bill — Thu, 04 Oct 2007 09:32:35 +0000

Major Updates To jQuery

John Resig and the jQuery team have been busy releasing jQuery 1.2 and a bugfix version 1.2.1.

jQuery Version 1.2

Version 1.2 is a major update to the popular Javascript library. Many new features were added and a few were removed, so updating existing code may be required to use the new release.

Features Removed

The jQuery team tries to keep the library as small as possible. Unfortunately that means some things have been deprecated or moved into plugins.

A backwards compatibility plugin is available to assist or delay any changes needed to use the new version.

Several XPath selector features were removed, including Descendant (ex. $(“div//p”) ), Child (ex. $(“div/p”) ), Parent (ex. $(“p/../div”) ), Contains Predicate (ex. $(“div[p]“) ), and Attribute (ex. $(“a[@href]“) ). It is recommended that instead of these selectors, the corresponding CSS or other selectors be used. Or use the XPath Compatibility Plugin.

The parametized clone() method (ex. $(“div”).clone(false) ) has been deprecated. .clone() is still supported, but instead of using the false argument, use .clone().empty() instead.

DOM Traversal methods .eq(), .lt(), .gt(), and .contains() have been deprecated in favor of using .slice() and .filter(). Note that 1.2.1 brings back .eq().

The Ajax methods .loadIfModifed() and .getIfModifed() are deprecated. You should use the $.ajax() method with the “ifModified:true” option instead. Also, $.ajaxTimeout is now deprecated in favor of $.ajaxSetup(). .evalScripts() has been removed as it is no longer necessary; all scripts in HTML strings are automatically evaluated when injected into the document.

Features Added

Now for the good stuff.

Besides the new XPath Compatibility Plugin mentioned above, the core now supports :has(selector), :header, and :animated.

New DOM traversal methods include .map(), .prevAll() and .nextAll(), .slice(), .hasClass(), .andSelf(), and .contents().

New DOM manipulation methods include .wrapInner() and .wrapAll(), .replaceWith() and .replaceAll(), and .clone(true) Event Cloning.

New .offset(), .height() and .width() CSS methods were added.

Ajax support was improved with support for partial .load(), Cross-Domain getScript(), JSONP, and disabling caching. Also .serialize() has been reworked.

New effects features support .stop(), % and em animations, color animations, relative animations, queue control, the :animated selector, and custom animation types with the step Function.

Namespaced Events and .triggerHandler() are also new.

jQuery.UI

jQuery now has its own UI, including draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordians, selectables, trees, and modals.

Well, it has a few bugs, but it really is nice. And, of course, they’re hard at work squashing the bugs as fast as possible.

jQuery Version 1.2.1

A bugfix release on September 16th fixes some bugs and adjusts the API in two places.

Due to overwhelming demand, .eq() has returned in version 1.2.1. Also, a problem with the relative animation API has been fixed.

Excellent Upgrade

This is a major step forward for jQuery. The loss of XPath and a few features in the core is a slightly bitter pill, but plugins help with this. The additional features are great, and the new UI library is welcome.

jQuery 1.1.4 Released

bill — Sat, 25 Aug 2007 18:37:01 +0000

John Resig and the jQuery team have released jQuery 1.1.4.

This release addresses bugs, improves performance, adds some functionality, and deprecates some functionality in anticipation of changes upcoming in jQuery version 1.2.

Both standard and packed .js files are available at code.jquery.com.

jQuery Bugfixes

This latest release addresses 53 problem tickets (including those fixed in the 1.1.3.1 emergency release), improving computed styles in Safari, HTML script evaluation, and Ajax settings issues.

jQuery Library Improvements

Besides bugfixes, you can now rename jQuery. This allows multiple instances of jQuery to be included, side-by-side. Further, it allows you to use jQuery within the namespace of another library, such as the Yahoo! UI toolkit.

The new release also includes speed improvements over version 1.1.3 in id and element selectors, and with each() operations.

jQuery New Features

jQuery version 1.1.4 introduces some new functionality as well.

.slice() allows you to grab a “slice” of a selector result vector, and operates like the Javascript array slice method.

:has() allows you to further qualify a selector, as in $(“a:has(img)”) to select all anchors that contain an image element.

Deep .extend() allows objects to be merged without overwriting internal objects.

Deprecations

In preparation for jQuery 1.2, some items are deprecated in version 1.1.4.

Some XPath selectors are being dropped. An XPath plugin is being introduced with 1.2, and in the meantime CSS selector formats must suffice. For example, instead of using the XPath child selector $(“div/p”), you now use the CSS selector $(“div > p”).

The parameterized .clone() method is now deprecated.

DOM traversal methods .eq(), .lt(), and .gt() are deprecated, replaced by the new .slice() method.

Ajax methods .loadIfmodified() and .getIfModified() are deprecated and replaced by the long form .ajax() method. .ajaxTimeout() is deprecated as the long-form .ajaxSetup() will suffice. .evalScripts() is no longer needed since all scripts are evaluated are now automatically evaluated upon injection.

jQuery Makes Ajax Easy, Part 1

bill — Fri, 03 Aug 2007 04:35:36 +0000

jQuery Ajax

jQuery, John Resig’s Javascript library, makes Ajax easy for beginners and professionals alike. This article dives into using the various jQuery Ajax methods.

Ajax Basics

Asynchronous JavaScript and XML, or Ajax, has become a catch-all term for client-initiated communications with a server. Specifically, Ajax usually refers to requests sent from a web browser to a server. It is even used to refer to non-XML communications, such as Asynchronous HTML and HTTP — AHAH. The rationale being that the first H in AHAH really means XHTML. I think someone just wanted another clever-sounding acronym; it really should be AJAH since it still uses Javascript. But I digress.

Simply put, Ajax allows you to execute a POST or GET request from the browser back to your server to fetch data, save data, execute a method, or what have you, without requiring a refresh of the web page.

jQuery Ajax Methods

jQuery provides several methods to assist with Ajax programming: load, get, post, and ajax.

load() takes a url, parameters, and a callback function. It executes a GET request of the URL and inserts the returned data into the DOM at a location you select. The parameters and callback function are optional. A typical usage would be something like $("address").load( url, {name:"John",id:"100"}, function(){ alert("Ajax call complete.");}).

get() takes a url, parameters, and a callback function. It executes a GET request of the URL and returns the XMLHttpRequest. The parameters and callback function are optional. A typical usage would be something like $.get( url, {name:"John",id:"100"}, function(data){ $("address").html( data ); alert("Ajax call complete.");}).

post() takes a url, parameters, and a callback function. It sends a POST request to the URL and returns the XMLHttpRequest. The parameters and callback function are optional. A typical usage would be something like $.post( url, {name:"John",id:"100"}, function(data){ $("address").html( data ); alert("Ajax call complete.");}).

ajax() takes a set of request properties specified in key-value pairs. It sends the specified request and returns the XMLHttpRequest. The ajax() method is complex but offers much more control over the request than any of the other methods. A typical usage would be something like $.ajax({ type:"GET", url:url, datatype:"html", data:{name:"John",id:"100"}, complete:function( data ) { $("address").html( data ); alert( "Ajax call complete.")}}).

Get Data From A URL

This example is taken from the jQuery Introduction posted here about a month ago. Technically, this is AJAH, since we’re not fetching XML, but the technique is the same.

We need a proxy to fetch data from another domain.

In the diagram below, you can see that the web page in your browser needs to fetch from the same domain from which it was loaded, in this case techrageo.us. From there it can go anywhere. In this example we’re fetching from Yahoo.com.

Ajax is usually limited to connections back to the same domain from which the web page was loaded. To fetch data from another domain, such as from the Yahoo quote server, we need to create a simple URL proxy. The PHP code is below. Basically it takes a URL, fetches it with curl, and returns the output.

Note: due to server restrictions, the curl_exec string below had to be tweaked to get it into this article. Just remove the spaces and you’re good to go.


// don't cache this page
header("Cache-Control: no-cache");
function geturl($url){
  $ch = curl_init();
  $timeout = 5;
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
  // make this curl_exec, no spaces
  $results = c u r l _ e x e c ($ch);
  curl_close($ch);
  return $results;
}
// get the specified url from the querystring
$theurl = $_GET["url"];
// decode it
$theurl = urldecode($theurl);
// decode forgets the ampersand
$theurl = str_replace( "&", "&", $theurl );
// fetch the url
$v = geturl( $theurl );
// spit out the results
echo $v;
?>

Enter a stock ticker symbol, such as IBM or SBUX, and click Submit. When you do the span with id=”lasttrade” is loaded with data returned from geturl.php?http://finance.yahoo.com/d/quotes.csv?f=l1&s=IBM (assuming you entered IBM).

Update: Yahoo has changed their quote URLs to something like this http://download.finance.yahoo.com/d/quotes.csv?f=l1&s=IBM

Last Trade:

We’re using .load() for this simple example.

The jQuery code is below. As you can see an anonymous function is attached to the submit handler of the form with an id of stockform. The function gets the value of the input field with an id of sym, then appends it to the URL of the Yahoo csv quote server with format specified to return the last trade price. That URL is then escaped and appended to geturl.php?url=, which is a simple PHP proxy that resides here at techrageo.us. The submit handler function then returns false to prevent the browser from trying to continue submitting the form.

// wait till the DOM is loaded
$(document).ready(function() {
  // attach a submit handler to the form
  $("form#stockform").submit(function(){
    // get the ticker symbol and build URL
    var sym = $("input#sym").val();
    var yurl = "http://download.finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
        //old: "http://finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
    var furl = "geturl.php";
    // load last trade price from Yahoo and
    // stick it in the #lasttrade span
    $("span#lasttrade").load( furl, {url:escape(yurl)} );
    return false;
  });
});

Now let’s modify the example to use $.get().

jQuery’s $.get() method can be used to send a GET request. For example, the example above can be written as follows.

// wait till the DOM is loaded
$(document).ready(function() {
  // attach a submit handler to the form
  $("form#stockform").submit(function(){
    // get the ticker symbol and build URL
    var sym = $("input#sym").val();
    var yurl = "http://download.finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
        //old: "http://finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
    var furl = "/code/geturl.php";
    $.get( furl,
      {url:escape(yurl)},
      function(data){
        $("span#lasttrade").html( data );
      });
    return false;
  });
});

Now let’s modify the example to use $.ajax() for more control.

jQuery’s $.ajax() method can also be used to send a GET request. For example, the example above can be written as follows.

// wait till the DOM is loaded
$(document).ready(function() {
  // attach a submit handler to the form
  $("form#stockform").submit(function(){
    // get the ticker symbol and build URL
    var sym = $("input#sym").val();
    var yurl = "http://download.finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
        //old: "http://finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
    var furl = "/code/geturl.php";
    $.ajax({
      url:furl,
      data:{ url:escape(yurl) },
      dataType:"html",
      success:function(data){ $("span#lasttrade").html( data );},
      error:function(xhr,err,e){ alert( "Error: " + err ); }
    }); // $.ajax()
    return false;
  }); // .submit()
});

In part 2 we’ll look at POST requests and other dataTypes.

jQuery Introduction

bill — Thu, 05 Jul 2007 10:32:58 +0000

Javascript Frameworks Abound

Do we really need another Javascript framework?

There’s the Dojo Toolkit. It’s mature and includes the kitchen sink. Then there’s Prototype. It’s wildly popular and several popular UI layers are built on top of it, including script.aculo.us, Rico, and others. Of course, you can’t leave out mootools. It’s UI library, moo.fx, can also sit on top of Prototype if you so desire. There’s Y!UI, the Yahoo! User Interface library. And we’ve got ExtJs, a robust interface framework that can leverage Y!UI, Prototype, or jQuery.

jQuery

Which brings us to… jQuery. Yep, it is yet another Javascript framework (YAJF). jQuery, though, is arguably the fastest and the most elegant of the lot. It supports CSS3, browser detection, method chaining, plugins, Ajax (gotta have that to be cool), flexible selectors, and basic UI effects. All in under 20K.

Simple July 4th jQuery Demo

Okay, so by way of introduction, here’s a simple little jQuery demonstration.

Click this link to turn this article red white and blue and get the lyrics to “God Bless America,” then click again to return to normal.

The code is below, and is doing this: to the anchor tag (“a”) with an id of “redwhiteblue”, toggle between two functions on each click event; the first function loops through all the paragraph elements within divs of class “entry” and assigns a css color style based on the index mod 3 (iteratively assign from an array of red, white, and blue); the second function simply assigns a css color style of black to all paragraphs within divs of class “entry”; both functions return false to short-circuit the link.

Update: The commented section below is replaced by the three lines that follow it, suggested by jQuery’s creator, John Resig (thanks, John). What I was doing with a clumsy for loop, iterating through each paragraph I selected with a cobbled-together XPath, is better done with the each method, applying a simple function along the selected vector. It goes to show just how slick the library really is.

  var rwb=Array("#f00","#aaa","#00f");
  $("a#redwhiteblue").toggle( function() {
    $("p.Godblessamerica").slideDown(300);
//    for(i=0;i<$("div#jqueryintro p").length;i++){
//      $("div#jqueryintro p:nth(" + i + ")").css({color:rwb[i % 3]});
//    } return false;
    $("div#jqueryintro p").each(function(i){
      $(this).css({color:rwb[i % 3]});
    }); return false;
  },
  function(){
    $("p.Godblessamerica").slideUp(300);
    $("div#jqueryintro p").css({color:"#000"});
    return false;
  });

More jQuery Demos

Here are a few other little demos I fiddled up along the way.

Toggle Red Demo

Click this link to toggle the following paragraph between black and red text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis adipiscing purus eu elit. Quisque feugiat malesuada lectus. Suspendisse potenti. Donec viverra, nisi et lobortis sollicitudin, erat quam condimentum sapien, at volutpat ipsum neque tristique lorem.

   $("a.togglered").toggle(function(){
     $("p.redtarget").css({color:"#AA0000"});
   },function(){
     $("p.redtarget").css({color:"#000"});
   });

Toggle Visibility

Okay click this link to reveal a DIV with some text. Then, click again to re-hide the text.

That’s a toggle tacked onto the DIV. Here’s the code to make that happen.

  $("a.intro").click( function() {
    $("div.introtarget").toggle(100);return false;
  });

Translated into English, that means “select A tags of class intro, then handle click events by executing a function that finds divs of class introtarget and attach a toggle of speed 100 to them; then return false.”

Get Stock Quote With Ajax

Of course, jQuery supports Ajax. Here’s a simple demo that calls a PHP file that merely takes the URL passed in, fetches it, then echos the results.

The jQuery Javascript code takes the output (in this case just a number), and sticks it into the lasttrade span.

Last Trade:

  $("form#stockform").submit(function(){
    var sym = $("input#sym").val();
    var yurl = "http://finance.yahoo.com/d/quotes.csv?" +
       "f=l1&s="+sym;
    var furl = "geturl.php?url=" + escape(yurl);
    $("span#lasttrade").load( furl );
    return false;
  });

Shortest jQuery Tutorial Ever

Hey! Learn jQuery now. Here’s what you do to get your feet wet with jQuery.

Start with a basic HTML file.

<html>
<body>
  <p>Here is <a href="#" id="clickme">a link</a>.</p>
  <p class="lorem">Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.</p>
  <p>This text is here to stay.</p>
  <p class="lorem">Phasellus luctus. Suspendisse nisi
  	neque, feugiat eget, ullamcorper at, feugiat ut,
  	tellus.</p>
</body>
</html>

Link in the jQuery library. You can do this by referencing the code at code.jquery.com or by downloading jquery.js and linking to it.
Below I’m linking to the packed version of jQuery 1.1.3.1 (the latest at the time of this update).
```
<head>
  <script type="text/javascript"
    src="http://code.jquery.com/jquery-1.1.3.1.pack.js"/>
</head>
```
Add the standard jQuery document ready state handler function. This is a pattern used for most jQuery work, wherein your jQuery code resides.
```
<script>
$(document).ready(function() {
  // your code here
});
script>
```
Flesh it out with some jQuery scripting. See above for examples; the code snippets in the examples can be dropped into the ready function, provided you add the proper elements to the HTML as well.
```
<script>
$(document).ready(function() {
  $("a#clickme").click( function() {
    $("p.lorem").toggle(100);return false;
  });
});
script>
```

Update and Wrapping Up

Since publishing this article I’ve made a few updates. First was to incorporate John Resig’s suggestion for the July 4th demo. Using each had crossed my mind but I was looking at it wrong and ended up patching an XPath together to get what I wanted.

The second update was to add some additional comments to the Shortest jQuery Tutorial Ever section.

And last, I incorporated today’s update to jQuery itself, now at version 1.1.3.1. Interestingly enough, though the tutorial had you link in version 1.1.3, I had been loading an older (pre-1.1.3) version on this site and was a little disappointed that the demos were a little sluggish. Linking to 1.1.3.1 provided a significant and very noticeable boost to performance. They said 1.1.3 was 800% faster than 1.1.2, and I mostly believed them — but come on, everyone claims they’re latest release of whatever is 800% faster. It’s like marketing boilerplate. I think they make rubber stamps that say that. But I can vouch that the latest release of jQuery is at least, technically speaking, a whole bunch faster.

Ajax Tutorials

bill — Thu, 04 May 2006 10:37:59 +0000

Another top-tutorial list. Top 20 Ajax Tutorials. Via digg.

Google Maps for WordPress – GooMaps

bill — Tue, 16 Aug 2005 15:13:12 +0000

Google Maps

Update (8 Mar 2009): Updated again to fix the constants broken by a change made by Google. Thanks to brian, who left a comment asking about the maps not working.

Update (30 Jan 2007): Updated again to make a link in the popup actually open a new window. Did this by embedding a javascript OnClick handler in the html attribute of the marker element in the xml file.

Update (6 Sept 2005): I’ve updated the XML file goomap1.xml again, this time to include a link around ‘IBM’. Note that the anchor tag must specify a target so the link doesn’t open inside the IFRAME, and of course angle-brackets must again be XML encoded.

Update (1 Sept 2005): I’ve updated the XML file goomap1.xml to include a break (
) between IBM and Dev in the info popup HTML. It must be XML encoded to obscure the angle-brackets from the XML parser.

Sites like MapQuest and MapBlast served our mapping needs first, but Google Maps started the second revolution in online mapping. Click and drag to pan in realtime. Zoom in and out just as quickly. Click a button to get satellite imagery instead of a map. Now they offer a hybrid mode with streets and labels overlaid on top of the satellite imagery. It’s all very cool.

Google Maps has a mapping API with which you can build and use your own maps, complete with custom markers, animation, popup information bubbles, and the works.

So to build maps you simply sign up for a Google Maps API Key, reference a Google-provided script in the HTML head element, and embed a div and some simple Javascript in your HTML, and you’re off to the races.

Google Maps and WordPress

Of course, it’d occasionally be nice to embed a custom Google Map in a WordPress post. Detailing recent travel, geo-tagged photos, whatever.

Problems Embedding Google Maps in WordPress Posts

The first problem that arises when trying to include a map within a WordPress post is this: complex inline Javascript is essentially rendered useless. But you can call a function. So we can offload the Javascript functionality to a file, reference it, then call the function to build the map.

However, a second problem shows up. Google Map API Keys are good for one directory on a server only, so the API key would only work for the root or wp-content, or another static location.

The Solution

The solution is four-fold

Move your Google Maps Javascript to a .js file, or simply download and use GooMaps.js.
Move the map data to an XML file. goomap1.xml
Call the Javascript function from a standalone HTML file. goomap1.html
Embed the HTML file in an IFRAME within your WordPress post.

Sorry. If you’re seeing this, your browser doesn’t support IFRAMEs. You should upgrade to a more current browser.
Simple as that. Mostly.

In the example to the right, a hybrid style map is centered around IBM in Austin, TX. Two custom icons and shadows are placed on the manufacturing plant on the West side of Burnet Rd. and the development buildings across the street.

This was created with an IFRAME tag embedded in this post, along with uploaded XML and HTML files, goomap1.xml and goomap1.html, to describe the map data and the IFRAME HTML, respectively. The IFRAME code also includes the Google Maps Javascript and some custom Javascript code.

Let’s get into those steps in more detail.

Step 1 — GooMaps.js – Google Maps Javascript File

You’re going to want to put code similar to the following in a Javascript file. Let’s call it GooMaps.js.

It supports the following features:

You can specify the center, the zoom, the map type (“Map”, “Satellite”, and “Hybrid”) and the base URL for icon files. Use the markers tag.
Include a list of markers, specifying the latitude, longitude, html caption, icon and shadow icon, and their sizes. Use the marker tag.

You can download and use this if you wish. No warrenties, use at your own risk, I’m not liable, an so on. Feel free to use it but I’d appreciate a back link.

// Function: createMarker
// Creates a GMarker at a given point with a given icon
//  Then adds a "click" event listener that pops up
//  some caption (HTML formatted)
// Modified from Google Maps API Reference
// Added support for specifying icons and html captions
function createMarker(point, icon, html) {
  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}
// Function: GooMapXml
// Reads an xml file, the name of which is specified
//  in an attribute of a span with the id mapinfo.
function GooMapXml(){
  // Find mapinfo span and get name attribute
  var mapinfo = document.getElementById('mapinfo').getAttribute('name');
  // Create GXmlHttp object to fetch XML document
  var request = GXmlHttp.create();
  // Open the connection to the XML file
  request.open("GET", mapinfo, true);
  // Describe a function to handle the completed request
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      // Get XML file contents
      var xmlDoc = request.responseXML;
      // Get markers element
      var markers = xmlDoc.getElementsByTagName("markers");
      // Get iconbase attribute
      iconbase = markers[0].getAttribute("iconbase");
      // Set default maptypes array
      maptypes = [G_SATELLITE_MAP,G_HYBRID_MAP];
      // If maptype attribute is present get it and set accordingly
      if( markers[0].getAttribute("maptype") != null ) {
        mt = markers[0].getAttribute("maptype").substring(0,3).toUpperCase();
        switch( mt ){
          case "SAT" :
            maptypes = [G_SATELLITE_MAP,G_HYBRID_MAP];
            break;
          case "HYB" :
            maptypes = [G_HYBRID_MAP,G_SATELLITE_MAP];
            break;
        }
      }
      // Get map div from HTML doc
      var map = new GMap(document.getElementById("map"),maptypes);
      // Add small google map controls
      map.addControl(new GSmallMapControl());
      // Add map type buttons
      map.addControl(new GMapTypeControl());
      // Create point for center (get x,y from attributes of markers element)
      var cpt = new GPoint(
                    parseFloat(markers[0].getAttribute("centerx")),
                    parseFloat(markers[0].getAttribute("centery")));
      // Center and zoom map (zoom specified in attribute of markers element)
      map.centerAndZoom(cpt, parseInt(markers[0].getAttribute("zoom")));
      // Get marker element vector
      var markerlist = xmlDoc.documentElement.getElementsByTagName("marker");
      // Loop through marker elements
      for (var i = 0; i &lt; markerlist.length; i++) {
        // Create points based on lat, lng attributes
        var point = new GPoint(
                        parseFloat(markerlist[i].getAttribute("lng")),
                        parseFloat(markerlist[i].getAttribute("lat")));
        // Create icon
        var icon = new GIcon();
        // Set image and shadow from iconbase and icon/iconsh attributes
        icon.image = iconbase + markerlist[i].getAttribute("icon");
        icon.shadow = iconbase + markerlist[i].getAttribute("iconsh")
        // Set icon and shadow sizes from attributes
        icon.iconSize = new GSize(
          parseInt(markerlist[i].getAttribute("iconszx")),
          parseInt(markerlist[i].getAttribute("iconszy")));
        icon.shadowSize = new GSize(
          parseInt(markerlist[i].getAttribute("iconshszx")),
          parseInt(markerlist[i].getAttribute("iconshszy")));
        // Set icon anchor
        icon.iconAnchor = new GPoint(1, 1);
        // Set icon window anchor
        icon.infoWindowAnchor = new GPoint(5, 1);
        // Call createMarker w/ point, icon and html from attribute
        var marker = createMarker( point, icon,
          markerlist[i].getAttribute("html") );
        // Add marker overlay to map
        map.addOverlay(marker);
      }
    }
  }
  // Send request to get XML file
  request.send(null);
}

Step 2 — XML Map Data

Next, build an XML file containing enough data to describe the map.

Update #1: I’ve updated this to include a break (
) between IBM and Dev in the info popup HTML. It must be XML encoded to obscure the angle-brackets from the XML parser.

Update #2: I’ve updated this to include an anchor around IBM in the info popup HTML.

Step 3 — HTML Google Map File

You need a file in a static location to embed the API functions provided by Google. Otherwise you’ll get a popup complaining that your API key is for a different URL. Make sure you replace [**your api key**] in the code below with your Google Maps API Key.

This HTML file is simply the contents of the IFRAME you’ll be embedding in your WordPress post.

 
    <script src="http://maps.google.com/maps?file=api&v=1&key=[**your api key**]" type="text/javascript"></script>
    <script src="http://techrageo.us/wp-content/GooMap.js"></script>
 
<script type="text/javascript"></script>

Step 4 — Embedding Google Map in Your WordPress Post

Finally, when you get to the point where you want to embed the map, simply include the following in your post.

Sorry. If you're seeing this, your browser doesn't support IFRAMEs.
You should upgrade to a more current browser.

Creating a Drag and Drop Schedule For Your Web Application

grant — Tue, 09 Aug 2005 19:14:29 +0000

If you are creating a web application and you need to have the ability to schedule resources (people, machines, Precious Moments figurines, etc) it can sometimes be a cumbersome task. With this drag and drop schedule you won’t have to worry about the end user making typos in an html form and causing more trouble for you later.

Let’s start off by putting the obvious header information along with some javascript variables that we will use later:

Test Schedule

The next thing our page needs is some style. We need a class for our floater objects, for consistancy. Most of this is just fluff, the ‘position’ is the only essential part.

When declaring the ‘body’ element we need to make sure that it runs the setCoords() function each time the mouse moves, so we will know where the pointer is if we are moving an floating object.

Next, we are going to create a nice background for our x and y axis.

Now let’s put some times along the top of the page on the x-axis. You’ll probably want generate these out of a database, but to show you how it is done we will just use static html.

8:00AM

9:00AM

10:00AM

11:00AM

12:00AM

1:00AM

2:00AM

3:00AM

4:00AM

We need to create the y-axis labels now. Again, you’ll probably generate these values from a database but for our example we’ll just use assume we are scheduling “work stations”.

Work Station 1

Work Station 2

Work Station 3

Work Station 4

Finally (at last!) we can create the actual floating objects. We are going to make these all a different color (and all pastel at that). These you would definitely want to generate from a database…else the purpose of this article is probably lost on you. Our object needs to run the setMover() function when it is clicked and it needs to run the unSetMover() function when that click is released (when it is ‘dropped’). If you are scheduling people you can even put a thumbnail image in these floaters so that the end user will really feel at home–pushing around his/her co-workers.

You’ll notice that the third floater does not restrict the movement at all, the user can move it up, down, left and right. This should give you an idea of how movements can be done.

Order 1991-01A
Shearer, Grant

Order 2491-01A
Dummy, Test

Order 1431-01A
Smith, Bob

Order 2236-09A
Springer, Jerry

Order 3507-00
Simpleton Sr, Gary

Order 3567-00
Simpleton Jr, Gary

Order 3337-00
Jingleheimer, Jerry

Order 5507-00
Simpleton Sr, Gary

Order 8456-00
Simpleton Jr, Gary

Order 4321-00
Jingleheimer, Jerry

The ending. The iframe and it’s contents are only needed if you plan on updating your database every time the user “drops” one of the floating objects.

See it in action
(To use the code, just click on “See it in action” and save the page from there)

Some of the css used in the code above does not work in all browsers. The opacity property, for instance, does not appear to work in Internet Explorer. YMMV.

del.icio.us Javascript Linkrolls

bill — Fri, 05 Aug 2005 20:40:33 +0000

del.icio.us now provides linkrolls via javascript.

All you have to do to use it is copy the following script to your editor (it’s all one line, so remove any line breaks):

Then adjust the querystring to your needs as follows

Modify “techrageo.us” to whoever’s del.icio.us links you want to monitor
Modify “tech” to filter by a certain tag, combine them with “+” as in “tech+diy”, or remove the “/tech” altogether to not filter by tags.
extended — include “extended” if you want to see the extended text for each link
tags — include “tags” if you want to see the tags for each link
count — include “count” if you want some number of links displayed besides the default (20, I believe)
title — include “title” if you want del.icio.us to add a title, or simply remove the title portion of the querystring
bullet — include “bullet” and set it to a character if you want a bullet displayed before each link
icon — include “icon” if you want the del.icio.us icon to appear, or remove it for no icon.
sort — include “sort=alpha” if you want the links to be sorted alphabetically. If the sort key is not included, the default is to list the links chronologically.
Drop the resulting script into your web code where you want the links to appear
del.icio.us delivers the link feed inline

Kind of snazzy.