PDA

View Full Version : Intractable overlapping / floating and moveable boxes:


Joe-childs
06-19-2009, 12:45 PM
I am currently working on a predominantly web based project and Iím interested to find out about how to get overlapping and moveable boxes on a website for the vewer to interact with.

I have found a few examples to demonstrate what im looking for:

http://www.1-2-3-info.se
http://www.shape-studio.co.uk
http://www.atillafidan.com

Im guessing that it is some sort of java script, but im not that fluent in coding. If anyone could point me in the right direction, I would appreciate it very much.

All the best

Joe

rico1931
06-19-2009, 01:02 PM
Nope no need for js just good old div tags and it can be done with CSS

Joe-childs
06-19-2009, 02:41 PM
Iím a bit confused.

I knew that you can use AP a div tags to layout web pages in the design and production stage.
But when it comes to putting the website live, is it still possible to have the freely moving and overlapping boxes, that the viewer of the live site can move themselves, from just using div tags?

:confused:

rico1931
06-19-2009, 03:45 PM
yup just change the z-index of each div... meaning if you have your first div be the underlying..do div#1 and you want div#2 overlap it just put the z-index of div#1 to 0 and div#2 to 1 and div#2 will be on top of div#1.

Joe-childs
06-19-2009, 03:49 PM
Thanks a lot, ill give it a try.

rico1931
06-19-2009, 03:54 PM
ooooo sorry I didn't actually understand the questions.. ok I see how they did there page you wanted to know how they moved the div tags and the user can pretty much change the layout of the site for themselves right? ya there is javascript involved but im almost sure that DW comes with something that can let you do this on the fly. Most of their code looks automated and not hand written

rico1931
06-19-2009, 03:57 PM
They all seem to be using this js file called dragdrop I would just google that to find out what it is

Joe-childs
06-19-2009, 03:59 PM
oh cool, do you know what the DW App is?

Joe-childs
06-19-2009, 04:02 PM
Sorry, didn’t realise that you posted again, thanks a lot. Ill look there.

rico1931
06-19-2009, 04:02 PM
nope sry I just tried to google is and can't find it has to be something new.. maybe with spry idk though but its kinda cool.. I'll play around with DW this weekend and check it out.. but maybe some one else on the forum knows where to find it .. keep ya posted..

Joe-childs
06-19-2009, 04:07 PM
Thank you very much, ill watch this space!

DWcourse
06-19-2009, 05:51 PM
It's the Behavior called "Drag AP Element." Here's info: http://cli.gs/u1WtEe but I had trouble with it in CS4,

Joe-childs
06-22-2009, 10:14 AM
That's great, it works perfectly. Thank you very much to everyone that helped.

All the best

Joe

Corrosive
06-22-2009, 11:16 AM
That's great, it works perfectly. Thank you very much to everyone that helped.

All the best

Joe

Fellow Bristolian - nice one. I also find jquery has quite a few plug ins for drag and drop elements...

http://plugins.jquery.com/project/Plugins/category/45

Joe-childs
06-24-2009, 09:47 AM
Alright me mukker, Thanks allot for replying to my post, jquery looks amazing, iv just got to get my head around it!

Chat soon

All the best

Joe

Corrosive
06-24-2009, 10:48 AM
Alright me mukker, Thanks allot for replying to my post, jquery looks amazing, iv just got to get my head around it!

Chat soon

All the best

Joe

Alreet then me babber. JQuery is gurt lush :wink: Plug n play-tastic most of it!