Since I started work on IP.Dynamic back in January this year I had only a limited knowledge of javascript and thus the interface was pretty much your old school (that’s like, sooo 2004) PHP + HTML with the menu being the only fancy scripted item.
My work with Invision Power Board has expanded my javascript knowledge and with the sudden explosion of the recently slow burning “Ajax” technology has led to me to rethink the main content interface.
The movie below is the culmination of three days work. This seems rather excessive; and indeed it is for the results but I’ve written all of the javascript code as OOP classes which can be re-used with any output just as long as all the ID names are specified correctly.
This outlines just how young this technology is. There are no shortcuts available. You have to code everything from the group up: the dragging functions, collision detection functions, highlighting functions, original row colour changing functions; everything. You also have to fight through browser bugs and limitations and different proprietry methods of attaching events, etc. It’s a long haul and a huge time vacuum and definitely not for the faint hearted.
However, now that I have my “drag-drop-move” class and my “inline-edit” class, it’ll be very easy to build the same functionality to the content blocks and template areas. The key to a good interface is consistency and building trust with the user. There’s little point in letting them drag and drop to move when working with pages but not so when working in other areas.
Check out the movie and notice how the row which is being dragged fades out (semi-transparent CSS layer using a semi-transparent PNG image for non-IE and IE filters for IE (yay for PNG support in IE7)) and how it won’t let you move a child into its existing parent.
ipd-pages.mov (Quicktime .mov 780k)
36 comments
Comments feed for this article
August 1, 2005 at 8:04 pm
Trackback from timdorr.com blog - Consistently Consistent
August 1, 2005 at 1:27 pm
nicoo
Just one word: Great !
Oh, and one sentence: Bring IP.dynamic out, we all need it !! As fast as possible …
August 1, 2005 at 5:08 pm
Wilko
I’ve been waiting for the next IPD update eagerly,
this latest update looks amazing. At least as far as interfaces go. One of my biggest annoyances with other CMS is the interface/organisation.
Looking good!
August 1, 2005 at 8:53 pm
Michael
I’m a little disapointed, that this close to an IPB release, we are hearing of IPD news.
August 1, 2005 at 8:56 pm
Anonymous
O stop your complaning. Look at the screenshots/other things at: http://www.invisiondynamic.com/.
August 2, 2005 at 1:55 am
backdream
Really cool.
It’s just like the MSN Space.
August 2, 2005 at 2:39 am
Bob
“I’m a little disapointed, that this close to an IPB release, we are hearing of IPD news.”
IPS isn’t a one product company, they can’t spend all their time on IPB. Although i also would like to see 2.1 asap, I like to know that they are still making progress on their other products.
And, for what it’s worth… what Matt has done with IPD, will probably feature in some form in IPB as has been noticed with other IPB/IPD updates (what happened to IPA and IPC???).
August 2, 2005 at 6:17 am
Timothy Dorr
“What happened to IPA and IPC???”
India Pale Ale and Instructions per Clock?
What are these though? I’ve never heard wind of them.
August 2, 2005 at 6:54 am
Anonymous
IPA? I think I know IPC - InvisionPower Chat.
August 2, 2005 at 9:24 am
Michael
“IPS isn’t a one product company, they can’t spend all their time on IPB. Although i also would like to see 2.1 asap, I like to know that they are still making progress on their other products.
And, for what it’s worth… what Matt has done with IPD, will probably feature in some form in IPB as has been noticed with other IPB/IPD updates (what happened to IPA and IPC???).”
I’m aware of that, but so close to a release, IMO Im disapointed at that. Im not saying its not good work, there are other developers, and IPD has been stated that it wont be released for a while
August 2, 2005 at 9:59 am
Matt
IPA / IPC? I don’t recall any projects named as those.
August 2, 2005 at 10:37 am
Kennedy
Matt, this is looking great. Just wondering, whats happening with the whole design of it?
August 5, 2005 at 1:03 am
Lee
Now, if only that can be done for re-ordering forums.
August 9, 2005 at 9:01 pm
Logan
Lee,
That would be awesome!
August 15, 2005 at 2:50 pm
glen
I love this feature! This may encourage me to take javascript a bit more seriously
Thanks for the inspiration.
September 27, 2005 at 4:42 pm
online slots
I am trying to start my own blog and I’m trying to learn how this works.
My site looks like this online slots
http://www.slots-guide.com
October 3, 2005 at 1:22 am
micksam7
Looks like your blog is being targeted by spam bots. o.O
Oh by the way visit nothing.nothing.nothing!
October 26, 2005 at 1:46 pm
Matt
Slots? Someone said slots?
December 7, 2005 at 2:52 am
sizegenetics
Three phrases should be among the most common in our daily usage. They are: Thank you, I am grateful and I appreciate.
December 7, 2005 at 5:32 pm
Matt
Of course they are Mr Spam Bot.
November 17, 2006 at 5:39 pm
Pozycjonowanie
However, now that I have my “drag-drop-move” class and my “inline-edit” class, it’ll be very easy to build the same functionality to the content blocks and template areas. The key to a good interface is consistency and building trust with the user. There’s little point in letting them drag and drop to move when working with pages but not so when working in other areas”
Matt your right he is a fucxxxx spam bot dell his post
Keep up the good work. Greetings
January 3, 2007 at 5:08 pm
Brautkleider bestellen
can anyone delete this big link-collection in the comments…
February 19, 2007 at 1:36 pm
tanie linie lotnicze
Matt - Can I add link to this article on my site? In my opinion is very helpful article
February 20, 2007 at 12:43 am
TurXaliM
Time to IPD!
It will be released a beta of the IPD in March, i trust
March 31, 2007 at 1:17 pm
bannery reklamowe
Fantastic article! Very useful informations. I really love it, can I recommend it to my friends?
April 19, 2007 at 12:54 pm
Good websites
Great article, can I translate it and put on my site?
July 29, 2007 at 11:05 am
sklep rowerowy
I am trying to start my own blog and I’m trying to learn how this works.
August 1, 2007 at 12:22 pm
parasole
Very good work.Congrats.
September 11, 2007 at 12:33 pm
fotele biurowe
Hello
Nice one. good explanation of the topic
Greetings
September 15, 2007 at 12:01 pm
ksero
Thanks for very interesting article.
September 18, 2007 at 4:50 pm
tłumaczenia angielski
Thanx a lot! This is very useful.
September 23, 2007 at 10:01 am
domeny
Three phrases should be among the most common in our daily usage.
October 23, 2007 at 3:54 pm
bilety lotnicze
“[IP.D] Dynamic Interface” - Good work. Cogratulations
November 14, 2007 at 10:40 am
yellowpages
Very nice looking project, keep us updated!
December 10, 2007 at 3:18 pm
Mazury
Very good work.Congrats.Keep up the good work. Greetings
June 30, 2008 at 4:01 pm
online shopping
It’s crazy when you log on to these old blogs and see how things have developed since the blog was first written. So much is going on now, three years later, that it’s weird that we had so little just three years ago. The video was still interesting to look at, though; especially as you realise how much we probably take for granted now. However, that’s what progress is all about and I love reading some of these old blog posts.