4 Replies - 558 Views - Last Post: 10 May 2013 - 07:53 AM

#1 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Improving tables with popups

Posted 07 May 2013 - 12:21 PM

Hi all,

I've been tasked with creating a new GUI for some currently clunky HTML, and while I know it needs to be improved, I'm not exactly sure how to do so, so any ideas on the subject would be appreciated.

The current GUI is laid out as a table. The table has multiple columns, and then its last column is a button that, when clicked, opens a document in a popup. The original justification for laying the GUI out as a table as to be able to see and sort all the properties of these documents at a glance, and then be able to look at the relevant documents if necessary.

Since relying on popups is kind of outdated (and people tend to hate them, too), I was hoping that there might be a better way to do this, maybe with a dynamic div in the table that opens up when the button is pressed or something. But, I've never seen anything like that before or in Googling, so I don't know if that's actually possible or if there's a better way.

Does anyone know of a good way this could be accomplished without popups? I would appreciate any ideas.

Thanks,
Zel2008

Is This A Good Question/Topic? 0
  • +

Replies To: Improving tables with popups

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4405
  • View blog
  • Posts: 12,262
  • Joined: 18-April 07

Re: Improving tables with popups

Posted 07 May 2013 - 01:44 PM

One way you could accomplish this type of popup effect is to create a div or table that overlays the rest of the page but is initially hidden. When the user clicks the button, it populates this div with the specific content of the document, positions it on the page and then makes it visible.

To help you achieve this, things you need to look up is CSS z-index (to overlay an element), CSS positioning called absolute positioning, and CSS display property to show elements and hide elements, and javascript for handling the clicking of the button (look at the onclick event).

So to give you the basic idea, the div/table is hidden when the page loads, the click the button to trigger the javascript onclick event, which populates the div, positions it and then displays it. This makes it popup without actually launching a separate window. Almost like a large tooltip.

:)
Was This Post Helpful? 3
  • +
  • -

#3 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Improving tables with popups

Posted 07 May 2013 - 01:55 PM

Thanks Martyr2,
Interesting, that sounds like a much better solution. I'm guessing the divs aren't modal when you do this; you can still access the page around it? And there must be a way to make the div invisible again, right?
Thanks,
Zel2008

This post has been edited by Zel2008: 07 May 2013 - 01:56 PM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Improving tables with popups

Posted 08 May 2013 - 05:04 AM

Quote

I'm guessing the divs aren't modal when you do this

<div>s are as modal as any other HTML Element, that is--not modal. however if you completely overlay a web page with a <div> you can create the illusion of a modal element.


Quote

And there must be a way to make the div invisible again, right?

unless you specify background colors/images and borders, <div>s are invisible per se.
Was This Post Helpful? 1
  • +
  • -

#5 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Improving tables with popups

Posted 10 May 2013 - 07:53 AM

Thanks for the clarification Dormilich, I think I definitely have enough to go on. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1