Having the exact same problem here in both IE6 and 7. This problem is isolated to the new mootools driven one and only ever applies to IE, Firebug cannot detect the error.
What i get is that the toolbar appears (added to page by php/js on load?) but then it is impossible to use it at all, the error recieved on the toolbar is "toolbar is undefined, line 76 char 3" this code is
74.// Draggable toolbar title
75. this.toolbar.makeDraggable({
76. handle: $E('h1',toolbar),
77. onStart:function() { this.toolbar.setStyle('opacity',0.5); }.bind(this),
78. onComplete: function(x,y) { this.toolbar.setStyle('opacity',1);Cookie.set('QE_position', this.toolbar.getLeft()+'/'+this.toolbar.getTop(), {duration:this.cookieDuration}); }.bind(this)
});The first reference to ’toolbar’ is several lines up and is
this.toolbar = toolbar;
this.menu = $E('ul',toolbar);
this.title = $E('h1',toolbar);
this.buttons = $ES('li','QE_Toolbar');
which is a declaration of what toolbar is, a definition if you like, which is why FF Safari (webkit) both recognize it.
But that doesnt make sense as being the problem and here is why, from the IE developer toolbar (aka. the ’srsly why doesnt this work in IE toolbar’)
/* Inline style */ { DISPLAY: block} That inline styling is applied by the javascript here
this.toolbar.setStyle('display','block'); so that earlier declaration works here as the js is happily displaying the toolbar for us to be tricked into thinking it works.
So, lets play spot the difference, every other call to ’toolbar’ is done by ’this.toolbar’ only the broken one uses toolbar by itself, this is cause this.toolbar=toolbar defines this.toolbar as something, not just toolbar by itself. No idea why FF could sort that out itself but at least now it functions in IE7 (ill move to IE 6 later).
The dropdowns worked fine after that change and so did dragging, however once you dragged the bar the dropdowns ceased to display (note: the height of the menu’s still changed, JS still working fine) something about how the opacity was throwing off IE7, so anyway removed the two lines about opacity, now the bar works all the time in IE7, FF and Sarafi.
Also that seems to have fixed the little edit content error (qe is not blah blah) that i also was getting.
IE 6 the bar moves but none of the dropdowns are visible and you cant click them, probably to do with css z-index as IE has issues dealing with that. They have displayed in that way since i upgraded, ill look into it when i get some more time, right now im just pleased that IE 7 can use the bar again.
Anyhow I’ve attached the new js to this post and its the only file i edited and tested it on my clean install of 0.9.6 SVN so i’d say its fine.
Edit: Fix for IE6 is to edit toolbar.css and cut the width of h1 down to 110px from 215px, in IE6 the faulty z-index rendering meant that h1 simply refused to let the menu show through at all.
☆ A M B ☆
