4

I am QT c++ UI programmer & new to html & trying to create a frame in HTML. Please see the attached image.
Frame consist of 4 regions :---

  1. Top --- it contains fixed buttons (will not change at runtime)
  2. Left --- this contains buttons (will change at runtime)
  3. Middle --- this contains buttons & Messages (will change at runtime)
  4. Right --- this contains different link in 3 partitions

Now i want to achive following :---

Top Partition :--

  1. when the first button on the top partition is pressed --- 4 new buttons are creatd on Left partition.
  2. when the second button on the top partition is pressed --- 10 new buttons are creatd on Left partition.
  3. similarly for other buttons of top partition.

Left Partiton :--

  1. when the first button on the left partition is pressed --- 6 new buttons & messages are creatd on Middle partition.
  2. when the second button on the left partition is pressed --- 8 new buttons & messages are creatd on Middle partition.
  3. Similarly for other buttons of left partition.

Right Partition :---

  1. Right partition contains some partition where i can show upto 4 links. And also change the links & run time.

I know how to display button & activate some javascript to take action.
But how to create these partitions (LEFT, TOP, MIDDLE & RIGHT) where i can display different buttons at runtime ?

iframe can be used to create partition to show html link :--
http://www.w3schools.com/TAGS/tag_iframe.asp
http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe

Which elements of HTML to use to achieve this ?

======================= Summary =====================

I need to make layout of the page ... yes developer knows well in advance what element to be displayed in left or middle partition... only thing which he does not know is what link-element to be displayed on right partition which will be send to Ui from remote server.

============================== Image =================

HTML ui frame

Katoch
  • 2,709
  • 9
  • 51
  • 84
  • Do not use iframes, they are still present in html5 but not for this purpose, what you are trying to achieve was valid 10 years ago, but you can find really quick in google that is a bad practice, instead, you should use divs for the layout or any pertinent html5 tag(nav, header, aside,etc) and ajax for the behavior that you want. – Lu Roman Mar 13 '14 at 07:20
  • >> and ajax for the behavior that you want. ..... What exactly you mean to say by this statement ? – Katoch Mar 13 '14 at 08:50
  • I´m assuming that the messages from the middle section are loaded dynamically, all the behavior that you wan't can and should be do it using javascript, and if you are planning to retrieve data from a server to populate one of those sections then using ajax you can get that data asynchronously, if all the info will be contained on the static page then no need for ajax. This seems like a good candidate for angular.js or backbone.js simple app, but i'm just trying to point you on any direction that might help you out =) – Lu Roman Mar 13 '14 at 09:10

1 Answers1

0

I hope I didn't missunderstand what you want to do (image is blocked by proxy), but I would say iFrame is not the best way to do this kind of presentation.

As I understand, you wan't to provide a structure like this :

+-------------------------------------+
| top                                 |
|                                     |
+--------------+----------------------+
|  left        |       right          |
|              |                      |
+--------------+----------------------+

But you wan't to interact with JS between the 3 frames. It's possible with HTML5, but iFrame are more suitable to insert an external page (from another or same domain) in your content. If the only thing you want is to separate different contents, this should be done with html element and css presentation, but everything in the same page

for exemple, as a simple case you could use this simple structure :

<html>
...
<body>
<header>Top</header>
<aside>left</aside>
<div id="content">right</div>
</body></html>

And use javascript to add your content into the header/aside/div elements.

Or better than changing the whole content everytime, put all elements/buttons at runtime, then hide/show only the one that you need.

UPDATE: Here is an example of basic interaction with jQuery : http://jsfiddle.net/Ye99u/

and as Quentin said, before choosing an HTML5 element as a container, read the doc to know their meaning or choose a general element (ex: div).

ylerjen
  • 4,109
  • 2
  • 25
  • 43
  • Don't use header, aside, et al without reading their specifications and understanding what they mean. They don't mean "arbitrary content that should be rendered at the top or side". – Quentin Mar 13 '14 at 07:29
  • 1
    Actually I know what they mean. This was supposed to be an example for a basic layout of the page. Using the right elements according to their meaning is the responsability of the developer who will better know what content he will insert in each element. – ylerjen Mar 13 '14 at 07:40
  • I got the impression that Katoch didn't know that though. – Quentin Mar 13 '14 at 08:47
  • @Miam84 Yes i need to make layout of the page ... yes developer knows well in advance what element to be displayed in left or Middle partition... only thing which he does not know is what link-element to be displayed on right partition which will be send to Ui from remote server. – Katoch Mar 13 '14 at 09:29
  • To retrieve data from the remote server to replace initial content you will need ajax. This is an http request done by the javascript that will give the new content to your page without refreshing it totally. You can write the whole JS from scratch to do this, but as Zarich said, depending of the app it could be interesting to use a framework like jQuery, or for more complex app, angularjs, backbonejs,... As you say you're new to html, I would recommand you to use https://api.jquery.com/jQuery.ajax/ – ylerjen Mar 13 '14 at 09:37
  • example fiddle updated with an ajax call http://jsfiddle.net/Ye99u/1/ – ylerjen Mar 13 '14 at 09:58
  • Please suggest some link which explain the javascript used by you ... you are using $(ID_OF_button) to receive the click event ... i want to lear this style .. so far i have been using following style to perform action when button is pressed ... http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button – Katoch Mar 13 '14 at 09:58
  • I have to learn Ajax for this ... but your layout is not the what i have been expecting ... please see my attached image .. :-) – Katoch Mar 13 '14 at 10:00
  • You're right, I think to do what you want, you'll need to learn the basics of HTML/CSS/JS-ajax. Then the concepts shown in my fiddle will be enough to do what you want. Having a layout with three column will still be the same logic of : structure your content with html, style it with CSS and add optionnal content with js (ajax). JQuery is a simple and powerfull library to learn if you want to do this kind of thing easily (but as I said it's not the only way). – ylerjen Mar 13 '14 at 10:42