0

We've got a directory that we want to modernise in terms of usability and coding. We've incorporated a lot of quite cool elements but one element we want to use is the way in which you can edit your profile on Google+.

How can we create something similar?

For instance, we want to include the following when the page is in it's editing state:

  1. When each sub section is hovered over we want the whole box to change color. So it's clear your editing the section.
  2. On clicking the box, we want the text to be editable with save and cancel options.
  3. Once the user is happy, click done to save the overall changes on the page.

How can this be done? What coding languages would be needed?

Improve this question
12
  • 2
    If this is a web page, then you use css and javascript. Commented Jul 19, 2011 at 12:55
  • Is that what Google have used? Commented Jul 19, 2011 at 12:57
  • You're missing some core detail, like platform (web, desktop, embedded system, etc.) and what you mean by "directory". Commented Jul 19, 2011 at 12:57
  • Since it's the web, I imagine so. What other choices are there? Commented Jul 19, 2011 at 12:58
  • 1
    It's a web page. Even if they used complex frameworks and abstractions, at lower level everything is about (x)html, css and javascript. Your best bet is having a good knowledge of the basis, and then help yourself with some js framework like jquery Commented Jul 19, 2011 at 13:04

2 Answers 2

Reset to default
1

Use 'scriptaculous ajax framework'. It does exactly the same.. I have tested it and it works great...

Its called In-place editor. Its single line as well as multi-line..

Get the code here http://madrobby.github.com/scriptaculous/ajax-inplaceeditor/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

When each sub section is hovered over we want the whole box to change color. So it's clear your editing the section.

In HTML/CSS using the :hover pseudo class: http://jsfiddle.net/sc26u/

.profileSection:hover { background: #333; color: #fff }

On clicking the box, we want the text to be editable with save and cancel options.

Once the user is happy, click done to save the overall changes on the page.

JavaScript to manipulate content, AJAX for save

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.