I have one for the left side, the right side required some heavy math to calculate the right side position for the tab and the flyout panel, to align with the right side of the form.
It takes a panel you create in asp.net at left -360px with the id of "_ib_ProductEditor_Toolbox_Next", create a event bind in the dom for click, loads up dynamic html for a progress wheel, and then loads data, parts list, and fly's out to the right using animation. Requires Jquery 1.6 something. it makes a close link in the upper right, and create another bind, to animate the close back to -360px.
It should give you and idea of how to start yours at least.
Ok. I understand that but why not replace those hardcoded styles with css classes and jQuery().addClass("xxx")?
Why you using selector: panel_ProductEditor_ToolBox_Next? Its obviously part of asp.net generated id. Why not set CssClass property just for selecting?
Than you have clear selector that will not change when you edit parent container(s)?
Why you setting both innerText and innerHtml? For simple string like "Close Panel" one from them is enough and they mean the same?
For simple case like in question this is achievable with single css rule:
It's part of a back end application, that controls the front end of the website.
Customers were changing the css and messing it up, so we just hard coded the fonts. Got tired of having to fix it all on every installation.
We just use css names now for jquery on certain modules, so we can do a mass edit using each on css types. It appeared to be more effective and faster in speed.
on the innertext versus innerhtml, that's something I'm still messing with. It dates back to earlier in the year with compatibility issues between IE, Firefox, it use to be 2 different scripts, but I tried to combine them into one. Still working on that, and help was hard to find.
That script is still experimental, and is the 5th revision of it. At least the complaints went away on it, and it renders correctly every time, on both browsers and versions. It can use more optimization, but the speed and performance of the fly out tab is quite impressive and very reliable.
Feel free to suggest some optimizations, and I'll rewrite that module in October using your feedback.
So it's customer doings... I should suspect that.
In that case. Maybe you should consider using css from webresource.axd as part of some assembly. Just like DevExpress. But it is harder to maintain and deploy than just simple css file.
But maybe it can suit your situation.
I was also experimenting in doing something like this purely in css. It's posible, but seems to work for now nice only in FF. It's works like flag on/off in IE, Opera. In Chrome looks like crap.
But maybe you can do something with that: http://jsfiddle.net/LnbuM/[^]
But this not change fact that you hardcoded part of asp.net id into js. I stumble on bugs coming from that few times. In current project I created in aspx file js object containing aspx controls ids for selecting them from jQuery. I benefit from compilation of pages:
but it's have to be separated from main js script in .js file.
So next time i will use some css class to avoid this separation.
But mainly i would cut if parts with "-360px" and use some predefined even only for this (without css rules). jQuery().hasClass(), addClass, toggleClass, removeClass functions are specifically for something like this. Since you have in auto hider only 2 states (visible/not visible) you can toggle this in single event:
As for innerText/Html. What differences between browsers you have found? I am not specification expert. But it's pretty basic. Text sets text, and html set html. If it's not in all browsers, use
$().text and $().html functions.
Drove me nuts!
So the big picture here, is that it's a very small piece of code in a large Server DLL Control (6 megs). The script is embedded, and everything is code behind.
The hard coded id is on the asp.net side, the jquery uses a wildcard for the id, in which the prefix can be anything, as long as the suffix matches. So masterpages are not a problem.
I use to type out the HTML like your example and append it, just thought I would try something different this time. The createElement seems a little faster than just appending text.
I'm amazed at really fast it runs, so I'm going to stick with it for now.