Another Layout Demo

By Sam | Published: August 16, 2010

Clicking on a random word will fire an event and color one of the little boxes.

The main concept here is that javascript can load different layers of an image, where there is a background layer, and then layers with a lot of transparency and only a small content change. This layout is pretty terrible, but I hope to use the technique in a more finished project at some point.

Posted in Art And Design | Leave a comment

Event Bubbling In JavaScript / JQuery

By Sam | Published: August 14, 2010

Lynda.com has a great series of tutorials on JavaScript, here. One of the exercises was an event bubbling demo, written in JavaScript. It illustrates how events on a DOM element, bubble-up to the parent elements. I have re-written it below in JQuery.

Click in ‘div 3′ to see the event propogate. 

 function getEventTarget(e) {
            if (window.event != null) return window.event.srcElement;
            else return e.target;
        }
        function doEventb(e) {
            var target = getEventTarget(e);
            alert("body target:" + target.getAttribute('id') + " type: " + e.type);
        }
        function doEvent1(e) {
            var target = getEventTarget(e);
            alert("div1 target: " + target.getAttribute('id') + " type: " + e.type);
        }
        function doEvent2(e) {
            var target = getEventTarget(e);
            alert("div2 target: " + target.getAttribute('id') + " type: " + e.type);
        }
        function doEvent3(e) {
            var target = getEventTarget(e);
            alert("div3 target: " + target.getAttribute('id') + " type: " + e.type);
        }
 
        $(function () {
            $("body").bind("click",doEventb);
            $("#div1").bind("click", doEvent1);
            $("#div2").bind("click", doEvent2);
            $("#div3").bind("click", doEvent3);
        });
Posted in Software Development | Tagged , , , | Leave a comment

From AJAJ to AJAX

By Sam | Published: August 10, 2010

I’ve been writing a fair amount of asynchronous client side stuff lately — you click a button and something happens on the page based on a server response, without the page reloading. Up until recently, I had been shipping back and forth JavaScript Object Notation objects as the data, but the other day I wrote something that actually uses XML (the X in AJAX) as the interchange format.

So lets say you have a server side script that returns something like:

   <?xml version="1.0">
         <motorcycle>
            <model>F800ST</model>
            <mfg>BMW</mfg>
            <cyl>2</cyl>
          </motorcycle>
         <motorcycle>
            <model>G650GS</model>
            <mfg>BMW</mfg>
            <cyl>1</cyl>
          </motorcycle>
         <motorcycle>
            <model>S1000RR</model>
            <mfg>BMW</mfg>
            <cyl>2</cyl>
          </motorcycle>
      </xml>

You can use this output directly in an AJAX event, where you go out to the server, ask for some info, get the xml back, and then walk over that xml loading stuff into your DOM.

Here’s an example

// add an event handler to the button
$("#theButton").one('click', function() {
  $.ajax({  // this will call jqueries ajax function
    type: "GET",
    url: "http://samhalperin.com/cgi-bin/the_script.pm",
    datatype: "xml",
    success: function(xml) {
       var theUL = $("<ul></ul>"); //create an empty ul
       $(xml).find('motorcycle').each(function() {  // parse the xml looking for motorcycles
          var model = $(this).children("model:first").text();
          var mfg = $(this).children("mfg:first").text();
          var cyl = $(this).children("cyl:first").text();
          // do stuff with this data 
          $("<li></li>").html("model: " + model).appendTo(theUL);  //add a list item to the list
         //...etc
      }
   }
   // and finally attach your new element to the DOM
     theUL.appendTo($("#results"));  // attach the UL to the document at the element with ID results
}

There are some advantages to using this method over the equivalent JSON string. First, your code might already return XML. If so, you can just return it from your CGI and work with the data as is. Second, the data might be easier to work with in terms of being human readable. And lastly, you can use DOM manipulations and selectors to work with the data.

caveat emptor: I wrote the above code from memory and didn’t debug it, so use it for the concepts, but go to http://api.jquery.com/category/ajax/ for actual paste-able code.

Posted in Uncategorized | Leave a comment

How To Use jqzoom

By Sam | Published: August 1, 2010

(You might have to put IE8 into compatibility mode to see the graphic above. I'm working on this...)

Here's the code: 

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="jqzoom.css" /> 
   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.jqzoom1.0.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {    
          var options =
              {
                  zoomWidth: 120,
                  zoomHeight: 120
              };
              $(".jqzoom").jqzoom(options);
        });
    </script>
  </head>
  <body>
    <!-- see http://www.mind-projects.it/projects/jqzoom -->
    <a href="red_noise_mosaic_big.jpg" class="jqzoom"  title="RED">
      <img src="red_noise_mosaic_small.jpg" title=""  >
    </a>
  </body>
</html>

What I've done, is included 3 files: the jqzoom.css, in addition to jquery, and the jquery.jqzoom plugin. Then, I've got my own little script, that basically says: when the document loads (onready) set up some zoom options, find the element with class jqzoom using the jquery selector $(".jqzoom"), and call jqzoom on it with the options.

In the body of the html, I've got a link to the larger image surrounding the smaller image. I've made sure to use the same class in the link as I use for the jquery selector above.

That's it.

Posted in Art And Design, Software Development | Leave a comment

Color Drag/Drop Toy

By Sam | Published: August 1, 2010

What you do is to drag one of the small color chips onto the larger square.

I’m trying to figure out where I can use drag and drop in an actual interface. It seems like a pretty critical component of desktop like web applications. The effect is done with JQuery-UI. Unfortunately this approach doesn’t work on all mobile devices.

Posted in Software Development | Leave a comment