I've asked this before and was told that JS.eval ("$('#txtCommandDiv').prepend('> ')") added to the game Start script will give me the > DOS command symbol. This works, but it appears on the line above the flashing cursor, rather than alongside it, resulting in:

>
|

Rather than:

> |

Does anyone know how I might get the desired appearance?

Ideally I would like:

> _

But I imagine this is even more complicated.

I found this, but not sure how I'd adapt it for Quest.

http://stackoverflow.com/questions/19690508/how-can-i-get-a-horizontal-line-cursor-like-youd-get-on-the-command-line-in-a

Some CSS helps, too. Here is one way:

<!--Saved by Quest 5.5.5328.26617-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="blackbg">
    <gameid>cbd27534-818f-401b-ac39-a6840dee437d</gameid>
    <version>1.0</version>
    <firstpublished>2014</firstpublished>
    <defaultbackground>Black</defaultbackground>
    <defaultforeground>White</defaultforeground>
    <css>
    <![CDATA[
     <style type="text/css">
     	body {
          background-color:black;
     	}
     	div#gameBorder {
     		border-color:black;
     	}
        input#txtCommand {
          border-style:none;
          border-width:0px;
          background-color:transparent;
          outline-style:none;
          color:#000000;
          font-size:12pt;
          font-family:'Inder', Georgia, serif;
          margin:0;
          padding:0;}
        span#txtCommandPrompt {
          color:White;
          font-size:12pt;
          font-family:'Inder', Georgia, serif;}
     </style>
     ]]>
    </css>
    <start type="script">
    <![CDATA[
	    request (Hide, "Panes")
    	request (Hide, "Location")
	    JS.eval("$('#txtCommandDiv').prepend('<span id=\"txtCommandPrompt\">&gt;</span>')");
	    JS.eval("$('#txtCommandDiv').css('height', '46px');")
	    msg(game.css)
	]]>
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
</asl>

Here's another. This is a library that you can include (or integrate into your code). One difference is that this one clears the default "Type here..." label.

<library>
  <object name="RetroStyleHolder">
    <css>
      <![CDATA[
    
    	<style type="text/css">
        div#txtCommandDiv {
            border:none;
            font-size:12pt;
            font-family:Courier, monospace;
            color:white;
          }
          input#txtCommand {
            outline:none;
            border:none;
            font-size:16px;
            margin:0;
            padding:0;
			float:right;
          }
          </style>
    
                ]]>
    </css>    
  </object>
  <function name="InitUserInterface">
    <![CDATA[
    JS.eval ("$('#txtCommandDiv').prepend('&gt;&nbsp;')")
    request (SetInterfaceString, "TypeHereLabel=")
    OutputTextNoBr (RetroStyleHolder.css)
  ]]>
  </function>

  <function name="ClearScreen">
    request (ClearScreen, "")
    OutputTextNoBr (RetroStyleHolder.css)
  </function>
</library>

Thanks very much! Your test game works perfectly (not tried the library yet). However, when I shove your CSS into my game it's still throwing the flashing cursor onto the next line?

Can you see in my CSS what's causing it? I thought it might have been my <br> paragraph setting, but it's not.

<css><![CDATA[
    
       <style type="text/css">
        body {
          overflow-x: hidden; 
          line-height: 23px;
          text-align: justify;
            
         }
        a.cmdlink {
           color: #fff !important;
           text-decoration: none !important;
         }           

        div#gamePanel {
           z-index: 99999;
         }
        
        #titleimage {
            display: none;
        }
         
        div#txtCommandDiv {
            border: none;
            background: no-repeat;
            font-size:14px;
            font-family:'Courier New', Courier, monospace;
            color: #fff;
                        
        }       
        
        
        br {
            display: block;
            content: "";
            margin-top: .5em;
            }
        
             
        element.style {
            border: none;            
        }
        
          input#txtCommand {
          border-style:none;
          border-width:0px;
          background-color:transparent;
          outline-style:none;
          color:#000000;
          font-size:14px;
          font-family:'Courier New', Courier, monospace;
          margin:0;
          padding:0;}
        span#txtCommandPrompt {
          color:White;
          font-size:14pt;
          font-family:'Courier New', Courier, monospace;
      }          
        #status { display: none !important; visibility: hidden !important; }
        .hidden {
  visibility: hidden;
}         
                    
          </style>          
                                                ]]></css>

My input#txtCommand has a float:right. That might keep it from getting pushed to the next line.

Mmm, I tried adding that and my flashing cursor disappears altogether.

In any case, the float:right is only in your library, which isn't the one I tried.

Hmm. When I add your css back into my original game, it's one the same line. So perhaps it's something besides the css. Do you have any other HTML JS CSS stuff going on in the code that might be tweaking things?

Did you by chance change anything about the page width?

I did notice that if I changed some widths, I could get it to wrap. So perhaps there is some other style being set (padding, width, border, something like that).

Ah, yes. Before a post by The Pixie in my lightning effect thread which showed how to change the background colour with some JS, I always stretched the page width in the game settings, in order to hide the two vertical borders of white either side of the game window.

I'll remove those and see what happens.

[edit] Yup! That was it. Well, sort of. It was the left and right padding I was using.

Thanks very much :)

@ OurJud:

you might still be struggling with coding (though you've been seemingly understanding it a lot more now and getting a lot better), but wow you seem to be really understanding this UI/GUI/CSS/JS coding stuff !!!!

This is all completely greek to me! I don't understand any of this stuff for the most part, laughs. There's a lot of fields of coding. Networking, Computer Systems, Software, Hardware, Low-Level, High Level, Web, UI/GUI, graphical/animation/art/design/3d-world-physics/models, Mobile Devices vs Desktops vs Laptops, etc etc etc.

Thanks for the encouragement, hege. I've had a very basic understanding of CSS (although I'm much better at modifying it than I am writing it) for many years now, but the rest is just as much Greek to me as it is to you, despite whatever outward appearances you're seeing. JS, especially, is mind-bogglingly confusing and when the good folk here provide me with code, I understand not a single line of it.

For example, take this:

JS.eval ("$('#txtCommandDiv').prepend('> ')")

I understand as much that this is telling the game to add > to the command line (rendered by > (where &nbsp is a space) and to 'prepend' (put before) the blinking | caret.

#txtCommandDiv is the name of the CSS selector which controls the appearance of the command input, but the syntax is an absolute mystery!!

What does the $ do, for instance? Why are the bracket arrangements seemingly so random? Why are both " and ' used?

Compared to this, CSS is child's play.

Take:

JS.eval ("$('#txtCommandDiv').prepend('> ')")

JS.eval is Quest code, a function that takes a string, and passes it to the eval function in JavaScript. Strings in Quest use ", so there is a " at the start of the string and a " at the end.

The JavaScript code then is this:

$('#txtCommandDiv').prepend('> ')

The $ is a shorthand for JQuery; it could be written like this:

JQuery('#txtCommandDiv').prepend('> ')

So the first bit is a call to a function, JQuery, which takes a single string. In JavaScript you can use either ' or " to mark strings, but for compatibility with the Quest code, we use '.

The JavaScript function JQuery is then taking a single string as a parameter:

#txtCommandDiv

The hash indicates we want something with the id equal to txtCommandDiv. So:

$('#txtCommandDiv')

... grabs the element on the page that has the id txtCommandDiv. The . operator is to call a method (function) of that thing, in this case prepend:

prepend('> ')

Again, prepend takes a single string parameter, and again the string is demarked by '. In this case the string is two HTML codes, > and  . The first gives a greater than sign and the second a non-breaking space.

Each bit is pretty easy, but it all adds up to a complex bit of code.

it takes Pixie's excellent help to actually understand it... at least while it's broken up nicely by Pixie... lol

but still... I'm not familiar with all of these symbols/commands/operators (too much to remember when not used to them)... yet... (I still get confused between C++ and java, keeping them straight, laughs)

someday, I definately want to get around to learning UI/CSS/JS/Web/html/xml/etc type of coding... but right now it's still very foreign to me, unless broken down by Pixie, lol. When that day comes, I'll be asking you for help, Ourjud, and/or Pixie and whoever else too, lol

(I did get into some of it with java school class, making panes/windows/frames, listeners and action buttons, etc etc etc, but it was still really confusing... need to get around to learning it better)

Like you say, hege, TP's breakdown makes things slightly easier to understand, but I'd still be a long way from writing it myself, even armed with this. JavaScript kind of scares me, and I think that's half my problem with it.

it's just a bunch of Functions and/or OBJECTS.methods (methods is one of the more official terms used in/with the programming languages, like quest's Script Attributes, methods are just functions of/attached-to/within/contained-within an OBJECT), basically, though of various mediums (quest, JS, and maybe some html/xml/css/web stuff)

and the '&gt' and '&nbsp' are like Functions/Commands to output specific symbols/keyboard key actions (spaces, new line / carriage return / enter, etc etc etc) which otherwise can't normally be outputted by that language, as probably those symbols are used by the syntax. Quest actually does/has the same thing (though I'd argue a bit more friendly than '&gt' and '&nbsp' and whatever other stuff you got to remember, lol), as you can't output/use the '<' and '>' symbols in your scripting without using the 'CDATA' tag, as those are normally seen as the 'tag' symbols, for examples:

<object name="xxx">content</object>
vs
if (test.score >= 90) { /*scripting */ }

quest will see the '>' in the 'if' line as if it was an '>' tag in the 'object' line, and thus throw errors at you.

so, to tell quest that the '>' in the 'if' line is a 'greater than' operator and not a tag, you need to do this:

<!CDATA[ if (test.score >= 90) { /*scripting */ } ]]>

and the '&gt' and '&nbsp' is basically doing the same thing, it's allowing you to use whatever those things are referencing, lol.

&gt : gt = greater than : the '>' symbol

&nbsp : non-breaking space : not sure what the difference is between a 'non-breaking space' and a 'space' but oh well, we're talking about a space/whitespace (spacebar key)... I think... lol

in programming languages here's the structure of their terms and stuff:

Functions: actionable scripting not contained within an OBJECT/CLASS

OBJECT/CLASS:
-> MEMBERS // though lazily many people use 'members' for meaning the 'data: VARIABLES', instead of 'Attributes'
->-> Attributes (data: VARIABLES)
->-> Methods (functions which are obviously contained within an OBJECT/CLASS: actionable scripting)

there's a lot more stuff... programming languages are huge... can take multiple classes to cover/learn all of their content/features/capabilities/etc etc etc... but just to give you some info on the more official/universal terms and structure of programming (outside of quest)

and to compare this to quest's structure/design (generally as I hope I somewhat understand it correctly):

Functions: actionable scripting not contained within an 'Object' Element

'Object' Elements:
-> Attributes (except Script Attributes and Script Dictionary Attributes)
-> Script Attributes and Script Dictionary Attributes // technically "List' and the other 2 Dictionaries are probably here too (which is quest's 'methods')