Help to change color of cell in form?

hluxem · August 17, 2017, 04:04:02 AM

Hello,

I'm working on a script and I can write text into a cell in a table. Now I like to change the background color of the cell from the script depending on a variable, but I just can't get it to work.

The cell is defined by this:

Code Select

<td width="50%"><b>XMP::photoshop\\DateCreated\\DateCreated</b>
<td align="left"  bgcolor="#fab7b1" id="time_1"></td>

As I could not find any information what color the "#fab7b1" stands for I tried to use just colors like "green" or "red" and that worked. I also tried using color values like rgb(228, 255, 228) as described in below link, but the color is different than what is in the example.

https://www.w3schools.com/html/html_colors.asp

Replacing bgcolor with class="success" or "danger" works too and gives me a lighter color. Now I try to change the color using the following statement from w3schools in the script.

Code Select

document.getElementByID('time1').setAttribute("class", "danger");

I tried many different variation of this statement, but I can't make it work. Not sure if there is a difference in using ' or " around the class or id, but I used all different combinations. Any advice is greatly appreciated.

Thanks a lot,

Heiner

JohnZeman · August 17, 2017, 04:41:56 AM

Are you trying to change one table cell or two? You show two cells in your code but the first cell does not have a closing </td> tag.

Code Select

<td width="50%"><b>XMP::photoshop\\DateCreated\\DateCreated</b>
<td align="left"  bgcolor="#fab7b1" id="time_1"></td>

If it's just one cell then change it to something like this:

Code Select

<td width="50%" align="left" bgcolor="#fab7b1" id="time_1"><b>XMP::photoshop\\DateCreated\\DateCreated</b></td>

#FAB7BA is an extremely light red color.

Mario · August 17, 2017, 08:52:21 AM

The standard HTML color format is #rrggbb where the rrggbb values are in hexadecimal notation.
#ff0000 is bright red (100%) and #800000 is 50% red. #ffffff is white and #ffff00 is yellow.

See: http://htmlcolorcodes.com/ for an easy on-line way to get color codes.

To change the color of a table cell you have two possibilities (works for most tags, not only table cells):

1. inline:

<td style="color:#ff0000">My Text in Red</td>

2. Better. Via a class

<td class="special-cell">My Text in Red</td>

Then you define the CSS class in your style sheet or the <style> tag in the <head> of your HTML file:

.special-cell {
color: #ff0000;
}

Using a class allows you to reuse the special-cell style for other tds, and to change it in one place, if you want a different color.
Many of the sample scripts shipped with IMatch use style sheets (.css files). See there for practical use of this.

Quotedocument.getElementByID('time1').setAttribute("class", "danger");

I suggest you better use the jQuery methods to manipulate the DOM:

$('#time1').addClass('danger');

This adds the class danger to the DOM element with the id time1. To make this work, your <td> must look like:

<td id="time1">.....</td>

hluxem · August 17, 2017, 06:46:51 PM

Thanks John and Mario for the help.

While I still have a hard time understanding everything, I got it working with your help.
I think I do have a lot of missing closing tags as I copy and paste mostly from other scripts. And there is probably a lot of other bad stuff I don't realize

But I got much further than I expected.

Heiner

Mario · August 17, 2017, 09:38:10 PM

Which editor do you use?
A proper editor should somehow indicate / highlight closing tags.
For example, in Visual Studio Code, when you select a start tag, it highlights the matching closing tag. If this does not happen => missing closing tag.

The HTML Hint VSCode extension is recommended. It outlines such problems right away - free.

jch2103 · August 17, 2017, 10:22:58 PM

Quote from: Mario on August 17, 2017, 09:38:10 PM
The HTML Hint VSCode extension is recommended. It outlines such problems right away - free.

What's the exact name of this extension? I tried looking for it in the VS Code Marketplace, but there are lots of hits. Is the attached the proper one? (The MS search function could use some work.)

JohnZeman · August 17, 2017, 10:28:15 PM

That's it.

jch2103 · August 17, 2017, 10:29:31 PM

Quote from: JohnZeman on August 17, 2017, 10:28:15 PM
That's it.

Thanks.

hluxem · August 18, 2017, 02:38:39 AM

Thank you all,

I started using Visual Studio Code some weeks ago. Still learning and there are so many options for extension that I didn't even know where to start. Found and downloaded the app and it took me less than 5 minute to get rid of the open tags for about 140 lines.
I certainly agree with others tat JavaScript is very powerful, but that sure means lots of things to learn and figure out.
Believe it or not, I still have not found the right way to find errors in the code, currently I save the project and see what happens in Imatch. If nothing happens I know it must have been something I changed recently so I go back and try to get it right. Lots of trial and error.

Heiner

Mario · August 18, 2017, 08:54:06 AM

Run your app in your browser, not in IMatch.
This allows you to use the built-in developer tools <F12> key in all browses to set breakpoints, see variable contents, step through your code line-by-line.
And of course the console in your browser will display JavaScript error messages etc.

Use the "Open in Web Browser" command from the App Manager to open your app in your browser. Then just bookmark the app URL so you can open it later any time.

Other extensions I would recommend for VC Code:

Bookmarks (to set bookmarks in your code for quick navigation) by Allessandro Fragnani
EsLint (JavaScript linting, additional error checking etc). Very useful, shows you errors in your code immediately and makes sure you use a modern and safe style.

hluxem · August 22, 2017, 03:10:31 AM

Thanks Mario,

Installed the recommended extension and now off playing with the extensions and opening the app in the browser. Lots of things to learn :>).

Heiner