CODEWITHSUNDEEP
javascripthtmlcxml
T.T.T.
T.T.T.

Reputation: 34553

Creative ideas for display large amount of text on web page

I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.

What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.

Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.

Note: I am limited to JS, xml, html and C

Thanks!

Upvotes: 2

Views: 3225

Answers (7)

MrTelly
MrTelly

Reputation: 14865

Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.

    ID Range

[X]    1-1000 xxxxxxxxxxxxxxxxxxxxx

[X] 1001-2000 xxxxxxxxx

[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less

Upvotes: 1

Chetan S
Chetan S

Reputation: 23803

If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast

Here's a screenshot. (Image too large to inline it here)

Upvotes: 1

Ron DeVera
Ron DeVera

Reputation: 14644

I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I

The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html

Upvotes: 1

VirtuosiMedia
VirtuosiMedia

Reputation: 53356

Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.

Upvotes: 2

Roy Rico
Roy Rico

Reputation: 3831

you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.

I did this with documentation i was working on and it worked out great.

Upvotes: 1

Keith
Keith

Reputation: 230

Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.

Upvotes: 1

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38378

  • By mouse scroll resize the text.
  • Add drag'n'drop for moving text block.

Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.

It is possible to implement such thing with jQuery/JavaScript

Upvotes: 3

Related Questions