Apple like Nav Dock

Has any body tried to make a nav dock like Apples on a freeway site.?

I found JS of it. I tried to use it but couldn’t get it to work because of my lack of knowledge of JS.
Wasn’t sure about Dximag transform.microsoft.alphaimageloader. Can we use something else?

Here’s the code:
function dt(i){return document.getElementsByTagName(i)}
function findPos(o){var cl=ct=0;if(o.offsetParent){cl=o.offsetLeft;ct=o.offsetTop;while(o=o.offsetParent){cl+=o.offsetLeft;ct+=o.offsetTop}};return[cl,ct]}
function FixAlpha(o){if(navigator.userAgent.toLowerCase().indexOf(‘msie’)>0){if(o.src.indexOf(’.png’)){o.style.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+o.src+"’,sizingMethod=‘scale’)";o.src=“z.gif”}}}
function MouseHandler(e){if(!e)var e=window.event;var o=e.target||e.srcElement;while(!o.mouseenter)o=o.parentNode;var r=e.relatedTarget||(e.type==‘mouseover’?e.fromElement:e.toElement);if(!r)r=null;else while((!r.mouseenter)&&(r.nodeName!=‘HTML’))r=r.parentNode;if(o!=r)e.type==‘mouseover’?o.mouseenter(o):o.mouseleave(o);}
function windowXY(){var x=0,y=0;if(typeof(window.innerWidth)==‘number’){x=window.innerWidth;y=window.innerHeight}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){x=document.documentElement.clientWidth;y=document.documentElement.clientHeight}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){x=document.body.clientWidth;y=document.body.clientHeight}return[x,y]}
function outerHTML(o){var attrs = o.attributes;var str = “<” + o.tagName;for (var i = 0; i < attrs.length; i++) str += " " + attrs[i].name + “=”" + attrs[i].value + “”";return str + “>” + o.innerHTML + “</” + o.tagName + “>”;}

function FindDockItemImage(o)
{
for(var i=o.childNodes.length-1; i>=0; i–)
{
if(o.childNodes[i].tagName==‘IMG’)
{
return o.childNodes[i];
}
else
{
var f=FindDockItemImage(o.childNodes[i]);
if(f) return f;
}
}
}

function FindDockItems(b, o)
{
if(o)
{
for(var i=0; i<o.childNodes.length; i++)
{
if(o.childNodes[i].tagName==‘A’)
{
var n = document.createElement(‘SPAN’);
n.innerHTML = outerHTML(o.childNodes[i]);
n.image=FindDockItemImage(n);
var p=findPos(FindDockItemImage(o.childNodes[i]));
n.original = o.childNodes[i];
n.style.position = ‘absolute’;
n.style.left = p[0];
n.style.top = p[1];
n.origx = p[0];
n.origy = p[1];
b.items[b.items.length++] = n;
}
else
{
FindDockItems(b, o.childNodes[i]);
}
}
}
}

...

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not sure about the rest of it, but the alpha image business is about
IE6’s lack of support for transparent PNG images. Freeway has this
built in, so you shouldn’t need to worry about that part.

The rest could be done very simply by making a wide DIV (HTML box)
and placing a row of images in it as inline images. There’s probably
a two-line way to do the effect using Scriptaculous. Have a look at
the Effect.Morph function to do the actual transition. <http://
github.com/madrobby/scriptaculous/wikis>

Walter

On Oct 21, 2008, at 11:55 AM, vic ziverts wrote:

Wasn’t sure about Dximag transform.microsoft.alphaimageloader. Can
we use something else?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the info.
I try it, should it work viewed in IE6 OR 7?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you have the IE Compatibility stuff turned on in Freeway, then
anything you build that uses transparent PNG images will just work,
in IE 6, 7, and 8. Note that the images have to actually exist on the
page (I think) – I don’t believe that this will work for images that
Freeway doesn’t “know” about. So if you’re using some third-party
effects that rely on a folder of images you upload separately with an
FTP application, I doubt seriously that they will inherit the
protection.

Walter

On Oct 21, 2008, at 12:36 PM, vic ziverts wrote:

Thanks for the info.
I try it, should it work viewed in IE6 OR 7?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wish me luck,
I’ve never tried anything like this before.

Vic


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is another examaple using the jquery lib: iconDock 0.8b Example


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

…and another stand alone javascript version: http://safalra.com/web-design/javascript/mac-style-dock/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thanks for more options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sweet… .has anyone come up with a way to do this?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options