pop-up window to display html

flipside555 · 01 Sep 2019, 23:23

I have an html table in a variable. Is there a quick way to pop up a window to display it? Thanks.

flyingDman · 02 Sep 2019, 00:08

try something like this:

html = 	<html><table border="1"><tr><td>cell: 11</td><td>cell: 12</td></tr><tr><td>cell: 21</td><td>cell: 22</td></tr></table></body></html>
gui,margin,0,0
gui, Add, ActiveX, x0 y0 w130 h100 vWB, shell explorer               
wb.Navigate("about:blank")
wb.document.write(html)
gui, Show, , Test
return 

Guiescape:
exitapp

02 Sep 2019, 00:11

You don't mean the html source code, but like in a browser, right?
Then:

Code: Select all

var =
(
<html>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</html>
)

Gui, Add, ActiveX, w400 h400 vdocument, HTMLFile
document.write(var)
Gui, Show, x400 y250 , HTML

/* or:
Gui, Add, ActiveX, w400 h400 vdocument, MSHTML:%var%
Gui, Show, , HTML
*/

Oh, too late

flipside555 · 02 Sep 2019, 04:22

Thanks for the replies. I had been playing around with HtmlBox, but it looks as though the gui solution might be a cleaner way of doing it. I have two problems.

How do I add scroll bars? It looks like I need VScroll, but I'm not sure exactly where to put it.
I would like to stripe the background. Using
Code: Select all
```
tr:nth-child(even) {background-color: #f2f2f2}
```
as described here It doesn't seem to work in using gui.

Here is what I have. It's based on this example.

Code: Select all

#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

table := "<!DOCTYPE html> <html> <head> <style> #customers {   font-family: ""Trebuchet MS"", Arial, Helvetica, sans-serif;   border-collapse: collapse;   width: 100%; }  #customers td, #customers th {   border: 1px solid #ddd;   padding: 8px; }  [b][u]#customers tr:nth-child(even){background-color: #f2f2f2;}[/u][/b]  #customers tr:hover {background-color: #ddd;}  #customers th {   padding-top: 12px;   padding-bottom: 12px;   text-align: left;   background-color: #4CAF50;   color: white; } </style> </head> <body>  <table id=""customers"">   <tr>     <th>Company</th>     <th>Contact</th>     <th>Country</th>   </tr>   <tr>     <td>Alfreds Futterkiste</td>     <td>Maria Anders</td>     <td>Germany</td>   </tr>   <tr>     <td>Berglunds snabbköp</td>     <td>Christina Berglund</td>     <td>Sweden</td>   </tr>   <tr>     <td>Centro comercial Moctezuma</td>     <td>Francisco Chang</td>     <td>Mexico</td>   </tr>   <tr>     <td>Ernst Handel</td>     <td>Roland Mendel</td>     <td>Austria</td>   </tr>   <tr>     <td>Island Trading</td>     <td>Helen Bennett</td>     <td>UK</td>   </tr>   <tr>     <td>Königlich Essen</td>     <td>Philip Cramer</td>     <td>Germany</td>   </tr>   <tr>     <td>Laughing Bacchus Winecellars</td>     <td>Yoshi Tannamuri</td>     <td>Canada</td>   </tr>   <tr>     <td>Magazzini Alimentari Riuniti</td>     <td>Giovanni Rovelli</td>     <td>Italy</td>   </tr>   <tr>     <td>North/South</td>     <td>Simon Crowther</td>     <td>UK</td>   </tr>   <tr>     <td>Paris spécialités</td>     <td>Marie Bertrand</td>     <td>France</td>   </tr> </table>  </body> </html>"

gui,margin,0,0
gui, Add, ActiveX, x0 y0 w1024 h200 vWB, VScroll, shell explorer               
wb.Navigate("about:blank")
wb.document.write(table)
gui, Show, , Test
return 

Guiescape:
exitapp

flyingDman · 02 Sep 2019, 13:09

There seem to be subtle differences between:

Code: Select all

Gui, Add, ActiveX, x0 y0 w1024 h250 vWB, shell.explorer      ;shell.explorer seems optional in this case; can be anything         
wb.Navigate("about:blank")
wb.document.write(table)

and

Code: Select all

Gui, Add, ActiveX, x0 y0 w1024 h200 vWB, HTMLfile      
wb.write(table)

and particularly re: the vertical scroll bar. Experiment to see. In the first case use body { overflow-y: scroll;} in the style section.

#customers tr:nth-child(even) appears to be ignored completely...

teadrinker · 02 Sep 2019, 15:18

flipside555 wrote: ↑
02 Sep 2019, 04:22
How do I add scroll bars? It looks like I need VScroll, but I'm not sure exactly where to put it.
I would like to stripe the background. Using
Code: Select all
tr:nth-child(even) {background-color: #f2f2f2}
as described here It doesn't seem to work in using gui.

nth-child is not supported by IE.
You could using the following workaround:

Code: Select all

table := "<!DOCTYPE html> <html> <head> <style> #customers {   font-family: ""Trebuchet MS"", Arial, Helvetica, sans-serif;   border-collapse: collapse;   width: 100%; }  #customers td, #customers th {   border: 1px solid #ddd;   padding: 8px; }  .even {background-color: #f2f2f2;}  #customers tr:hover {background-color: #ddd;}  #customers th {   padding-top: 12px;   padding-bottom: 12px;   text-align: left;   background-color: #4CAF50;   color: white; } </style> </head> <body>  <table id=""customers"">   <tr>     <th>Company</th>     <th>Contact</th>     <th>Country</th>   </tr>   <tr>     <td>Alfreds Futterkiste</td>     <td>Maria Anders</td>     <td>Germany</td>   </tr>   <tr>     <td>Berglunds snabbköp</td>     <td>Christina Berglund</td>     <td>Sweden</td>   </tr>   <tr>     <td>Centro comercial Moctezuma</td>     <td>Francisco Chang</td>     <td>Mexico</td>   </tr>   <tr>     <td>Ernst Handel</td>     <td>Roland Mendel</td>     <td>Austria</td>   </tr>   <tr>     <td>Island Trading</td>     <td>Helen Bennett</td>     <td>UK</td>   </tr>   <tr>     <td>Königlich Essen</td>     <td>Philip Cramer</td>     <td>Germany</td>   </tr>   <tr>     <td>Laughing Bacchus Winecellars</td>     <td>Yoshi Tannamuri</td>     <td>Canada</td>   </tr>   <tr>     <td>Magazzini Alimentari Riuniti</td>     <td>Giovanni Rovelli</td>     <td>Italy</td>   </tr>   <tr>     <td>North/South</td>     <td>Simon Crowther</td>     <td>UK</td>   </tr>   <tr>     <td>Paris spécialités</td>     <td>Marie Bertrand</td>     <td>France</td>   </tr> </table>  </body> </html>"

gui,margin,0,0
gui, Add, ActiveX, x0 y0 w1024 h200 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
doc := wb.document
doc.write(table)
doc.documentElement.style.overflow := "auto"
rows := doc.getElementById("customers").rows
Loop % rows.length {
   if !mod(A_Index, 2)
      rows.(A_Index).className := "even"
}
gui, Show, , Test
return 

Guiescape:
exitapp

flipside555 · 03 Sep 2019, 00:20

teadrinker wrote: ↑
02 Sep 2019, 15:18
nth-child is not Broken Link for safety supported by IE.

Great. Thanks for the workaround.
According to the link, nth-child seems to be supported in IE from version 9.

teadrinker · 03 Sep 2019, 05:43

flipside555 wrote: ↑According to the link, nth-child seems to be supported in IE from version 9.

You are right, I was inattentive. For me it works like this:

Code: Select all

table := "<!DOCTYPE html> <html> <head> <style> html { overflow: auto; } #customers {   font-family: ""Trebuchet MS"", Arial, Helvetica, sans-serif;   border-collapse: collapse;   width: 100%; }  #customers td, #customers th {   border: 1px solid #ddd;   padding: 8px; }  #customers tr:nth-child(odd){background-color: #f2f2f2;}  #customers tr:hover {background-color: #ddd;}  #customers th {   padding-top: 12px;   padding-bottom: 12px;   text-align: left;   background-color: #4CAF50;   color: white; } </style> </head> <body>  <table id=""customers"">   <tr>     <th>Company</th>     <th>Contact</th>     <th>Country</th>   </tr>   <tr>     <td>Alfreds Futterkiste</td>     <td>Maria Anders</td>     <td>Germany</td>   </tr>   <tr>     <td>Berglunds snabbköp</td>     <td>Christina Berglund</td>     <td>Sweden</td>   </tr>   <tr>     <td>Centro comercial Moctezuma</td>     <td>Francisco Chang</td>     <td>Mexico</td>   </tr>   <tr>     <td>Ernst Handel</td>     <td>Roland Mendel</td>     <td>Austria</td>   </tr>   <tr>     <td>Island Trading</td>     <td>Helen Bennett</td>     <td>UK</td>   </tr>   <tr>     <td>Königlich Essen</td>     <td>Philip Cramer</td>     <td>Germany</td>   </tr>   <tr>     <td>Laughing Bacchus Winecellars</td>     <td>Yoshi Tannamuri</td>     <td>Canada</td>   </tr>   <tr>     <td>Magazzini Alimentari Riuniti</td>     <td>Giovanni Rovelli</td>     <td>Italy</td>   </tr>   <tr>     <td>North/South</td>     <td>Simon Crowther</td>     <td>UK</td>   </tr>   <tr>     <td>Paris spécialités</td>     <td>Marie Bertrand</td>     <td>France</td>   </tr> </table>  </body> </html>"

gui,margin,0,0
gui, Add, ActiveX, x0 y0 w1024 h200 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
wb.document.write(table)
gui, Show, , Test
return 

GuiClose:
Guiescape:
exitapp

pop-up window to display html Topic is solved

pop-up window to display html

Re: pop-up window to display html

Re: pop-up window to display html

Re: pop-up window to display html

Re: pop-up window to display html

Re: pop-up window to display html Topic is solved

Re: pop-up window to display html

Re: pop-up window to display html

Who is online