greengeckodesign

Kenosha United Way

Sun, 31 Jan 2010 16:47:29 -0800

Kenosha United Way

kenoshaunitedway.org

My Responsibilities:

St. Rita's

Sun, 31 Jan 2010 16:45:25 -0800

St. Rita's

st-ritas.net

My Responsibilities:

Jay-Bee Collision

Sun, 31 Jan 2010 16:42:58 -0800

Jay-Bee Collision

jaybeecollision.com

My Responsibilities:

WI Water Association

Sun, 31 Jan 2010 16:35:24 -0800

WI Water Association

wih2oassoc.org

My Responsibilities:

Jill Petersen's Résumé

Sun, 31 Jan 2010 14:28:58 -0800

Jill Petersen's Résumé

jillane.com

My Responsibilities:

Ultimate Kidfest

Sun, 31 Jan 2010 14:27:47 -0800

Ultimate Kid Fest

My Responsibilities:

Design
CSS
XHTML
javascript

Dresen Landscaping

Sun, 31 Jan 2010 14:27:24 -0800

Doctor Woods Online

Sun, 31 Jan 2010 14:26:19 -0800

Doctor Woods Online

doctorwoodsonline.com

My Responsibilities:

On3

Sun, 31 Jan 2010 14:25:31 -0800

on3 Promotional Partners

on3promopartners.com

My Responsibilities:

KACC

Sun, 31 Jan 2010 14:24:49 -0800

Scrollbar/Handle Offset in Safari 4.0.3

Wed, 27 Jan 2010 12:00:40 -0800

I'm having a strange issue in Safari. I'm using the scrollbar in one of my divs, and it's functioning just fine in IE & FF. However, in Safari, there's a 10px or so offset between the scrollbar handle and the up button image. When the page loads, the scrollbar is all the way to the top as it should be. However, once I scroll down and scroll back up, then the gap appears, and you can't scroll up any further. I tried changing a couple of things in the (non-MooScroll) CSS for the site, but it didn't seem to help. Any ideas what this might be from? Thanks!

Not working in IE6 w/ JS disabled

Wed, 20 Jan 2010 08:59:06 -0800

Hello All,

I've been using MenuMatic on a cross-browser compatible site and testing it in various browsers with Javascript turned on and off. Recently I've noticed that the submenus fail to show up in Internet Explorer 6 when Javascript is disabled.

ghost lines after menu slide and fade

Wed, 06 Jan 2010 07:37:43 -0800

I love the menu and got it to work with a few exceptions in IE8. After the slide out, I have leftover ghost lines on the background of my page and 1px character fragments to the right of the main nav element. I played around with the css file and found that setting overflow:visible instead of overflow:hidden on the .smOW div got rid of the ghost lines but it broke the menu in firefox. The only other thing I've changed is the positioning of the #nav and some background colors. I don't know enough of what the script is doing that is causing these lines and fragments.

Submenu Ajax Loading

Mon, 04 Jan 2010 11:56:12 -0800

Hi, great code!

Does anyone know a way to apply the submenu behavior to AJAX Loaded submenu links? Or any kind AJAX Loading solution...

Thanks

javascript issue with opacity of fade effect

Sun, 27 Dec 2009 13:15:55 -0800

Hi Jason,
I noticed this using the error log in both firefox and opera 10. When mousing over your menu, it was spewing javascript errors at a rapid rate. Firefox gave the confusing message of not being able to parse the opacity value and Opera was a lot more specific and said the value was wrong and printed out the value.

The values that were causing the issue were on the order of 4e-7. Most likely this is an underflow issue with floating point.

I changed the default "slide & fade" to just "slide" and the errors stopped completely, so the fade effect is definitely the culprit.

MenuMatic ugly display in IE6

Mon, 14 Dec 2009 14:12:42 -0800

Hi there!, congrats for this great site and great CSS/Javascript Menu system!.

I'm having some problems here trying to use MenuMatic with IE6 at http://www.akautomation.com/index.php. It seems to work well when using IE7, IE8, FF and Chrome. But as we are used to see, we can't make it work with IE6.

I'm using IE6 conditional comments and the ie6 css hack stylesheet built in with menumatic, but still can't fix it.

Please, check it out and give me any suggestions you could have. Thanks!.

Not getting MenuMatic to fire

Wed, 09 Dec 2009 06:53:00 -0800

I'm developing a site in Joomla and after some menu customization I believe I have these glorious menus setup correctly but alas I do not. I'm guessing I'm loading the js incorrectly or perhaps I just have setup my HTML correctly. I did notice that in the parameters on the homepage it states that there is a div that contains the submenu items, I don't see this div in the examples on the site but I have included it in my site. Any help is greatly appreciated :) I've provided a link below, the menus should pull out on rollover of "Contact Us"

do i have to write "menumatic is used for the site" in my site

Fri, 27 Nov 2009 02:29:01 -0800

hi,
i want to use menumatic but i do not know if i have to write "i used menumatic" in footer of my site.
i know this idea is not friendly but i develop my site for somebody else.
thanks for any reply.

Manumatic question

Thu, 26 Nov 2009 08:45:38 -0800

Hi,

When using the Menumatic, I notice that for every second item of each submenu, there are areas which are not selectable and if I hover over it for a second, it would close the submenus automatically

Heres a screen shot of the non clickable area (circled in red):
http://img697.imageshack.us/img697/7213/menumatic.jpg

Would you be able to assist me please?

Problems with MenuMatic and Colorbox

Mon, 16 Nov 2009 05:56:46 -0800

The menu works great at my website, but when I attach the following javascript snippent to the page: "
$(document).ready(function()
{
//Examples of how to assign the ColorBox event to elements
$("img[rel='colorbox']").colorbox({slideshow:true, transition:"fade"});
$(".youtube").colorbox({iframe:true, width:650, height:550});
$("img[rel='picture']").colorbox();
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function()
{

Origin problem with scrolling.

Thu, 12 Nov 2009 11:55:45 -0800

Hello,

I work on a website with MenuMatic.

On FireFox it works very well, but with IE 8 I've got a problem.

My page is big. To see it you have to scroll a little bit.
If you make a mouseover on the menu without scrolling it's good, but if you scroll and make an other mouseover, the submenus appears more up that it was previously.

to see my example go on http://inted.fr have you got an idea to fix this bug ?

Thanks a lot.

conflicting with mootools horizontal smoothscroll

Fri, 25 Sep 2009 03:46:57 -0700

Hi,
I noticed that this forum isn't active ? (no replies anwhere),but I give it a try.

having the hardest time with mooscroll

Mon, 21 Sep 2009 11:24:04 -0700

My site, restorefoundation.schematixdesign.com looks fine in FF. When I move over to IE7 and IE8, things get a little crazy. If you navigate to 'Who We Are > Meet the Board' in FF, you will see the scrollbar on the right. Now if you test that same page in IE7, it takes forever to load and generates two errors saying the 'Object doesn't support this property or method' for 'MooScroll_0.59.js' and 'mootools-1.2.3-core-yc.js'.

Any ideas? I just installed the SC JQuery plugin for Joomla but that didn't work out.

Any help is greatly appreciated since you seem to be the mooscroll master!

loadContent fails if slider was not active with first content

Wed, 16 Sep 2009 01:49:54 -0700

If I have an area that does not activate the slider when first used, utilising loadContent causes the code to error. The reason is this function:

loadContent:function(content){
this.slider.set(0);
this.paddingEl.empty().set('html',content);
this.refresh();
}

when the code tries to access this.slider, the slider has not been initiated and does not exist and the code bails.

However, by switching these two lines in MooScrollArea: initialize: function;
if(this.overHang <=0){this.greyOut();return;}
this.initSlider();

not enough content

Thu, 27 Aug 2009 13:48:30 -0700

Hi,

for some reason, I try to add this to a div that has some content loaded from a database and the scroll bar keeps coming up as if there is not enough content to scroll, but there definitely is more content that overflows. Have you come across this before?

Thanks

Horizontal scroll

Thu, 27 Aug 2009 08:52:44 -0700

Hello - really nice project,
does this working with horizontal scroll - I'm looking for something more like Apple home page - products scroll ..

thanks

re-calculate the content height

Tue, 25 Aug 2009 21:06:07 -0700

Hello,

I would like to know if there's a way to re-calculate the content height, this since I have some divs that, when I click them, their height change and then lower divs gets outside from the scroll range,

Thanks!

setHandleHeight proposal

Tue, 11 Aug 2009 06:38:36 -0700

Hi, i just wanted to use your hilarious scrollbars, but i wanted them to appean not in the same height as the content container, but smaller. When you try this you will see the scrollBar height gets totally screwed up, but i found a fix for that.

To do this i had to replace this line in the setHandleHeight function

this.handleHeight = ((handleHeightPercent*this.parentEl.getSize().y)/100) - (this.scrollHandleTop.getSize().y + this.scrollHandleBottom.getSize().y );

..with this one...

space bar

Fri, 07 Aug 2009 11:42:44 -0700

How do I prevent the space bar from 'scrolling down' and instead have it work like a regular space bar when using MooScroll around a form object?

MooScroll for beginners

Thu, 06 Aug 2009 13:37:56 -0700

I'm less than a beginner in Mootools. Honestly, i just try to copy and paste codes, review the examples, and try understand the logic to keep everything in order, but, I must confess, I have never made a MooTools tutorial. I'm working in my office's new site www.mbarq.net. I'm using a mootools gallery that it's finnally working under my orders. In the page named "experiencia" I've tried to add your superbe scroll, but nothing is happenning. I'have some hipotesis:
1. it's no possible to call two mootools libraries from the same place.

back in the saddle

Jason Jaeger — Sat, 27 Jun 2009 12:53:00 -0700

After a long exile from tending to my projects here I am back in action now that I have accomplished many a home improvement project on our first fixer-upper and now that I have recuperated from the arrival of our firstborn (Hannah Lynn Jaeger, who is two weeks old today).

I will be working feverishly to catch up on email questions starting this weekend. Also I will post the user gallery in July as well as finally publish some long overdue updates to MenuMatic and MooScroll.

Video Tutorials

Jason Jaeger — Sun, 15 Feb 2009 11:23:00 -0800

Recently it has been getting increasingly challenging to keep up with the great emails that you all send me (questions, comments, feature requests & thanks). And it will surely not get any easier in the days ahead. My wife and I are expecting our first born (Hannah Lynn Jaeger) this June! Also we are in the midst of purchasing a "fixer-upper", where I will experience the thrills of being my own maintenance man ;).

So I have decided to create a series of video tutorials to help answer some common questions and show the basics of how to use my scripts. I have started this weekend by making two videos showing the basics of setting up and using MenuMatic. I plan to also add videos showing some advanced MenuMatic techniques, as well as video tutorials for MooScroll and MooColumns as well.

There is also a distinct possibility that I may set up a forum since there are many knowledgeable users of MenuMatic, MooScroll, and MooColumns. And it is always healthier to have an interactive community for these kinds of things rather than a one-man-band.

I still fully welcome all emails.. just be understanding if I don't respond right away :)

And don't worry, I am still actively developing MenuMatic and MooScroll and will probably release an updated MenuMatic next weekend!

Show Me Your Stuff

Jason Jaeger — Sun, 08 Feb 2009 11:23:00 -0800

I will be setting up a gallery of MenuMatic, MooScroll, and MooColumns being used in the wild. So, if you have used any of these in a project and want to show it off just shoot me an email with:

The design company(or your) name and link
a link to the site were it is being used
and "gallery submission" in the title

I will add the ones I like best to the gallery and of course there will be a link to your company(or personal) site and your client's site.

detecting zoom level in IE7

Jason Jaeger — Wed, 24 Dec 2008 02:57:00 -0800

When I recently learned that the submenus in MenuMatic were not being positioned correctly in IE7 (when the zoom level was not 100%) I had to figure out how to detect the current zoom amount. I read a forum post a week or so ago where someone suggested using flash and setting the stage to not scale. I have since looked for that post to give the poster credit but I could not find it. However I used the general idea, and decided to share the flash file in case anybody else needed it (since I mostly found people asking how to detect the zoom level but no working examples).

How It Works:
Basically the movie is 100px wide, the stage's scaleMode is set to not scale, and there is an onenterframe function to detect the stage width and send it to the javascript function. Although when it detects the stage's width it is actually detecting the movie's width while the stage stays at 100px wide. So if the zoom level is 120% it reads the "stage" width as 120.

The javascript function updates a global variable so you can access it easily. I am not normally a fan of global variables in javascript but felt it was an acceptable solution in this case. The flash file only runs at 1 frame per second, and is less than 2kb in size so it should not be too taxing on user resources.

To Use:

Insert the .swf into the page.
Hide it with css.
Add 2 lines to your javascript (the function and the global variable)

Example
Download

MenuMatic update

Jason Jaeger — Mon, 03 Nov 2008 01:25:00 -0800

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

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.
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.
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 :)
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
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!

get or set an element's unique id with MooTools

Jason Jaeger — Sun, 05 Oct 2008 06:02:00 -0700

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();

Addicted to Analytics

Jason Jaeger — Mon, 22 Sep 2008 14:17:00 -0700

I am pretty sure I am addicted to Google Analytics. Ever since I first installed it on my site over a year ago ( and on every site I've built since ). I'm not sure what it is, since I am not a math geek, there is just something very interesting about trolling through the analytics of several different sites and comparing trends and see who is getting traffic from where and such.

On a completely unrelated note, I updated MooScroll over the weekend. Of the 3 projects I have released for download, MooScroll by far was the most raw. I hammered out several bugs and it should be much more stable than before. I also added an extra demo page with an OSX style layout.

Introducing MenuMatic

Jason Jaeger — Tue, 16 Sep 2008 15:06:00 -0700

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.

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.

MooScroll Updated!

Jason Jaeger — Sat, 06 Sep 2008 17:23:00 -0700

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!

Response.Right

Jason Jaeger — Sat, 16 Aug 2008 01:54:00 -0700

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:

MooScroll

Jason Jaeger — Sat, 02 Aug 2008 16:16:00 -0700

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.

Multiple Columns with Javascript

Jason Jaeger — Sun, 20 Jul 2008 07:10:00 -0700

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.

New Design

Jason Jaeger — Sat, 19 Jul 2008 13:47:00 -0700

I have been working on a new design and it is finally finished. I like the old design but felt like it was time for a change. I went from a minimalistic skinny design to a more texture-rich, slightly oriental design with (hopefully) a more organic feel.

Firefox 3 Download Day

Jason Jaeger — Tue, 17 Jun 2008 00:52:00 -0700

Today is Firefox 3 Download day. Help the Firefox team set a world record in the Guinness Book of World Records by downloading Firefox 3 today!

MooTools 1.2!

Jason Jaeger — Sat, 14 Jun 2008 01:15:00 -0700

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 :)

How to clear all timeOuts in javascript

Jason Jaeger — Fri, 19 Oct 2007 06:06:00 -0700

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.

ColorPix

Jason Jaeger — Sun, 19 Aug 2007 11:25:00 -0700

I just wanted to share with you a tool that I use regularly. It is called ColorPix and it is a free tool for sampling the color from any spot on your monitor. This is an incredibly useful tool for web design and print design alike. Simply hover over a color, tap the spacebar to lock in that color and click on the color format you want, and it is copied to your clipboard, ready to be pasted into Photoshop, your favorite css editor, etc. It is also handy as a magnifier. Sure you could always take a screenshot and use Photoshop to sample the color, but ColorPix is just so darn quick and easy. Moreover, it is a very lightweight program that you can optionally have start with Windows (or OSX) and minimize to the system tray. You can download colorPix from colorschemer.com. While you are there, definitely check out ColorSchemer's great color schemes gallery, a great resource when you have artists block! Also check out their fantastic (but not free) Color Schemer Studio.

Input Text Replace in javascript

Jason Jaeger — Sun, 05 Aug 2007 12:34:00 -0700

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);

Get the Next Highest zIndex in Javascript

Jason Jaeger — Sun, 22 Jul 2007 08:42:00 -0700

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 :)