> -----Original Message----- > From: Adrian Lynch [mailto:[EMAIL PROTECTED] > Sent: Thursday, March 22, 2007 7:20 AM > To: CF-Talk > Subject: OT JS - Moving elements in page > > I'm just about to get started with working out how to moving divs up > and > down a page so the divs below... > > <div id="div1">First</div> > <div id="div2">Second</div> > <div id="div3">Third</div>
I've a soon-to-be-officially-released component that should help with this here: http://www.depressedpress.com/Content/Development/JavaScript/Extensions/DP_P anelManager/Index.cfm The documentation isn't complete (I've not yet added examples) but all of the component docs are done (methods and properties and such). This is a small (kinda - only 18kb), relatively simple object that offers a lot of DHTML help. Basically you set up a "PanelManager" (a container for all your panels) like so: MyPanels = new DP_PanelManager(); You then add panels (pretty much any HTML element - but Divs are the obvious choice). To add your DIVs do: div1 = MyPanels.addPanel("div1"); div2 = MyPanels.addPanel("div2"); div3 = MyPanels.addPanel("div3"); Now every DIV you've added has access to the properties and methods listed under "Panel Properties and Methods". You can simply manage content loading (with script activation), visibility, display, position, opacity and size. You can even do simple animations. I've created a reference to each panel by assigning the output of the "addPanel" method (which is a reference to element) to a variable but you could also just use document.getElementById() if you like. Remember the methods are now attached to element not to the manager! To swap two elements is pretty easy (this is off the top of my head code - I'm not in a position to test it). So, to swap div1 and div2 do something like this. You need to get the position of the divs: CurDiv1Pos = div1.getPosition(); CurDiv2Pos = div2.getPosition(); Now set the positions (in every case - opacity, position, size, etc - the output of the "get" method can be used as input to the "set" method): div1.setPosition(CurDiv2Pos); div2.setPosition(CurDiv1Pos); You could also easily animate the change: div1.shiftPosition(CurDiv2Pos); div2.shiftPosition(CurDiv1Pos); Note of course that all of this is pretty simplistic. There are several much more feature-rich libraries (such as Dojo or the YUI) that will offer significantly more. But they are also larger and more complex. My goal to create small, self-contained components that are simple to use and easy to integrate. As I said the component hasn't really been released yet. It's not been tested outside my house. If you do try it please let me know what you think or if you find any errors. Hope this helps. Jim Davis ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Deploy Web Applications Quickly across the enterprise with ColdFusion MX7 & Flex 2 Free Trial http://www.adobe.com/products/coldfusion/flex2/?sdid=RVJU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:273367 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
