Javascript, jQuery and other Junk

Adding the MovingBoxes plugin to Blogger

2011-12-30T17:12:00.002-06:00

These instructions will allow you to add a MovingBoxes widget to any Blogger post. These instruction really apply to any plugin out there, but instead of making a generic post, I think a specific example is best.

Olivia News Heading
A very short exerpt goes here... more
Alice News Heading
A very short exerpt goes here... more and a whole lot more text goes here, so we can see the height adjust.
Yin News Heading
A very short exerpt goes here... more
Gerri News Heading
A very short exerpt goes here... more
Tabitha News Heading
A very short exerpt goes here... more
Mary News Heading
A very short exerpt goes here... more
Kitty News Heading
A very short exerpt goes here... more

Note: In the next version of MovingBoxes, I plan to change the width and panelWidth options. At that time, I will update this post.

Code, CSS and image setup

Required Files
I don't know how github would feel about directly linking to their servers. Most businesses frown upon hot-linking and will most likely block your URL, or the entire domain if the hot-linking gets too rampant. So I'd recommend copying each file below and saving it to your own server.

http://chriscoyier.github.com/MovingBoxes/css/movingboxes.css (don't copy this one, see below)
http://chriscoyier.github.com/MovingBoxes/images/arrows.png
http://chriscoyier.github.com/MovingBoxes/js/jquery.movingboxes.min.js

Note that inside of the css, you'll need to change the arrows.png url to point to the new location of the image file.

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
  background: transparent url(../images/arrows.png) no-repeat;
}

If you don't have a server, you can use dropbox or your iCloud (I don't own a Mac, so I'm only guessing that it'll allow you to save javascript & css files). If you don't have a server to save the files, then first, save the image to an image hosting site, like photobucket, Flickr or something. Then you can save the javascript and css into your own blog design. The main problem with saving into your page design is that it will increase your page size and possibly make the page loading take longer. Either way you'll need to add a gadget, or add to an already existing one.

Add a Gadget
So once you have your files saved and the css file updated:

Go to your Dashboard > Design > Add a Gadget > Pick the "HTML/Javascript" gadget.
Once the popup window opens, add the following plugin css and javascript in the content window, the URL should point to your hosted files

Note: After testing this, it seems that adding a <link> tag inside of the HTML/Javascript gadget gets removed. I'm not sure why, but in this case we can just paste in the entire css.

<style>
/*** Overall MovingBoxes Slider ***/
.mb-wrapper {
 width: 900px; /* default, this is overridden by script settings */
 min-height: 200px;
 border: 5px solid #ccc;
 margin: 0 auto;
 position: relative;
 left: 0;
 top: 0;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 box-shadow: inset 0 0 10px #888;
 -moz-box-shadow: inset 0 0 10px #888;
 -webkit-box-shadow: inset 0 0 10px #888;
}

/* Panel Wrapper */
.mb-slider, .mb-scroll {
 width: 100%;
 height: 100%;
 overflow: hidden;
 margin: 0 auto;
 padding: 0;
 position: relative;
 left: 0;
 top: 0;

 /***(>'-')> Control Panel Font size here <('-'<)***/
 font-size: 18px;
}

/* active slider border highlight */
.mb-active-slider {
 border-color: #999bff;
}

/*** Slider panel ***/
.mb-slider .mb-panel {
 width: 350px;  /* default, this is overridden by script settings */
 margin: 5px 0;
 padding: 5px;
 display: block;
 cursor: pointer;
 float: left;
 list-style: none;
}

/* Cursor to arrow over current panel, pointer for all others,
change .current class name using plugin option, currentPanel : 'current' */
.mb-slider .mb-panel.current {
 cursor: auto;
}

/*** Inside the panel ***/
.mb-inside {
 padding: 10px;
 border: 1px solid #999;
}

.mb-inside * {
 max-width: 100%;
}

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
 display: block;
 width: 45px;
 height: 58px;
 background: transparent url(http://chriscoyier.github.com/MovingBoxes/images/arrows.png) no-repeat;
 position: absolute;
 top: 50%;
 margin-top: -29px; /* if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
 cursor: pointer;
 text-decoration: none;
 outline: 0;
 border: 0;
}
a.mb-scrollButtons.mb-left {
 background-position: left top;
 left: -45px;
}
a.mb-scrollButtons.mb-right {
 background-position: right top;
 right: -45px;
}
a.mb-scrollButtons.mb-left:hover {
 background-position: left bottom;
}
a.mb-scrollButtons.mb-right:hover {
 background-position: right bottom;
}
a.mb-scrollButtons.disabled {
 display: none;
}

/*** Controls added below the panels ***/
.mb-controls {
 margin: 0 auto;
 text-align: center;
 background: #ccc;
 position: relative;
 z-index: 100;
}
.mb-controls a {
 color: #444;
 font: 12px Georgia, Serif;
 display: inline-block;
 text-decoration: none;
 padding: 2px;
 height: 18px;
 margin: 0 5px 0 0;
 text-align: center;
 outline: 0;
}
.mb-controls a.current, .mb-controls a:hover {
 color: #fff;
}
.mb-active-slider .mb-controls {
 background: #999bff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://chriscoyier.github.com/MovingBoxes/js/jquery.movingboxes.min.js"></script>
<script>
jQuery(function(){

  jQuery('.movingboxes').movingBoxes({
    startPanel   : 1,      // start with this panel
    width        : 300,    // overall width of movingBoxes
    panelWidth   : 0.5,    // current panel width adjusted to 50% of overall width
    wrap         : false,  // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    buildNav     : true,   // if true, navigation links will be added
    navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
  });

});
</script>

Modify the "width" and "panelWidth" options (in red) as desired. Or add and/or remove options following these instructions.
If you don't have your own server, then you can open the movingboxes.css file in a text editor and save it into the content window; again make sure the arrow.png url is pointing to the new location in the css below.
```
<style>
  /* add movingboxes.css contents here */
</style>
<script>
  /* add jquery.movingboxes.min.js contents here */
</script>
```

Adding a blog post

Now the first step here would be to open a new post.

Switch the editor to "Edit HTML" - tab in the upper right corner, then paste in the basic plugin HTML Note, keep the <img> and <li> on the same line or blogger will add a <br> in between.

<ul class="movingboxes">
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/1.jpg" alt="picture">
    <h2>Olivia News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
  </li>
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/2.jpg" alt="picture">
    <h2>Alice News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
  </li>
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/3.jpg" alt="picture">
    <h2>Yin News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
  </li>
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/4.jpg" alt="picture">
    <h2>Gerri News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
  </li>
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/5.jpg" alt="picture">
    <h2>Tabitha News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
  </li>
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/6.jpg" alt="picture">
    <h2>Mary News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>
  <li><img src="http://chriscoyier.github.com/MovingBoxes/demo/7.jpg" alt="picture">
    <h2>Kitty News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>
</ul>

Note that the UL has a class named "movingboxes", it originally had an ID, but to make this plugin work on any future blog entries we need to make sure it's a class name we can remember.

Now, just publish your post and reload your page. The MovingBoxes plugin should initialize and look like it does at the top of this post :)

All Images Loaded (imagesLoaded)

2011-12-17T13:29:00.002-06:00

*NOTE* this code causes infinite loops in IE with image load errors, so I improved and turned this into a real plugin and hosted it on github.

A little jQuery function that checks if all images are loaded. If they all are, the callback function is called. Check out the latest version in this gist.

Script below:

/*
 Check if all images are loaded
 - Callback occurs when all images are loaded
 - image load errors are ignored (complete will be true)
 - Use:
   $('.wrap img').imagesLoaded(function(){
     alert('all images loaded');
   });
*/

jQuery.fn.extend({
  imagesLoaded: function( callback ) {
    var i, c = true, t = this, l = t.length;
    for ( i = 0; i < l; i++ ) {
      if (this[i].tagName === "IMG") {
        c = (c && this[i].complete && this[i].height !== 0);
      }
    }
    if (c) {
      if (typeof callback === "function") { callback(); }
    } else {
      setTimeout(function(){
        jQuery(t).imagesLoaded( callback );
      }, 200);
    }
  }
});

Use it as follows:

$(function(){
  $('.wrap img').imagesLoaded(function(){
    alert('all images loaded');
  });
});

jQuery Pathslider

2011-12-06T16:06:00.002-06:00

I just created this plugin that is a very basic UI Slider (similar to the jQuery slider), but it doesn't just allow you to move the handle horizontally and vertically, it will follow any shaped curve! If you've ever used Adobe Illustrator or CorelDraw then you probably recognize the Bezier curve below.

The handle, or grip as I call it, can be dragged along the black curve. For now, it only returns values from 0 (green dot) to 100 (red dot).

The plugin is in the early stages of development and still needs a lot of work, but it is usable now.

Check out the demo page, and the builder page. If you would like to help me out, submit an enhancement or issue, or fork a copy of the plugin on Github and send me a pull request! I'd love the input!

jQuery UI Side Scroller with buttons

2011-11-14T04:46:00.000-06:00

Once again, I got up at 2:30am wide awake... that's what happens when I fall asleep at 9:30 LOL. Anyway, I was bored so I searched for something to do. I found a question on CSS Tricks asking how to add buttons to the jQuery UI Slider. So starting with the side scroll demo as a base, I put together this demo. That is all :P

Get All indexOf From An Array - Array.allIndexOf()

2011-10-31T19:21:00.001-05:00

This array function is an extension of Array.indexOf(), if it exists, and will return all indexes of the search element. It's named allIndexOf(). This code extends javascript and does not require jQuery. It is designed to work in older versions of IE as well, albeit a tiny bit slower.

Originally if you wanted the second instance of a search element, you'd have to call "indexOf" twice. The second time with the starting index of the first result (plus one), or once with a guessed starting index. This should simplify the process for getting any or all of the indexes.

/*
Array.allIndexOf(searchElement)
  Array [Array] - the array to search within for the searchElement
  searchElement [String] - the desired element with which to find starting indexes
*/
(function(){
  Array.prototype.allIndexOf = function(searchElement) {
    if (this === null) { return [-1]; }
    var len = this.length,
    hasIndexOf = Array.prototype.indexOf, // you know, because of IE
    i = (hasIndexOf) ? this.indexOf(searchElement) : 0,
    n,
    indx = 0,
    result = [];
    if (len === 0 || i === -1) { return [-1]; }
    if (hasIndexOf) {
      // Array.indexOf does exist
      for (n = 0; n <= len; n++) {
        i = this.indexOf(searchElement, indx);
        if (i !== -1) {
          indx = i + 1;
          result.push(i);
        } else {
          return result;
        }
      }
      return result;
    } else {
    // Array.indexOf doesn't exist
      for (n = 0; n <= len; n++) {
        if (this[n] === searchElement) {
          result.push(n);
        }
      }
      return (result.length > 0) ? result : [-1];
    }
  };
})();

Use it as follows:

var s = ["red","green","blue","red","yellow","blue","green","purple","red"];
s.allIndexOf("r"); // result [ -1 ]
s.allIndexOf("red"); // result [ 0,3,8 ]
s.allIndexOf("blue"); // result [ 2,5 ]

Try out your own strings in the demo below or full screen.

Get All indexOf From A Search String - String.allIndexOf()

2011-10-31T11:26:00.009-05:00

This string function is an extension of String.indexOf() and will return all indexes of a search string. It's named allIndexOf. This code extends javascript and does not require jQuery.

Originally if you wanted the second instance of a search string, you'd have to call "indexOf" twice. The second time with the starting index of the first result (plus one), or once with a guessed starting index. This should simplify the process for getting any or all of the indexes. And yes, I woke up with a strange urge to write this function LOL.

/*
String.allIndexOf(searchstring, ignoreCase)
  String [String] - the string to search within for the searchstring
  searchstring [String] - the desired string with which to find starting indexes
  ignoreCase [Boolean] - set to true to make both the string and searchstring case insensitive
*/
(function(){
  String.prototype.allIndexOf = function(string, ignoreCase) {
    if (this === null) { return [-1]; }
    var t = (ignoreCase) ? this.toLowerCase() : this,
    s = (ignoreCase) ? string.toString().toLowerCase() : string.toString(),
    i = this.indexOf(s),
    len = this.length,
    n,
    indx = 0,
    result = [];
    if (len === 0 || i === -1) { return [i]; } // "".indexOf("") is 0
    for (n = 0; n <= len; n++) {
      i = t.indexOf(s, indx);
      if (i !== -1) {
        indx = i + 1;
        result.push(i);
      } else {
        return result;
      }
    }
    return result;
  }
})();

Use it as follows:

var s = "The rain in Spain stays mainly in the plain";
s.allIndexOf("ain"); // result [ 5,14,25,40 ]
s.allIndexOf("the"); // result [ 34 ]
s.allIndexOf("THE", true); // result [ 0,34 ]

Try out your own strings in the demo below or full screen.

jQuery Rename Attribute (renameAttr)

2011-10-20T09:20:00.004-05:00

I woke up this morning with a very unusual urge to make a rename attribute function for jQuery. I know, right.. that's just too weird! So after messing around with it, I decided that it needed to update the data as well. Here is the code I ended up with:

jQuery.fn.extend({
  renameAttr: function( name, newName, removeData ) {
    var val;
    return this.each(function() {
      val = jQuery.attr( this, name );
      jQuery.attr( this, newName, val );
      jQuery.removeAttr( this, name );
      // remove original data
      if (removeData !== false){
        jQuery.removeData( this, name.replace('data-','') );
      }
    });
  }
});

Use it as follows:

// $(selector).renameAttr(original-attr, new-attr, removeData);

// removeData flag is true by default
$('#test').renameAttr('data-test', 'data-new' );

// removeData flag set to false will not remove the
// .data("test") value
$('#test').renameAttr('data-test', 'data-new', false );

Basically, it adds a new attribute with the same value and removes the old one. It automatically removes the jQuery data for the original attribute unless you set the "removeData" flag to false. Check out this demo

Adding Swipe Support

2011-10-06T10:28:00.002-05:00

I spent some time trying to figure out how to add mobile swipe support without using jQuery Mobile, because the swipe is all I really needed. I don't own an iPhone/iPad/iAnything, so it took a bit of back-and-forth testing - thanks to all the folks over at CSS-Tricks.com - to get this to finally work.

Here is the complete code:

var maxTime = 1000, // allow movement if < 1000 ms (1 sec)
    maxDistance = 50,  // swipe movement of 50 pixels triggers the swipe

    target = $('#box'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

target
    .bind(startEvent, function(e){
        // prevent image drag (Firefox)
        e.preventDefault();
        startTime = e.timeStamp;
        startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
    })
    .bind(endEvent, function(e){
        startTime = 0;
        startX = 0;
    })
    .bind(moveEvent, function(e){
        e.preventDefault();
        var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
            currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
            // allow if movement < 1 sec
            currentTime = e.timeStamp;
        if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
            if (currentX < startX) {
                // swipe left code here
                target.find('h1').html('Swipe Left').fadeIn();
                setTimeout(function(){
                    target.find('h1').fadeOut();
                }, 1000);
            }
            if (currentX > startX) {
                // swipe right code here
                target.find('h1').html('Swipe Right').fadeIn();
                setTimeout(function(){
                    target.find('h1').fadeOut();
                }, 1000);
            }
            startTime = 0;
            startX = 0;
        }
    });

Now, lets break down what each line does. First, some definitions:

var maxTime = 1000, // allow movement if < 1000 ms (1 sec)
    maxDistance = 50,  // swipe movement of 50 pixels triggers the swipe

    target = $('#box'),
    startX = 0,
    startTime = 0,

The "maxTime" variable is a set to 1000 milliseconds. It is used to compare the touch start and touch end times, and if less than one second (1000 ms) it is considered to be a valid swipe, otherwise it is ignored. Basically, we don't like them slow swipers! Hehe, ok, actually, it to determine if the event ends up being a touch or a swipe.

"maxDistance" is the number of pixels from the touch start point that the mouse or a finger moved to determine if a swipe or touch is occurring.

The "target" variable, is the target element to add swipe support to. For the demo, I added an H1 tag inside of this element to add a swipe message. The "startX" and "startTime" variables are set to zero because the "touchmove" or "mousemove" event looks to see if they are set with the "startX" position and start time. If zero, it ignores the move.

In the next part we figure out of the device has touch support and set up the event names appropriately:

touch = "ontouchend" in document,
startEvent = (touch) ? 'touchstart' : 'mousedown',
moveEvent = (touch) ? 'touchmove' : 'mousemove',
endEvent = (touch) ? 'touchend' : 'mouseup';

The "touch" varible is true if the "ontouchend" event exists, which means touch is supported. All that line is doing is looking to see if that object exists.

The next variables, "startEvent", "moveEvent" and "endEvent" contain the necessary event names for start, move and end, respectively. Which the next lines of code will now bind to:

target
    .bind(startEvent, function(e){
        // prevent image drag (Firefox)
        e.preventDefault();
        startTime = e.timeStamp;
        startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
    })

The "touchstart" or "mousedown" event code contains the following:

"e.preventDefault()" prevents the image drag function in Firefox which actually makes you think you're dragging the image instead of swiping. Now we define "startTime" and "startX" as the start time and position of the swipe. The "startX" needs to get the position of the touch from the touches variable, but only the first one. We don't want to swipe if there are multiple touches (gestures) but it shouldn't work anyway since we're not binding to the gestures event.

.bind(endEvent, function(e){
    startTime = 0;
    startX = 0;
})

Now the "touchend" or "mouseup" event code only clears the start time and position variables. The reason for this, which was a fun and painful lesson, is that these events don't fire when your mouse/finger leaves the element or goes off the screen. So the actual swipe calculations are done in the move event functions.

.bind(moveEvent, function(e){
    e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
        if (currentX < startX) {
            // swipe left code here
            target.find('h1').html('Swipe Left').fadeIn();
            setTimeout(function(){
                target.find('h1').fadeOut();
            }, 1000);
        }
        if (currentX > startX) {
            // swipe right code here
            target.find('h1').html('Swipe Right').fadeIn();
            setTimeout(function(){
                target.find('h1').fadeOut();
            }, 1000);
        }
        startTime = 0;
        startX = 0;
    }
});

The "touchmove" or "mousemove" events is where the main portion of this swipe code exists. Again, we want to prevent the default functionality of the move/drag. The "currentX" variable is set with the current x position of the finger/mouse. Again, the x position is obtained from the touches variable, if available. The difference "currentDistance" between the starting x and current x position is then determined. We need the absolute value of this number (ignore the negative sign if it is there) to see if it is more than the "maxDistance" variable. Also here is another trick to make sure the move event is occurring after a start event, check to make sure the starting x position isn't zero. If it is, set the "currentDistance" variable to zero. We also need determine the "currentTime" current time of the move event.

Now, we check to make sure the move event occurred after a start event. This can happen is the start event occurs outside of the element or window. So, first we make sure the "startTime" isn't zero, then we check that the time difference from start to current time is less than one second. And finally, we check that the current distance is more than the max distance setting. If it is, then we have a swipe!

YAY finally a swipe! Now to just figure out if it was going to the right or left. We do this by comparing the current position "currentX" to the starting position "startX"; if the current position is less than the start, then it's a swipe to the left and if it is greater, then the swipe was to the right.

Last but not least, we set the start time and position back to zero to prevent multiple firing of the swipe event.

I hope everything had a clear enough explanation. Please feel free to leave a comment or email me (gmail with wowmotty as the user) with questions or if you need further clarification.

Print a Paragraph

2011-09-22T08:51:00.002-05:00

By default, browsers will print the content of an entire page/web page or selected text. With some simple scripting you can make it easier for your users to get the browser to print the contents of a particular block or paragraph. The trick is to copy these contents into a new popup window, then print the contents of that window. I put together a very simple demo, which I should turn into a plugin, of how to do this:

AnythingSlider Themes

2011-09-11T18:33:00.000-05:00

I put together ten more themes for AnythingSlider! YAY!

All theme files are meant to be used independently from the plugin's "anythingslider.css" file. So you only need to include one of these theme files.
There is an additional stylesheet named "wrappers.css" which only targets the wrapper around the slider. It is independent of the theme files and meant to be used by extracting out any specific wrapper style you would like to use.
The first default theme is meant to be used as the base to make your own theme, but without using images or css3.
The second default theme is also meant to be used as a base for your own theme, but includes images (no css3 though)
The rest of the themes are free to use.

If you would like to contribute a theme, either fork the repository, add your theme then send me a pull request or just email me the files - my gmail account, user name is wowmotty.

Thanks and enjoy!

AnythingSlider FX Builder

2011-08-17T17:26:00.002-05:00

So, to make it easier to figure out how to add FX to AnythingSlider, I put together a bookmarklet (get it from here) that allows you to build/play with the effects live :)

If you need instructions, I have some very basic information in the readme file on github.

Right now, it's still in beta and it only works on the first slider on the page. I'd appreciate any feedback on what could be improved, changed, or if you find any problems.

Adding WordPress Quicktag Buttons to a WP Plugin

2011-07-12T19:59:00.000-05:00

Disclaimer: I am a total noob when it comes to WordPress and WordPress plugins.

I was wondering how difficult it would be to add a button to the WordPress Post Editor. I've seen a few plugins do it, but I discovered that they had to add their own version of TinyMCE to do it.

So I searched around on the internet, and found a few methods. But they either stopped working or required you to edit your quicktags.js file to work, then again after each Wordpress update. So I looked into it and I found a solution that works with the current version 3.2 and hopefully future versions without requiring you to edit or replace the quicktags file.

Before

After

Note: This code is intended to be added inside your WordPress plugin. Like I said, I'm a total noob with WordPress so I'm not sure if it would work outside of a plugin.

CSS - This CSS should be outside of the php tags

<style>
/* Simulate the input buttons styles */
#ed_toolbar button {
 display: inline-block;
 vertical-align: middle;
 margin: 0;
 padding: 0;
 min-width: 26px;
 height: 24px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 border: #c3c3c3 1px solid;
 background: url() repeat-x;
}
#ed_toolbar button:hover {
 border: #aaa 1px solid;
 background: #ddd;
}
/* toolbar button images in span */
#ed_toolbar button span {
 display: inline-block;
 background: transparent no-repeat center center;
 padding: 4px 2px;
 width: 16px;
 height: 16px;
}

/* toolbar custom button image */
#_custom span {
 background-image: url(/wp-content/plugins/my-plugin-directory/my-plugin-icon.png);
}
</style>

PHP - Add this to your plugin php

<?php
add_action('admin_footer', 'my_plugin_add_button');

function my_plugin_add_button(){
echo <<<EOT
<script>/* <![CDATA[ */
var j, n,
 last = edButtons.length,
 tbar = '';

// add a new editor button as follows:
// edButtons[edButtons.length] = new edButton('BUTTON ID', 'BUTTON TEXT', 'OPENING TAG', 'CLOSING TAG', 'ACCESSKEY');
// Example: edButtons[edButtons.length] = new edButton('_h1', 'H1', '<h1>', '</h1>', -1);
edButtons[edButtons.length] = new edButton('_h1', 'h1', '<h1>', '</h1>', "h");
edButtons[edButtons.length] = new edButton('_h2', 'h2', '<h2>', '</h2>', -1);
edButtons[edButtons.length] = new edButton('_h3', 'h3', '<h3>', '</h3>', -1);
edButtons[edButtons.length] = new edButton('_h4', 'h4', '<h4>', '</h4>', -1);
edButtons[edButtons.length] = new edButton('_h5', 'h5', '<h5>', '</h5>', -1);
edButtons[edButtons.length] = new edButton('_h6', 'h6', '<h6>', '</h6>', -1);
edButtons[edButtons.length] = new edButton('_custom', '<button>', '[myplugin_short_code]', '', -1);

// Don't change anything below
// ***************************
for ( j = last; j < edButtons.length; j++) {
 n = edButtons[j];
 if (/<button>/g.test(n.display)) {
  // matched opening tag => add a button
  tbar += '<button id="' + n.id + '" type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' + j + ');"><span></span></button>';
 } else {
  // add an input
  tbar += '<input type="button" id="' + n.id + '" accesskey="' + n.access + '" class="ed_button" onclick="edInsertTag(edCanvas,' + j + ');" value="' + n.display.replace(/\"/g,'\"') + '" />';
 }
}
document.getElementById('ed_toolbar').innerHTML += tbar;
/* ]]> */</script>
EOT;
}
?>

jQuery Tablesorter, The Missing Docs

2011-06-18T11:24:00.009-05:00

The Missing Docs for jQuery Tablesorter 2.0

These docs have been incorporated into my

Github fork of Tablesorter.

All Defaults

Appearance
cssHeader: "header"	The CSS style used to style the header in its unsorted state.
cssAsc: "headerSortUp"	The CSS style used to style the header when sorting ascending.
cssDesc: "headerSortDown"	The CSS style used to style the header when sorting descending.
cssChildRow: "expand-child"	This allows you to add a child row that is always attached to the parent. See the children rows section below.
widgetZebra: { css: ["even", "odd"] }	Set the CSS classes used for zebra striping the table. See the updating zebra striping section below.\
widthFixed: false	Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work. See the main demo page
onRenderHeader: null	This function is called when classes are added to the th tags. You can use this to append HTML to each header tag. See the Render Header section below.
Sort Options
sortInitialOrder: "asc"	A string of the inital sorting order can be "asc" or "desc". This is overridden bt the `sortList` settings.
sortForce: null	Use to add an additional forced sort that is prepended to `sortList`. For example, `sortForce: [[0,0]]` will sort the first column in ascending order. See the main demo page
sortList: []	Add an array of the order the table should be initially sorted; e.g. `sortList: [[0,1], [1,0]]`. The first part "[0,1]" will sort the first column (zero based index) in decending order and the second part "[1,0]" is to sort the second column in ascending order. See the main demo page.
sortAppend: null	Use to add an additional default sorting rule, that is appended to the `sortList`.
Parsers & Widgets
headers: {}	See the Change how you sort a column section below or see the main demo page
textExtraction: "simple"	See the Text Extraction section below or see the main demo page
sortLocaleCompare: true	Boolean flag indicating whenever to use String.localeCampare method or not. This is only used when comparing text strings.
parsers: {}	Internal list of all of the parsers. See a complete list of parsers below.
widgets: []	Initialize widgets using this option (e.g. `widgets : ['zebra']`, or custom widgets `widgets: ['zebra', 'myCustomWidget']`; see this demo on how to add a custom widget.)
selectorHeaders: 'thead th'	jQuery selectors used to find the header cells. You can change this, but the table will still need the required thead and tbody before this plugin will work properly.
headerList: []	Internal list of each header element as selected using jQuery selectors in the `selectorHeaders` option.
dateFormat: "us"	Set the date format. See the dataFormat section below.
Interaction
sortMultiSortKey: "shiftKey"	The key used to select more than one column for multi-column sorting. Defaults to the shift key. Other options might be ctrlKey, altKey. See the main demo page
cancelSelection: true	Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
Unknown
decimal: '/\.\|\,/g'	Regex to find the decimal "." for U.S. format and "," for European format... but I can't find it being used anywhere in the plugin.
Debugging
debug: false	Boolean flag indicating if tablesorter should display debuging information usefull for development. This displays information in the console, if available, or in alerts. See the main demo page

Update Default Settings

Update any of the default settings above using this format:

$(selector).data("tablesorter").{default name} = newValue;

Here are a few examples:

// Change sortForce
$("table").data("tablesorter").sortForce = [[1,0]];
// it appears that the only way to update the table is to resort it
$("table").trigger("sorton", [[0,1]]);
// Add zebra sorting after the table has initialized
$("table").data("tablesorter").widgets = ["zebra"];
// there is a method to apply widgets!
$("table").trigger("applyWidgets");

Child Rows

To add a row that remains attached to a parent row, add the "expand-child" class to the row.

You can add some scripting to hide these child rows and have them expand when you click on a link; this is the original reason for the css name.

Here is the original mod page, the code was added into the TableSorter core but remains undocumented.

This makes the tablesorter plugin keep these rows together. This css class can be changed using the "cssChildRow" option.

Here is some example markup:

<table width="100%" border="1">
  <thead>
    <tr>
      <th>Item #</th>
      <th>Name</th>
      <th>Available</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12345</td>
      <td>Toy Car</td>
      <td>5</td>
    </tr>
    <tr class="expand-child"> <!-- this row will remain attached to the above row, and not sort separately -->
      <td colspan="3">
        It's a toy car!
      </td>
    </tr>
    <tr>
      <td>23456</td>
      <td>Toy Plane</td>
      <td>2</td>
    </tr>
    <tr class="expand-child"> <!-- this row will remain attached to the above row, and not sort separately -->
      <td colspan="3">
        It's a toy plane!
      </td>
    </tr>
    <tr class="expand-child"> <!-- this row will remain attached to the above two rows, and not sort separately -->
      <td colspan="3">
        and it flies!
      </td>
    </tr>
  </tbody>
</table>

Update Zebra Striping After Sorting

Actually the zebra striping widget does this for you automatically.

By default the odd and even rows are styled using "odd" and "even" class names ({ css: [ "even", "odd" ] }).

Change these css class names using the widgetZebra option as follows:

$(function(){
  $("table").tablesorter({
    widgets: ["zebra"], // initialize zebra striping of the table
    widgetZebra: { css: [ "normal-row", "alt-row" ] }
  });

Modify the Header Markup

The onRenderHeader option allows you to add a function that which can modify the HTML of each header tag. In the example below, the header cell (th) content is wrapped with a span tag to allow for better styling (source).

$(function(){
  $("table").tablesorter({
    onRenderHeader: function (){
      this.wrapInner('');
    }
  });
});

and you'll end up with this (only the thead is shown):

<thead>
  <tr>
    <th class="header"><span class="roundedCorners">Column 1</span></th>
    <th class="header"><span class="roundedCorners">Column 2</span></th>
  </tr>
</thead>

Change how you sort a column

The plugin attempts to detect the type of data that is contained in a column, but if it can't figure it out then it defaults to alphabetical.

You can easily override this by setting the header argument (or column parser).

$(function(){
  $("table").tablesorter({
    headers: {
      0: { sorter: false },      // disable first column
      1: { sorter: "digit" },    // sort second column numerically
      4: { sorter: "shortDate" } // sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
    }
  });
});

*Note* the header number starts with zero (zero based index).

Here is a list of available sorter values/parsers:

sorter: false	disable sort for this column.
sorter: "text"	Sort alphabetically.
sorter: "digit"	Sort numerically.
sorter: "currency"	Sort by currency value (supports "£$€").
sorter: "ipAddress"	Sort by IP Address.
sorter: "url"	Sort by url.
sorter: "isoDate"	Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD).
sorter: "percent"	Sort by percent.
sorter: "usLongDate"	Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM).
sorter: "shortDate"	Sort by a shorten date (see "dateFormat").
sorter: "time"	Sort by time (23:59 or 12:59 pm).
sorter: "metadata"	Sort by the sorter value in the metadata - requires the metadata plugin.

Change the Date Format (dateFormat)

"us"	"mm-dd-yyyy" or "mm/dd/yyyy"
"uk"	"dd-mm-yyyy" or "dd/mm/yyyy"
"dd/mm/yy" or "dd-mm-yy"	Sort by short year (it appears to sort by day first, not the year)

Change the Sorted Columns

There are three options to determine the sort order and this is the order of priority:

sortForce forces the user to have this/these column(s) sorted first (null by default).
SortList is the initial sort order of the columns.
SortAppend is the default sort that is added to the end of the users sort selection (null by default).

The value of these sort options is an array of arrays and can include one or more columns. The format is an array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]

$(function(){
  $("table").tablesorter({
    sortForce  : [[0,0]],        // always sort first column first
    sortList   : [[1,0], [2,0]], // initial sort columns (2nd and 3rd)
    sortAppend : [[3,0]]         // always add this sort on the end (4th column)
  });
});

Text Extraction

This is demonstrated in the Dealing with markup inside cells demo page, but the example uses vanilla javascript to find the desired text, like this:

$(function(){
  $("table").tablesorter({
    textExtraction: function(node) {
      return node.childNodes[0].childNodes[0].innerHTML;
    }
  });
});

But you could make your life easier and just make the node into a jQuery object and then "find" what you need:

$(function(){
  $("table").tablesorter({
    textExtraction: function(node) {
      return $(node).find("span:last").text();
    }
  });
});

Now if the text you are finding in the script above is say a number, then just include the headers sorter option to specify how to sort it. Also in this example, we will specify that the special textExtraction code is only needed for the second column ("1" because we are using a zero-based index). All other columns will ignore this textExtraction function.

*NOTE* When writing this post, I didn't realize that the textExtraction option did not allow defining it per column, as shown below, but this has been fixed in the forked github version - example.

$(function(){
  $("table").tablesorter({
    textExtraction: {
      1: function(node) {
           return $(node).find("span:last").text();
      }
    },
    headers: {
      1: { sorter : "digit" }
    }
  });
});

Methods

See examples of each further down

sorton	Resort the table using new sort parameters.
update	Update the stored tablesorter data and the table.
appendCache	Update a table that has had its data dynamically updated; used in conjunction with "update"
updateCell	Update a table cell in the tablesorter data.
applyWidgetId	Apply a widget (wrapped in square brackets) to the table one time only.
applyWidgets	Apply previously selected widgets to the table - will update the widget with new sort.

Resort the table - "sorton" method

See the full example in the tablesorter docs: Sort table using a link outside the table

// Choose a new sort order
var sort = [[0,0],[2,0]];
// Note that the sort value below is inside of another array (inside another set of square brackets)
$("table").trigger("sorton", [sort]);

Update the Table

See the full example in the tablesorter docs: Appending table data with ajax

// Add new content
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton", [sorting]);

Append Cache

If you dynamically change the table content, more than just one cell like in the "updateCell" example above, you may possibly have to trigger two events: "update" and "appendCache".

This answer is from a StackOverflow answer

// Table data was just dynamically updated
$(table)
  .trigger("update")
  .trigger("appendCache");

Update a Table Cell

Example from these alternate tablesorter docs: Updating the table cache - the demo doesn't work, but I've tested the example code below and it works properly.

$(function() {
  $("table").tablesorter();
  $("td.discount").click(function(){
      // randomize a number
      var discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' + ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2);
      $(this).text(discount);
      // update the table, so the tablesorter plugin knows its value
      $("table").trigger("updateCell",[this]);
      // set sorting column and direction, this will sort on the first and third column
      var sorting = [[3,1]];
      // sort on the first column
      $("table").trigger("sorton",[sorting]);
      return false;
  });
});

<table class="tablesorter" cellspacing="1">
  <thead>>
    <tr>
      <th>first name</th>
      <th>last name</th>
      <th>age</th>
      <th>total</th>
      <th>discount</th>
      <th>date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>peter</td>
      <td>parker</td>
      <td>28</td>
      <td class="discount">$9.99</td>
      <td>20%</td>
      <td>jul 6, 2006 8:14 am</td>
    </tr>
    <tr>
      <td>john</td>
      <td>hood</td>
      <td>33</td>
      <td class="discount">$19.99</td>
      <td>25%</td>
      <td>dec 10, 2002 5:14 am</td>
    </tr>
    <tr>
      <td>clark</td>
      <td>kent</td>
      <td>18</td>
      <td class="discount">$15.89</td>
      <td>44%</td>
      <td>jan 12, 2003 11:14 am</td>
    </tr>
    <tr>
      <td>bruce</td>
      <td>almighty</td>
      <td>45</td>
      <td class="discount">$153.19</td>
      <td>44%</td>
      <td>jan 18, 2001 9:12 am</td>
    </tr>
    <tr>
      <td>bruce</td>
      <td>evans</td>
      <td>22</td>
      <td class="discount">$13.19</td>
      <td>11%</td>
      <td>jan 18, 2007 9:12 am</td>
    </tr>
  </tbody>
</table>

Apply a New Widget "applyWidgetId"

Apply a widget to the table. In this example, we apply the zebra striping to the table after it has been initialized.

$(function(){
  // initialize tablesorter without the widget
  $("table").tablesorter();
  
  // click a button to apply the zebra striping
  $("button").click(function(){
    $('table').trigger('applyWidgetId', ['zebra']);
});

Apply Chosen Widgets "applyWidgets"

Reapply a widget to the table. In this example, we apply the zebra striping to the table after it has been initialized.

This is basically an alternate method to the "applyWidgetId", but in the example below you can add or remove widgets from the chosen list.

// Update the list of widgets to apply to the table (add or remove)
$("table").data("tablesorter").widgets = ["zebra"];
$("table").trigger('applyWidgets');

Triggered Events

sortStart	This event fires when the tablesorter plugin is about to start resorting the table.
sortEnd	This event fires when the tablesorter plugin has completed resorting the table.

Bind to the "sortStart" and/or the "sortEnd" events as shown on the example page

$(function(){
  // initialize the tablesorter plugin
  $("table").tablesorter();
  // bind to sort events
  $("table")
    .bind("sortStart",function() {
      $("#overlay").show();
    })
    .bind("sortEnd",function() {
      $("#overlay").hide();
    });
});

Or here is another example from StackOverflow

$(function(){
  $("table")
    .tablesorter()  
    .bind("sortEnd", function(){  
      $("table tr").removeClass("block");
      // adds the "block" class to every 8th row
      $("table tr:nth-child(8)").addClass("block");
    });
});

Equalizer

2011-06-06T18:25:00.000-05:00

This script was first written by Stephen Akins to equalize column heights in multiple rows. Chris Coyier of CSS Tricks then posted an update which allowed the heights to adjust while resizing a page. I simply debugged, added a few improvements (like minimum and maximum height, an idea from Mike Avello's plugin) and turned it into a plugin.

In the screen shot above, there are three blocks containing three columns. The three blocks have identical HTML. The left block is unmodified. The center block has Equalizer applied with a max height setting; and each block that exceeds the max height has a css class applied which sets the overflow to auto and adds the different background color for the demo, but you can do whatever you want via the css. And the right block has Equalizer applied with a minimum height setting; you should be able to see in the screen shot that the middle row of the right block has a minimum height set.

Try out the demo, resize your browser window and see how everything changes.

The Base Tag

2011-05-18T16:18:00.001-05:00

Whenever someone asks me to help troubleshoot a problem with their site, if I can't immediately see the problem or fix it using Firebug, I download the page as an HTML only file. Then you have to deal with pages that have relative links to code, style sheets or images:

<link href="/css/main.css" rel="stylesheet">

which you will probably have to use your editor to find and replace each one. A big time saver is using the apparently less known base tag, in which you add the base URL to the site.

<base href="http://some-site.com">

Then if you need to modify a file for testing, just download it to your computer (e.g. your desktop), open it in your browser, then copy the URL. Replace the file's url with this one, since the relative URL will look to the base tag instead of your desktop:

<link href="file:///C:/Desktop/main.css">

Now when you open the page in your browser, it should look exactly like the online page. :)

jQuery find/replace text without destroying DOM elements

2011-05-15T22:19:00.002-05:00

I found this question on StackOverflow on how to replace text without destroying event handlers, DOM nodes and such. He just wanted to replace a name inside a block of HTML. The name could be inside of an LI, A (link), p or div element, etc. Here is the example HTML markup provided:

<div id="test">
    <h1>An article about John</h1>
    <p>The first paragraph is about John.</p>
    <p>The second paragraph contains a <a href="#">link to John's CV</a>.</p>
    <div class="comments">
        <h2>Comments to John's article</h2>
        <ul>
            <li>Some user asks John a question.</li>
            <li>John responds.</li>
        </ul>
    </div>
</div>

You couldn't simply grab the html() and replace the text because it the result replaces all of the elements inside of "#test" and thus breaks all previously attached functions (click, hover, etc.) or any entered form data inside of inputs (demo):

$('#test').html(function(i, v) {
    return v.replace(/John/g, 'Peter');    
});

Instead you'd have to step through each text node, find the name, then replace it - it's quite a chunk of code. But I think I found a quick and dirty solution (demo) that works on the HTML markup above:

$('#test :not(:has(*))').text(function(i, v) {
  return v.replace(/John/g, 'Peter');    
});

What this does is find all elements that don't have children, and replace the text inside.

To understand what the selector is doing, first imagine the selector like this: "#test *:not(:has(*))". So reading it out in plain language would sound like this: Find the element with an ID of test, then find all elements within it (the first asterisk "*"), then find the opposite ":not()" of all elements that have children ":has(*)", meaning elements that don't have children. Then get the text and replace it.

But this quick and dirty method does have an important limitation which is that it would ignore text inside an element that has child elements. Here is an example of what I mean where the link is treated as a child element and thus the name is not replaced (nothing would change):

<div id="test">
    <p>Visit John's <a href="blog.html">blog</a></p>
</div>

So, if you do have markup like as it is above, then just wrap the name in a span (demo):

<div id="test">
    <p>Visit <span>John's</span> <a href="blog.html">blog</a></p>
</div>

If you don't or can't wrap the name, then you can't use the quick and dirty method I posted above. You'll have to use this textWalk plugin by PatrickDW (a demo, and see his answer for full details) or check out Bobince's answer in this question for a similar method of walking through the text nodes.

FancySelector

2011-05-02T11:57:00.000-05:00

I just created FancySelector which replaces the standard select with a more visually appealing select. It allows you to scroll through the options with either the keyboard or mouse. Selecting multiple options is similar but not exactly the same as using a standard select. Please see the documentation for more details.

There are two demos, a full screen demo (pictured below) and an inline selector demo.

This jQuery plugin is available for download on github.

Visual Event Bookmarklet

2011-04-23T11:02:00.000-05:00

I've been using Visual Event bookmarklet to help quickly visualize which events are attached to a page while troubleshooting problems.

I do have one problem with the script. It adds too many layers so you can't get to the lower layers. Here is a screen shot of how the last post I made looks with Visual Event (on the left) and the second screen shot is how it looks after the script is applied (on the right):

I made a github gist and a jsFiddle demo of this script. To use it, just add the following script into the Firebug console to enable the script:

var veColors = [ 'black', 'orange', 'purple', 'green', 'blue', 'yellow', 'red' ],
 veColorLength= veColors.length - 1,
 veLayerIndex = 0;
 
function showVeLayer(nxt){
 veLayerIndex += (nxt) ? 1 : -1;
 if (veLayerIndex > veColorLength) { veLayerIndex = 0; }
 if (veLayerIndex < 0) { veLayerIndex = veColorLength; }

 var veLayer =  $('.Event_bg_' + veColors[veLayerIndex]);
 if (veLayer.length === 0 ) { showVeLayer(nxt); return; }

 $('.Event_bg_' + veColors.join(', .Event_bg_')).hide();
 veLayer.show();
};

$(document).keyup(function(e){
 switch(e.which){
  case 39: case 40: // right/down
   showVeLayer(true);
   break;
  case 37: case 38: // left/up
   showVeLayer();
   break;
 }
});

FullCalendar mini-sized

2011-04-23T10:03:00.003-05:00

I've always liked Adam Shaw's FullCalendar plugin and while I was trolling Stackoverflow I found a question about how one would make a tiny version of the calendar. Gears started grinding and I figured that it could be done with just some basic CSS. YAY!!

This is from the answer I posted on Stackoverflow:

You can make a fully functional tiny version by adding a bit of CSS. I had to add a "eventMouseover" callback to add the event name to the title attribute, so you can see it's name in the tooltip.

Here is a screen shot of the mini-sized calendar (200 x 225)

And jsFiddle for a demo:

So, just in case something happens to Stackoverflow and/or jsFiddle, here is the CSS and javascript that was used:

#calendar {
    width: 200px;
    margin: 0 auto;
    font-size: 10px;
}
.fc-header-title h2 {
    font-size: .9em;
    white-space: normal !important;
}
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event {
    font-size: 0;
    overflow: hidden;
    height: 2px;
}
.fc-view-agendaWeek .fc-event-vert {
    font-size: 0;
    overflow: hidden;
    width: 2px !important;
}
.fc-agenda-axis {
    width: 20px !important;
    font-size: .7em;
}

.fc-button-content {
    padding: 0;
}

$(document).ready(function() {

    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,

        // add event name to title attribute on mouseover
        eventMouseover: function(event, jsEvent, view) {
            if (view.name !== 'agendaDay') {
                $(jsEvent.target).attr('title', event.title);
            }
        }
    });

});

Vertical Parallax Effect for the Entire Page

2011-04-19T11:42:00.002-05:00

I found a game site (Elder Scrolls) that has a really cool vertical scrolling effect that I wanted to duplicate, but it only works in webkit browsers. I didn't make it into a plugin, but instead made this tutorial, because if you understand the basics, you can add more background images or use CSS3 to add multiple background images.

This is a screen shot of the web page while it is at the top. Note the location of the building tower top is near the top of the logo that is under "Generic".

This screen shot shows how the top of "Box 1" is now above the building tower. Blocks in the foreground move slightly faster than the background image.

Here is the final demo of the vertical scrolling effect (see it as a full page).

How it's done

The Images

This effect uses two background images. The top image (bg1.jpg, 1920x1080 pixels) fades to solid black on its bottom edge.

It's made to be a bit blurry, but you can duplicate the game site's background image by keeping the foreground sharp and the background blurry... it's a cooler effect ;)

The second background image (bgtile.jpg, 963x1641 pixels) is added as a background image that appears under the above top image. The css is adjusted so that the top of this image appears below the top image so that you don't see a straight black line cut through the top.

This image is blurry and mostly black, it fades to solid black at the edges, with a rock-like texture. It makes the vertical parallax scroll very subtle, so you may want to adjust it as desired.

The other two images that are used are the title/logo image (title.png, 400x300 pixels).

And the box background (bg-black-55.png, 20x20 pixels) which is a png file of solid black with a 55% opacity.

The Markup
This is very basic HTML markup. The body contains the repeating background tile image (bgtile.jpg). A wrapper is immediately inside the body which contains the top background image (bg1.jpg). These two images could be combined in the body tag if you use css3; then you could use the wrapper for additional images. The Header contains the logo (title.png) and each block of content has the box background image (bg-black-55.png) applied. Fill in the "div.content" block with whatever you want.

<body> <!-- contains repeated background image -->
<div id="wrapper"> <!-- contains top image -->

<div id="header"></div> <!-- contains the page title image -->

 <div class="block"> <!-- contains 55% opacity background image -->
  <h3>Block 1</h3>
  <div class="content">Content 1.</div>
 </div>

 <div class="block"> <!-- contains 55% opacity background image -->
  <h3>Block 2</h3>
  <div class="content">Content 2.</div>
 </div>

 <div class="block"> <!-- contains 55% opacity background image -->
  <h3>Block 3</h3>
  <div class="content">Content 3.</div>
 </div>

 <div class="block"> <!-- contains 55% opacity background image -->
  <h3>Block 4</h3>
  <div class="content">Content 4.</div>
 </div>

 <div class="block"> <!-- contains 55% opacity background image -->
  <h3>Block 5</h3>
  <div class="content">Content 5.</div>
 </div>

</div>

</body>

The CSS
The CSS below doesn't have a lot of comments, but the important parts to focus on are the main background image positions.

body {background: #333; color: #ddd;}
a:link { color: #ddd; }
a:hover { text-decoration: underline; }
a:visited,a:active { color: #999; }

/* Tiled background image */
body {
 margin: 0;
 padding: 0;
 /* Use height of header image for top position */
 background: #000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bgtile.jpg) left 1080px repeat-y;
}
/* Top background image (1920x1200) */
#wrapper {
 position: relative;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bg1.jpg) center top repeat-x;
 z-index: 100;
}
/* Page Title image */
#header {
 height: 350px;
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/title.png) center 40px no-repeat;
}
/* Content Block with 55% opacity background image */
.block {
 width: 400px;
 height: 500px;
 margin: 20px auto;
 border: #333 1px solid;
 padding: 20px;
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bg-black-55.png);
}
.block h3 {
 font-family: 'Arial Black', Gadget, sans-serif;
 font-size: 130%;
}

The Script

jQuery(document).ready(function(){
  // saved values
  var st, 
   // get window and body elements
   win = jQuery(window)[0],
   body = jQuery('body')[0],
   wrap = jQuery('#wrapper')[0],
   // make sure we target the correct document (in IE)
   doc = (jQuery.support.boxModel) ? document.documentElement : document.body,
  
   // Set top background image height here, in pixels
   imgH = 1080;

  // vertical parallax scroll code
  jQuery(win).scroll(function(){
   // get the page scroll top (IE uses doc.scrollTop)
   st = (win.pageYOffset || doc.scrollTop );

   // Limit moving top image (in the "wrap") only when in view (st < imgH)
   // Doing this reduces the amount of DOM activity so it doesn't slow down the scrolling.
   // Here is where the background position of the top image is moved by 1/4 (st/4) of the total amount scrolled
   // Increasing the fraction (making it closer to one) will speed up the background parallax scroll
   // Decreasing the fraction will slow down the parallax scroll
   if (st < imgH) { wrap.style.backgroundPosition = 'center ' + (st/4) + 'px'; }

   // This line limits the tiled background image in the "body"
   body.style.backgroundPosition = 'left ' + ( imgH + st/4) + 'px';
  });
});

Code breakdown

The first and last line wrap the code which is run when the document is ready. This is a jQuery method and can be written several different ways. Basically, any code inside is run when the basic structure and code of the page has completed loading. Images may or may not have completed loading at this time.
```
jQuery(document).ready(function(){
  // code to run
});
```
The next few lines save the variables that are repeatedly used in the script. Saving them reduces the amount of time taken to run code inside the scroll function. See the optimization section for more details.
```
// saved values
var st, 
 // get window and body elements
 win = jQuery(window)[0],
 body = jQuery('body')[0],
 wrap = jQuery('#wrapper')[0],
 // make sure we target the correct document (in IE)
 doc = (jQuery.support.boxModel) ? document.documentElement : document.body,
```
*Note that each line ends with a comma - it is defining multiple variables with one "var".
The next saved variable saves the top background image height (bg1.jpg). This is needed so the script can figure out where to start the tiling of the repeated background image (bgtile.jpg). This ensures that the tiled background image isn't overlapped by the top background image making the user see a sharp black edge at the overlap. The script also uses this height to stop the parallax scroll of the top background image when it isn't in view. The reason for this is discussed in the optimization section below.
```
// Set top background image height here, in pixels
imgH = 1080;
```
Now we bind to the window scroll event. This event is fired everytime the browser window is scrolled. So it can be called hundreds of times while scrolling down the page. This is the reason the code inside this function is kept as minimal as possible.
```
// vertical parallax scroll code
jQuery(win).scroll(function(){

  // code run each time the page is scrolled

}); // second to last line in the completed script
```
Get the scroll top of the page. Check standard browsers variable, and if not defined (IE) then get the document scroll top.
```
// get the page scroll top (IE uses doc.scrollTop)
st = (win.pageYOffset || doc.scrollTop );
```

Apply the parallax to the top background image.

// Here is where the background position of the top image is moved by 1/4 (st/4) of the total amount scrolled
// Increasing the fraction (making it closer to one) will speed up the background parallax scroll
// Decreasing the fraction will slow down the parallax scroll
if (st < imgH) { wrap.style.backgroundPosition = 'center ' + (st/4) + 'px'; }

The first thing we do is check if the scroll top (st) is less than the top background image height. If it is, then use parallax on the top background image.
"wrap" is one of our saved variables that points to the page wrapper. Here we set the background position using direct DOM manipulation. See optimization section for more details.
The background position has two parts - "X Y" positions. We care centering the image from left to right (the X-position), then taking one fourth (1/4) of the scroll top position and making that the background's Y-position. This is basically how the parallax scroll works. It scroll 1/4 less than the actual page. If you add another layer (say wrapper 2), it should be scrolled slightly more (a number closer to one, like 2/3).
So here the top background image is scrolled 1/4 less (1/4 * st) than the page itself. Make this number closer to one (i.e. 3/4 * st) to make the scroll more like the page scroll. Or make the number further from one (i.e. 1/8 * st) to make the scroll a tiny bit. Making the number too small may make the background image appear fixed, so don't go too crazy ;)

Apply the parallax to the tiled background image.

// This line limits the tiled background image in the "body"
body.style.backgroundPosition = 'left ' + ( imgH + st/4) + 'px';

Now we are applying the background position to the body of the page, where the tiled background image (bgtile.jpg) is seen.
Here we are place the background image on the left edge (centering should be fine too) and again 1/4 of the scroll top of the page. In addition we add the top image height (imgH) to keep the tiled background image aligned to the bottom of the top background image. So we make sure not to see that black image edge.
Since the body background image is behind the wrapper background image, you could make this parallax scroll even slower to give more of a feel of it being further off in the distance. This would look especially good with multiple background images available when using css3.

Optimizations

This script was optimized so that a minimal amount of code is run inside the scroll function.
This ensures that the code doesn't slow down the page scroll, because the scroll function is called constantly. It's probably not a big deal is modern browsers, but is very noticeable in older browsers.
This was done, in part, by saving variables. This limits the amount of look ups that need to be done by the script. Using $(window) or $(document) needs to call several functions to get a value, so saving it in a variable saves time.
To set the background position, the script sets the background position directly in the DOM. Again, this was done to minimize function calls. I didn't have any trouble with cross browser compatibility in any browsers, including Opera and IE7+.

Keycaster

2010-12-21T09:37:00.001-06:00

Keycaster is a jQuery plugin was written to add a keystroke and mouse visualizer to your browser window. It is similar to keycastr for the mac, except this only works inside the browser window.

This plugin is still in the alpha stage because it doesn't show all shifted keys properly and some key symbols do not work in all browsers (written mainly to work in Firefox). Also I plan on making this script work as a bookmarklet so you can just click on a link to activate it.

Update: You can now add this script to any page using this bookmarklet - Keycaster - just drag it into your browser bookmarks and click on it whenever you need to visualize your mouse or keyboard actions.

jQuery UI Keyboard Widget

2010-11-28T10:59:00.001-06:00

I found this widget by Jeremy Satterfield which adds an virtual keyboard to any input or text area. I really liked it and had a lot of ideas that I wanted to add :P

So, I made a github repository, added a few of my ideas to the widget so now I present to you updated keyboard widget! (more updates to come!)

Here are some of the changes I made to version 1.5:

Changed class of preview window from 'ui-state-active' to 'ui-widget-content' because it looks bad in some themes.
Added 'ui-widget-content' class to the element (input or textarea).
Added International keyboard Layout (AltGr key) and expanded the keysets up to four.
Added more special/"action" keys:
- Previous text only keys now have a companion symbol only key. The abbreviated names contain only a symbol so as to fit the layout style as desired.
- Added alt key to allow accessing two additional key sets.
- Changed name of {neg} to {sign}. This key changes the sign of the input.
- Added tab key
Fixed positioning utility problem I added in the last version - show the popup before positioning (duh).
Added position option to allow positioning the keyboard anywhere around the input/textarea.
Added display option to support multiple languages or change key symbols.
Added actionClass option to allow changing the style of the accept and cancel keys.
Added lockInput option to lock or unlock the ability to access the preview window.
Added keyBinding option to change the keyboard key behaviour.
Added useCombos to enable the dead key emulation which allows entering diacritic key combinations.
Using the escape key now closes the keyboard.
Added mousewheel support to allow scrolling through the other keysets while hovering over a key.
Added ARIA support (may not be complete).

And on my to do list are:

Allow inserting text at the caret inside the preview window.
Add max length setting.
Add additional buttons to change key sets (similar to the alt key).
Add callbacks.
Add _destroy function.
Work on setting up one keyboard per layout to speed up initialization.

SqueezeBox

2010-11-17T01:20:00.001-06:00

There is a very cool sliding accordion on Apple's Store site to compare various computers (click compare then scroll).

SqueezeBox is a jQuery plugin written to emulate that effect. It was designed to use the same themes available for jQuery UI, or you can add your own theme.

Click on the image or go to the demo page.

Features:

Easily change the theme but just loading in a different jQuery UI theme (Redmond theme shown).
SqueezeBox works with both collapsible and non-collapsible blocks.
Activate a header numerous ways:
1. Use browser hash marks to target the header ID - used on initial page load.
2. Click on any header to make it active - all headers above it will collapse using a smooth animation.
3. Use the script to set the active header.

Download it from my github repository.

Kwicks for jQuery v2.0

2010-11-08T12:23:00.000-06:00

I was recently was inspired to work on Kwicks for jQuery v1.5.1 by Jeremy Martin because it hasn't been updated for a few years. So, I ended up changing the plugin structure to make it easier (for me) to add a getter, setter, event hooks and custom events.

Check out the demo. Hopefully there is enough documentation to make adding a kwick to your own site easy! Download Kwicks for jQuery 2.0 here.

Web Search Widget

2010-10-20T13:19:00.001-05:00

I started messing around with the jQuery UI widget factory and put together a widget that allows you to easily add a web search button to your site (no server side scripting required).

There isn't much for me to write here since I put almost all of the needed instructions on the WebSearch github page. I hope someone finds it useful!

AnythingSlider

2010-09-28T17:06:00.003-05:00

I've been working on improving the AnythingSlider jQuery plugin by Chris Coyier of CSS-Tricks.com. The project was moved to github, so you can always get the latest version there... My version is up to 1.4 and you can check out a demo of it here - try starting both YouTube videos, then start the slideshow (doesn't work in Internet Explorer properly).

Features include:

Panels are HTML Content (can be anything).
Multiple AnythingSliders allowable per-page.
Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide).
Optionally resize each panel (specified per panel in css).
Optional Next / Previous Panel Arrows.
Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
Link to specific slides or go forward or back one slide from static text links
Each panel has a hashtag (can link directly to specific panels).
Optional custom function for formatting navigation text.
Auto-playing slideshow (optional feature, can start playing or stopped)
Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).
If slideshow is active, a playing video will complete before the slideshow continues.
Pauses slideshow on hover (optional).
Optionally play the slideshow once through, stopping on the last page.

Switched file hosting sites

2010-09-16T10:32:00.001-05:00

Apparently all the files hosted on myotherdrive.com are no longer available for direct linking. So I moved the important files over to dropbox.com and updated the appropriate posts.

Sorry if there was any inconvenience for anyone.

World of Warcraft Loot Systems

2010-08-25T23:24:00.000-05:00

I've added scripts that parse lua files from EPGP, Ni Karma and Suicide Kings addon loot systems. These scripts were written for websites that can't use php or other server side systems.

Click the link below to go to the github page, then click on the "Download Source" button.

Follow the examples provided.

Tooltips - Jatt (Just another tooltip)

2010-08-24T14:56:00.012-05:00

This is an updated version of my other tooltip script. With this version, you can:

Dynamically modify the tooltip using metadata.
Set a tooltip direction (8 directions: n, ne, e, se, s, sw, w & nw).
Tooltip content can be obtained from a selected object attribute, a different object on the same page, or via ajax.
Ajax calls can include jquery selectors to target specific page content.
Removed support for the dhtmltooltip script (the code is there, but commented out).

Adding the Tooltips
First make sure you have jQuery installed on your site, download the latest version from jQuery. Then add the following CSS and script to your site, or you can download the script here.

Basic setup

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip { width: 250px; }
#tooltip, #preview {
 color:#dddddd;
 background:#222222;
 border: 1px solid #333333;
 padding:5px;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align:left;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 display:none;
}
</style>
<script src="jatt.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $.jatt();
});
</script>

Using the Tooltips

Basic Tooltip

basic tip (a)	<a class="tooltip { direction: n; width: 100px; background: #222; color: #ddd; }" href="#" title="Tooltip (a) Content">basic tip (a))</a>
External page (a)	<a class="tooltip { direction: ne; width: 200px; }" href="http://wowmotty.blogspot.com/2009/06/new-and-improved-jquery-tooltips.html #Blog1_cmt-3390748906554490641">External page (a)</span>
Object on page (div) Hi	<div class="tooltip { direction: e; width: 150px; background: #9bff8f; color: #333; }" rel="#tip1">Object on page (div)</div> <div id="tip1" style="display:none">Hi</div>
	<img class="tooltip { direction: se; width: 200px; background: #808080; color: #000; opacity: 1; }" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hideshow.gif" title="Tooltip (img) Content" >
Link (span)	<span class="tooltip { followMouse: false; direction: s; width: 300px; background: #008080; color: #ddd; }" title="Tooltip (span) Content">Link (span)</span>

class="tooltip" (required) - This class activates the tooltip
class="tooltip { metadata }" (optional) - Add any of the predefined options (listed below) or any css style to apply to the tooltip.
title="Tooltip content" (optional) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML but Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='hideshow.gif'>. If you must use quotes to surround some text, use the HTML escape code " - this text has "quotes" around it.
rel="selector" (optional) - If the "title" attribute is empty, the script will look in the "rel" attribute for a selector that points to an object containing the tooltip content (see the "External object (div)" example above).
href="page.htm #target span:first" (optional) - If the "title" and "rel" attributes are both empty, the script will look in the "href" attribute for a URL to an external page. The URL can be followed by an id or class selectors pointing to the tooltip contents (see the "External page (a)" example above).

Preview Tooltips

<a class="preview { direction: e; opacity: 1; text-align: center; }" href="URL to full size image" title="Google's Logo"><img src="URL to image thumbnail"></a>
- class="preview" (required) - This class activates the tooltip which puts the linked image (from the href) into a tooltip. The tooltip size is adjusted automatically to fit the image.
- class="preview { metadata }" (optional) - Add any of the predefined options (listed below) or any css style to apply to the tooltip.
- href="URL to full size image" (required) - URL to the image, for previewing in the tooltip and the URL you go to when you click on the image.
- title="TOOLTIP CONTENT" (optional) - This content becomes the image caption located below the image inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code " - this text has "quotes" around it.
- <img src="URL to image thumbnail"> (required) - This will be the thumbnail of the URL image (in orange), or you can pick any image as I did here. Or you can replace the <img> with text.

Screenshot Tooltips

LMYC	<a class="screenshot { direction: e; opacity: 1; text-align: center; } " href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" title="<center>Loch Modan Yacht Club</center>" rel="http://www.axiomfiles.com/Images/Spotlight/194525.jpg">LMYC</a>
Google	<a class="screenshot { direction: e; }" href="http://www.google.com" title="<center>Google</center>" rel="#">Google</a>

class="screenshot" (required) - This class activates the tooltip that gets the site screenshot image from the rel attribute (in light blue)
href="URL" (required) - URL of the target website
title="Tooltip content" (optional) - This content becomes the screenshot (image) caption inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code " - this text has "quotes" around it.
rel="Website_Screenshot.jpg" or rel="#" (required) This attribute can contain either the URL to the screenshot image of the site to which you have the link pointing. Yes, you will have to take, resize and upload the screenshot image yourself OR you can now use rel="#" to have Websnapr.com generate a thumbnail of the site for you.
text or image (required) - Text or image that becomes the clickable link to the site.

Customizing

Initializing the script (showing all default settings)

$(document).ready(function(){
 $.jatt({
  // options that can be modified by metadata
  direction      : 'n',     // direction of tooltip
  followMouse    : true,    // tooltip follows mouse movement
  content        : 'title', // attribute containing tooltip text
  speed          : 300,     // tooltip fadein speed
  local          : false,   // if true, the script attachs the tooltip locally; if false, the tooltip is added to the body
  xOffset        : 20,      // x distance from mouse (no negative values)
  yOffset        : 20,      // y distance from mouse (no negative values)
  zIndex         : 1000,    // z-index of tooltip

  // options not supported by metadata
  live           : false,                 // use live event support?
  metadata       : 'class',               // attribute that contains the metadata, use "false" (no quotes) to disable the metadata.
  activate       : 'mouseenter focusin',  // how tooltip is activated
  deactivate     : 'mouseleave focusout', // how tooltip is deactivated

  // change tooltip, screenshot and preview class
  tooltip        : '.tooltip',             // tooltip class
  screenshot     : 'a.screenshot',        // screenshot class
  preview        : 'a.preview',           // preview class

  // tooltip & preview ID (div that contains the tooltip)
  tooltipId      : 'tooltip',             // ID of actual tooltip
  previewId      : 'preview'              // ID of screenshot/preview tooltip 
 });
});

List of Options

Key	Value (default shown)	Description
direction	'n'	Choose the direction of the tooltip (in quotes; choose from n, ne, e, se, s, sw, w, nw).
followMouse	true	When hovering over the object with a tooltip, the tooltip will follow the mouse if true. If false, it will be positioned relative to the object.
content	'title'	Attribute containing the tooltip content. By default it is the "title" attribute.
speed	300	Time in milliseconds for the tooltip to fade in. By design the tooltip has no fade out because it is removed immediately.
local	false	Where the tooltip is attached. By default it is false and will attach to the document body; if true, it will be attached before the object.
xOffset	20	Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the X direction.
yOffset	20	Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the Y direction.
zIndex	1000	Adjust this if the tooltip is below another object.
live	false	Set to true if you add tooltip objects to your page dynamically (added after the page is loaded).
metadata	'class'	Location of the tooltip metadata. By default it will look in the class attribute. If set to "false" it will disable the metadata.
activate	'mouseenter focusin'	The event that causes the tooltip to display information.
deactivate	'mouseleave focusout'	The event that causes the tooltip to be removed.
tooltip	'.tooltip'	The class used to activate the tooltip. And the ID of the actual tooltip.
screenshot	'a.screenshot'	The class used to activate the screenshot script which shows an image associated with the URL. And this is the ID of both the screenshot & preview tooltips.
preview	'a.preview'	The class used to activate the preview script which shows the an image in the tooltip from the href.
tooltipId	'tooltip'	The ID of the actual tooltip.
previewId	'preview'	The ID of the actual preview/screenshot tooltip (the share the same one).

Known Issues

Fixed:If the tooltip contents go out of the viewport, the script attempt to adjust the tooltip to make it visible. If it moves the tooltip under the mouse, the tooltip will flicker and become unreadable. This occurs when the east or west direction is used, so limit use of 'east' when the tooltip is near the right side and 'west' when it is near the left. I'll look into fixing this problem in future versions.
The tooltip script won't obtain cross-domain ajax requests by default, but I have included James Padolsey's cross-domain ajax script (jquery.xdomainajax.js) which should enable it. Just include the script in the head of your document.
If you find any other issues, please submit an issue to Jatt's github repository.

How to click on a drag/sort object

2010-07-10T00:10:00.002-05:00

I've seen this question come up a few times on Stackoverflow. How can I make a draggable/sortable/resizable/selectable object clickable as well?

You can use the built in event timestamp to determine the time difference between when the mouse down and mouse up events occur. Here is a basic demo of a sortable list that contains hidden content - clicking on the header "Content #" will open the hidden below. Holding the mouse down on the header will allow you to sort the list.

HTML
This is a basic list which contains a header (h3) and a hidden div.

<ul id="sortable">
<li>
<h3>Content 1</h3>
<div class="hidden">Some Content</div>
</li>
<li>
<h3>Content 2</h3>
<div class="hidden">Some Content</div>
</li>
<li>
<h3>Content 3</h3>
<div class="hidden">Some Content</div>
</li>
<li>
<h3>Content 4</h3>
<div class="hidden">Some Content</div>
</li>
<li>
<h3>Content 5</h3>
<div class="hidden">Some Content</div>
</li>
</ul>

CSS
This css sets the styling of the list and hidden content.

/* set list width & remove bullets */
#sortable {
width: 500px;
list-style: none;
}
/* clickable header */
h3 {
font-size: 20px;
width: 200px;
background: #444;
margin: 5px;
padding-left: 5px;
}
/* header with revealed content */
h3.opened {
background: #0080c0;
}
/* hidden content */
.hidden {
display: none;
min-height: 100px;
background: #444;
color: #ddd;
padding: 5px;
}

Script
I've included a lot of inline comments in the script which I hope makes it clear as to what it does.
Updated code (9/24/2010 - Demo) - added mouse move flag:

$(document).ready(function(){
var last, diff, moved,
clickDelay = 500; // millisecond delay
$('#sortable')
// make the list sortable
.sortable()
// make h3 in the list "clickable"
.find('h3')
.bind('mousedown', function(e){
// set time on mousedown (start of click)
last = e.timeStamp;
// clear moved flag
moved = false;
})
.bind('mouseup mousemove', function(e){
    // flag showing that the mouse had been moved
    if (e.type == 'mousemove') {
     moved = true;
     // no need to continue
     return;
    }
// find time difference on mouse up (end of click)
diff = e.timeStamp - last;
    // check moved variable, to ignore click if the mouse had been moved (dragged)
    // if time difference is less than delay, then it was a click
    // if time difference is greater than the delay, then it was meant for dragging
if ( !moved &&  diff < clickDelay ) {
// toggle the opened class and the hidden content
$(this).toggleClass('opened').next().toggle();
}
});
});

Original code - Demo:

$(document).ready(function(){
var last, diff,
clickDelay = 500; // millisecond delay
$('#sortable')
// make the list sortable
.sortable()
// make h3 in the list "clickable"
.find('h3')
.bind('mousedown', function(e){
// set time on mousedown (start of click)
last = e.timeStamp;
})
.bind('mouseup', function(e){
// find time difference on mouse up (end of click)
diff = e.timeStamp - last;
// if time difference is less than delay, then it was a click
// if time difference is greater than the delay, then it was meant for dragging
if ( diff < clickDelay ) {
// toggle the opened class and the hidden content
$(this).toggleClass('opened').next().toggle();
}
});
});

In case you don't understand what's going on, a click is basically composed of a mousedown event and a mouseup event. The time difference between the two events is how you can determine if you have clicked or just pressed the mouse button to select text or drag an object around (like in this demo).
So in this script, the "last" variable contains the time stamp of the mouse down event
The "diff" is the time difference from the mouseup event and the last variable time.
I picked a default of 500 milliseconds for a mouse click delay (reference) for really slow clickers, but you can adjust it to anything you want.
If the time difference is less than 500 milliseconds then we can determine that the user clicked and preform the appropriate action (toggle the hidden content).
If the time difference is greater, then the user is probably trying to sort the list.
You could potentially add another action if the time difference is greater than the delay, but the script wouldn't do anything until the user released the mouse (mouseup event). But then you could bind a "mousemove" event that checks the timer against the "last" variable to find out how long the user has been clicking the mouse.
Update (9/24/2010): The newer script added above the original adds a mouse move flag that ignores the timer if the user moved the mouse during the click.

Visual Navigation

2010-07-09T10:58:00.020-05:00

There are a few sites that have a navigation menu that can highlight / change when the menu's target scrolls into view (e.g. brizk design & Crush + Lovely) . I tried to generalize the script so it would work with any site and I ended making up with this jQuery plugin.

I set up a demo page here.

Download: Uncompressed | Minified | Zipped Demo | Github

I have tested this plugin in IE8, Firefox and Chrome. Please leave me feedback if you any problems with how it works or if it doesn't work in other browsers.

Setup

This plugin requires jQuery in order to function properly.
Follow the basic templates below to set this up on your site. For more details, go to the specific section.

Default Setup

HTML

<div id="sidemenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

Change the side menu id to whatever you want, just make sure you target it with the script.
This side menu example will work with the plugin's default settings. See the alternate example of a different layout.

CSS

#sidemenu { position: fixed; top: 50px; left: 20px; background: #444; width: 120px; }
#sidemenu ul { list-style-type: none; margin: 0; padding: 0; }
#sidemenu li { margin: 5px; padding: 5px; width: 100px; text-align: center; }
#sidemenu li.selected { background: #555; }
#sidemenu a { text-decoration: none; color: #bbbbff; }
#sidemenu a:hover { color: #fff; }

This CSS highly variable. Change the position, size and colors as desired.

Script

$(document).ready(function(){
$('#sidemenu').visualNav();
});

Alternate Setup

HTML

<div id="menu">
<div class="link" title="#Home">Home</div>
<div class="link" title="#work">Work</div>
<div class="link" title="#blog">Blog</div>
<div class="link" title="#projects">Projects</div>
<div class="link" title=".about">About</div>
<div class="link" title=".contact">Contact</div>
</div>

This side menu uses divs with a title attribute. The value in this attribute can be used to target an Id or a class (which should be unique).
It is important to note, that this menu will not work with javascript disabled, whereas the default one will work.

CSS

#menu { position: fixed; top: 50px; left: 20px; background: #444; width: 120px; }
#menu div.link { margin: 5px; padding: 5px; width: 100px; text-align: center; }
#menu div.selected { background: #555; }

Script

$(document).ready(function(){
$('#menu').visualNav({
link              : 'div.link',
targetAttr        : 'title',
selectedAppliedTo : 'div.link'
});
});

Customizing / Options
This plugin has the following default options, so you will only need to include the line below in the script options if you want to change the default:

$('#sidemenu').visualNav({
link              : 'a',        // Add a link class, as necessary
targetAttr        : 'href',     // added in case you have link = "div" and attribute something like
selectedClass     : 'selected', // css class applied to menu
selectedAppliedTo : 'li',       // to only apply to the link, use "a"
topRange          : 100,        // measure from the top of the viewport to X pixels down
topMargin         : 100,        // margin above the top where the target updates the menu
bottomMargin      : 20,         // margin from the end of the page where the last menu item is used
animationTime     : 1200        // time in milliseconds
});

The first four options should were hopefully made clear in the examples above.
To modify how the menu acts, you will need to adjust the "topRange", "topMargin" and "bottomMargin" values. I made this picture to better understand what these values do for you.
topRange: The "topRange" is basically the area where target needs to be inside of in order for the menu to update. For example, the target (found in the link attribute) starts under the topRange. As it moves up and crosses into the topRange. The script then updates the side menu to show that the target area is in view (or inside the view port).
topMargin: The top edge margin (topMargin) is the area above the view port. The top edge margin is used while the page is being scrolled up - the target is above the view port and as you scroll up, the target moves down. When the target is inside the edge margin, the menu will update and point to that target.
bottomMargin: The bottom edge margin is the area below the view port. It is when the page is scrolled down (the contents are moving up). When the bottom of the page is inside the bottom edge margin, the menu will update with the last targeted id. This was necessary to be include in case the last section is too short and unable to reach the top range area.
animationTime: The animation time is the time in milliseconds that the menu will scroll to the selected section.

Known Problems / Bugs / Suggestions

The menu will not select (or highlight) the item above the last item if they are both very short. For example, if your browser shows three sections while at the bottom of the page. The third to last may have shown for a brief time just before the bottom of the page reached the bottom edge margin. The menu would then skip directly to the last menu item. This is one reason why the bottom margin value is kept a low number (20 pixels by default).
If you click on a menu item, the page contents will automatically scroll to that section and update the browser url with that target. But if you manually scroll the page using the scroll bar or mouse, the web page url will not update with the current position. This was done on purpose, because if the script changes the location, the page will jump to that target automatically. This wouldn't look good if you are quickly scrolling through the page as it would make the movement jittery.
To make suggestions or report any bugs please email me at wowmotty at g mail dot com.

todaysImage v1.0

2010-07-04T02:42:00.016-05:00

The plugin will take a group of images which have a set date range, and show an image randomly from the group depending on the current date. It is based on my original Random Image by Date script but has been significantly modified and improved! It's shiny and sparkly, but you won't be able to tell much difference on the surface.

The frame below contains a demo of this script... you can view the page directly by clicking this link so you can more easily understand what it does and test the debuging features.

Download: Uncompressed | Minified | Zipped Demo (2.5Mb - includes all images) | Github

Setup

The set up is fairly simple (I hope). The page requires three things to work:

jQuery loaded (you can use Google's copy as seen in the page source).
An <img> anywhere on your page.
Data source consisting of a date range and image url. You can also include optional comments.

Data Format

To include an image in this script, you will need the following bits of information:

Date (required) - Use the format below
Image URL (required)
Comment (optional)

Date format (do not include the year):

Dates	Description
0	Set image as a default (will only display if no date specific images are found).
1/1	Dispaly image only on Jan 1st.
1/1 - 1/5	Dispaly image from Jan 1st to Jan 5th (spaces are okay).
7/20 - 8/20	Display image from June 20th to August 20th.
1/3rdMon	Display image only on the 3rd Monday of January.
5/lastMon	Display image only on the last Monday of May.
11/3rdThur-11/4thThur	Display image from the 3rd Thursday of Nov to the 4th Thursday of Nov.
12/20-1/1stSun	Display image from Dec 20th to the 1st Sunday of January.

IMPORTANT NOTES:

The dates that cross months (7/20-8/20) will display along with date specific images (added to the randomization).
Use slashes "/" to separate the month and day and dashes "-" to set a range (e.g., using "1-1 to 1-5" will break the script)
Using the last weekday (lastMon) of the month in the date has one restriction at this time... it'll only works for 30 day months for now. I may fix this in future versions.
When using the text in the date (e.g. 1st, 2nd, 3rd, last) don't spell these fully out ( first, second, third) as the script is looking for the number and not the text.
The weekday in the date must have at least 3 letters - these are okay: (Mon or Monday); these are not okay (M or Mo).

Image URL - Umm, yeah it's required.
Comment (optional)
- The image comment will be added to the image title (or not, as desired) or into any HTML tag using an ID or class name.
- The script is set up so that the comment can include HTML elements to add styling, but be careful to not use quotes. The script does replace quotes with the HTML escape code " but this doesn't guarantee it will work once viewed in the comment div.

Data Sources

This plugin is set up to accept data from a jQuery selector (for data contained in HTML), an array or a JSON variable that is inline or retrieved remotely.
There is an example how to accomplish each method below and there is also a demo of each (included in the zipped file).
The examples below expect an image with the ID of "todaysImage"
All data should be presented to the script in this order: date, url, comment; you can change this order, but it will require additional option settings, described later.
There is no need to maintain the exact chronological order of the data. I tried to keep them this way in the demo to make finding dates easier.
All script should be wrapped in a $(document).ready function.

HTML
- The data can be stored in an HTML list. You point your jQuery selector at the list and tell it which attributes have the data.
- Here is an example list (hidden using CSS):
```
<ul id="myImageList">
<li rel="0" title="images/main1.jpg">Hello</li>
<li rel="0" title="images/main2.jpg">Hello</li>
<li rel="12/31-1/5" title="images/new-year.jpg">Happy New Year!</li>
<li rel="5/1-8/5" title="images/Summer.jpg">Summer time!</li>
</ul>
```
  As you see, the list is stored in an <li> tag with the date in the rel attribute, the url in the title attribute and the comment inside the tag. This is how to set the script to gather the data correctly.
```
$('#todaysImage').todaysImage({
data       : $('#myImageList li'),
dataObject : ['rel', 'title', 'html'] // these must be in this order: [date, url, comment]
});
```
  The 'rel' and 'title' parts of the dataObject are attributes of the tag while the comments needs either a 'text' or 'html' to target its data; use 'html' as in the example, if you have included any styling in your comment.
  
  NOTE: As stated before the order of the dataObject is important - [ date, url, comment ]
ARRAY
- An array can be set up, as I did in my original script, to contain all of the data needed for this script.
- Once again, the order these are placed in the array are important, here is a basic template:
  
  images.push (["DATES","IMAGE URL", "COMMENT"]);
- Here is an example:
```
var images = [];
images.push(["0","images/main1.jpg","Hello"]);
images.push(["0","images/main2.jpg","Hello"]);
images.push(["12/31-1/5","images/new-year.jpg","Happy New Year!"]);
images.push(["5/1-8/5","images/Summer.jpg","Summer time!"]);
```
  the script below will access this data. Notice the dataObject option sets the order of the image array. If you already have an array with similar data, all you need to do is set the dataObject to point to the correct index so that this order is maintained [ date, image URL, comments ] (e.g. images.push([ "comment", "other data", "dates", "url' ]), would required the dataObject to be [2, 3, 0]).
```
$('#todaysImage').todaysImage({
data        : images,
dataObject  : [0,1,2]
});
```
JSON - inline
- I use this method when I have a short list and want to save myself a server call.
- Take a standard JSON object and just add "var json =" in front of it.
- If you already have a JSON set up but it has different names (or even a different language) then just adjust the dataObject as needed
- Here is a basic template:
```
var imageList = {"images": [
{
"dates"  : "0",
"image"  : "images/main1.jpg",
"comment": "Hello"
},{
"dates"  : "0",
"image"  : "images/main2.jpg",
"comment": "Hello"
},{
"dates"  : "12/31-1/5",
"image"  : "images/new-year.jpg",
"comment": "Happy New Year!"
},{
"dates"  : "5/1-8/5",
"image"  : "images/Summer.jpg",
"comment": "Summer time!"
}
]};
```
  The script below will access this data. Notice that "imageList" matches the variable and "images" matches the very first name in the JSON object (the key). The dataObject by default is [ 'dates', 'image', 'comment' ] which matches the JSON above; but if you have a JSON object that has different key names like "dateRange", "imageURL" and "imageComment", then you will need to set the dataObject appropriately to [ 'dataRange', 'imageURL', 'imageComment' ].
```
$('#todaysImage').todaysImage({
data: imageList.images
});
```
JSON - remote
- Use this method to load JSON from your server. It won't work cross domain (unless you have it setup to work with JSONP)
- This method requires your JSON to be valid, or the object won't parse properly (this includes removing all comments)
- This JSON, as stated before, is essentially the same as the JSON inline.
```
{"images": [
{
"dates"  : "0",
"image"  : "images/main1.jpg",
"comment": "Hello"
},{
"dates"  : "0",
"image"  : "images/main2.jpg",
"comment": "Hello"
},{
"dates"  : "12/31-1/5",
"image"  : "images/new-year.jpg",
"comment": "Happy New Year!"
},{
"dates"  : "5/1-8/5",
"image"  : "images/Summer.jpg",
"comment": "Summer time!"
}
]};
```
  Access this remote JSON data as follows:
```
$.getJSON( 'images.json', function(imageList){
$('#todaysImage').todaysImage({
data: imageList.images
})
})
```
  The JSON data in the example is from the file "images.json". Replace this with the URL pointing to your data. I used "imageList" as the JSON data to show the similarities to the JSON inline method. Of course "images" is the first element (key) in the JSON object, and the dataObject doesn't need modification as the names in the JSON object match.

Customizing
This plugin has the following default options, so you will only need to include the line below if you want to change the default:

$('#todaysImage').todaysImage({
data         : '', // dataObject contains the date, image and comment names as seen in the data (names if JSON, numbers [0,1,2] in an array)
dataObject   : ['dates','image','comment'],
comment      : '.imageComment', // class or id where the current image comment will be added; if it doesn't exist, no comment will be shown
noImageTitle : false,           // if true, the script will not add the comment to the image's title attribute

/* language options */
dayEndings : 'st|nd|rd|th',  // 1st, 2nd, 3rd, 4th, etc. (e.g. 1stMon & 3rdThu)
dayLast    : 'last',         // last weekday/weekend of the month
dayWeek    : ['sun','mon','tue','wed','thu','fri','sat'], // days of the week (case insensitive)

/* debugging options */
locked          : false,// prevent debug mode onscreen output if true (debug setting from browser URL only).
debug           : false,// set debug mode.
debugId         : 'imagedebug', // id of the debug output div - all info and show all images will be added here.
debugElement    : 'body',       // Location where debug id is added (where debugId div is appended)
defaultDate     : '1/1/2010',   // date used if setting debug mode but no default date.
inRangeColor    : '#080',       // color highlight (green) for signifying the date is in range.
notInRangeColor : '#f00'// color highlight (red) for dates not in range.
})

Option	Description
data	Please refer to the Data Sources section above on how to set this data
dataObject	Please refer to the Data Sources section above on how to set this data
comment	This option targets the class or Id of an HTML element where you want the current image comment to be displayed, if this target doesn't exist, no comment will be shown
noImageTitle	Prevent the script from adding the comment to the image title. Done if you want to apply a tooltip to the image to display the message
dayEndings	Abbreviation suffixes for 1st, 2nd, 3rd, 4th, etc. The script actually only uses these to match the date string, but they are ignored otherwise. So if you mistakenly add 4rd, it will use the 4 and not the "rd"
dayLast	String used to match and causes the script to find the last weekday/weekend of the month (e.g. lastMon)
dayWeek	List of days of the week. It is used to match the weekday from the data date, so this is language agnostic, but the first day of the array must start with sunday to match the javascript date method. Limit these names to three letters and the letter case doesn't matter.
monthFirst	Set to true (default) to use standard US date formatting - mm/dd/yyyy. If set to false, the European date format can be used - dd/mm/yyyy.
locked	Locks out using the debug mode from the browser address bar (adding "#debug" to the url will enable debug mode if the script isn't locked, like my demo)
debug	Enable debug mode through the script. This value is set to true if the script is not locked and "#debug" is added to the url. This mode will display image data to show matches found and date ranges. For more detail, see the troubleshooting section below
debugId	This is the Id of the element to find to output the debug data. If it doesn't exist and debug mode is initiated, a div with this Id will be added to the debugElement (see below) which by default is the document body. If using the showAll() method above, this element will need to me manually added before images will be displayed.
debugElement	By default, the debug element is the document body. This is where the debugId div is appended, if it doesn't exist, when debug mode is initiated.
defaultDate	This date is only used if the debug mode is initiated by the script and no other date is supplied. The default date for the debug mode when adding it to the url would be the current date unless otherwise specified - see the troubleshooting section below for more details
inRangeColor	Text color applied to the debug text when an image date is in range (green by default)
notInRangeColor	Text color applied to the debug text when an image date is not in range (red by default)

Methods
You can get, set, find current number or have the script choose another random image as follows:

Get current image data
- Use the "currentImage()" method to get this data.
- This method will return an array of the currently displayed image's date, url and comment (in that order).
- The second line was added to show how to target the image url.
```
var current = $(image).data('todaysImage').currentImage(); // returns array ['dates','image url','comment']
alert( 'current image url = ' + current[1] );
```
Set/Get current image
- Add a number to the "currentImage()" method to set the image. An array of the image is returned (as above).
- Setting a number that is greater than the number of images in the date range will cause the image to wrap around back to the beginning
```
// Sets displayed image to the first (zero based index) image that falls within the date range,
// then returns array ['dates','image url','comment'] of that image
var current = $(image).data('todaysImage').currentImage(1);
```
Get current number of images
- Use the "currentNumber()" method to get this information.
- This value is the number of images with a date range that covered the date (e.g. if the date is 12/24, the demo script will find 8 images from which to choose)
```
// return the number of images that have date ranges that match the date
var currentNumber = $(image).data('todaysImage').currentNumber(); // returns a number
```
Random Image
- Use the "randomImage()" method to display another random image.
- This method will return an array of the currently displayed image's date, url and comment (in that order).
```
$(image).data('todaysImage').randomImage(); // displays a random image in the date range & returns array
```
Show All Images
- This method is used by in edit mode when clicking on the "Show All Images" button. It is useful for checking that all the image urls are correct and all the data is valid.
```
// Show all images in the data, the script targets the id found in "debugId" option
$(image).data('todaysImage').showAll();
```

This method will not work if the element targeted by the "debugId" option doesn't exist. By default, the "debugId" is "imagedebug" which is added while the script is in debug mode. But if you want to display a list somewhere else, just make sure the target exists (Id only, no class) and change the "debugId" option to match it.
CSS
```
#allImages img { height: 100px; width: 100px; } /* make images thumbnail size */
```
HTML
```
<div id="allImages"></div>
```
Script
```
// initialization of script
$('#todaysImage').todaysImage(
// other options here, including data source
debugId : 'allImages'
});
```

Troubleshooting

If you are noticing that one image isn't showing up or something just doesn't work right, you can try to trouble shoot the problem.

Initiate the debug mode in the script as follows:

// initialization of script
$('#todaysImage').todaysImage(
// other options here, including data source
debug: true,
defaultDate: '12/24/2010' // choose any date using this format
});

Additionally, you can access the debug mode from the address bar simply by adding the following (in blue) to the end:

http://myurl.com/randomImage.htm#debug:12/31/2009
- #debug - actives the debug mode
- 12/31/2009 - sets the date you want to check (month/day/year)
To prevent debug from working once you are done with your script, simply set the locked variable in the script to true:
```
// initialization of script
$('#todaysImage').todaysImage(
// other options here, including data source
// locks out debug mode from the URL
locked: true
});
```
Sample debug output:
Date used: 11/20/2009
(11/11), derived range: 11-11 is NOT in range; image = veterans1.jpg
(11/11), derived range: 11-11 is NOT in range; image = veterans2.jpg
(11/11), derived range: 11-11 is NOT in range; image = veterans3.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving1.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving2.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving3.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving4.jpg

# of currentImages = 4
current random image = thanksgiving4.jpg
Try out these links to see the debug mode in action (my example script isn't locked):
1. #debug:1.1.2010
2. #debug:10/31/2009
3. #debug - This will default to todays date, but edit mode is active

ImageHighlighter v1.01

2010-06-30T12:41:00.023-05:00

ImageHighlighter is an updated version of my original imgHighLighter plugin with lot of improvements! Most are under the hood so you probably won't see too much of a difference on the surface.

This plugin allows you to highlight a portion of an image when you hover over a link. In the image below, the mouse is hovering over the different links and you can see the corresponding portion of the image becomes highlighted (there is an animate gif below, but just click on the image to go to the demo page).
I set up an demo page here.

Download: Uncompressed | Minified | Zipped Demo | Github

I have tested this plugin in IE8, Firefox and Chrome. Please leave me feedback if you any problems with how it works or if it doesn't work in other browsers.

7/6/2010: Updated this post to describe v1.01 where the editor portion of the script was moved into a plugin extension. And support for jCrop was added to allow selecting the entire box instead of just getting the mouse coordinates. Check out the updated demo page!

Setup

This plugin requires jQuery.
HoverIntent is an optional plugin, this plugin will use it's functionality if it is included.
Follow this basic template with a quick summary for each image you want to apply imageHighlighter functionality. For more details, go to the specific section.

HTML
```
<div>
<ul class="imgHL">
<li>
<a href="#" rel="sx1,sy1,ex2,ey2">Item #1</a>
<p>Description for item #1</p>
</li>
<li>
<a href="#" rel="sx1,sy1,ex2,ey2">Item #2</a>
<p>Description for item #2</p>
</li>
<li>
<a href="#" rel="sx1,sy1,ex2,ey2">Item #3</a>
<p>Description for item #3</p>
</li>
</ul>
<br>
<img id="imgHL" src="myimage.jpg" alt="" />
<div class="description"></div>
</div>
```
- In the HTML above, the highlight links are all wrapped in a div with a class name "imgHL" to make them easier to target.
- The highlight links (<a>) must contain a rel attribute with the highlight box coordinates (see the Highlights section below for more detail).
- Each link/description pair is wrapped together (inside an <li> in this case). See the Descriptions section below for more details.
- The image is the central element. Once the script is initialized, the image will contain all of the plugin information. It is also the target of both the imageHighlighter and imageHighlighterEditor scripts.
- The highlight description will be placed into the div with class "description". You can target a different class/Id when you modify the script options.
CSS (basic example)
```
/* List link: currently hovered/selected */
a.current { color: #fff; }

/* Hide & Position Descriptions */
.imgHL p { display: none; }
.description { margin: 1em auto; clear: both; width: 450px; height: 2.4em; }

/* General imageHighlighter (overlay and highlight) */
.imageHighlighter, .imgHLDark, .imgHLLight, .imgHLOverlay { padding: 0; margin: 0; } /* overlay and highlight divs */
.imgHLOverlay { background: #000; opacity: .5; filter: alpha(opacity=50); } /* overlay color & opacity *
```
- When a link is hovered and the image reveals the highlight box, the class "current" is applied to the link. You can use this to style the link and make it stand out.
- The css definition ".imgHL p" hides the descriptions that appear under the image (in this example). The description is moved into the ".description" element when the highlight link is hovered.
- The description class can be placed anywhere on the page; but because of this, the class name ".description" must be unique for each imageHighlighter instance on the page. You can easily modify this class name using the plugin options.
- The general imageHighlighter definitions apply to the div wrapping the image (.imageHighlighter), the overlay (.imgHLOverlay & .imgHLDark) and the highlighted box (.imgHLLight). As you can see, the overlay has a background color and 50% opacity to darken the image behind the highlight. This can be set to transparent here in the CSS or disabled using the script.
Javascript
```
/* window load ensures all images are loaded */
$(window).load(function(){
$('#imgHL').imageHighlighter({
list : '.imgHL a'
});
})
```
- This script uses "window.load" instead of "document.ready" to ensure that all images have been loaded. This is necessary as the script needs the image dimensions in order to initialize properly.
- In this basic example, the highlight links are targeted using the ".imgHL" div that wraps the entire list. The default list setting is "a" which is much too general to use, but the script will ignore any link that doesn't contain a rel tag.
- There are more options that can be set. For a full list and detailed descriptions, look under the customizing/options section!

Highlights: The highlight link's "rel" attribute contains all the information needed for the highlights.

rel="sx1,sy1,ex2,ey2"
sx1 Starting X position of the highlight box } top left corner
sy1 Starting Y position of the highlight box
ex2 Ending X position of the highlight box } bottom right corner
ey2 Ending Y position of the highlight box

You can change the highlight properties of each image using: borderColor, borderSize & borderType described in the Customizing/Options section below.

Image: The image must be targeted when initializing the script. You could target the class ('.imgHL') in the example above and the script will initialize once it has found the image from that group of selections. The image contains all of the data associated with this plugin, from using the built in methods to targeting custom events.
```
$("#imgHL").imageHighlighter();
```
Descriptions: Each link/description pair should be wrapped together. In the demo where the links are in a paragraph, the link/description pairs are wrapped in a span:
```
<span><a rel="sx1,sy1,ex2,ey2">Item #1</a><span class="desc">Description for Item #1</span></span>
```
In the other example, the pair are wrapped inside of a list (<li>). Make sure that the descriptions are hidden and targeted by the "descrip" plugin option. The script will look inside the link highlight wrapper, so you don't necessarily have to have a specific class assigned to it as long as the element is unique (e.g. don't have two <p>'s inside with the highlight link otherwise the contents of both will be displayed in the description.

The second part of the description is set using the "descripClass". The descriptions for the highlight will appear inside an element with this class, when hovering over a link. It can be located anywhere on the page, but the class/id needs to be set in the plugin options and unique for each instance of the plugin.
Overlay: The overlay covers the image (darkens the background) to make the highlighted portion stand out more. You can adjust the opacity of this overlay in the CSS and you can turn off the overlay functi0nality by setting the overlay option to false.

Customizing / Options
This plugin has the following default options, so you will only need to include the line below if you want to change the default:

$("#imgHL").imageHighlighter({
borderColor : "#fff",         // highlight border color
borderSize  : 4,              // highlight border thickness
borderType  : "solid",        // highlight border type
list        : "a",            // links that contain the highlight coordinates (e.g. "li.imgHL a")
descrip     : "p",            // HTML tag sibling of the link, that contains the description text (hidden) (e.g. "p.desc")
descripClass: ".description", // HTML tag where description text is shown (placeholder)
overlay     : true,           // display an overlay to make the highlight stand out
current     : "current",      // class applied to link currently used to highlight the image
hoverTimeout: 100,            // hoverIntent timeout (only applied if hoverIntent plugin is loaded)
zindex      : 10              // z-index of highlight box, overlay is automatically made 1 less than this number
})

Methods
You can use the following methods to get and set the highlighted content. Note that these methods must target the image.

Get: In the following example, the variable current will contain the current link object that has been highlighted. If nothing is currently highlighted, the script will return null.
```
var $current = $('#imgHL').data('imageHighlighter').highlight();
```
Set/Get:

Use a number (indexed from one: first, second, etc) - if the nth link doesn't exist, it will return null.
var $current = $('#imgHL').data('imageHighlighter').highlight(1); // select the first link
Search for the case-sensitive text within the link (uses the jQuery ":contains()" selector) - if the text is not found, the script will return null.
var $current = $('#imgHL').data('imageHighlighter').highlight("frames");
Search for the link with a class or ID - if the selector is not found, the script will return null.
var $current = $('#imgHL').data('imageHighlighter').highlight(".box");

Edit Mode

Updated in v1.01:
- The edit mode script was moved into an extension for the plugin. This was done because the edit script is not required once the coordinates are obtained and the script is deployed on your site.
- Additionally, the script was made to work with the Jcrop plugin (included with the demo file zip) allowing you to use a resizable selection box to more easily get the coordinates.
- If you click on the coordinates, the coordinates (contained in an input tag) become selected, so you can more easily copy them.
Edit mode for this plugin should make it easier to obtain the coordinates of the highlight box - the coordinates added to the highlight link rel attribute.
As of v1.01, edit mode can be activated by:
1. Including the imageHighlighterEditor script & the jCrop plugin script, if desired.
2. Set up the editor by calling the script on the same image(s) as the imageHighlighter script. You can generalize the call by targeting the ".imageHighlighter" class (applied to a div that wraps the image after the imageHighlighter script is applied to it). There is only one options, seen below:
```
// Enable the editor and use the Jcrop plugin, if it is available
$('div.imageHighlighter img').imageHighlighterEditor();

// Enable the editor, but don't use the Jcrop plugin (even if it has been loaded)
$('div.imageHighlighter img').imageHighlighterEditor({ useJcrop: false });
```
3. Now activate or deactivate edit mode by double clicking on the image. A green bar (styled in the CSS) will appear below the image which will show the mouse coordinates (default editor) or the box coordinates (Jcrop plugin added).
With the editor active:
- Default editor - move the cursor over the image to find the coordinates. Then clicking on the image will lock the coordinate display and make copying these numbers easier.
  Mouse x,y coordinates (click to lock/unlock) : x,y
- Jcrop plugin installed - single click anywhere on the image to make the a corner of the box, then drag your mouse any direction to create a resizeable box. The coordinates of the upper left and bottom right corners of the box will display under the image:
  Current box coordinates : x1,y1,x2,y2
- Click on the coordinates (they are inside an input tag). The contents will automatically be selected, but not copied.
- When you hover over a highlight link, the highlight link name and coordinates from that link is displayed above the coordinate bar.

Bugs / Suggestions

When the window is repositioned, the highlights may be off until it is refreshed again when you hover over a link (especially while in edit mode), and sometimes you'll need to reload the page.
To make suggestions or report any bugs please email me at wowmotty at g mail dot com.

Moving Boxes Updated

2010-06-21T13:11:00.012-05:00

Update (10/8/2011): A plugin is now available for WordPress for MovingBoxes v2.1.4, which you can download here or search for 'movingboxes' in your 'Install Plugins' page of your site admin section. More features and options will be added once craftyhub, the author, gets settled in :)

Update (10/13/2010): Version 1.5 now available!

I've updated the Moving Boxes script by Chris Coyier by converting the script into a plugin so now you can add multiple Moving Boxes blocks on the page at one time.

I haven't done extensive testing of the script, so if you find any bugs please feel free to contact me.

Download: uncompressed | minified | zipped file | github (see a demo!)

Options

Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma

<script type="text/javascript">
$(function(){
$(selector).movingBoxes({ key: value, key: value, key: value })
})
</script>
Key Value
(default shown) Description
startPanel 1 Choose the initial panel to show in the scroll window.
width 800 Overall width of movingBoxes.
panelWidth .50 Current panel width adjusted to 50% of movingBoxes width.
reducedSize .8 Non-current panel size: 80% of current panel size.
imageRatio 4/3 Image ratio set to 4:3. Wide screen would be 16:9 (16/9).
speed 500 Animation time in milliseconds for the scroll and expanding of the panel.
hashTags true If true, hash tags (browser history) are enabled.
wrap false If true,the panel will "wrap" at the ends.

Methods

Panels are numbered as a standard index (1st panel number is one, second is two, etc.).
Get number of currently selected panel:
$('.slider').data('movingBoxes').currentPanel();
Set currently selected panel:
$('.slider').data('movingBoxes').currentPanel(2);
External controls:
$('.slider').data('movingBoxes').goForward(); // go forward one slide (if possible)
$('.slider').data('movingBoxes').goBack();    // go back one slide (if possible)

Progress Indicator

2010-06-19T17:46:00.022-05:00

I wrote this plugin to allow more control over the progress indicator. To the right is an animated gif progress indicator. All you can do is show or hide this image. This plugin allows you to make a similar indicator that you can fully control. The plugin will animate both text (including bullets) or images, I guess you could also animate embedded objects, but I haven't tested this. The reason I call this progress indicator dynamic is you can modify or update the objects in the indicator at any time (e.g. replace images or text while the indicator is active). I'll make a demo of this when I have more time :)

In the demo below, you can start or stop the timer to make the progression indicator simulate the animated image or you can move the slider to animate the indicator.

Download: uncompressed | minified | zipped file | github
(zip includes demo; go to link, then download... I'm not sure why you can't download it directly)

Setup

CSS (basic setup)

.progress {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
overflow: hidden;
}
.progress span {
position: absolute;
left: -50px; /* hide spans until initialized */
top: 0;
padding: 0;
margin: 0;
border: 0;
}
.display {
position: absolute;
top: 95px;
left: 90px;
}

HTML

<div class="progress">
<!-- this displays the percent value, position in the middle with CSS -->
<div class="display"></div>
<!-- add as many <span>s as you want, add any text or image inside -->
<span>&bull;</span>
<span>&bull;</span>
<span>&bull;</span>
<span>&bull;</span>
<span>&bull;</span>
<span>&bull;</span>
</div>

Script - Initialization

<script type="text/javascript" src="jquery.progressindicator.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// initialize: initialValue is uaually zero, and a full list of "options" can be found below.
$(selector).progressIndicator( initialValue, options );
})

List of Default Settings:

Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma and values that use true or false (Boolean values) should not be in quotes.

$(selector).progressIndicator( initialValue, { key: value, key: value, key: value })

Key	Value (default shown)	Description
max	100	The circle is split into this max number of increments (default set to 100 to match a percentage going from 0-99).
radius	50	Sets the radius of the circle in pixels measured from the centerX and centerY position (middle).
centerX	100	Positions the center of the circle 100 pixels from the left edge of its container.
centerY	100	Positions the center of the circle 100 pixels from the top edge of the container.
clockwise	true	Sets the direction of the rotation. Clockwise if true and counter (or anti for you British folk) clockwise if false.
startPosition	0.75	This may not make sense if you don't know the coordinate system, but basically zero is the far right side of the circle or the x-y coordinates of ( x=radius, y=0 ) . So if you want to have the indicator start with the "zero" at the top of the circle, you need to start from 75% or 3/4 of your way around the circle. So basically, set 0 to start on the right, .25 (25%) for bottom, .5 (50%) for left and .75 (75%) would be the top of the circle where ( x = 0 , y = radius ).
sizeStart	80	Sets the starting size of the element to 80 pixels. This sets the font size, the height & width of any element inside the span (like an image)
sizeDec	4	Sets how much to decrement the size of the next element from the starting size. Try to avoid making the decrement size that would cause the last element to be too small or negative (for example: these settings would not look good, 10 spans inside the progress indicator (in the HTML), sizeStart = 20, sizeDec = 2; this would make the last span element have a size of zero (20 - 2 * 10 = 0).
showValue	true	Adds the progress indicator value to the "display" class inside the progress div. If you want to be tricky, add the display class to one of your spans to have the indicator move around with the other elements.
timerActive	false	Initialize progression indicator start and stop functions allowing the indicator to move independent of the percent value.
timerSpeed	20	Sets the setInterval time in milliseconds.
timerIncrement	1	At each setInterval call, the progression indicator is incremented by this value. Make this number bigger to speed up the animation, but the bigger the number, the more choppy the animation.

Methods

Get & Set Progression Value

// Get current value (percentage)
var value = $(selector).data('progressIndicator').getValue();

// Set/Update current value
$(selector).data('progressIndicator').update( value );

Animation timer functions (the timerActive option must be true before these will work)

// Start animation timer
$(selector).data('progressIndicator').start();

// Stop animation timer
$(selector).data('progressIndicator').stop();

// Reset animation timer (just resets position)
$(selector).data('progressIndicator').reset();

Examples - Be sure to look at the demo source to see some other examples of what is possible!

These examples should be wrapped inside of a:

$(document).ready(function(){ ... })

replace the ellipsis (...) with the script in the column below.

Action	Script	Notes:
Set up timer, so the start & stop methods are available. And adjust animation speed.	$('.progress').progressIndicator( 0, { timerActive : true, showValue : false, timerSpeed : 20, timerIncrement : 1 });	The zero in the first line sets the initial position of the indicator, it's not really that important for the animation timer mode, but necessary to include. "timerActive" enables the start and stop timer methods. "showValue" is set to false to hide the progression value. "timerSpeed" and "timerIncrement" were adjusted to make the progression animation fairly quick. In the demo they are set to 50 and 5 respectively so you can see how much faster you could make this animation without it being too choppy.
Rotate counter (anti) clockwise & other adjustments	$('.progress').progressIndicator({ clockwise : false, startPosition : .32, sizeStart : 5, sizeDec : -1 });	Setting the clockwise option to false with reverse the indicator rotation. Note that reversing the direction also effects the "startPosition" so you may need to adjust this value as well. This example is from progression3 in the demo and it needs a startPostion of .32 (32%) to move the images to the top... the reason it isn't 25% is because the sizeStart begins small (5 pixels) and the sizeDec is negative so this actually increases the image size as it progresses through the elements. You'll probably end up tweeking these numbers to get the look you want.
Max value	$('.progress').progressIndicator({ max : 200 });	By default, the progress indicator is set to work with percentages.. it really only goes from 0 to 99%, but by changing the max option, you can set a full rotation of the progress indicator to any value. Note, the value, set using the update method, and the max value can be fractions.

Drag External Events Into fullCalendar

2010-05-17T23:38:00.020-05:00

Update: FullCalendar now supports dragging external events into the calendar, but the external events don't include any event data =(

I want to first preface this post with this fullCalendar ticket where the author provides a github branch with a fullCalendar version, but he hasn't officially integrated the code into the main plugin as of yet.

I didn't want to use the non-supported version, so I wrote this plugin that essentially does that same thing. But this version only allows you to add external events to fullCalendar while it is in month mode. The author's version allows you to drop external events into the calendar while it is in any mode (month, week, day, etc). The reason is because this plugin will work with any version of fullCalendar, while the author's version would require that you use the unsupported code.

So, until fullCalendar officially releases a version that allows dragging in external events, you could consider using this plugin.

Download ( uncompressed | minified ) : Demo

Setup

Required scripts

fullCalendar plugin
jQuery library
jQuery UI Draggable, Resizable & Dialog components
jQuery metadata plugin (optional)

fullCalendar CSS (included with the plugin, but you will need to modify it if you want to use different colors (or set the calendar to use jQuery UI themes)
jQuery UI theme
Any additional CSS to position the external event panel (view the demo source for some basic settings)

HTML (basic setup with variations)

<ul id="eventsToAdd">
<li class="fc-event"><span data-id="holiday" class="title" data-start="8a" data-end="4p">Holiday</span></li>
<li class="fc-event"><span data-id="host" class="title {start: '7p', end: '10p', title: 'Get drunk!', duration : 2}">Hosting Event</span></li>
<li class="fc-event"><span data-id="meeting" class="title" data-title="Nap Time!">Meeting</span></li>
<li class="fc-event"><span data-id="party" class="title" data-allDay="false">Party</span></li>
<li class="fc-event"><span data-id="plan" class="title" data-start="5pm" data-end="7p">Planning Session</span></li>
<li class="fc-event"><span data-id="vacation" class="title" data-allDay="true" data-duration="7">Vacation</span></li>
</ul>

Script Setup (default settings shown)

$('#eventsToAdd li').fcExternalEvents({
calendar         : '#calendar',      // Selector string that points to the calendar object
newEventObject   : 'span.title',     // Contains all event data (store in metaData or in data-'attr' as seen in the HTML)

workDayStart     : '8a',             // use any time format '8','8a','8am','8 a.m.','0800','8:00' -> '08:00:00'
workDatEnd       : '4pm',            // use any time format '4','4p','4pm','4 p.m.','1600','16:00' -> '16:00:00'

draggableOptions : { revert: true }, // Available options: http://jqueryui.com/demos/droppable/
useMetaData      : true,             // If plugin exists get metadata from class (plugin: http://docs.jquery.com/Plugins/Metadata)
metaDataOptions  : {},               // use this if you put the metadata anywhere beside inside the class attribute (http://docs.jquery.com/Plugins/Metadata/metadata#options)
editExternalEvent: true,             // true: allows you to click on an external event to edit it's data.
addExternalEvent : true,             // true: allows you to add an external event to the list.
disableConfirm   : false             // true: disables the confirmation popup when you try to delete an event.
});

Script for Event Triggers (used to update your database)

External Event added to FullCalendar - triggered on the calendar itself

// *****************************************
// External event added to fullCalendar event trigger
// *****************************************
// fcEventObject  = fullCalendar event object
$('#calendar').bind('ExternalEventAddedToFullCalendar', function(event, fcEventObject){
updateDisplay('Event added to fullCalendar: ' + fcEventObject.title );
});

Add, Update or Delete an External Event - triggered on external event container

// *****************************************
// External Event triggers:
// Add, update and delete are triggered on the PARENT element!
// *****************************************
$('#eventsToAdd')

// External Event Added/Updated
// ********************
// externalEventElement = jQuery object targeting newly added draggable event
// fcEventObject  = fullCalendar event object
.bind('ExternalEventUpdated ExternalEventAdded', function( event, fcEventObject, externalEventElement ){
var whichEvent = ( event.type == 'ExternalEventAdded' ) ? 'added' : 'updated';
var txt = 'External event ' + whichEvent + ':' + externalEventElement.find('span.title').text() + ' (' + fcEventObject.title + ')';
updateDisplay( txt );
})

// External Event Deleted
// ********************
// externalEventElement = jQuery object targeting newly added draggable event
// fcEventObject  = fullCalendar event object
.bind('ExternalEventDeleted', function(event, fcEventObject, externalEventElement ){
var txt = 'External event Deleted:' + externalEventElement.text();
updateDisplay( txt );
});

fcEventObject - Please refer to the FullCalendar Event Object documents for details.

Customization

HTML data

Inside of the "newEventObject" (<span> contained inside of the <li> in the HTML above) you can add data in three different ways:

Add a data-[name] attribute supported by HTML5. Each Full Calendar Event Object property key should replace the [name] so you'll end up adding these data attributes:

Event Object	Data attribute	Type
id	data-id	String/Integer
title	data-title	String
allDay	data-allDay	true or false (Boolean)
start	data-start	String (time only) - The external event script adds the correct month, day & year to the event after it is dropped on the calendar
end	data-end	String (time only) -The external event script adds the correct month, day & year to the event after it is dropped on the calendar
url	data-url	String - the editor does not validate the URL.
className	data-className	String/Array
editable	data-editable	true or false (Boolean)
duration	data-duration	Integer (# of days) - This attribute is used by the external event script to determine the end date of an event. It might be best to also set the "allDay" attribute to true if this value is more than one.

For more details see the FullCalendar Event Object Documentation.

Add metadata contained inside of the class attribute, as in this example:

<li>
<span class="title { id: 'event1', title: 'My Event', allDay: false, start: '1pm', end: '2pm' }">My External Event Name</span>
</li>

Add data using this plugin's Add or Edit Event functions

When adding or editing an external event, a few more event options are listed. These include the "Event Location" & "Event Description" which are part of the google calendar event object, but not standard in FullCalendar, so some customizing of FullCalendar would be required to see this part of the data. It is added here in case you are using google calendar events.

You will also notice a checkbox that is labeled "Make id unique". By default this is checked. What it does is adds a date stamp to the end of the id so that adding multiple copies of one event will move separately when dragging and dropping on FullCalendar. You can try it out by adding two copies of any event, when you attempt to move the event around in fullCalendar, both events will move, keeping the number of days between events the same - if you don't understand my description, just try it out in the demo :)

If a piece of data is not listed in the data-[name] or in the metadata then it will be set to its default value when added to the FullCalendar.

List of Standard Options:

Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma and values that use true or false (Boolean values) should not be in quotes.

$('#listWrapper eventWrapper').fcExternalEvents({ key: value, key: value, key: value })

Key	Value (default shown)	Description
calendar	'#calendar'	This selector string should point to a fullCalendar object. After fullCalendar renders a calendar, it adds an '.fc' class, but this doesn't target specific calendars, so please use a unique ID for this value if you have more than one calendar per page.
newEventObject	'span.title'	In the HTML above, the external event list is added as an unordered list. Using this option allows you to target each event using this selector, but the way the script is set up, it should have at least three levels (main wrapper > event wrapper > newEventObject) or (#eventsToAdd > li > span.title)
workDayStart	'8a'	I tried to account for just about any time format (8, 8a, 8am, 8 a.m., 0800, 08:00). But this time is basically the default event start time if no start time is set.
workDatEnd	'4pm'	As with the workDayStart, I tried to account for different time formats (it may not be 100% perfect). This time sets the default event stop time if no end time is set.
draggableOptions	{ revert: true }	By default, the draggable element will revert to the starting position. Use this option to add or remove any of the draggable options.
useMetaData	true	The script detects the metadata plugin. It will use the metadata it finds if this option is set to true.
metaDataOptions	{}	If you do have metadata you want to use, it will by default look in the "newEventObject" class attribute. Adjust these metadata options if it is located elsewhere.
editExternalEvent	true	If you don't want users to edit the list of external events, set this option to false
addExternalEvent	true	Allows users to add additional external events. They will automatically be able to edit these newly added events even if the "editExternalEvent" option is false.
disableConfirm	false	Disables the confirmation to delete an external event

Bugs / Suggestions

You will only be able to move external events into the Full Calendar month view. The reason is this script targets the rendered month calendar cells. I don't really plan on making this plugin work in other views as hopefully the author of FullCalendar will include these options in future versions making this script obsolete.
To make suggestions or report any bugs please email me at wowmotty at g mail dot com. Thanks!

jQuery Selectors - Adding a :contains exact match

2010-05-13T02:06:00.018-05:00

I have included a demo to show you the utility of two selectors that you can easily add to your jQuery library.

The standard ":contains()" selector matches the contents of the element in a case sensitive manner. But it is limited and there have been many times that I've needed to exactly match the contents of an element, so I threw together these two useful selectors.

In this demo, you can see the difference when you see what "td:contains(2)" matches - doing so will match all table cells that contain a "2" including dates that begin and end with "2" and the event titles that contains a "2".

":containsExact()" will grab the innerHTML from the element (the date span in this case) and exactly match it. I made this selector case-insensitve so you won't have to worry about the text case.

":containsExactCase()" will grab the innerHTML from the element (the event span in this case) and exactly match the contents in a case-sensitive manner. Try both "Vacation" and "vacation" in the demo.

":containsRegex()" will grab the innerHTML from the element (also the event span in this case) and use regex to match the contents in either a case-sensitive or insensitive manner (depending on the regex "i" flag).

To include these selectors, just add the following code outside of any $(document).ready(function(){...})

$.extend($.expr[':'],{
containsExact: function(a,i,m){
return $.trim(a.innerHTML.toLowerCase()) === m[3].toLowerCase();
},
containsExactCase: function(a,i,m){
return $.trim(a.innerHTML) === m[3];
},
containsRegex: function(a,i,m){
 var regreg =  /^\/((?:\\\/|[^\/])+)\/([mig]{0,3})$/,
  reg = regreg.exec(m[3]);
 return RegExp(reg[1], reg[2]).test($.trim(a.innerHTML));
}
});

Get Parameters from your Script Tag

2010-04-23T10:47:00.015-05:00

I had a situation where I only needed to pass one variable to a script and asking users to do something like this seemed cumbersome

<script type="text/javascript">
var color = blue;
</script>
<script type="text/javascript" src="test.js"></script>

I think it'd be better to have them include the variable setting in the script URL. Something like this:

<script type="text/javascript" src="test.js?color=blue"></script>

Of course, after I figured it all out, I found it posted elsewhere on the internet, but the other method uses javascript and I figured out a nice jQuery method :P

So this method uses a compressed version of the function from an older post "Extracting URL parameters with Javascript". Here is the setup:

<script type="text/javascript" src="test.js?color=blue&background=#222"></script>

Access the script, as above, by adding the parameter to the end of the script url, preceded by a question mark, an equal sign between the key and value, then followed by an ampersand for any additional parameters:

test.js?color=blue&background=#222

In the script you load, add the following:

var scriptSrc = $('script[src*=test.js]').attr('src');
var color = gup( 'color', scriptSrc );
var background = gup( 'background', scriptSrc );

// do something with the parameters
alert( 'color = ' + color + ', background = ' + background );

// extract out the parameters
function gup(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}

Configuration:

First off, this method requires that you have jQuery loaded on your page before you load this script.
In the first line, make sure the "test.js" matches the name of the javascript file you are loading. This code should be inside this file as well, but even this isn't necessary - you can grab parameters from other script tags.
Add a line for each parameter in the script src. The parameter key must match in both places.
```
var color = gup( 'color', scriptSrc );
```
If a parameter doesn't exist in the script src, then the result of the gup() function will be an empty string.

How To Add A Champions Online Server Status To Your Site

2010-03-21T07:47:00.017-05:00

Champions Online is a MMORPG made by Cryptic. You can normally find the server status by looking at the top of the page of their official site or from the launcher (from what I've read). This post will allow you to either (1) embed a Champions Online Server Status page on your site or (2) make your own page using php and XML RPC.

Embed a Server Status on your site
Adding a server status to your site, using the page I provided, is pretty simple. Just add an iframe to your page widget using this code:

<div align="center">
<iframe src="http://motty.000space.com/champions/status.php?css=co.css" allowtransparency="true" align="top" scrolling="auto" frameborder="0" height="50" width="160"></iframe>
</div>

The frame height is set to only contain the "Server Status" and "Up" or "Down". Any additional text from a notice will make the window scrollable.

I've also included a way to choose several other stylesheets or add to add your own. The default stylesheet uses images on a dark background.

To make your own stylesheet, follow this basic template (this is the default CSS)

/* Overall page */
body {
background-color: #222;
margin: 0 auto;
font-family: Verdana, Helvetica, sans-serif;
color: #ddd;
text-align: center;
}
/* wraps contents */
.wrapper {
color: #ddd;
width: 130px;
padding: 5px;
text-align: center;
margin: 0 auto;
overflow-x: hidden;
}

/* Server Status text */
.serverStatus .text {
color: #ddd;
background: url(server-status.png) no-repeat;
text-align: center;
text-indent: -9999em; /* hide text if using images */
margin: 0 auto;
height: 20px;
width: 120px;
}

/* Server Status Up or Down */
.statusUp {
color: #ddd;
background: url(server-up.png) no-repeat;
text-align: center;
text-indent: -9999em; /* hide text if using images */
margin: 0 auto;
height: 20px;
width: 40px;
}
.statusDown {
color: #ddd;
background: url(server-down.png) no-repeat;
text-align: center;
text-indent: -9999em; /* hide text if using images */
margin: 0 auto;
height: 20px;
width: 75px;
}
.notice {
color: #ddd;
font-weight: bold;
}

Then name the file something like "co.css", upload it to your server and finally, point the iframe src css variable to the file:

http://motty.000space.com/champions/status.php?css=http://mysite.com/co.css

Add Your Own Server Status
This method shows you how to add your own server status using php and XML RPC (you'll need this extension installed on your server). I barely know php and I don't know XML RPC at all, so piecing this code together took some work and help from Diamonds who works at Cryptic. I'm just posting the result of that work and to hopefully keep Diamonds from being barraged with more questions about setting up a server status.

Check your phpinfo() and make sure you have the XMLRPC enabled

Here is the basic php required to obtain the server status:

# Using the XML-RPC extension to format the XML package
$request = xmlrpc_encode_request( "wgsLauncher.getServerStatus", $srvr );

$ch = curl_init();
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
curl_setopt($ch, CURLOPT_URL, "http://www.champions-online.com/xmlrpc.php");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
$result = curl_exec($ch);
curl_close($ch);

$method = null;
$params = xmlrpc_decode_request($result, &$method);

# server status result = true (up) or false (down)
$status = ($params['status']) ? 'Up' : 'Down';
$notice = ($params['notice'] == "") ? "" : "Notice: " + $params['notice'];

imgHighLighter - jQuery Plugin

2009-09-26T21:21:00.016-05:00

A newer version of this plugin is now available!

imgHighLighter is a jQuery plugin I wrote (my first!) that allows you to highlight a portion of an image when you hover over a link. In the image below, the mouse is hovering over the "Toolbar" link and you can see the toolbar portion of the image is highlighted (click on the image to go to the demo page).
I set up an example page here.

This is still an early version of this plugin but I know it works with IE8, FF and Chrome. Please leave me feedback if you any problems with how it works.

Setup

This plugin requires jQuery.
HoverIntent is an optional plugin, this plugin will use it's functionality if it is included.

Follow this basic template for each image you want to apply imgHighLighter functionality.

CSS

/* Image & descriptions */
div.imgHL { width: 500px; margin:0 auto; }
div.imgHL ul { text-align: center; }
div.imgHL ul li { margin: 0; padding: 5px; list-style-type: none; float: left; }
div.imgHL .descriptions { margin-top: 1em; clear: both; width: 450px; height: 2em; }
div.imgHL .descriptions p {display:none;}

/* General imgHighLight (overlay and highlight) */
.imgHLOverlay { background: #000; opacity: .6; filter: alpha(opacity=60); }
.imgHLDark, .imgHLLight, .imgHLOverlay { padding: 0; margin: 0; }

/* imgHighLight Edit Mode CSS */
.imgHLInfo { margin: 5px auto; }
.imgHLCoords { margin: 5px auto; }

HTML

<div class="imgHL">
<ul>
<li><a href="#" rel="desc1:sx1,sy1,ex2,ey2">Link 1</a></li>
<li><a href="#" rel="desc2:sx1,sy1,ex2,ey2">Link 2</a></li>
<li><a href="#" rel="desc3:sx1,sy1,ex2,ey2">Link 3</a></li>
</ul>
<img class="imgHLMain" src="whole.jpg" alt="" />
<div class="descriptions">
<p id="desc1">Description for item #1</p>
<p id="desc2">Description for item #2</p>
<p id="desc3">Description for item #3</p>
</div>
</div>

Javascript

/* window load ensures all images are loaded */
$(window).load(function(){
$(".imgHL").imgHighLight();
})

Highlights: The link's "rel" attribute contains all the information needed for the highlights.
rel="desc1:sx1,sy1,ex2,ey2"
desc1 = ID of the description that is associated with the highlighted area (do not include the "#")
sx1 = Starting X position of the highlight box
sy1 = Starting Y position of the highlight box
ex2 = Ending X position of the highlight box
ey2 = Ending Y position of the highlight box
You can change the highlight properties using: borderColor, borderSize & borderType described below
Image: The script is set by default to find any image inside the main wrapper (.imgHL) as set by the function call
$(".imgHL").imgHighLight();
You can specify the exact image to modify by adding the imageID option (described below)
Descriptions: The wrapper class that contains the image highlight descriptions is set to "descriptions" by default. You can change this default using the descriptionWrapper option (described below). Each description within the wrapper is contained in a paragraph tag with a specific ID that matches the desc1 ID in the rel attribute.
Overlay: The overlay covers the image (darkens the background) to make the highlighted portion stand out more. You can adjust the opacity of this overlay in the CSS and you can turn off the overlay functi0nality (as it script does while in edit mode) by setting the overlay option.

Customizing / Options
This plugin has the following options:

$(".imgHL").imgHighLight({
borderColor: '#fff',                  // Color of the highlight border
borderSize: '2',                      // Thickness of highlight border
borderType: 'solid',                  // Type of highlight border
imageID: 'img',                       // Object or ID of the main image (e.g. #myimage or just img - if it's the only img inside the container)
descriptionWrapper: '.descriptions',  // Class wrapping all the descriptions
overlay: true,                        // Activate overlay (default = true)
editMode: false                       // Enable edit mode - on screen display of the image coords so you can get the info you need easier
})

Edit Mode

I've included an edit mode for this plugin which should make it easier for you to obtain and add the coordinates of the edges of the highlight box.
Edit mode can be activated in two ways:

Using the editMode option when calling the plugin (described in the last section)
Add a link along with the other highligh links. This method is the best as it allows you to activate and deactive edit mode.
<li><a href="#" class="imgHLEdit">Edit Mode</a></li>

While in edit mode, additional information is added into the caption area... it displays the current cursor X and Y position.
X = 0px, Y = 0px - Click to lock/unlock coordinates
If you click on the image while in edit mode, it locks the displayed coordinates so moving the mouse off the image won't change the display. Hopefully this will make it easier to edit your source document with the coordinates.
Additionally if you hover over a link, the highlight box will display (with overlay off) to allow better visualization of the highlight box.

Bugs / Suggestions

At this time, the options you chose will apply to all the imgHighlighter images on the page (to be fixed in future versions)
When the window is repositioned, the highlights may be off until it is refreshed again when you hover over a link (especially while in edit mode), and sometimes you'll need to reload the page.
Future versions will allow you to highlight the image from links located anywhere on the page.
To make suggestions or report any bugs please email me at wowmotty at g mail dot com. Additonally, this is my first plugin, so if you can help me out with any suggestions or tips on how to improve the code I would greatly appreciate it :)

Random Image by Date

2009-09-24T12:32:00.011-05:00

A newer version of this plugin is now available!

The following script will show a random image depending on the date.

The frame below contains this script... you can view it directly by clicking this link. You can view the page source from there.
Setup

The set up is fairly simple. The page requires two things to work:

jQuery installed (you can use Google's copy as seen in the page source)
An <img> anywhere on your page with an ID of "todaysimage", if it doesn't exist, it will append it to the body.

Then you'll need to set up your image arrays as follows:

In the javascript, add the template below.

images.push (["DATES","IMAGE URL"]);

DATES = The date range to display the image.
IMAGE URL = Full path to your image.

The DATES must follow this format:

Dates	Description
0	Set image as a default (will only display if no date specific images are found).
1/1	Dispaly image only on Jan 1st.
1/1 - 1/5	Dispaly image from Jan 1st to Jan 5th (spaces are okay).
7/20 - 8/20	Display image from June 20th to August 20th.
1/3rdMon	Display image only on the 3rd Monday of Janurary.
5/lastMon	Display image only on the last Monday of May.
11/3rdThur-11/4thThur	Display image from the 3rd Thursday of Nov to the 4th Thursday of Nov.
12/20-1/1stSun	Display image from Dec 20th to the 1st Sunday of Janurary.

IMPORTANT NOTES:

The dates that cross months (7/20-8/20) will display along with date specific images (added to the randomization).
Use slashes "/" to separate the month and day and dashes "-" to set a range (e.g., using 1-1 to 1-5 will break the script)
Using the last weekday (lastMon) of the month in the date has one restriction at this time... it'll only works for 30 day months for now. I may fix this in future versions.
When using the text in the date (e.g. 1st, 2nd, 3rd, last) don't spell these fully out ( first, second, third) as the script is looking for the number.
The weekday in the date must have at least 3 letters - these are okay: (Mon or Monday); these are not okay (M or Mo).

Troubleshooting

If you are noticing that one image isn't showing up or something just doesn't work right, you can try to trouble shoot the problem.
Look for the following lines in the script below the "Don't change anything below this line"

var debug = false; /* for debugging purposes */
var thismonth = (debug) ? 11 : date.getMonth() + 1;
var thisday = (debug) ? 20 : date.getDate();
var thisyear = (debug) ? 2009 : date.getFullYear();
- Set the debug variable to "true" and then adjust the date (in blue) to manually adjust the date.
- Run the script and you can see what the script gets for results from your variables.
- The display will show images found for the current month (thismonth variable) and show the date it derived as well as if it's within the date range.
Additionally, you can access the debug mode from the address bar simply by adding the following (in blue) to the end:

http://myurl.com/randomImage.htm#debug:12/31/2009
- #debug - actives the debug mode
- 12/31/2009 - sets the date you want to check (month/day/year)
To prevent debug from working once you are done with your script, simply set the locked variable in the script to true:

/* locks out debug mode from the URL*/
var locked = true;
Sample debug output:

Date used: 11/20/2009
(11/11), derived range: 11-11 is NOT in range; image = veterans1.jpg
(11/11), derived range: 11-11 is NOT in range; image = veterans2.jpg
(11/11), derived range: 11-11 is NOT in range; image = veterans3.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving1.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving2.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving3.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving4.jpg

# of currentImages = 4
current random image = thanksgiving4.jpg
Try out these links to see the debug mode in action (my example script isn't locked):
1. #debug:1.1.2010
2. #debug:10/31/2009
3. #debug - This will default to todays date, but edit mode is active

MMORPG Server Status

2009-09-19T12:24:00.013-05:00

I just started teaching myself php and figured out how to make a server status box for a couple of online games. So far I've added a server status for Aion, Lord of the Rings and Warhammer. These are free for anyone to use. I made it so you can add your own CSS and I added a few parameters to make them even more customizable!

motty.000space.com

Note: These server status boxes obtain information directly from their respective pages (see the source of the page). The information is cached every 10 minutes and hopefully that is enough to keep from aggravating the site admin and locking me out.

If you require more detailed instructions, click the appropriate link below.

Server Status Available	000Space Site
Aion	X
LOTRO - US	X
LOTRO - EU	X
Warhammer	X*
WoW - US	X
WoW - EU	X

Update: The mirror site at motty.000space.com, well is almost a mirror site. I'm still working the bugs out of accessing the server status page for that site, so it's using the warhammer server status from heliohost.org.
Update #2: I ditched l4rge.com since it turned out to be so unreliable, sorry for the inconvenience; But I've found a newer and better hosting site with heliohost.org. The above post has been updated to reflect this information.

Chained Video Selection Box

2009-09-11T22:06:00.018-05:00

This video box does two things.
(1) Videos are grouped and can be selected from a drop down menu.
(2) You can change the video size on the fly.

Click on the image below to see the demo page, view source for the full code.

Customizing

Setting up Groups

To add a new group, you'll need to first add it to the group selector box - it looks like the example below. Add the new group option in whatever order you desire.




<option value="group1">The Guild</option>
<option value="group2">Muppets</option>
<option value="group3">Misc Videos</option>



Add this for a new group:

<option value="group#">GROUP NAME</option>
Now replace the "group#" with the next number and the text in yellow with the group name.
Now you'll need to add the group's box, follow this template:

<div id="group#"></div>
- Make sure the group# matches the number in the selector box
- Replace the URL in orange with the video's URL or Embed code (*Note* read the "Video URL" section below before adding the URL)
- Replace the text in purple with your Video's title.
If you want to change the displayed text from "Select a group", "Select a video" or "<- select". I highlighted the text in teal so you can find it easier. *Note* < is the HTML code for the left bracket "<".

Video URL or Embed Code

Only certain sites have support for the URL shortcut versus using the entire embed code provided by the site, I could add more but it'll just make the code that much longer:
DailyMotion:

<option value='http://www.dailymotion.com/video/x1bxhu_tunak-tunak-tun_fun'>Tunak Tunak (DailyMotion 4:3)</option>
Google Video:

<option value='http://video.google.com/videoplay?docid=3034123062262825045'>Final Fantasy X-2 Intro (Google 4:3)</option>

Vimeo:

SD: <option value='http://www.vimeo.com/5336440'>Blip (Vimeo 4:3)</option>
HD: <option value='http://www.vimeo.com/hd#6235286'>The Forest (Vimeo 16:9)</option>
<option title='hd' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>
<option title='1.78' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>

All three of the HD examples are equivalent.
Note the "hd#" in the URL is specific for HD videos - so you could manually add this, but you may not get the HD version if it doesn't exist)

Yahoo:

<option value='http://video.yahoo.com/watch/5292856/13959401'>Skateboarding Bulldog! (Yahoo 4:3)</option>

You Tube:

SD: <option value='http://www.youtube.com/watch?v=qNfDzfhRgkU&fmt='>Alizee - I'm Fed Up! (YouTube 4:3)</option>
HD: <option title='hd' value='http://www.youtube.com/watch?v=cKg6CVki5hk&fmt='>Wet - Trailer (YouTube 16:9)</option>

All other Video sites: I'm using Yahoo here, but it applies to any site that provides an embed code... make sure there are no single quotes (apostrophes) in the code... Replace these with a \' (backslash + apostrophe) if you have to.

<option value='<div><object width="512" height="322"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" /><param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" VALUE="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" type="application/x-shockwave-flash" width="512" height="322" allowFullScreen="true" AllowScriptAccess="always" bgcolor="#000000" flashVars="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" ></embed></object>'>Skateboarding Bulldog (using full embed code)</option>

Replacing Checkbox and Radio buttons

2009-08-28T13:45:00.009-05:00

I found this pretty cool website (Hieuuk) that had an example of how to replace the checkbox and radio buttons with images. I was thinking about using it until I read the comments about how it doesn't work with the keyboard.

Well, I was inspired to mess around with the script, so I started working on it!

Here is a demo of the result of my work...

But sadly, I guess it was just a nice exercise for me because I have no idea how to make it into a jQuery plugin and well as I just found out... it's already been done, twice LOL. *Note to self* search the net before spending hours on a project o.O

The other versions:

I'm not sure, but this version looks like it was made to work with the jQuery UI
I really like this plugin version since it animates the radio button look... toggling a switch on and off. It just looks cool :P

Oh well, I don't want to say it was time wasted, but I still sort of like my version ;)

Auto-resizing background image

2009-08-15T19:50:00.013-05:00

JQuery: I found a very nice jQuery plugin called Supersized that makes it very easy to add an auto-resizing background image to your website. And it includes a slideshow function!

Canvas: I recently started to teach myself how to use Canvas and I thought, hey.. I bet I could do that with canvas too! For those of you that don't know, you can easily draw (graphs), resize and rotate images with canvas. Here is a very nice demo of image manipulation.

So, I'm pretty sure this is an un-approved method of using canvas as it's meant for smaller sized images. But it works! :P Well, it works for all current browsers, except IE - you'll need this plugin called ExploreCanvas to make it work.

<canvas id="myCanvas" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>
<script type="text/javascript">
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg';
img.onload = function () {
 context.drawImage(this,0,0,300,150);
};
</script>

*Note* The drawImage function of canvas needs to be 300 x 150 for this script as that is the default canvas size, which then gets stretched to 100% width and height using the CSS.

And the problem I discovered with both the jQuery plugin and the canvas script above is that you are limited to the content on the screen. Should you need to scroll the page down, the image scrolls up (I had to modify the jQuery plugin to discover that).

New and Improved jQuery Tooltips

2009-06-10T09:02:00.024-05:00

A newer version of this plugin is now available!

The guild hosting site that I use recently stopped using the tooltip script from Dynamic Drive's Cool DHTML Tooltip due to it's interference with site functionality. The tooltips are now provided by an easier to use jQuery Tooltip script from cssglobe.com. It's a nice elegant script and very simple to use. But the tooltip goes out of bounds when it reaches the right and bottom edge of the browser window.

After reading through most of the comments on the jQuery Tooltip post and decided the script needed updating. I also wanted this script to still work with the tooltips that were made for the DHTML Tooltip "onmouseover" and "onmouseout" functions. And while working on this script, I added in a few improvements along the way! So here is the result...

jQuery Tooltips v.2:

Version 2 tooltips behaves like the original DHTML tooltips.

They will stay within the browser window at all times.
You can assign a width to each individual tooltip.
You can assign a background and text color to each individual tooltip.

Version 2 tooltips will work with the DHTML tooltip event actions:

onmouseover="ddrivetip('tooltip content','color','width')" onmouseout="hideddrivetip()"
The original jQuery tooltips included image and site preview tooltips. These are now incorporated into this one script.
The version 2 tooltips can now have a specific CSS style assigned to them, both in the CSS and for each individual tooltip.
You can make the version 2 tooltips display content from a separate location on the page (display the content of any object in a tooltip)

Adding the Tooltips

First make sure you have jQuery installed on your site, download the latest version from jQuery. Then add the following CSS and script to your site, or you can download the script here.

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
color:#dddddd;
background:#222222;
border: 1px solid #333333;
padding:5px;
opacity: 0.9;
filter: alpha(opacity=90);
text-align:left;
display:none;
}
</style>
<script src="http://dl.dropbox.com/u/1510510/misc/tooltip.js" type="text/javascript"></script>

Using the Tooltips

Basic Tooltip

Link (a)	<a class="tooltip" href="#" title="Tooltip (a) Content" rel="100">Link (a)</a>
Link (div)	<div class="tooltip" title="Tooltip (div) Content" rel="150,#9bff8f;color:#333333;">Link (div)</div>
	<img class="tooltip" src="IMG URL" title="Tooltip (img) Content" rel="200,#808080;color:black;">
Link (span)	<span class="tooltip" title="Tooltip (span) Content" rel="250,#008080;color:#dddddd;">Link (span)</span>

class="tooltip" (required) - This class activates the tooltip
title="TOOLTIP CONTENT" (required) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML or a pointer to content to display in the tooltip (discussed in the advanced tooltips section). Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code " - this text has "quotes" around it.
rel="100,#222222;color:#dddddd" (optional) - the rel attribute contains the tooltip width & CSS

The width of the tooltip must be at the beginning of the rel attribute (in red). Do not include the "px" at the end, it is added by the script.
The tooltip CSS follows the width and is separated by a comma. The first hex code "#222222" is for the background color of the tooltip. You can add any additional CSS (in standard CSS format) separated by a semi-colon.

Preview Tooltips

class="preview" (required) - This class activates the tooltip which puts the linked image (from the href) into a tooltip. The tooltip size is adjusted automatically to fit the image.
href="URL" (required) - URL to the image, for previewing in the tooltip and the URL you go to when you click on the image.
title="TOOLTIP CONTENT" (optional) - This content becomes the image caption located below the image inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags,
replace the quotes with single quotes, e.g. <img
src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>.
If you must use quotes to surround some text, use the HTML escape code
" - this text has "quotes" around it.
<img src="URL_THUMBNAIL"> (required) - This will be the thumbnail of the URL image (in orange), or you can pick any image as I did here. Or you can replace the <img> with text.

Screenshot Tooltips

LMYC	<a class="screenshot" href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" title="<center>Loch Modan Yacht Club</center>" rel="http://www.axiomfiles.com/Images/Spotlight/194525.jpg">LMYC</a>
Google	<a class="screenshot" href="http://www.google.com" title="<center>Google</center>" rel="#">Google</a>

class="screenshot" (required) - This class activates the tooltip that gets the site screenshot image from the rel attribute (in light blue)
href="URL" (required) - URL to your desired website
title="TOOLTIP CONTENT" (optional) - This content becomes the screenshot (image) caption inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags,
replace the quotes with single quotes, e.g. <img
src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>.
If you must use quotes to surround some text, use the HTML escape code
" - this text has "quotes" around it.
rel="URL_SCREENSHOT" or rel="#" (required)

This attribute can contain either the URL to the screenshot image of the site to which you have the link pointing. Yes, you do have to take, resize and upload the screenshot image yourself.

*UPDATED (8/29/09)*

You can now use rel="#" to have Websnapr.com generate a thumbnail of the site for you

text or image (required) - Text or image that becomes the clickable link to the site.

Advanced Tooltips

This Tooltip is from a <div> that is inside a link Hover me	<a class="tooltip" rel="300" title="###tt1" href="#"><div id="tt1" style="display:none">This Tooltip is from a <div> that is inside a link</div>Hover me</a>
Hover me This tooltip is from a <div> that can be put anywhere on the page	<div class="tooltip" rel="300" title="###tt2">Hover me</div> <div id="tt2" style="display:none">This tooltip is from a <div> that can be put anywhere on the page</div>

class="tooltip" (required) - This activates the tooltip
rel="300" (optional) - sets the tooltip width. You can also add CSS as described in the basic tooltip section
title="###tt1" (required) - The title is broken up into two parts: the tooltip object flag and the id of the object whose contents will be shown in the tooltip.

The "###" is the tooltipObjFlag. In the script is set to a default value of "###". So the script will look for this specific pattern in the title. If it finds this pattern, it will then load the tooltip content from the ID that follows the flag.
The "tt1" is ID of the object (a <div> in the example above) that contains the tooltip contents. Each tooltip you add in this way should have a unique ID. So the next tooltip should be "tt2", etc...
So "###tt1" tells the script to load the tooltip from an object instead of the title, and that object has an ID of "tt1".
This was added so you could display content on your site that varies.

<div id="tt1" style="display:none">TOOLTIP CONTENT GOES HERE</div> (required) - This div (or any object like <span>, <table>, etc.) can be located anywhere on the page. It can contain anything inside of it without worrying about quotes, single quotes or embeded video. Note that the style="display:none" must be included so that it won't show on the page (unless you want it to).
If your tooltip content just happens to contain a lot of #'s then you can change the tooltipObjectFlag to anything you want. But you must avoid using the following characters in the flag:

. $ ^ { [ ( | ) * + ? \
Add the new tooltipObjectFlag as follows (replace the text in teal to whatever flag you want):
<script type="text/javascript">
var tooltipObjFlag = "@@@";
</script>

Tooltip CSS

You can edit the CSS that is included with the code to modify your overall tooltip look. This CSS should be added into the Footer HTML because GuildPortal added the tooltip CSS after the Custom CSS which makes it override the definitions in the Custom CSS.

Change the font color by modifying the text (in blue) - color:#dddddd;
Change the background color of the tooltip (in blue) - background:#222222;
Change the tooltip border thickness, style and color (red and blue) - border: 1px solid #333333;
You can remove or change the semi-transparent tooltips by changing the opacity setting. The "filter" is IE specific. Make sure the opacity is a deminal equivalent of the filter opacity ( 0.9 = 90% )

opacity: 0.9;
filter: alpha(opacity=90);
Additionally you can add a soon to be supported CSS class called border-radius which makes your tooltip have rounded edges. The "-moz-border-radius" is specific to Firefox browsers and is currently working.

border-radius: 1em;
-moz-border-radius: 1em;
The "1em" means to make the size equal to 100% of the height of the current font size.
The last thing you can modify with the script is it's display speed. This really isn't part of the CSS, but I'm lazy and didn't feel like adding another section LOL. The display speed tells the script how long it should take to show the tooltip. Add the following anywhere ABOVE the tooltip.js script link.

<script type="text/javascript">
var tooltipSpeed = 600;
</script>
The default speed is 300 milliseconds. You can't use negative values (no going back in time!!) and I wouldn't recommend going above 1000 milliseconds or your site users will begin to hate you.

Extracting URL parameters with Javascript

2009-06-03T09:55:00.011-05:00

I found this very nice script over at Netlobo.com that will extract the desired parameter from browser URL (see the article here). Maybe I can explain this better with examples.

Here is a basic browser URL

http://www.somegame.com/character.php?realm=MyRealm&name=Motty

You can extract out the realm or the name value using the script

var myStr = 'http://www.test.com/character.php?realm=MyRealm&name=Motty';
document.write ( gup('name', myStr) );
// outputs: Motty

document.write ( gup('realm', myStr) );
// outputs: MyRealm

Here is the modified code:

function gup(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}

Convert jQuery RGB output to Hex Color

2009-06-02T01:10:00.032-05:00

My current project uses Farbtastic which is a fantastic jQuery plugin which allows users to visually choose a color for an element. The problem I ran into was loading a default color from the element:

jQuery returns the element color in RGB format

document.write( $('#myElement').css('background-color') );
// outputs: rgb(34, 34, 34)

but Farbtastic uses the hex color format, just like the CSS.

#myElement { background-color: #222222 }

I found this really nice script (by R0bb13) which converts RGB to hex. This script requires the input variable to be in an array "[34,34,34]". In order to make the script use an RGB format "rgb(34,34,34)", I had to add one line to the script to remove the "rgb" and parenthesis and then convert (split) the result into an array...

Update #2 (allows entering an rgba value - opacity is ignored)

Updated (removing internal function):

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

Here is an example of how to use this code with jQuery:

document.write( rgb2hex($('#myElement').css('background-color')) );
// outputs: #222222

Here is the original code from this post (not nearly as efficient as the updated script):

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Design Resources

2009-06-01T08:46:00.007-05:00

I haven't started working on the layout of my new blog, but I do have a list of design resources that I wanted to share! Hopefully you will find something useful here.

Grid Layout:
- List of 15 useful CSS Grid Layout Generators @ Web Design Booth
- Or, you can use these grid background images that I made. Screen resolutions are getting bigger and bigger, so I figured that an 1800 x 1800 grid should cover it for at least a little bit longer :)
  
  Black on White Grid (1800 x 1800) 172kb
  White on Black Grid (1800 x 1800) 161kb
Theme Colors:

Color Theory - A nice overview on complementary colors
Color Scheme Designer
Color matcher
Color palette generator

Clean up messy CSS:

Clean CSS

Welcome

2009-05-31T10:12:00.001-05:00

Welcome to my blog!

Who I am: I'm a self-taught amateur site designer/improver/manipulator. I know a little bit of HTML, javascript and jquery, but I've dabbled in lots of other things. I don't profess that I am the best at what I do, but it's a hobby and I like to explore my limits and try new things. Basically it's better than being bored! I also enjoy helping people. I've been told that I have the patience of a saint, but I also have the temper of a tiger LOL - rawr. It's why my avatar is almost always a cat o.O

How I started: I started working on my World of Warcraft guild site, but sadly after all my work the site was left unused (for two different guilds!). So, I figured I was cursed with guild sites, so I started helping people on the admin site. I was soon overwhelmed with questions for help. I set up a test-site to show other users examples of page content and to post instructions. It's just gone on from there...

Why I made this blog: I hope that some of the scripts and instructions I post here will benefit people that aren't using a specific web site. Basically, I'm trying to help a broader range of people. It's what I enjoy doing *shrug*... and you thought you were demented! Ha ha ha ha

rel="sx1,sy1,ex2,ey2"
sx1	Starting X position of the highlight box	} top left corner
sy1	Starting Y position of the highlight box	} top left corner
ex2	Ending X position of the highlight box	} bottom right corner
ey2	Ending Y position of the highlight box	} bottom right corner

Key	Value (default shown)	Description
startPanel	1	Choose the initial panel to show in the scroll window.
width	800	Overall width of movingBoxes.
panelWidth	.50	Current panel width adjusted to 50% of movingBoxes width.
reducedSize	.8	Non-current panel size: 80% of current panel size.
imageRatio	4/3	Image ratio set to 4:3. Wide screen would be 16:9 (16/9).
speed	500	Animation time in milliseconds for the scroll and expanding of the panel.
hashTags	true	If true, hash tags (browser history) are enabled.
wrap	false	If true,the panel will "wrap" at the ends.

SD:	<option value='http://www.vimeo.com/5336440'>Blip (Vimeo 4:3)</option>
HD:	<option value='http://www.vimeo.com/hd#6235286'>The Forest (Vimeo 16:9)</option> <option title='hd' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option> <option title='1.78' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>

SD:	<option value='http://www.youtube.com/watch?v=qNfDzfhRgkU&fmt='>Alizee - I'm Fed Up! (YouTube 4:3)</option>
HD:	<option title='hd' value='http://www.youtube.com/watch?v=cKg6CVki5hk&fmt='>Wet - Trailer (YouTube 16:9)</option>