I am using a png image as a background image on my #commandPane. I want to use the image on the other panes. They change size during game play. I would like the image to resize itself when the pane gets larger to fill in the extra space.
It may take a minute to see what I've done. This is the game initialization script. Feel free to condense or what ever it is you high quality coders do. I have lines that can go together but two days of trying has...Well, you know.

backandborder = "border: saddlebrown, 25px;background:moccasin"
text = "color:saddlebrown;font-family:'Comic Sans MS', cursive, sans-serif;font-size: 15px"
JS.setCss ("#status", backandborder)
JS.setCss (".ui-accordion-header", "border-radius: 3px;" + backandborder)
JS.setCss (".ui-accordion-content", "border-radius: 3px;" + backandborder +";" + text +";border-top:none")
JS.setCss (".accordion-header-text", text)
if (not HasAttribute(game,"pane_commands")) {
  game.pane_commands = "travel;look;help;save"
}
JS.setCommands (game.pane_commands)
// The id will be 'verblink' + your word in lower case
JS.eval ("$('#verblinktravel').html(\"<img src='https://i.imgur.com/5dY9Ro3.png'>\");")
JS.eval ("$('#verblinklook').html(\"<img src='https://i.imgur.com/G0h6SV2.png'><br>\");")
JS.eval ("$('#verblinkhelp').html(\"<img src='https://i.imgur.com/6G2Rxld.png'>\");")
JS.eval ("$('#verblinksave').html(\"<img src='https://i.imgur.com/ZUn3TIm.png'><br>\");")
backandborder = "border: none;"
JS.eval ("$('#commandPane').css({'background-image':\"url('https://i.imgur.com/OVSB8GW.png')\"})")
JS.setCss ("#commandPane", backandborder)
JS.eval ("$('#gamePanes').width(250);")
JS.eval ("$('#gameContent').width(700);")
JS.eval ("$('#gameContent').css('margin-bottom', '70px');")

When you're done laughing at my work,
I would appreciate any advise/code you can provide. I pieced this together and I know it looks like sheet.

Oh Yea, The image on commandpane verblinks are fancy lettered words and the background is an old scroll. I may remove the headers on the other panes so A code on that would be plum peachy keen.

That's really neat, really good.

That's pretty neat. If I was doing that for the other panes, I'd give the header of each pane a background image that's the rolled-up scroll at the top, stick a 'footer' to each pane containing the bottom scroll, and then give the actual pane a vertically-repeating background image, so the scroll can 'unroll' as the pane grows or shrinks.

Ok mrangel, I'll leave the front door open for you, and you can come over and type that right up for me. Actually, I think I learned enough about the panes to do what you said. I'll get back to you in a few days...

Thanks Doc! I see your getting fancy with your game. Another year and we won't be text adventures anymore. Fortnite here we come...

Still a long way to go with my game. I hope to have a section of it completed fairly soon, maybe another month, and might be looking for volunteers to test what I've done so far, if you're up for it, and tell me where the failures lie.

Ok, added this to init script.

JS.eval ("$('#statusVarsLabel').css({'background-image':\"url('https://i.imgur.com/MWi7zWy.png')\"})")
JS.eval ("$('#statusVarsAccordion').css({'background-image':\"url('https://i.imgur.com/zznfn4e.png')\"})")

Label image---------------------------------------Accordion image

Now when the Status header is clicked the scroll opens and closes. Friggin awesome! I may have peed a little.

That is a cool idea! (the scroll opening and closing, not the pee)

Not sure, but I think the animation looks a little nicer if you also give the accordion background-position: bottom. That way it will adapt to changes in height of the panel better, so the rolled-up scroll at the bottom is fixed to the bottom of the pane. You could also give it padding-bottom: 35px to make sure that the text doesn't run onto that bottom scroll.

Then you can use the same image with different panes :)

This one is being used on a status pane that should not change. But I am making one now for inventory. Will let you know.

Are you saying that there should be three images? Top scroll, bottom scroll and the background? Right now it is just the two images.
Just asking before I begin to save time. I don't see a footer on the panes to put a rolled scroll into, so a line can take me all day just to add it. I have been working with them for just a few days and using the html editor for the first time. It is all new to me.

I have a problem copying the script there and then figuring the proper coding for adding to the init script. I download SoonGames lib to make it easy but it is a bunch of Js files and folders that I don't have a clue on how to install.

I didn't do this one like you suggested earlier, with just a colored background. I could do it with a colored background if it worked out a border image of the scroll edges.

I think you should only need 2 images. But if you make the background one taller and then use background-position: bottom in CSS, it will crop it at the top to fit the size of the pane, so the bottom scroll is always visible. Then you use the padding-bottom: 35px to leave 35 pixels of the space (wide enough for the bottom scroll) between the bottom of the pane, and the bottom of the pane's contents.

I wanted to place panes over the background of the page. However the transparency of the picture are showing white.
Before it was over a tan' color' so I made the pics with tan around them.
Pasting the light to dark color from the page background is close but really screws up when the scroll expands due to additions.

Remember I am using the script from the top of the thread. I can't figure out what layer needs to be transparent or the coding for it.
I think I have to change the opacity of the statusVarsAccordion and statusVarsLabel but lack the coding skills.
Can I change the opacity of the gamePanel itself so all panes placed in it will show correctly?
If so please show me a proper coding line to do that. I am learning as fast as I can but tend to hit a wall once in a while.

I think you want background-color: transparent for your panes, assuming that the actual image files contain transparency.

Sum Beach! I was trying all day using opacity settings.

I change the first line of the top script here from
backandborder = "border: saddlebrown, 25px;background:moccasin"
to
backandborder = "border: none;background-color: transparent "

and it worked...one freaking word.

mrangel = "You da man!
However,
hate_for_mrangel = hate_for_mrangel + 1

The commandPane code is different from the statusPane in that it only has one div. I use the statusPane code for the commandPane, solving the open and close issue but the contents are only text and not command link.

How can add them as commands. I will just use normal fonts text for them instead of the fancy images from above.

Also These two line interfere with each other.

JS.setCss ("#statusVarsAccordion", "background: transparent")
JS.eval ("$('#statusVarsAccordion').css('background-position': bottom; 'padding-bottom': 35px;)")

how can I get the information together without conflict?
I lose the 'background-position': bottom; when I use background: transparent. at least I think that is what is happening. I lose the bottom of the scroll or I lose the transparency when using both.
I can't see what's happening.

I know my script are chopped.
I tried to rewrite the script and
The old script works:

backandborder = "border: none;"
text = "color:saddlebrown;font-family:'Comic Sans MS'; cursive; sans-serif; font-size: 40px; text-align: left;"
JS.setCommands ("Travel;Look;Help;Save")
JS.setCss ("#gamePanes", backandborder, text)
JS.setCss (".ui-accordion-header", backandborder, text)
JS.setCss (".ui-accordion-content", backandborder, text)
JS.setCss (".accordion-header-text", text)
JS.setCss (".accordion-text", text)
JS.setCss ("#commandPaneHeading", "margin-top: 40px", "margin-left: 25px")
JS.setCss ("#statusVars", "margin-top: 28px")
JS.setCss ("#gamePanes", "margin-top: 100px")
JS.eval ("$('#gamePanes').width(250);")
JS.eval ("$('#statusVarsAccordion').height(190);")
JS.eval ("$('#statusVarsAccordian').width(250);")
JS.eval ("$('#commandPane').height(135);")
JS.eval ("$('.ui-accordion-content').css('background-position': bottom; 'padding-bottom': 35px;")
JS.eval ("$('#statusVarsAccordion').css({'background-image':\"url('https://i.imgur.com/e5Ix6oR.png')\"})")
JS.eval ("$('#statusVarsLabel').css({'background-image':\"url('https://i.imgur.com/MWi7zWy.png')\"})")

But not new one:

JS.setCss ("#statusVarsAccordion", "background: transparent")
JS.setCss ("#statusVarsLabel", "background: transparent")
JS.setCss (".ui-accordion-header", "border: none")
JS.setCss (".ui-accordion-content", "border: none")
JS.setCss ("#statusVars", "margin-top: 18px")
JS.eval ("$('#statusVarsAccordion').css('background-position': bottom; 'padding-bottom': 35px;)")
JS.eval ("$('#gamePanes').width(245);")
JS.eval ("$('#statusVarsAccordion').height(160);")
JS.eval ("$('#statusVarsAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\"})")
JS.eval ("$('#statusVarsLabel').css({'background-image':\"url('https://i.imgur.com/P7ht36C.png')\"})")

Also These two line interfere with each other.

JS.setCss ("#statusVarsAccordion", "background: transparent")
JS.eval ("$('#statusVarsAccordion').css('background-position': bottom; 'padding-bottom': 35px;)")

I don't see a conflict; but I do see that the quotes in the second line are messed up.

It could be:

JS.eval ("$('#statusVarsAccordion').attr('style', 'background-position: bottom; padding-bottom: 35px;');")

or

JS.eval ("$('#statusVarsAccordion').css('background-position', 'bottom').css('padding-bottom', '35px');")

or

JS.eval ("$('#statusVarsAccordion').setCss('background-position: bottom; padding-bottom: 35px;');")

or

JS.eval ("$('#statusVarsAccordion').css({'background-position': 'bottom', 'padding-bottom': '35px'});")

or

JS.eval ("$('#statusVarsAccordion').css({backgroundPosition: 'bottom', paddingBottom: 35});")

The css function in javascript has two different ways it can be called. The first is some_element.css(property, value) - only works for a single CSS property. The second looks like some_element.css({property1: value1, property2: value2, property3: value3}) and can set any number of properties, but they need to be wrapped in a plain object (like a dictionary), which is what the {curly brackets} do in javascript.

You don't need quotes around the property name in the dictionary version, but if it has a hyphen in the name you need to either include the quotes or camelcase it (turning padding-bottom into paddingBottom).
The value needs quotes around it in both versions unless it is either a javascript variable, or a number. So 'bottom' and '35px' both need quotes, but you can change '35px' to just 35 which doesn't.
If the value is important, it needs quotes (for example '35 !important').

You could also combine the two lines to make:

JS.eval ("$('#statusVarsAccordion').css({'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '35px'});")

or even put everything together using the background property:

JS.eval ("$('#statusVarsAccordion').css({'background': 'transparent url(\'your image URL here\') no-repeat bottom', 'padding-bottom': '35px'});")

(because the background property is the same as the background-color, background-image, background-repeat, and background-position properties all listed as a single string separated by spaces)

Like a glove. 👌

Ok.

1. Looking at the image. you can see i have the inventoryLabel as JS.setCss ("#inventoryLabel", "background: transparent") and it works.
2. I have the inventoryWrapper as JS.setCss ("#inventoryWrapper", "background: transparent") and it works.

What is white now?
I even made the verbButtonand elementListWrapper background transparent.
I need to remove the scroll on the right too. I'm trying to fix the overfloww.

3. I removed the margin on the left side of the status pane and the text remains centered. I can't imagine why. I want it the way it is but when changing over the init script I noticed it stayed. Go figure

Script now:

request (SetInterfaceString, "StatusLabel= ")
request (SetInterfaceString, "InventoryLabel= ")
JS.setCss ("#gamePanes", "margin-top: 140px")
JS.setCss ("#statusVarsLabel", "background: transparent")
JS.setCss ("#inventoryLabel", "background: transparent")
JS.setCss ("#inventoryWrapper", "background: transparent")
JS.setCss (".verbButtons", "background: transparent")
JS.setCss (".ui-accordion-header", "border: none")
JS.setCss (".ui-accordion-content", "border: none")
JS.setCss ("#statusVars", "margin-top: 8px")
JS.setCss ("#inventoryAccordion", "margin-top: 0px")
JS.eval ("$('.elementListWrapper').css({'max-height': '400px'; 'overflow-y': 'hidden'});")
JS.eval ("$('.ui-icon').css('display', 'none')")
JS.eval ("$('#gamePanes').width(245);")
JS.eval ("$('#statusVarsAccordion').css({'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '35px'});")
JS.eval ("$('#inventoryAccordion').css({'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '55px', overflow-y: hidden; 'width': '40px'});")
JS.eval ("$('#statusVarsAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\"})")
JS.eval ("$('#statusVarsLabel').css({'background-image':\"url('https://i.imgur.com/P7ht36C.png')\"})")
JS.eval ("$('#inventoryAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\"})")
JS.eval ("$('#inventoryLabel').css({'background-image':\"url('https://i.imgur.com/P7ht36C.png')\"})")

What is white now?

The only white I can see on there seems to be #lstInventory itself.
I'm not sure why it appears to be behind the accordion; that seems very strange to me

I removed the margin on the left side of the status pane and the text remains centered

It would. The status pane's margin-left defines the space between the left edge of the sidebar, and the left edge of the pane.
The spacing between the pane edge and the text inside it (which would move the text off-centre) is controlled by the pane's padding-left.

margin is the space between an element's bounding box and the container, or the adjacent element. padding is the space between the edge of an element and its contents; normally used if you have a background image which includes a border you don't want the text to be rendered on top of.

Haha, I know some of these words.

tried:
JS.eval ("$('.1stInventory').class('background: transparent')")NOPE
JS.setCss ("#inventoryAccordion", "background: transparent") WORKED!

I didn't realize the inventory pane had an Accordion. Thought it was named Wrapper
It showed up in HTML Tool when I had a inventory item selected and it expand for the verbButtons.

Now I just need to get rid of the Scroll arrows. I keep trying to change the scroll: ...we'll see.

Ah Ha, It was overflow: hidden.

Scrolls in action:

Shhhhwiiiing!

Nice!!! Professional level even!!!
Perfect for a DnD style game!

DnD Rpg is what I'm in it for!

If I could get my coding skills up to par with my designing, I could rule this Mother Jammer.

Edited: Fixed a typo in the javascript (spelled a class name wrong)

Off the top of my head, I think you could reduce that to something like:

JS.setCss(".accordion-header-text,.ui-icon", "opacity: 0")
JS.setCss ("#gamePanes", "margin-top: 140px")
JS.setCss (".ui-accordion-header", "border: none; background: transparent url('https://i.imgur.com/P7ht36C.png')")
JS.setCss (".ui-accordion-content", "border: none; background: transparent url('https://i.imgur.com/qEElOEq.png') no-repeat bottom; margin-top: 0px; padding: 2 40 40 37;")
JS.setCss (".elementListWrapper", "max-height: 400px; overflow-y: hidden;")
JS.eval ("$('#gamePanes').width(245);")

Setting the background image for all labels, and for all accordions, rather than naming them individually; because I think in most cases you'd want them all to look the same.

And while I was looking at this, I wondered if it might help to add labels to the panes that don't have them, so all the panes are accordions:

$('#commandPane,#customStatusPane').each(function () {
  var pane = $(this);
  var label = $('<h3>', {id: pane.attr('id')+'Label'}).addClass('ui-accordion-header ui-helper-reset ui-state-default ui-corner-all').insertBefore(pane).bind('click', function (e) {
    e.preventDefault();
    if (pane.is(':visible')) { pane.slideUp('fast', function (e) { pane.removeClass('ui-accordion-content-active'); }); }
    else { pane.slideDown('fast', function (e) { pane.addClass('ui-accordion-content-active'); }); }
  }).append($('<span>', {'class': 'accordion-header-text'}).text(pane.attr('id')));
  if (pane.is(':visible')) { pane.addClass('ui-accordion-content-active'); } else { label.hide(); }
});

or wrapped in a Quest eval:

JS.eval("$('#commandPane,#customStatusPane').each(function(){var a=$(this),e=$('<h3>',{id:a.attr('id')+'Label'}).addClass('ui-accordion-header ui-helper-reset ui-state-default ui-corner-all').insertBefore(a).bind('click',function(e){e.preventDefault(),a.is(':visible')?a.slideUp('fast',function(e){a.removeClass('ui-accordion-content-active')}):a.slideDown('fast',function(e){a.addClass('ui-accordion-content-active')})}).append($('<span>',{class:'accordion-header-text'}).text(a.attr('id')));a.is(':visible')?a.addClass('ui-accordion-content-active'):e.hide()});")

mrangel said

And while I was looking at this, I wondered if it might help to add labels to the panes that don't have them, so all the panes are accordions:

Yes, that was the intent on the first post of this thread, but kind of wandered away from it. So I abandoned the command pane till the others were done.

The bottom JS eval script works for me.

I have been trying to center the header text. I believe is I change the <span> to <center> I may get that result.

After studying the game with the HTML tool for the last few days I have learned a lot about the games divs and how it is all put together. At times the running copy of my game looks a bit like Frankenstein's monster but its how you learn. Backup, backup, backup!,

mrangel, you help has been invaluable.
Thanks much to you and Doctor Agon, DarkLizard and Dcoder for your encouragement. You guys make great cheerleaders...Nyuck Nyuck. 🤾‍♀️🤸‍♀️🤾‍♂️

I am looking to move the divOutput down or anyway so the text will only scroll to a point below the top of the background scroll.

Am having no luck

I have been trying to center the header text.

JS.setCss (".ui-accordion-header", "text-align: center")
JS.setCss (".accordion-header-text", "padding-left: initial")

(the first line aligns the <span> horizontally within the <h3>. The second line removes the padding-left: 21px which was added to keep the text from overlapping onto the little open/closed triangle in the default header. I could have put 0px; but using initial makes it easier for someone modifying the code later to see that the reason for that line is to undo a change elsewhere in the code)

I believe is I change the <span> to <center> I may get that result

<center> is obsolete shorthand for <div align="center">; which these days is likely to be converted to <div style="text-align:center">.

I am looking to move the divOutput down or anyway so the text will only scroll to a point below the top of the background scroll.

JS.eval("$('<div>', {id: 'divOutputWrapper'}).css({position: 'fixed', top: '120px', bottom: '65px', width: '675px', marginLeft: 'auto', marginRight: 'auto', paddingRight: '250px', overflow: 'scroll'}).insertBefore('#divOutput').append($('#divOutput'));")

Not too pretty. We can do better, but that was a first attempt off the top of my head. The numbers need twiddling.

Alternatively, you could set padding-top on #divOutput to ensure that its contents don't come right to the top of it, and then put a position: fixed image of the top of the scroll floating over it

I just woke for work and thought:

I spice together googled images with paint.net now. I could create a a copy of the background image's scroll and with everything else outside of that transparent. Then make a copy of the body div. Name it gameTopLayer and place it over everything. (EDIT) I said that backwards. I just need the scroll to be transparent in the new layer.

Got on to post the idea and....here you are. I am saying something different but past the work of making the new image might be less coding. I would save and use image from an online sourse.
Do you think it would work?
If so, Where would I place the new gameTopLayer to be the top most layer?
I'm going to make the new png now.

(Edit:) I made the layer with only the top of the background. I see the game panes and other divs may be above where I want to place it.Should listen to the master...

Ok I added the div script you supplied above. it results in moving the command div up and scroll bars vertical and horizontal.

I have not done anything else to the init script.
An overflow: hiddenshould hide the bars, right?
The command div is beyond me.

Yep. The overflow: hidden worked.

I believe the new script is covering the game panes as I can not select from them.

I will continue tweaking tomorrow. I'm a night shift-er. Time to go to work!

Ok, I reverted to my master from before We discussed the scrolling problem.

I have made a second background image of the top section of the background.
I have been unable to follow the directions for creating another div layer to place it in.

The script you provided above for the div works and I can remove the scroll bars. However the image still scrolls with the rest. And I changed the wide so it does not cover the game panes.

I made the background image of the entire top of the background image. I will put a border on the new div and snip just the image inside the border. Then it will line up correctly.

If you set position: fixed on the new image, it won't scroll. Getting it aligned so that it works with different window sizes will be the hard part.

With the fixed divOutputWrapper, I didn't notice that it was in front of the panes. Maybe it would have been better to wrap it around gameContent instead; or possibly give it a lower z-index to force it behind the panes; but that isn't something I've played with much.

I was looking at positions at w3Schools earlier today and ran across z-index. Without it the item divs are placed in order as written.

I think I have an understanding of the info you provided. Of course I haven't started yet so we'll see how long that last.

As I understand it, If I make a copy of the top section of the background image that only goes down to just past the top of the scroll image but all the way across the width of it and make the div area the same, it all will be out of the playing area as not to cover anything clickable and may still maintain the correct size.

Guessing, of course.

16 hours later And I did it...Well needs more testing
Rename div for my memory. and changed tp #gamePanes. I knew they ran on top of the border.

JS.eval("$('<div>', {id: 'backgroundUpperLayer'}).css({border: 'transparent'}).insertBefore('#gamePanes').append($('#gamePanes'));")

everything add in background image ccs

JS.eval ("$('#backgroundUpperLayer').css({'background-image':\"url('https://i.imgur.com/WBQJl3u.png')\", 'background-repeat': 'no-repeat', position: 'fixed'}).width(640).height(170)")

Seems a little odd to put the game panes inside that layer. Looks like it works, but I'd expect that to stretch it down so that the transparent image layer covers any links in the text.

If it works, that's the main thing.

I am discussing and showing my work for anybody wanting the same type of effect and maybe they can learn like I am. (Not that you need to see it mrangel). Your insight and instruction was my only salvation. Thanks again!

For the last 6 years I have only been working with the parsing aspects of Quest. Now I want to learn the designing code.

I just kept appending it to different divs and got lucky when it worked. I always have W3Schools open in a tab at all times, to quickly look at something they do not understand.
And just about everything about Quest is JQuery.

I knew the #gamePanes were above the #outPutAlign and #gameContent layer so I tried it. I didn't know anything about the .insertBefore and .append but without them the line of code did not place the div. In messing with them I have some understanding now.

One thing I did during testing is put a red border around the different divs. This helped me learn their positions during game play without having to constantly searching for them with the HTML tool.

I don't care for the big brown box when selecting a .selected .selectee.
I have tried the transparent on it but no go.
I would like to make the width smaller bu .width isn't affecting it either.
Any ideas?

Update on the init script
Note the li-selected and 1stInventory lines. They are not working. So you don't need them. still testing.

request (SetInterfaceString, "StatusLabel= STATUS")
request (SetInterfaceString, "InventoryLabel= INVENTORY")
request (SetInterfaceString, "PlacesObjectsLabel= PLACES and OBJECTS")
JS.setCss ("#gamePanes", "margin-top: 140px")
JS.setCss (".ui-accordion-header", "border: none")
JS.setCss (".ui-accordion-content", "border: none")
JS.eval ("$('.accordion-header-text').css({'color':'white','font-size': '15px'});")
JS.setCss ("#statusVars", "margin-top: 8px")
JS.setCss ("#statusVarsLabel", "background: transparent")
JS.setCss ("#statusVarsAccordion", "background: transparent")
JS.setCss ("#placesObjectsLabel", "background: transparent")
JS.setCss ("#inventoryAccordion", "margin-top: 0px")
JS.setCss ("#gamePanes", "top: 0px")
JS.setCss ("#placesObjectsWrapper", "overflow: hidden")
JS.setCss ("#inventoryWrapper", "overflow: hidden")
JS.setCss ("body", "overflow: hidden")
JS.eval ("$('elementListWrapper').width({'40'});")
JS.eval ("$('#inventoryLabel').css({'background-color': 'transparent'});")
JS.setCss (".ui-icon", "opacity: 0")
JS.setCss ("#gamePanes", "margin-top: 160px")
JS.eval ("$('#1stPlacesObjects').css({ 'min-height: 50px', 'overflow-y: hidden', 'width: 20%'});")
JS.eval ("$('#gamePanes').width(245)")
JS.setCss (".li-selected"), "background: transparent")
JS.eval ("$('<div>', {id: 'backgroundUpperLayer'}).css({border: 'transparent'}).insertBefore('#gamePanes').append($('#gamePanes'));")
JS.eval ("$('#statusVarsAccordion').css({'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '35px'});")
JS.eval ("$('#inventoryAccordion').css({'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '35px', 'text-align': 'center', 'font-size': '14px'});")
JS.eval ("$('#placesObjectsAccordion').css({'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '35px', 'text-align': 'center', 'font-size': '14px'});")
JS.eval ("$('#statusVarsAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\"})")
JS.eval ("$('#statusVarsLabel').css({'background-image':\"url('https://i.imgur.com/P7ht36C.png')\"})")
JS.eval ("$('#inventoryAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\"})")
JS.eval ("$('#inventoryLabel').css({'background-image':\"url('https://i.imgur.com/P7ht36C.png')\"})")
JS.eval ("$('#placesObjectsAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\"})")
JS.eval ("$('#placesObjectsLabel').css({'background-image':\"url('https://i.imgur.com/P7ht36C.png')\"})")
JS.eval ("$('#backgroundUpperLayer').css({'background-image':\"url('https://i.imgur.com/WBQJl3u.png')\", 'background-repeat': 'no-repeat', position: 'fixed'}).width(640).height(170)")

I don't think setting the width on the selected item would work. You probably need to set the width on #lstInventory (and spell it correctly). I could be wrong, though. But I would suggest that the best way to do it would be to set left-padding and right-padding on the #inventoryAccordion, which will automatically resize everything inside the accordion to fit on the scroll.

In the shortened piece of code I posted above, I did this using the line JS.setCss (".ui-accordion-content", "border: none; background: transparent url('https‍://i.imgur.com/qEElOEq.png') no-repeat bottom; margin-top: 0px; padding: 2 40 40 37;") - setting it for all accordions at once.

If you want to highlight the selected item in a different way, you need to modify the style of .ui-selected - BUT you can't use setCss for this, because that finds all the items which currently have that class, and applies direct styles to them.

What you need to do is output a <style> element on the page somewhere, so that your modified styles will apply to a list item that becomes selected in the future.

The simplest way to do this would be:

msg ("<style>li.ui-selected { background:transparent; font-weight: bold; font-size: 120%; }</style>")

But you'd have to repeat that every time you clear the screen.
To make the style element stick around, you'd put it in the <head> where it belongs, like so:

JS("$('head').append('<style>').text('li.ui-selected { background:transparent; font-weight: bold; font-size: 120%; }');")

or however you want to highlight it.

But once you've started doing that, it makes a lot more sense to put everything in pure CSS.

In trying to make the ui-selectedtransparent, I am using:

 JS.eval ("$('ui-selected').css({'background : transparent'});")

This does nothing.

The ui-selected show after you make the selection. I notice it is from the playercore 205. is ther a way to show more of the pathway to ui-selected in the JS eval?

As I said, that line finds all the elements which are currently selected, and changes their background colour.
This will be undone at the end of every turn, because the list is emptied and redrawn every turn.

You need to create a CSS rule rather than applying direct styling.

👍 I think I can live with it the way it is now. moving on. I'll play with stuff I know about for awhile.

Thanks again mrangel.

Tweaking the #gamePanes again. Thought I'd share.

mrangel, You mentioned the issue with screen sizes. Is the fix for this a major overhaul?

I'm thinking a change in any reference to pixel sizes and changing them to percents, but haven't a clue if this is part of the screen sizing fix. Some miracle program that does it for you?

I don't care for playing text games on a mobile device but would like the game to size properly.
I could give notice to only play the game full screen.

Researching now...

Those scrolls look sweet enough to eat...

A weeks work for an amateur, but I learned a lot!

Condensed init. script.

I uploaded the interface to see it in action online.
Here!

Cool deal! I want a better look at Helga.

When using this JS.eval that mrangel supplied above (I removed the #customStatusPane'. I do not need it for what ever reason. I can use request (SetInterfaceString, "StatusLabel= STATUS") on the other panes but it is not available on the command pane.

JS.eval("$('#commandPane,#customStatusPane').each(function(){var a=$(this),e=$('<h3>',{id:a.attr('id')+'Label'}).addClass('ui-accordion-header ui-helper-reset ui-state-default ui-corner-all').insertBefore(a).bind('click',function(e){e.preventDefault(),a.is(':visible')?a.slideUp('fast',function(e){a.removeClass('ui-accordion-content-active')}):a.slideDown('fast',function(e){a.addClass('ui-accordion-content-active')})}).append($('<span>',{class:'accordion-header-text'}).text(a.attr('id')));a.is(':visible')?a.addClass('ui-accordion-content-active'):e.hide()});")

It puts the {id:a.attr('id')+'Label' in as heading text.(commandpane) I need it to say 'Commands'.

request is deprecated anyway; better to use JS.

Off the top of my head:

JS.eval("$('#commandPaneLabel .accordion-header-text').text('Commands');")

Dang it I tried that before...Must have missed a semi-colon or something like that. You line worked.

The background image for the #commandPane does not work like the other panes.

JS.eval ("$('#commandPane').css({'background-image':\"url('https://i.imgur.com/u0XAFbF.png')\"})")

I have tried to use a number of other names of divs but no luck.
can you tell by the info given which div would work, I think I tried them all..

Working, but have to line thing up together + I'm piecing again...
JS.eval ("$('#commandPaneLabel').css({'background-image':"url('https://i.imgur.com/N0bplto.png')", 'height': '15px'})")
JS.eval ("$('#commandPaneHeading').css({'background-image':"url('https://i.imgur.com/u0XAFbF.png')" , 'height': '90px', 'line-height': '15px', 'background-color': 'transparent', 'background-position': 'bottom', 'text-align': 'center'})")
JS.eval ("$('#commandPane').css({'font-weight': 'bold', 'overflow': 'hidden', 'height': '100px'})")


I decide to put a few command buttons in instead of a command pane. Found a cool button online. It is so easy to do and looks great. The button will show a list of clickable towns the player has visited and sends them.

if (not HasAttribute(game,"pane_commands")) {
  game.pane_commands = "Travel"
}
JS.setCommands (game.pane_commands)
JS.eval ("$('<img>', {id: 'verblinktravel', src: 'https://i.imgur.com/Q9gzWhy.png', title: 'travel'}).css({width: '246px', height: '50px', cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'travel').append('#commandPane')")

Here's the interface now. Will add a couple more buttons and may move them to the bottom.

The travel command calls this function.

ShowMenu ("You have decided to Quick travel to another town.<br>List of available locations you have visited:", game.travel_location, true) {
  NewLocation = GetObject (result)
  if (player.parent = NewLocation or player.parent.parent = NewLocation) {
    msg ("You are already in  " + result + ".")
  }
  else {
    msg ("You travel to " + result + ".")
    MoveObject (player, NewLocation)
  }
}

Note: (ShowMenu) will show a list from a stringlist/objectlist.
(show menu) will bring a pop-up with the list contents.
Make sure you notice the difference.

In this shot, you will notice the command links are now in a nice HUD looking box. It is a div that took me two days to position correctly. I started with the intention of having this same look but I prefer the entire thing in a pop-up window. Looking just as is does now without the ugly pop-up window trappings. I will be adding an X (close) button in the upper right of the brown frame in the image.

I realize now as I write this, I can just hide the div till I want it to show. But can I make it movable? I sure don't want much...

I looked up windows on w3school but was soon lost before getting started.

A little help would be greatly appreciated...
I had to remake the top button and left a little transparency on the bottom of it. Reason for the wider gap. Will fix.

oh yeah, this may help.

JS.eval ("$('<div>', {id: 'backgroundUpperLayer'}).css({width: '170px', height: '361px','border': 'transparent', 'position': 'fixed','background-repeat': 'no-repeat', 'margin-left': '1600px', 'padding-right': '50px', 'margin-top': '160px'}).prependTo('body');")
JS.eval ("$('#backgroundUpperLayer').css({'background-image':\"url('https://i.imgur.com/zqZP5U8.png')\"})")
JS.eval ("$('<img>', {id: 'verblinktravel', src: 'https://i.imgur.com/H64bQTl.png', title: 'travel'}).css({ width: '160px', height: '35px', cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'travel').prependTo('#backgroundUpperLayer')")
JS.eval ("$('<img>', {id: 'verblinkhelp', src: 'https://i.imgur.com/cRJ6Z6a.png', title: 'help'}).css({ width: '160px', height: '35px', cursor: 'pointer', display: 'block',float: 'center'}).addClass('cmdlink commandlink').data('command', 'help').appendTo('#backgroundUpperLayer')")
JS.eval ("$('<img>', {id: 'verblinksave', src: 'https://i.imgur.com/gJ8D0Cl.png', title: 'save'}).css({width: '160px', height: '35px', cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'save').appendTo('#backgroundUpperLayer')")
JS.eval ("$('<img>', {id: 'verblinkheal', src: 'https://i.imgur.com/qv0AzsF.png', title: 'heal'}).css({width: '160px', height: '35px', cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'heal').appendTo('#backgroundUpperLayer')")
JS.eval("$('#verblinktravel,#verblinkhelp,#verblinksave,#verblinkheal').css({ 'position': 'relative', 'top': '100px', 'left': '32px'})")

Using .show and .hide on the div seems to work as a command that is run when a certain button is clicked. 👀
Command scripts:

JS.uiHide ("#backgroundUpperLayer")

What's that supposed to do? You appear to be creating a new div, showing or hiding it, but not inserting it into the page anywhere. So I'd expect those lines to have no obvious effect.

No,
I guess it doesn't...
Working...

Aha!

JS.uiHide ("#backgroundUpperLayer")

Next, I'll set the txtCommand box to fixed and position it lower and put it in a div that maatches the new command div!