Previous Posts


Blog Has Moved

Tuesday, July 28, 2009

Since migrating my site to Drupal I now no longer use Blogger and hence my blog has moved here.

MenuMatic update

Monday, November 03, 2008

I just released MenuMatic 0.68 which has a few improvements and should be a little more efficient. Some of the improvements are:

  1. center option: A method I often use to center elements with css is setting the left to 50% and then the left margin to minus half the width of the element. This works really well when you know the width of the element is not going to change. But when your client has control to add or remove pages via a cms the menu width might change. So I added a center option to keep your menu centered even if the width of the menu changes. 
  2. stretchMainMenu  option: I renamed the menuWidth option to stretchMainMenu  as that seems like a much more accurate name. Also I made it work much quicker. In case you have not used it, this option will stretch each link in your main menu until they fill the main ul or ol. So set stretchMainMenu  to true and set a width on your main ol or ul in the css and you can simulate layouts that you can normally only achieve with tables.
  3. fixHasLayoutBug option: A few of you have run into Microsoft's hasLayout Bug, so if you find yourself troubleshooting a weird bug like the submenus all show up at the top of the window instead of by the link you are hovering over, then try enabling this option. It will force all the menu elements to have layout in IE, also all the parent elements of the menu since this is also important for getting accurate positioning.  * Note I have not yet tested this, so if you end up using it please let me know if it works or not :)
  4. call-back functions: I added 18 callback functions to make modifying MenuMatic for different unique situations easier and faster. For example, if you need to do something right after a subMenu is positioned but before it is shown, you can use onPositionSubMenu_complete
  5. Google Code: I am now using Google Code to host MenuMatic so you can use the issue tracker there to report any bugs or submit feature requests. Thanks!

Labels: , , ,

| Add This | posted by Jason J. Jaeger  |  32 comments

get or set an element's unique id with MooTools

Sunday, October 05, 2008

Here is a simple MooTools script that adds a getId method to the Element class. The getId method simply returns the element's id if it already exists, if not it generates a unique id, assigns it to the element and returns that. The generated id does not persist from page to page, however this little script comes in handy sometimes.

Element.implement({      
   getId: function(){
      if(!this.get('id')){ 
        var uniqueId = this.get('tag') + "-" + $time();
        while($(uniqueId)){ uniqueId = this.get('tag') + "-" + $time(); }
        this.set('id', uniqueId);      
      }
      return this.get('id');
   }
});

So usage would look like this:

var theIdofTheFirstLink = $(document.body).getElement('a').getId();

//or something like this would make sure every element on the page has an id
$$('*').getId();

Labels: ,

| Add This | posted by Jason J. Jaeger  |  0 comments

Introducing MenuMatic

Tuesday, September 16, 2008

A couple of years ago when I got into web design I decided to make my own javascript drop-down menu based on the fact that I could not find one out there with all the features I wanted. Several versions later when I found and fell in love with MooTools I immediately rewrote it for mootools. I have been using this for websites for some time now and recently made some more improvements and decided to release it for download. I plan on making several more sweeping improvements in the not-to-distant future (sometime before the holidays hopefully).

I mentioned in a previous post that I would be releasing this script under the name MooMenu but after some googling I found that it seemed that name had been used so I finally settled on the more original name of MenuMatic.

MenuMatic

Essentially MenuMatic takes an ordered or unordered list of links and turns it into a dynamic drop down menu system with loads of options. Some advantages of MenuMatic are that it is based on semantic xthml structure, it is completely keyboard accessible, and easier to use than CSS based menus alone since you can adjust the hideDelay option, however it is based on a keyboard accessible version of Suckerfish Dropdowns for users without javascript enabled.

It should be pretty solid but as always email me or post a comment if you find any bugs.

Labels: , , ,

| Add This | posted by Jason J. Jaeger  |  21 comments

MooScroll Updated!

Sunday, September 07, 2008

I just released MooScroll version 0.53 beta which has several enhancements over 0.52. It should now be much quicker and easier to plug into a design as it now plays nicer when the original element is positioned. Version 0.53 also has the following improvements.

fullWindowMode option You can use the fullWindowMode option to "replace" the window's scrollbar.

refresh function The refresh function lets you update the scrollbar (if, for instance, you change the size of the MooScroll object ).

loadContent function To dynamically update the content of a MooScroll object, just call the loadContent function passing in the new content as as string.

You can check out the updated examples to test it out:
Main MooScroll Example Page (including loadContent function demo)
fullWindowMode Example Page

Thanks to Bob Ralian for his contributions! Still on my To Do List is to add the ability for horizontal and/or vertical scrollbars (instead of just vertical). As always, you can email me or post a comment if you run across any bugs, or have any feature requests!

Labels: , ,

| Add This | posted by Jason J. Jaeger  |  26 comments

Response.Right

Saturday, August 16, 2008

Response.Right is a useful tool that I have used many times to convert HTML or Javascript to a string in my server-side code (I use ASP.NET 2.0 C# and PHP). Basically if you have ever pasted some HTML into a C# code behind page and had to go through and manually escape all the quotation marks you know how annoying that can be. So I just have this tool bookmarked and use it instead to save some precious time. I especially like the option to include line breaks.

Input:

Result:

Labels:

| Add This | posted by Jason J. Jaeger  |  0 comments

MooScroll

Saturday, August 02, 2008

MooScroll

MooScroll lets you customize how the scrollbar looks on scrollable divs. Just customize the images and tweak the CSS if necessary and you have a customized scrollable div. You can have multiple instances on a single page. If the end-user does not have javascript enabled, they just see a regular scrollable div so it degrades gracefully.

Labels: , ,

| Add This | posted by Jason J. Jaeger  |  17 comments

Multiple Columns with Javascript

Sunday, July 20, 2008

A while ago I thought it would be useful / fun to have a script that divides content up into multiple columns. I know that CSS3 will have this ability but that day is probably still a ways off. I tried several multiple columns solutions out there and they all seemed to break in IE or not work very well in one way or another. So I created MooColumns. With MooColumns you can choose how many columns you want, control how the columns and gutters look with CSS. Allow the script to auto-divide the content, or use column breaks (a span with the class of colBreak). It requires MooTools 1.2 and has been tested in IE6, IE7, Firefox 2, Firefox 3, and Safari 3. You can get the latest version of MooColumns from my MooColumns page.

Labels: , ,

| Add This | posted by Jason J. Jaeger  |  2 comments

MooTools 1.2!

Saturday, June 14, 2008

MooTools 1.2
It is finally here! Version 1.2 of the fantastic MooTools javascript framework is finally out of beta. I have been using 1.2 in professional applications for a while now, and have made a handful of useful classes. Now that 1.2 is official I will be polishing up these classes and releasing them for download soon. The major projects I have been working on/using are:
  • MooMenu - a dynamic, accessible drop down menu system
  • MooScroll - an easy way to customize what the scrollbars look like on scrollable areas
  • MooFont - basically mixes Stewart Rosenberger's Dynamic Heading Generator + MooTools
  • MooColumns - splits html content into multiple columns
Also I will be revealing a re-design of my site soon... good times :)

Labels: , , , , ,

| Add This | posted by Jason J. Jaeger  |  0 comments

How to clear all timeOuts in javascript

Friday, October 19, 2007

Today I was working on a project and at one point I thought it would be useful to clear all the javascript timeOuts on a page. I did a quick google search and did not find anything except this fellow at Experts Exchange who asked the same question. Well if you are like me and do not have a membership to Experts Exchange, then you cannot read the answer. So I spent a few minutes on the problem and came up with a function that clears all the timeouts on a page, even though I ended up not needing it. So I decided to post it here on my blog in case someone else out there has the same conundrum and also does not have a membership to Experts Exchange. So Here it is: 

/*first declare an array 
to store all the timeOuts*/
var timeOuts= new Array();

/*then where you would normally set 
a timeOut, do it like this:*/
timeOuts["a unique name"] = setTimeout('yourDelayedFunction("aVariable")',250);

/*If you want to use a variable (like an 
object's id) or pass a variable to your 
delayed function you can do it like this:*/
var thisId = "foo";
timeOuts[thisId] = setTimeout('yourDelayedFunction("'+thisId+'")',250);

/*So far, all we have done is store all of our 
setTimeouts in an array. Now to clear them all,
just call this simple function:*/
function clearAllTimeouts(){
  for(key in timeOuts ){
    clearTimeout(timeOuts[key]);
  }
}

/*If you want to clear just one of the 
timeOuts you can do it like this:*/
clearTimeout(timeOuts["a unique name"]);
One more thing to note is the 250 is the delay in milliseconds, so 250 would be a quarter of a second. So there it is, I hope it is useful to somebody out there.

Labels:

| Add This | posted by Jason J. Jaeger  |  15 comments

Input Text Replace in javascript

Sunday, August 05, 2007

It is a useful thing to be able to have a input text box ( such as for a search feature on your website) that can have a default value that disappears upon the end-user inserting their cursor, and puts the default text back in if they de-select the text box without typing anything. It is a pretty simple thing to do with javascript, and can be useful from a usability standpoint (especially in conjunction with some simple css). The quickest and easiest way would be to add these two functions I have created to your javascript file. 

var clearInputValue = Array();
function clearInput(thisObj){
   if(!clearInputValue[thisObj]){
      clearInputValue[thisObj] = thisObj.value;
      thisObj.value = "";
      thisObj.style.color = "black";
   }
}
function replaceInput(thisObj){
   if(thisObj.value == ""){
      thisObj.value = clearInputValue[thisObj];
      thisObj.style.color = "#999999";
      clearInputValue[thisObj]= false;
   }
}
Then add onblur="replaceInput(this);" onfocus="clearInput(this);" to your input tag. The replaceInput and clearInput functions assume the text is light grey (#ccc) to begin with and make the text black once the user starts typing something and if they de-select the text box without typing anything it puts the default text back in and sets the text color back to light grey. Beyond this I suggest using css to let users know when the input is in focus since that little blinking cursor can often be hard to see. So in your css file you may want to include something like this (assuming your text box has a class of "searchInput"): 
input.searchInput{border:1px solid #ccc; color:#ccc;}
input.searchInput:hover{border:1px solid #699A2F;}
input.searchInput:focus{background:#f8f6c3; border:1px solid #699A2F;}
But if you want to go all the way and use unobtrusive javascript (and I recommend that you do) techniques then I would highly recommend using Ben Nolan's excellent lightweight javascript file for unobtrusively adding event listeners to elements in the DOM. Behaviour is an awesome resource. Using Behaviour, instead of adding the onfocus and onblur inline in your xhtml, simply include the behaviour.js file via a script tag at the top of your page. Then in your javascript file add: 
var myrules = {
    'input.searchInput' : function(element){
       element.onfocus = function(){
          clearInput(element);
       },
       element.onblur = function(){
          replaceInput(element);
       }
    }
};

Behaviour.register(myrules);

Labels:

| Add This | posted by Jason J. Jaeger  |  0 comments

Get the Next Highest zIndex in Javascript

Sunday, July 22, 2007

Flash developers have the pleasure of having a nice little built-in method called getNextHighestDepth. Which returns the next highest layer number for any object they call it on. Which is very useful to make sure that what you want to be on top is indeed on top. 

function getNextHighestZindex(obj){
   var highestIndex = 0;
   var currentIndex = 0;
   var elArray = Array();
   if(obj){ elArray = obj.getElementsByTagName('*'); }else{ elArray = document.getElementsByTagName('*'); }
   for(var i=0; i < elArray.length; i++){
      if (elArray[i].currentStyle){
         currentIndex = parseFloat(elArray[i].currentStyle['zIndex']);
      }else if(window.getComputedStyle){
         currentIndex = parseFloat(document.defaultView.getComputedStyle(elArray[i],null).getPropertyValue('z-index'));
      }
      if(!isNaN(currentIndex) && currentIndex > highestIndex){ highestIndex = currentIndex; }
   }
   return(highestIndex+1);
}
So far I have test it on Firefox, IE6, IE7, Opera, and Safari in XP. Also I have tested it on Firefox and Safari on OSX. It works perfectly in all but Safari on OSX (10.4). So if you are are a javascript developer and know how to adjust this function to work on Safari on a Mac please leave a comment :)

Labels: ,

| Add This | posted by Jason J. Jaeger  |  5 comments