Cool MSN Menu

[AshMan]

Take a look at the attached pic. It shows a dHTML menu that appears when the ?Column Options? title was clicked. However, unlike normal dHTML menus, this one sits on top of the HTML Window area; look at it again, the menu appears outside of the browser window!!!

My question How is this done?

To see this effect, go to http://www.msn.com then sign in using your Hotmail username/password and you?ll see it.

Edited December 22, 2004 by AshMan

[GoodOlClint]

Cool.

Looks like it only works in IE though.

[Mx]

Cool!

[black.ops]

I don't get it...

I can do that on neowin too! (i dont know what your talking about)

[Mx]

This is kinda cool, obviously added to help with managing your own custom homepage stuff.

[AshMan]

  Blax said:

I don't get it...

I can do that on neowin too! (i dont know what your talking about)

585143779[/snapback]

How can you do that on Neowin? Neowin doesn't have such menus.

(i dont know what you're talking about)

[Tungsten T]

PM a coder and a Graphix to make one on neowin! :)

[AshMan]

So, anyknow know how this is done?

[The_Decryptor Veteran]

Im looking throught the code, i cant understand how they have done it, it is so badly done it's hard to read.

[AshMan]

I look forward to hearing what you find.

[lav-chan]

&lt;script id="menuData" type="text/xml" src="https://my.msn.com/en-us/mymenuxml.armx"></script>

This is the line (so much as you can call it a line) that refers to the content of the menus, which is in XML format. (It's like <menus><menu><item /><item /><item /></menu></menus>.)

The menu code itself is JavaScript, it seems like. It shows how to implement a generic menu and then it gets the content itself from the XML file.

I think that's how it works anyway.

[AshMan]

That JS file is obfusticated good!

[AshMan]

Anyone else have a chance to look in to this?

[lav-chan]

Look in to what? The JavaScript is atrocious but it isn't that hard to untangle if you want to spend a couple minutes playing with Tab and Return. :/

[Echilon]

It would be great if someone could figure out how it works, unfortunately, my javascript's not too good :(

[j.r.l.]

This is cool. I had no idea it could be done.

EDIT: Doesnt work in Fx

[lav-chan]

The immediate reason that it doesn't work in Firetruck (or Opera) is the fact that MSN detects your browser and makes sure not to include all the fancy stuff if you're not using Internet Explorer. Whether or not non-IE browsers could make use of that stuff, i'm not sure (although if it's just the JavaScript i don't see why not), but it's irrelevant because MSN won't serve the code to you at all if you're not using IE.

[xntx]

don't you think that it's only a floating table layer?

edit: sorry, I didn't see that it appears outside of window

[AshMan]

It's a floating something alright! We have seen floating things before BUT this one is different! This one can float outside the barriers of the browser window!!! Look at the menu on my screen shot above.

Surely there are some JS/CSS/dHTML experts here that can shed some light on to this phenomenon.

[Tungsten T]

  AshMan said:

It's a floating something alright! We have seen floating things before BUT this one is different! This one can float outside the barriers of the browser window!!! Look at the menu on my screen shot above.

Surely there are some JS/CSS/dHTML experts here that can shed some light on to this phenomenon.

585148781[/snapback]

all menus can float outside the window

[AshMan]

DUH! :rofl:

The menu in your screenie is a WINDOWS OS SYSTEM MENU!

The menu in my shot is a DHTML MENU!

[lav-chan]

For Heaven's sake.

I formatted this and added some spacing and junk. I commented only the stuff that's immediately obvious, because i have to go to work like 10 minutes ago. Like i said, it gets all the actual content from the XML file; this is just the code for the skeleton.

// variables

var m_Dis="disabled";
var m_Exp="expand";
var m_Hilite="hilite";
var m_Img="img";
var m_Lin="line";
var m_Arw=String.fromCharCode(125);
var m_Keys="";
var m_Dom=new ActiveXObject("Microsoft.xmldom");
var m_Active;
var m_Body;
var m_Doc;
var m_IdPrefix=uniqueID+"_";
var m_ItemLength;
var m_Popup;
var m_Root;




// functions

// what happens when you click
function doClick() {
    menuShow();
}

// what happens when you press key 13 (Return)
function doKeyPress() {
    if (window.event.keyCode==13) {
        menuShow();
    }
}

// hide the menu (der)
function menuHide() {
    setActiveItem(null);
    if (m_Popup&&m_Popup.isOpen) {
        m_Popup.hide();
    }
    m_Active=m_Body=m_Doc=m_Popup=null;
}

// show the menu (der)
function menuShow() {
    var reqMenuId=menuId;
    if (menuId===null) {
        reqMenuId="Main";
    }
    m_Root=getRoot();
    if (m_Root===null||m_Popup&&m_Popup.isOpen) {
        return;
    }
    m_Active=null;
    if (m_Popup&&m_Popup.isOpen) {
        return;
    }
    m_Popup=window.createPopup();
    if (window.getMenuXML) {
        var o=window.getMenuXML(m_Root);
        menuData=o.xml;
        reqMenuId=o.menuId;
    }
    if (!menuData) {
        return;
    }
    var item,name,tip,action,disabled,icon,menid,text,key,clsImage,clsDisabled;
    var itemCount=0;
    m_Doc=m_Popup.document;
    m_Doc.open();
    // this is where it starts to write the menu's HTML
    m_Doc.write('<html><head>'+getDocCssLinks()+'</head><body" ondrag="return false;" onscroll="return false;" onselectstart="return false;"&gt;');
    m_Dom.loadXML(menuData);
    // here's the table it all goes in
    var s='&lt;table id="tbl" cellpadding="3" cellspacing="0" border="0"&gt;&lt;col width="22" /&gt;&lt;col width="100%" /&gt;&lt;col width="20" align="right"/&gt;&lt;tbody&gt;';
    if (m_Dom.documentElement) {
        var node=m_Dom.documentElement.selectSingleNode("//menus/menu[@id='"+reqMenuId+"']");
        var items=node.childNodes;
        m_Keys="";
        m_ItemLength=-1;
        // this is the part where it goes through and writes the content
        for (var i=0; i&lt;items.length; i++) {
            item=items(i);
            if (item.nodeType!=1) {
                continue;
            }
            name=item.nodeName;
            clsDisabled=' ';
            clsImage=' class="'+m_Img+'" ';
            // this is the tool tip thing
            tip=new String(item.getAttribute("tip"));
            tip=tip=="null"?"":tip;
            // this is what happens when you click the menu item
            action=item.getAttribute("action");
            disabled=(item.getAttribute("disabled")=='true');
            // this is the item's icon
            icon=item.getAttribute("icon");
            menid=item.getAttribute("menuId");
            // this is the item's text
            text=new String(item.getAttribute("text"));
            text=text=="null"?"":text;
            text=text.replace("&amp;&amp;","^^^");
            var pos=text.indexOf("&amp;");
            // this is where it goes through and underlines the letters for the shortcut keys
            if (pos!=-1&amp;&amp;text.length&gt;=pos+2) {
                key=text.substr(pos+1,1);
                if (key!=' ') {
                    text=text.substr(0,pos)+"&lt;u&gt;"+key+"&lt;/u&gt;"+text.substr(pos+2);
                    m_Keys+=key.toUpperCase();
                }
            }
            text=text.replace("^^^","&amp;");
            switch (name) {
                case"item":m_ItemLength++;
                itemCount++;
                s+='&lt;tr id="'+m_IdPrefix+m_ItemLength+'"';
                if (disabled) {
                    clsDisabled=' class="'+m_Dis+'" ';
                    clsImage=' class="'+m_Img+' '+m_Dis+'" ';
                }
                else {
                    if (action) {
                        s+=' action="'+action+'"';
                    }
                }
                s+=' tip="'+tip+'"';
                s+='&gt;';
                s+='&lt;td'+clsImage+'&gt;'+getIconHTML(icon)+'&lt;/td&gt;&lt;td'+clsDisabled+'colspan="2" nowrap="nowrap"&gt;'+text+'&lt;/td&gt;&lt;/tr&gt;';
                break;
                case"line":s+='&lt;tr class="'+m_Lin+'"&gt;&lt;td class="'+m_Img+'"&gt;&lt;/td&gt;&lt;td colspan="2" class="'+m_Lin+'"&gt;&lt;/td&gt;&lt;/tr&gt;';
                break;
                case"sub":m_ItemLength++;
                itemCount++;
                s+='&lt;tr id="'+m_IdPrefix+m_ItemLength+'" tip="'+tip+'" class="'+menuClass+'" menuId="'+menid+'"&gt;&lt;td class="'+m_Img+'"&gt;'+getIconHTML()+'&lt;/td&gt;';
                s+='&lt;td&gt;'+text+'&lt;/td&gt;&lt;td class="'+m_Exp+'"&gt;'+m_Arw+'&lt;/td&gt;&lt;/tr&gt;';
                break;
            }
        }
    }
    if (itemCount===0) {
        s+='&lt;tr&gt;&lt;td class="'+m_Dis+'"&gt;'+getIconHTML()+'&lt;/td&gt;&lt;td class="'+m_Dis+'" colspan="3" nowrap="nowrap"&gt; &lt;/td&gt;&lt;/tr&gt;';
    }
    s+='&lt;/tbody&gt;&lt;/table&gt;';
    m_Doc.write(s);
    m_Doc.write('</body></html>
    m_Body=m_Doc.body;
    m_Body.onmouseover=popMouseOver;
    m_Body.onmouseup=popMouseUp;
    m_Body.onkeydown=popKeyDown;
    var trs=m_Doc.getElementsByTagName("TR");
    for (var j=0; j&lt;trs.length; j++) {
        var tr=trs(j);
        if (tr.className.indexOf(menuClass)===0) {
            tr.addBehavior(menuHtc);
            tr.menuData=menuData;
        }
    }
    var elTbl,elTr,elTd1,elTd2,elTmp,pW,pH;
    elTbl=window.document.createElement("TABLE");
    elTbl.border="0";
    elTbl.cellPadding="0";
    elTbl.cellSpacing="0";
    elTbl.width="150  elTr=elTbl.insertRow();
    elTd1=elTr.insertCell();
    elTd2=elTr.insertCell();
    elTd1.className="menu";
    elTd1.innerHTML=s;
    elTd2.width="100%";
    elTmp=window.document.body.insertAdjacentElement("beforeEnd",elTblelTmp.offsetWidth;
    pH=elTmp.offsetHeight;
    elTmp.removeNode(true);
    var pEl,pL,pT;
    if (element.className.indexOf(menuClass)===0) {
        pEl=element;
        pL=element.offsetWidth+1;
        pT=-1;
    }
    else {
        var root=getRoot();
        if (root===null) {
            return;
        }
        var el=root;
        if (el.tagName=="A"&amp;&amp;el.children[0]&amp;&amp;el.children[0].tagName=="IMG") {
            var win=getWindow();
            el=win.event.srcElement;
            if (el.children[0]&amp;&amp;el.children[0].tagName=="IMG") {
                el=el.children[0];
            }
        }
        pEl=el.document.body;
        pL=0;
        pT=el.offsetHeight+2;
        while (el.tagName!="BODY") {
            pT+=el.offsetTop+el.clientTop;
            pL+=el.offsetLeft+el.clientLeft;
            el=el.offsetParent;
        }
        pT-=pEl.scrollTop;
        pL-=pEl.scrollLeft;
        if (menuAlign=="right") {
            pL-=pW-root.offsetWidth-1;
        }
        if (menuVAlign=="top") {
            pT-=pH+root.offsetHeight+1;
        }
    }
    m_Popup.show(pL-1,pT,pW,pH,pEl);
    setActiveItem(m_Doc.getElementById(m_IdPrefix+0));
}

// pop-up function or something
function popMouseOver() {
    var el=m_Doc.parentWindow.event.srcElement;
    while (el&amp;&amp;el.id.indexOf(m_IdPrefix)!==0) {
        el=el.parentElement;
    }
    if (el&amp;&amp;el.className.indexOf(m_Lin)===0) {
        return;
    }
    setActiveItem(el);
}

// what to do when you release the mouse button
function popMouseUp() {
    if (!m_Active) {
        return;
    }
    if (m_Active.action) {
        fireMenu(m_Active.action);
    }
    else {
        m_Active.click();
    }
}

// what to do when you press the Return or shortcut keys
function popKeyDown() {
    var evt=m_Doc.parentWindow.event;
    evt.returnValue=false;
    if (evt.altKey||evt.ctrlKey||evt.shiftKey) {
        return;
    }
    var dir=null;
    var code=evt.keyCode;
    switch (code) {
        case 27:menuHide();
        return;
        case 37:case 100:if (element.className.indexOf(menuClass)===0) { menuHide(); }
        return;
        case 39:case 102:case 13:if (m_Active) {
            if (code==13&amp;&amp;m_Active.action) {
                fireMenu(m_Active.action);
            }
            else {
                m_Active.click();
            }
        }
        return;
        case 38:case 104:dir=-1;
        break;
        case 40:case 98:dir=1;
        break;
        default:var key=String.fromCharCode(code);
        if (m_Keys.indexOf(key)!=-1) {
            var els=m_Doc.getElementsByTagName("U");
            var e;
            var tr;
            for (var i=0; i&lt;els.length; i++) {
                e=els[i];
                if (e.innerText.toUpperCase()==key) {
                    tr=e.parentElement.parentElement;
                    break;
                }
            }
            if (tr) {
                setActiveItem(tr);
                if (tr.action) {
                    fireMenu(tr.action);
                }
            }
        }
        return;
    }
    if (dir) {
        if (m_Active) {
            var src=m_Active.id.substring(m_Active.id.lastIndexOf("_")+1     var tgt=parseInt(src)+dir;
            if (tgt&lt;0) {
                tgt=m_ItemLength;
            }
            else if (tgt&gt;m_ItemLength) {
                tgt=0;
            }
        }
        else {
            if (dir==-1) {
                tgt=m_ItemLength;
            }
            else {
                tgt=0;
            }
        }
        setActiveItem(m_Doc.getElementById(m_IdPrefix+tgt));
    }
}

function fireMenu(s) {
    var w=getWindow();
    var main=w.document.getElementById("main");
    if (main) {
        main.menuHide();
    }
    eval("w."+s);
}

function hilite(el,bOn) {
    var names=el.className.split(" ");
    el.className=names[0]+((bOn)?" "+m_Hilite:"");
}

function getIconHTML(s) {
    if (!s||s==="") {
        return '&lt;div class="placeholder"&gt;&lt;/div&gt;';
    }
    else {
        return '&lt;img border="0" height="16" width="16" src="'+s+'" /&gt;';
    }
}

function getDocCssLinks() {
    var col=m_Root.document.getElementsByTagName("LINK");
    var s='';
    for (var i=0; i&lt;col.length; i++) {
        s+='&lt;link rel="stylesheet" type="text/css" href="'+col[i].href+'" /&gt;';
    }
    return s;
}

function getRoot() {
    var src=window.event.srcElement;
    while (src&amp;&amp;src.className.indexOf(menuClass)!==0) {
        src=src.parentElement;
    }
    return src;
}

function getWindow() {
    var w=window;
    while (w!=w.parent) {
        w=w.parent;
    }
    return w;
}

function setActiveItem(el) {
    var s;
    if (el&amp;&amp;(el==m_Active)) {
        return;
    }
    if (m_Active) {
        hilite(m_Active,false);
        if (m_Active.className.indexOf(menuClass)===0) {
            try { m_Active.menuHide(); }
            catch (e){}
        }
    }
    if (el) {
        s=el.tip;
        hilite(el,true);
        if (m_Doc.parentWindow.event&&m_Doc.parentWindow.event.type=="mouseover            el.click();
        }
    }
    m_Active=el;
    var w=getWindow();
    w.status=s?s:'';
}

You might want to paste that into EditPlus or something so you can get the highlighting and stuff.

[Colin-uk Veteran]

http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html

pretty cool :)

[AshMan]

Cool beans! Thanks lav!

I havent slept for 3 days now and am almost falling asleep here, so I'll try it tomorrow.

In the mean time, perhaps someone here can test out this little gem?

[AshMan]

Cool! thank you Colin-uk!

Edited December 22, 2004 by AshMan

[+M2Ys4U Subscriber¹]

  lav said:

The immediate reason that it doesn't work in Firetruck (or Opera) is the fact that MSN detects your browser and makes sure not to include all the fancy stuff if you're not using Internet Explorer. Whether or not non-IE browsers could make use of that stuff, i'm not sure (although if it's just the JavaScript i don't see why not), but it's irrelevant because MSN won't serve the code to you at all if you're not using IE.

585148620[/snapback]

doesn't work, even if you use the User Agent Switcher extension