Is there a way to change how these are displayed?

I would like the compass at the top. When it is at the botton, it is jumping up and down the page as items appear and disappear from the object lists, verbs are shown and hidden, etc. If it was at the top, it would not move, and as it does not change size, will not make anything else move.

I would like the status panel second, as it rarely changes it sizes.

The inventory and object list should be next to each other as they are conceptually similar; both are lists of objects, that can be used with verbs.

How can I achieve this?

I am not sure but you could try it with document.getElementById('gamepanesRunning').innerHTML .You should receive the html code of the panes which must be separated into the single panes, rearranged and then set again with innerHTML.

Hmm, interesting idea. I will have a look.

Struggling with this. This is what I have so far:

  function swap() {
    // Grab the HTML element we are interested in
    rightPane = document.getElementById("gamePanesRunning");
    // ... and its direct child nodes
    nodes = rightPane.childNodes;
    // Save the nodes in a new array
    var ary = new Array();
    s = "Found: " + nodes.length + ". "
    for (i = 0; i < nodes.length; i++) {
      s += " Got: " + nodes[i].id + " (" + nodes[i].tagName + ")" + ". ";
      ary[i] = nodes[i]
    }
    // Clear the existing content
    rightPane.innerHTML = '';
    // Add the panes back in, in the new order
    // Seem to count spaces as nodes, which gives you 17 nodes, where all the even numbered ones
    // can be ignored.
    order = [3, 1, 0, 2]
    // Internet Explorer gets to here okay
    for (i = 0; i < order.length; i++) {
      append(rightPane, ary[order[i] * 4 + 1])
      append(rightPane, ary[order[i] * 4 + 3])
    }
  }

  function append(root, node) {
    root.appendChild(node)
  }

This works in the offline game, and in Google when online, but not in Internet Explorer. The problem seems to be in the append function (putting in print statements reveals the code gets to here, then silently gives up). I have tried putting the empty nodes (the even numbered ones) back in, but that does not work either (and you get "undefined" between each pane).

Also tried this (offline panels are reordered but do not work):

  root.innerHTML += node.outerHTML

And this (crashes Quest; I think my JavaScript is wrong, but cannot see where):

  root.createElement(node.tagName)
  for (i = 0; i < node.attributes.length; i++) {
    root.setAttribute(node.attributes[i].name, node.attributes[i].value)
  }

Any suggests or comments anyone?


The uploaded game is here:
http://play.textadventures.co.uk/v5/Play.aspx?id=986

And the test game is here:

Why not use jQuery to do the hard stuff, something like this sounds good - not tried it at all though. http://stackoverflow.com/questions/4909 ... ing-jquery

Also what's the JS callback problem described in your latest wiki update? Would be good to have an issue logged for this kind of thing.

I will try jQuery.

The callback problem I encountered when trying to trouble shoot this. I had a number of calls to a function in Quest scattered through the JavaScript code so I could see what was going on, but I found that when online I only saw the last one, even though I saw them all when offline.

yes, it seems to work with jquery insertBefore. th problem is, that some of the divs don't have an ID, so you can't adress them directly. And I get problems in the offline version with the player. Sometimes it only shows a white screen or I have to wait some time until it starts.
Alex, could you tell us someting about changing from jQueryUI to Bootstrap? Will this come in Q5.4 or later? When changing will this break such a Javascript coding?

Okay, so here is a jQuery version that does not work. In the off-line Quest, the panes are re-ordered, but do not work properly. Compass buttons do not get visually modified as you change rooms, but the buttons do work. The object panels are updated as you change rooms, but do no work otherwise.

  function swap() {
    rightPane = $("#gamePanesRunning")
    divnodes = rightPane.children("div")
    h3nodes = rightPane.children("h3")
    rightPane.children().remove();
    order = [3, 1, 0, 2]
    for (i = 0; i < order.length; i++) {
      rightPane.append(h3nodes[order[i]])
      rightPane.append(divnodes[order[i]])
    }
  }

I cannot imagine why that would be, given it did work before (online at least). If the panes have been put back in, why would they not work?

By the way, this is made more complicated by the DIVs not having their own IDs. The page you linked to gave a great way to do it otherwise!

Possibly removing and readding the elements disconnects the event handlers?

Quest is great!!! Here is an example with an additional pane. A pane to display pictures or perhaps a watch using it with The Pixies clock lib or or or
http://play.textadventures.co.uk/v5/Play.aspx?id=987

Without any further idea of what to do, I have put in a request that those DIVs get IDs at some point.

http://quest.uservoice.com/forums/34461 ... r-all-divs

Actually there's already a pull request from Pertex adding those div id's.

In the meantime you can access the div via jQuery, e.g.:

var $inventoryLabel = $("#inventoryLabel");
var $inventory = $inventoryLabel.next();

$inventory will be the jQuery-wrapped reference to the inventory div.

Success. Thanks Alex for pointing me in the right direction.

function swap() {
var $compassLabel = $("#compassLabel");
var $compass = $compassLabel.next();
var $statusLabel = $("#statusVarsLabel");
var $status = $statusLabel.next();

$compassLabel.insertBefore("#inventoryLabel");
$compass.insertBefore("#inventoryLabel");
$statusLabel.insertBefore("#inventoryLabel");
$status.insertBefore("#inventoryLabel");
}

I am curious what the dollar sign means in jQuery before a variable name. I am wondering if that is what was wrong before.

A dollar sign before a variable name doesn't mean anything special. It's just a convention so you know which variables are for jQuery-wrapped elements. It's a form of Hungarian notation in a way, yet somehow more popular with the cool kids.

Tommy Refenes uses hungarian notation in his programming, so as far as I'm concerned, it's cool!

This no longer woks in 5.4 as the insert command has been removed. Is there a way around that?