Positioning HTML Elements

Jump to last post
Liam315
18 May 2013 17:17
What I'm trying to do seems relatively simple, but I've hit a bit of a road block. I'm trying to customise the text box so that it appears more like games made with z-code. i.e. no box, placeholder message etc. just a > sign that is always selected and you type next to it.

I've modified the templates to remove the "type here" placeholder message and have spent the day learning the basics of html and css. I can get what I need to print on the screen looking the same as the rest of my text, but I don't know how to move this new element relative to the existing ones. Using the HTML developer tools I can drag what I've created to be a child of the txtCommand element such that it looks fairly decent, but no idea how to actually implement this in my code.

Here's what I have so far (there's probably quite a few extraneous lines and some tags just plain misused but like I said, I only learned how to do this today and I'm trying to make sure I cover all my bases.)

<![CDATA[
        <!DOCTYPE html>
        <html>
          <head></head>
          <body>
            <div id="TextPrefix">&#62;</div>
          </body>
        </html>
      
        <style type="text/css">
	 	  #TextPrefix {
	 	    font-size:12pt;
	 	    font-family:Georgia, serif;
	 	    display:inline-block;
	 	    width:12px;
	 	    float:left;
	 	    vertical-align:bottom;
	 	  }

          #txtCommand {
            border:none;
            font-size:12pt;
            font-family:Georgia, serif;
          }
          input:focus {
            outline:none;
          }
          #endWaitLink {
            font-size:12pt;
            font-weight:normal;
            font-family:Georgia, serif;
            color:black;
          }
          a.cmdlink {
			text-decoration: none;
			color: black;
			cursor: text;
	 	  }
	 	  
        </style>
                            ]]>


Basically I don't know how to reference existing elements that are already built in to Quest, any help would be appreciated.
psymann
18 May 2013 17:35
Ooh, I'd like to be able to make mine do that. The "Type here" box is nice enough, but I do like the simplicity of the

>

for typing next to, especially since my game has no graphics, music etc.


Problem is that I lack the skills to know how to help do that, and have got so many other things I need to create with a higher priority I'm afraid all I'm likely to do is wish you well, and then lurk on this thread in case you find a solution and are willing to post the code for it so I can blatently copy-and-paste it into mine and add your name to my acknowedgements page ;-)

Ideally if there's a neat way of doing this, it would be great to be given the option of command prompt by Quest itself in a future version perhaps, rather than just "on"/"off" as is the current option.

psy
george
18 May 2013 18:20
Liam315 wrote:
Basically I don't know how to reference existing elements that are already built in to Quest, any help would be appreciated.


It seems like you do know how to reference elements in CSS (with # for example)? I'll take a look at this now and see what I can get.
jaynabonne
18 May 2013 18:28
You're close. Basically, if you have a div with id txtCommandDiv, then your CSS selector would be div#txtCommandDIv. Or if you have an input tag with id txtCommand, then you'd use input#txtCommand for your CSS selector.

Things like this:

         div#txtCommandDiv {
            border:none;
            font-size:12pt;
            font-family:Georgia, serif;
          }
          input#txtCommand {
            outline:none;
            border:none;
          }


I'm not sure exactly what look you're going for, but using like the above, I was able to make changes.
george
18 May 2013 18:58
That's pretty close actually, because you can use that CSS and change the TypeHereLabel to '>'. The problem is that the input line then looks like:

|> (imagine that | as the flashing cursor)

When really it should look like

> |

And when you type, the '>' should not disappear. How would you do that?
Sora574
18 May 2013 20:35
The placeholder is not meant to be a solid text. It's designed to tell you what to do in specific text boxes (for example, a password field would say: 'Password')
I think the easiest way to do what you're doing (or at least, the way I would go) is to add a HTML JavaScript tag like this:
<script>document.getElementById('txtCommandDiv').innerHTML = '> <input type="text" x-webkit-speech="" id="txtCommand" onkeydown="return commandKey(event);" style="width: 680px;" autofocus><a id="endWaitLink" onclick="endWait();" class="cmdlink" style="display: none">Continue...</a>';</script>

This will change the textbox to > |
However, for some reason, the '>' tends to be smaller than the text box, so you might need to mess around with the height of the text box.
jaynabonne
18 May 2013 20:40
You can also just add this to your start script (make sure it's inside a CDATA):

  		JS.eval("$('#txtCommandDiv').prepend('&gt;&nbsp;')");


But as Sora said, the style is wrong. Stay tuned... (I hope)
Sora574
18 May 2013 20:46
jaynabonne wrote:
JS.eval("$('#txtCommandDiv').prepend('&gt; ')");

Gah... So much I still have to learn.
I thought you couldn't change HTML with jQuery?
jaynabonne
18 May 2013 20:51
If you make your CSS use this for the text command line, then it will size the command line to the rest of the text (well, the default size - if you change the size, you'll have to adjust it):

          input#txtCommand {
            outline:none;
            border:none;
            font-size:16px;
            margin:0;
            padding:0;
          }


This is great actually, because I've always disliked the input line being so much bigger than the rest of the text...

It's still a slightly different style, though. I'm sure more tweaking will get it there.
jaynabonne
18 May 2013 20:53
Sora574 wrote:

"jaynabonne"

JS.eval("$('#txtCommandDiv').prepend('&gt; ')");

Gah... So much I still have to learn.
I thought you couldn't change HTML with jQuery?



You definitely can. You can even do something like:

$("#MyDiv").html(blah blah blah);


to directly set the HTML. :)

(BTW, I didn't know about the prepend thing. I just looked it up.)
george
18 May 2013 20:59
This is looking good.

I love how easy it is to change the UI in Quest.
jaynabonne
18 May 2013 21:15
You can also do this:

JS.eval("document.getElementById('txtCommand').placeholder='';")


to get rid of the placeholder ("Type here") text. Or set it to what you want.

Note that what is being assigned is two single quote characters (which can look like a double quote - I even confused myself just now when I looked up).
guzmere
18 May 2013 21:16
Nice one Jaynabonne
Hi I've managed to be able to get rid of the background in the text box but as you say you would need some sort of flashing cursor to highlight the text box. Also I placed the coding in the print a message box is there another way to do it permanently, because every time you clear the screen you have to call on it again.
<html><head><style type="text/css">div#txtCommandDiv {border:none; font-size:12pt;font-family:Georgia, serif; } input#txtCommand { outline:none; border:none; background:transparent}</style></head></html>
:D Happy Adventuring :D Terry
jaynabonne
18 May 2013 21:19
A followup to what I posted before. This is the more "Quest" way to set the placeholder text:

request(SetInterfaceString, "TypeHereLabel=")


Much better, I think. :)
jaynabonne
18 May 2013 21:23
guzmere wrote:Nice one Jaynabonne
Hi I've managed to be able to get rid of the background in the text box but as you say you would need some sort of flashing cursor to highlight the text box. Also I placed the coding in the print a message box is there another way to do it permanently, because every time you clear the screen you have to call on it again.
<html><head><style type="text/css">div#txtCommandDiv {border:none; font-size:12pt;font-family:Georgia, serif; } input#txtCommand { outline:none; border:none; background:transparent}</style></head></html>
:D Happy Adventuring :D Terry


First thing: you don't need to print all that each time. In fact, all you need to print is the <style> tag. (I don't know what it means to have a new head and html section nested inside an existing html section. I guess it's working...)

As far as making it permanent - I don't have a good answer. I know Quest can support external style sheets; there are APIs for that. But when I tried it with mine (which was local and not on an external site), it caused Quest to crash. So I punted and went with having my own "clear screen" function that invokes the Quest clear screen and then dumps out the css style. This would be good to investigate.
george
18 May 2013 21:34
Maybe this should be a separate thread but I was wondering where you include external style sheets...do you just need to inject that into the <head> with a start script or something?
jaynabonne
18 May 2013 22:24
Given a local style sheet named HTMLTest.css, I had tried this:

AddExternalStylesheet(GetFileURL("HTMLTest.css"))


but Quest just paused a bit and then crashed. I also tried just calling the JS function directly:

JS.addExternalStylesheet(GetFileURL("HTMLTest.css"))

but that also crashed. The JS for that is straightforward (this is in playercore.js):

function addExternalStylesheet(source) {
    var link = $("<link>");
    link.attr({
        type: "text/css",
        rel: "stylesheet",
        href: source
    });
    $("head").append(link);
}


You'd think it would work, but it doesn't seem to. Perhaps it has to do with GetFileURL returning a "quest://" URL. We could probably come up with a function that does something similar but appends to the head the actual style sheet code (which should make it permanent).
Sora574
19 May 2013 00:40
I tried what Jay did first, and Quest crashed.
Then, I decided to try
AddExternalStylesheet("res://local/style.css")

I also tried it with JS.addExternalStylesheet... This didn't crash Quest, but it didn't exactly work either.
In the HTML Tools, a blank file called 'style.css' showed up in the Resources > Frames > (ui) > Stylesheets folder, which effectively did nothing. The JavaScript console had no errors, though.
I began to think Quest is just being stubborn and not taking in files ending with CSS.
In fact, I was so positive that I changed the file extension on my file to where it became 'style.js', as I remember learning that stylesheets don't necessarily have to end with .css (it's just the preferred method) as long as the HTML has 'type="text/css"' in the <link> tag.
So, I did this
AddExternalStylesheet(GetFileURL("style.js"))

And it worked perfectly. There were no errors, Quest didn't crash, and the text box changed to > |

I tried changing the file extension to .txt, .aslx, and other extensions, but Quest seems to refuse everything but .js
jaynabonne
19 May 2013 00:47
That's really strange... Nice sleuthing. :) What's interesting is that it was crashing for me even with a blank file. I didn't even think to change extensions.

I had also tried the "res://local" variant and got the same result. I think the file actually fails to load. I also tried "./HTMLTest.css" with the same result.

But what you tried worked for me, too. Another mystery... :)
Sora574
19 May 2013 01:05
It is really strange.
What seems even stranger is that even though 'quest://local/style.js' is valid, it seems that Quest refuses 'res://local/style.js'.
Is this supposed to happen? If so, then I'm assuming that 'res://' is only for things in Quest's source codes
Liam315
19 May 2013 05:19
jaynabonne wrote:You can also just add this to your start script (make sure it's inside a CDATA):

  		JS.eval("$('#txtCommandDiv').prepend('&gt;&nbsp;')");


But as Sora said, the style is wrong. Stay tuned... (I hope)


Thanks to everyone for the replies, I'm slowly getting there. The code above is what has got me the closest so far, the only thing is the slightly different size of the > sign compared to the other printed ones. Rather than prepending &gt; to the text box, is there a way to prepend the html element I created instead?
Pertex
19 May 2013 09:20
Sora574 wrote:
And it worked perfectly. There were no errors, Quest didn't crash, and the text box changed to > |


Hmm, this is not working for me. The style.js is loaded without problems but the css in it is ignored. Could you please post a simple example game here ?
jaynabonne
19 May 2013 12:23
Be sure that you just have the CSS in your "css" file. Not the <style> tags.

Attached is my example. Unzip it somewhere, run it, then type "test" to see the change.
Pertex
19 May 2013 15:10
Ah, yes, thanx. But this seems to work only in the offlineversion. I uploaded your file and there the normal command bar is displayed
jaynabonne
19 May 2013 16:03
Oh... yeah. Hadn't gotten to testing it online yet. :)
psymann
22 May 2013 10:00
The general problem I've found with the

>

prompt is that when you lose focus on the prompt, the natural thing to do is click somewhere-on-the-game-screen, and expect then to be able to type, because that's what would happen in most applications. But actually, you have to click in-the-box-where-you-write-that-you-now-can't-see-because-you've-removed-the-border, which isn't obvious at all.

So the user sees a prompt. Tries to type. Nothing happens. Click on the middle of the screen to check the Quest window is active. Tries to type again. Nothing happens. Curses Quest. Closes game. :-S

psy
Liam315
22 May 2013 11:02
I've thought about that as well. "See if text box can be set to “always selected”" is the next item on my to do list. I see no reason why it wouldn't be possible.
psymann
22 May 2013 13:28
Jay's solved it in the other related thread:

http://forum.textadventures.co.uk/viewtopic.php?f=10&t=3690&start=19

Just a simple copy-and-paste job into the start script. :-)
Thanks Jay!

psy
Sora574
23 May 2013 03:24
Hmm... I just realized something.
In the current (source-based) 5.5 version, something is making
JS.eval ("$('#txtCommandDiv').prepend('> ');")

look like this in-game:
>
|

(With a random break that I can't seem to get rid of)
jaynabonne
23 May 2013 10:13
If we could see the HTML (from the F9 HTML tools), that would be helpful. Perhaps the txtCommand element is full width now, and it's forcing a line break as it flows?

You might need to wrap the pre-pended text in some sort of element, like a div or span.

Just random thoughts... :)
Sora574
23 May 2013 20:20
So, I added it into a div, with the same outcome.
The HTML looks like this:
<div id="txtCommandDiv" style="display: block; ">
  <div>> </div>
  <input type="text" x-webkit-speech id="txtCommand" onkeydown="return commandKey(event);" placeholder="" autofocus style="font-family: Georgia, serif; color: black; font-size: 12pt; background-color: white; width: 680px; background-position: initial initial; background-repeat: initial initial; ">
  <a id="endWaitLink" onclick="endWait();" class="cmdlink" style="display: none">Continue...</a>
</div>
.
Which is weird, because there's no <br/>, and even if I change the width of the txtCommand and set it to float right, I get the same outcome.
jaynabonne
23 May 2013 20:39
What is the "display" style for the div and the input? On mine, the input element has display:inline-block.
Sora574
23 May 2013 21:09
Ah, the div's display was automatically set for 'block', instead of 'inline-block', so I changed the HTML to 
<div style="display: inline-block">> </div>
and that did the trick, until I deleted my script for changing the txtCommand width... Then it went back to the same thing as before. So I added it back and it worked. It's weird because I only set it for 1px less
JS.eval ("$('#txtCommand').width('679px');")
jaynabonne
23 May 2013 21:16
I had problems like that. I even had the width set exactly - but the element had either padding or a border on it. Had to subtract those out, too... Glad it's working now! :)
Sora574
23 May 2013 21:47
Yeah,it's weird how HTML does some things.

OFF-TOPIC: I really like the new 'Features' tabs. They get rid of all the clutter in other tabs, which is nice.
Back to top
This topic is now closed. Topics are closed after 60 days of inactivity.

Connect

Follow us on Facebook
Follow @TextAdv on Twitter

Products

Quest
Squiffy
ActiveLit

Resources

Documentation
Blog
GitHub

Support

Forums