On 17/04/2023 13:27, Janis Papanagnou wrote:
> Hello Tuxedo
>
> On 17.04.2023 13:42, Tuxedo wrote:
>> Hello,
>>
>> I have a basic triple-row table with some simple HTML attributes:
>>
>> <table width="100%" border="1">
>>
>> <tr><td height="10%" align="center">
>>
>> <img src="logo.jpg">
>>
>> </td>
>>
>> </tr><tr>
>>
>> <td align="center">
>>
>> <img src="visual.jpg">
>>
>> </td></tr>
>>
>> <tr><td height="10%" align="center">
>>
>> footer
>>
>> </td></tr></table>
>>
>
> First I want to reformat your two desired HTML formats to a hierarchical
> format that better resembles the hierarchical DOM structure.
>
>
> <table width="100%" border="1">
> <tr>
> <td height="10%" align="center"> <img src="logo.jpg"> </td>
> </tr>
> <tr>
> <td align="center"> <img src="visual.jpg"> </td>
> </tr>
> <tr>
> <td height="10%" align="center"> footer </td>
> </tr>
> </table>
>
>
> <table width="100%" border="1">
> <tr>
> <td width="50%" align="center"> <img src="visual.jpg"> </td>
> <td align="center"> <img src="logo.jpg"> </td>
> </tr>
> <tr>
> <td colspan="2" height="10%" align="center"> footer </td>
> </tr>
> </table>
>
>
> Now you can see what changes would be necessary in whatever way you want
> to approach the task. And you see that there's not (as you wrote below)
> an "instance" of the "</tr><tr>"; these two tags are from different DOM
> parts.
>
> You can of course use functions to create, delete, and move DOM entries,
> and to add or remove attributes. Add 2x height and 1x colspan, and move
> or recreate the respective sub-tree parts of the 'table' DOM hierarchy.
> Too much effort and runtime demands, IMO.
>
> You'll have to decide which path to go, of course.
>
> All I can say is that I'd probably use an approach with 'hidden' parts,
> and all your functions dual_row() and triple_row() will have to do then
> is hiding the first and un-hiding the second, and vice versa.
>
Yes. IME that is simple and works very well.
Then if you want to change any information iniside an element, give it
an id or a name and use the getelementbywhatever().thingToChange ="blah"

> Janis
>
>
>> I would like to change the structure by a function that does the following:
>>
>> Table re-structure:
>> * Change the table from three to two rows and with two columns in the first
>> row (as if simply removing the first instance of the "</tr><tr>" html code).
>> * Add colspan="2" in table cell of last row.
>>
>> Remove and add html attributes of first table cell and row:
>> * Remove html height attribute.
>> * Add html width attribute of 50%.
>>
>> Swap image locations between cells:
>> * Remove logo.jpg in first cell.
>> * Add visual.jpg in first cell.
>> * Remove visual.jpg in second cell.
>> * Add logo.jpg in second cell.
>>
>> I'm not sure how the above may best be done and in which order etc. Would it
>> be better to re-render the complete table and it's contents or can the
>> structure/positioning of the few elements easily be modified as above?
>>
>> And I would like to reverse the process, by having a function calling each
>> display:
>>
>> function dual_row(){
>> ...
>> }
>>
>> function triple_row(){
>> ...
>> }
>>
>> Either function can then be called depending on the initial width of the
>> client or window size, on resize etc.
>>
>> Different from the triple-row, the dual-row version would appear as:
>>
>> <table width="100%" border="1">
>>
>> <tr><td width="50%" align="center">
>>
>> <img src="visual.jpg">
>>
>> </td>
>>
>> <td align="center">
>>
>> <img src="logo.jpg">
>>
>> </td></tr>
>>
>> <tr><td colspan="2" height="10%" align="center">
>>
>> footer
>>
>> </td></tr></table>
>>
>> Many thanks for any ideas.
>>
>> Tuxedo
>>
>

--
The theory of Communism may be summed up in one sentence: Abolish all
private property.

Karl Marx

Janis Papanagnou wrote:

> Hello Tuxedo
>
> On 17.04.2023 13:42, Tuxedo wrote:
>> Hello,
>>
>> I have a basic triple-row table with some simple HTML attributes:
>>
>> <table width="100%" border="1">
>>
>> <tr><td height="10%" align="center">
>>
>> <img src="logo.jpg">
>>
>> </td>
>>
>> </tr><tr>
>>
>> <td align="center">
>>
>> <img src="visual.jpg">
>>
>> </td></tr>
>>
>> <tr><td height="10%" align="center">
>>
>> footer
>>
>> </td></tr></table>
>>
>
> First I want to reformat your two desired HTML formats to a hierarchical
> format that better resembles the hierarchical DOM structure.
>
>
> <table width="100%" border="1">
> <tr>
> <td height="10%" align="center"> <img src="logo.jpg"> </td>
> </tr>
> <tr>
> <td align="center"> <img src="visual.jpg"> </td>
> </tr>
> <tr>
> <td height="10%" align="center"> footer </td>
> </tr>
> </table>
>
>
> <table width="100%" border="1">
> <tr>
> <td width="50%" align="center"> <img src="visual.jpg"> </td>
> <td align="center"> <img src="logo.jpg"> </td>
> </tr>
> <tr>
> <td colspan="2" height="10%" align="center"> footer </td>
> </tr>
> </table>
>
>
> Now you can see what changes would be necessary in whatever way you want
> to approach the task. And you see that there's not (as you wrote below)
> an "instance" of the "</tr><tr>"; these two tags are from different DOM
> parts.
>
> You can of course use functions to create, delete, and move DOM entries,
> and to add or remove attributes. Add 2x height and 1x colspan, and move
> or recreate the respective sub-tree parts of the 'table' DOM hierarchy.
> Too much effort and runtime demands, IMO.
>
> You'll have to decide which path to go, of course.
>
> All I can say is that I'd probably use an approach with 'hidden' parts,
> and all your functions dual_row() and triple_row() will have to do then
> is hiding the first and un-hiding the second, and vice versa.
>
> Janis
>

Thanks for cleaning up the HTML :-)

Delete, create or move DOM entries is what I had in mind, and giving the
elements relevant IDs to simplify their referencing. The HTML is just a bare
bone model.

The </tr><tr> bit I also had my doubts about.

I can build and run the dom creation for all object including the whole
table and the things within. I'm not sure how to change the existing table
which may be better to keep the html code relatively simple.

I prefer to not initiate CSS display:none|td etc by js to hide or show
duplicates of objects in different places. I think it will conflict with JS
that happens to run by the object's active display elsewhere.

Tuxedo

[...]

On 18.04.2023 04:55, Tuxedo wrote:
> Janis Papanagnou wrote:
>>
>> All I can say is that I'd probably use an approach with 'hidden' parts,
>> and all your functions dual_row() and triple_row() will have to do then
>> is hiding the first and un-hiding the second, and vice versa.
>
> Thanks for cleaning up the HTML :-)
>
> Delete, create or move DOM entries is what I had in mind, and giving the
> elements relevant IDs to simplify their referencing. The HTML is just a bare
> bone model.
>
> The </tr><tr> bit I also had my doubts about.
>
> I can build and run the dom creation for all object including the whole
> table and the things within. I'm not sure how to change the existing table
> which may be better to keep the html code relatively simple.

But then you have the complexity in the Javascript code. And whenever
you want to change the HTML-Format and thus the DOM-Structure you'll
have to change your Javascript implementation - not only the simple
straightforward _generation_ of the DOM -; which I consider inflexible
and error-prone.

Myself I have only created HTML from Javascript but never reorganized
the DOM entities completely; that's quite messy. (If you already used
methods to create the DOM (or parts of the DOM) you know the methods
available to also delete parts of it, I suppose; for a simple deletion
task you can use removeChild(), removeAttribute(), etc. - So you have
everything to manipulate an existing DOM. Apply it to your structure.)

>
> I prefer to not initiate CSS display:none|td etc by js to hide or show
> duplicates of objects in different places. I think it will conflict with JS
> that happens to run by the object's active display elsewhere.

I understand that you don't want to "duplicate" HTML code. You'll have
to bite the bullet; either simple visibility change [of duplicate HTML],
or complex/runtime-inefficient reorganization [of the DOM] - I suggest
to simply try that out then, if that's what you prefer.

I don't understand what "conflict with JS"/"active display" you see, so
I have to abstain commenting on that.

A third option may be to use a similar approach as HTML page designers
use for representation of one page for a large (e.g. computer) screen
and for a small (e.g. smartphone) screen. My impression was that you'd
also have a duplicate structure here, but I've never had the necessity
to do that, so others may be able to provide information and details.

Janis

On 18.04.2023 06:28, Janis Papanagnou wrote:
>
> A third option may be to use a similar approach as HTML page designers
> use for representation of one page for a large (e.g. computer) screen
> and for a small (e.g. smartphone) screen. My impression was that you'd
> also have a duplicate structure here, but I've never had the necessity
> to do that, so others may be able to provide information and details.

For a start https://en.wikipedia.org/wiki/Responsive_web_design

>
> Janis
>

Hello,

I have a basic triple-row table with some simple HTML attributes:

<table width="100%" border="1">

<tr><td height="10%" align="center">

<img src="logo.jpg">

</td>

</tr><tr>

<td align="center">

<img src="visual.jpg">

</td></tr>

<tr><td height="10%" align="center">

footer

</td></tr></table>

I would like to change the structure by a function that does the following:

Table re-structure:
* Change the table from three to two rows and with two columns in the first
row (as if simply removing the first instance of the "</tr><tr>" html code).
* Add colspan="2" in table cell of last row.

Remove and add html attributes of first table cell and row:
* Remove html height attribute.
* Add html width attribute of 50%.

Swap image locations between cells:
* Remove logo.jpg in first cell.
* Add visual.jpg in first cell.
* Remove visual.jpg in second cell.
* Add logo.jpg in second cell.

I'm not sure how the above may best be done and in which order etc. Would it
be better to re-render the complete table and it's contents or can the
structure/positioning of the few elements easily be modified as above?

And I would like to reverse the process, by having a function calling each
display:

function dual_row(){
....
}

function triple_row(){
....
}

Either function can then be called depending on the initial width of the
client or window size, on resize etc.

Different from the triple-row, the dual-row version would appear as:

<table width="100%" border="1">

<tr><td width="50%" align="center">

<img src="visual.jpg">

</td>

<td align="center">

<img src="logo.jpg">

</td></tr>

<tr><td colspan="2" height="10%" align="center">

footer

</td></tr></table>

Many thanks for any ideas.

Tuxedo

Hello Tuxedo

On 17.04.2023 13:42, Tuxedo wrote:
> Hello,
>
> I have a basic triple-row table with some simple HTML attributes:
>
> <table width="100%" border="1">
>
> <tr><td height="10%" align="center">
>
> <img src="logo.jpg">
>
> </td>
>
> </tr><tr>
>
> <td align="center">
>
> <img src="visual.jpg">
>
> </td></tr>
>
> <tr><td height="10%" align="center">
>
> footer
>
> </td></tr></table>
>

First I want to reformat your two desired HTML formats to a hierarchical
format that better resembles the hierarchical DOM structure.

<table width="100%" border="1">
<tr>
<td height="10%" align="center"> <img src="logo.jpg"> </td>
</tr>
<tr>
<td align="center"> <img src="visual.jpg"> </td>
</tr>
<tr>
<td height="10%" align="center"> footer </td>
</tr>
</table>

<table width="100%" border="1">
<tr>
<td width="50%" align="center"> <img src="visual.jpg"> </td>
<td align="center"> <img src="logo.jpg"> </td>
</tr>
<tr>
<td colspan="2" height="10%" align="center"> footer </td>
</tr>
</table>

Now you can see what changes would be necessary in whatever way you want
to approach the task. And you see that there's not (as you wrote below)
an "instance" of the "</tr><tr>"; these two tags are from different DOM
parts.

You can of course use functions to create, delete, and move DOM entries,
and to add or remove attributes. Add 2x height and 1x colspan, and move
or recreate the respective sub-tree parts of the 'table' DOM hierarchy.
Too much effort and runtime demands, IMO.

You'll have to decide which path to go, of course.

All I can say is that I'd probably use an approach with 'hidden' parts,
and all your functions dual_row() and triple_row() will have to do then
is hiding the first and un-hiding the second, and vice versa.

Janis

> I would like to change the structure by a function that does the following:
>
> Table re-structure:
> * Change the table from three to two rows and with two columns in the first
> row (as if simply removing the first instance of the "</tr><tr>" html code).
> * Add colspan="2" in table cell of last row.
>
> Remove and add html attributes of first table cell and row:
> * Remove html height attribute.
> * Add html width attribute of 50%.
>
> Swap image locations between cells:
> * Remove logo.jpg in first cell.
> * Add visual.jpg in first cell.
> * Remove visual.jpg in second cell.
> * Add logo.jpg in second cell.
>
> I'm not sure how the above may best be done and in which order etc. Would it
> be better to re-render the complete table and it's contents or can the
> structure/positioning of the few elements easily be modified as above?
>
> And I would like to reverse the process, by having a function calling each
> display:
>
> function dual_row(){
> ...
> }
>
> function triple_row(){
> ...
> }
>
> Either function can then be called depending on the initial width of the
> client or window size, on resize etc.
>
> Different from the triple-row, the dual-row version would appear as:
>
> <table width="100%" border="1">
>
> <tr><td width="50%" align="center">
>
> <img src="visual.jpg">
>
> </td>
>
> <td align="center">
>
> <img src="logo.jpg">
>
> </td></tr>
>
> <tr><td colspan="2" height="10%" align="center">
>
> footer
>
> </td></tr></table>
>
> Many thanks for any ideas.
>
> Tuxedo
>

Janis Papanagnou wrote:

> On 18.04.2023 04:55, Tuxedo wrote:
>> Janis Papanagnou wrote:
>>>
>>> All I can say is that I'd probably use an approach with 'hidden' parts,
>>> and all your functions dual_row() and triple_row() will have to do then
>>> is hiding the first and un-hiding the second, and vice versa.
>>
>> Thanks for cleaning up the HTML :-)
>>
>> Delete, create or move DOM entries is what I had in mind, and giving the
>> elements relevant IDs to simplify their referencing. The HTML is just a
>> bare bone model.
>>
>> The </tr><tr> bit I also had my doubts about.
>>
>> I can build and run the dom creation for all object including the whole
>> table and the things within. I'm not sure how to change the existing
>> table which may be better to keep the html code relatively simple.
>
> But then you have the complexity in the Javascript code. And whenever
> you want to change the HTML-Format and thus the DOM-Structure you'll
> have to change your Javascript implementation - not only the simple
> straightforward _generation_ of the DOM -; which I consider inflexible
> and error-prone.

True, although in this case, it's a page that doesn't change much, or at
least not the part where the DOM-restructuring would happen.

> Myself I have only created HTML from Javascript but never reorganized
> the DOM entities completely; that's quite messy. (If you already used
> methods to create the DOM (or parts of the DOM) you know the methods
> available to also delete parts of it, I suppose; for a simple deletion
> task you can use removeChild(), removeAttribute(), etc. - So you have
> everything to manipulate an existing DOM. Apply it to your structure.)

Indeed can be messy. At the same time, it can offer a powerful way to
flexible HTML output via a single source code, as long as the HTML itself or
the contents within isn't going to be subject to frequent changes.

>> I prefer to not initiate CSS display:none|td etc by js to hide or show
>> duplicates of objects in different places. I think it will conflict with
>> JS that happens to run by the object's active display elsewhere.
>
> I understand that you don't want to "duplicate" HTML code. You'll have
> to bite the bullet; either simple visibility change [of duplicate HTML],
> or complex/runtime-inefficient reorganization [of the DOM] - I suggest
> to simply try that out then, if that's what you prefer.
>
> I don't understand what "conflict with JS"/"active display" you see, so
> I have to abstain commenting on that.

It's a bit hard to explain as I haven't done the code in combination with a
possible simple hide and show duplicates but I suspect it won't work.

> A third option may be to use a similar approach as HTML page designers
> use for representation of one page for a large (e.g. computer) screen
> and for a small (e.g. smartphone) screen. My impression was that you'd
> also have a duplicate structure here, but I've never had the necessity
> to do that, so others may be able to provide information and details.

Maybe it will be better to use divs or other block elements and emulate the
simple table display. It may prove easier to restructure that with some
JS/CSS actions or CSS conditions alone.

So far, what's needed can easily be done but not without reloading the page,
which indeed also includes some unnecessary code duplication that I'd like
to avoid, but more so, the undesirable page reload. Restructuring DOM may as
you say prove messy and inefficient but can also be a way to deal with
browser resizing or mobile screen orientation change on certain pages.
Either method can however work and it's probably not important which way or
another it's done in this case since the page in question is neither a major
network hog with many processes nor is it expected to change much.

For now, I'm just exploring possible solutions to a simple display issue.

Meanwhile, many thanks for the very good tips.

Tuxedo

>
> Janis