Change background color of a specific screen

Use this board to ask questions or have discussions with other Genie users.
Post Reply
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

Change background color of a specific screen

Post by Wayne C. »

Is it possible to change the background color of the body of a specific or selected screen? We're still on version 5.0.8.

My ultimate aim is trying to clean up the background when pop up windows are displayed. (The background screen goes back to the unmodified rendering of that screen.) In many of our instances, that screen is kind of jumbled. In some cases, I've been abled to assign an identifier to that screen and clean things up a bit and make the background look more presentable.

I also had the thought of darkening the background (perhaps white to a gray) so that the pop up window stands out more from the background while kind of hiding the background screen. Is this possible?

I entered the following in the "onpageload" and "pageload" events of a particular screen:

script: document.bgColor = "gray";

There wasn't any change. Am I on the right track? I looked at the CSS, but didn't see anything that referred to specific screen names. I'm currently trying to create a function in custom.js. Thanks for any help or suggestions.
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

Re: Change background color of a specific screen

Post by Wayne C. »

Also tried bastardizing some code from custom.js.

if (detectScreen('D_19_69','A%W200AW1')) {
document.bgColor = "grey";
}

This didn't work either.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Change background color of a specific screen

Post by Scott Klement »

As far as I know, there's no such thing as "document.bgColor"? did you mean document.body.style.backgroundColor?

If you use that, you'll need a way to set it back to it's default value when you leave the screen (maybe do this in the onsubmit event?)
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

Re: Change background color of a specific screen

Post by Wayne C. »

I got that from my javascript textbook;) I used the document.style.body... and got the color change but it was permanent. I'll try the onsubmit event when I get the chance.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Change background color of a specific screen

Post by Scott Klement »

Genie is what they call a "Single Page Application". Its only one web page, and it's not re-loaded during your session. It merely redraws a postion of that page as the 5250 screens change. So, if you change the background color, it will remain changed until you either change it back (possibly in the onsubmit event) or until you reload the page (i.e. end your Genie session, close the window and open a new one.)

That's why I said you'll need a way of changing it back...

For example, you could create a new JavaScript file in the IFS, maybe put it in your Genie Skin directory, and add it to the start.html (using a script tag, just like the one that's there for custom.js, but point it to a different script name...)

In that JavaScript file you could put routines like this:

Code: Select all

if (tantara==null) window.tantara={};
tantara.savedBackground="initial";

tantara.setBackground = function(color) {
   tantara.savedBackground = document.body.style.backgroundColor;
   document.body.style.backgroundColor = color;
}
   
tantara.restoreBackground = function() {
  document.body.style.backgroundColor = tantara.savedBackground;
  return true;
}
NOTE: I did not test the above code, it is just off the top of my head.

Then in a display where you want the background to change, put this in the onload event:

Code: Select all

tantara.setBackground("#808080"); // or whatever color you wish.
And put this in the onsubmit event:

Code: Select all

tantara.restoreBackground
Again, I didn't test this... but when the screen loads it should save the current background color before setting the new one. When the screen submits it should restore the saved color, putting things back to normal.
Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests