Heyall

There're these orange triangles that clicking on them hides the content beneath them.
I'm making custom status panels and I've managed to replicate the aesthetics but clicking on the little orange triangle doesn't do anything.

How can I do this? Where's the javascript onclick function? How can I reference it to that?

Unfortunately, you can't easily replicate the existing code. Quest uses a slightly wonky jQuery UI plugin (called "multiopenaccordion" I think) which doesn't allow new panes to be added once it has started.

However, I suspect the javascript to handle this would be fairly simple. Off the top of my head, if you had elements with ID mypaneLabel and mypaneAccordion, the code to show the pane would be:

$("#mypaneLabel").removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top');
$("#mypaneAccordion").show().removeClass('ui-accordion-content').addClass('ui-accordion-content-active').animate({height: "toggle"}, 300);

and to hide it:

$("#mypaneAccordion").removeClass('ui-accordion-content-active').addClass('ui-accordion-content').animate({height: "toggle"}, 300, function () {
  $(this).hide();
  $("#mypaneLabel").removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all');
});

Off the top of my head, so I could have made some errors there. I'm guessing at the number 300, which is the length of the animation in milliseconds.

This is assuming the HTML you are adding for extra custom panes looks something like:

<h3 id="mypaneLabel" class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="accordion-header-text">My Pane</span></h3>
<div id="mypaneAccordion" class="ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
  Contents goes here
</div>

(Hoping I got those classes right for all the aesthetics…)

multiopenaccordion is correct I found it but as you said, I wasn't sure how I could change it...so I made my own.

The classes work and they made the aesthetics except font and font size and font color which I'm now trying to fix.

As for the onclick function here's what I did:

JS.eval ("$('#gameBorder').prepend('<div id=\"leftside\" style=\"display:block;top:24px;left:250px;position:fixed;\"></div>')")

JS.eval ("$('#leftside').append('<h3 id=\"LeftstatusVarsLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\" style=\"display: block;\"><span id=\"little_orange\" class=\"ui-icon ui-icon-triangle-1-s\" style=\"cursor: pointer;\"></span><span class=\"accordion-header-text\">Enemies</span></h3>')")

JS.eval ("$('#leftside').append('<div id=\"LeftstatusVarsAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-hover-state\" style=\"display: block; height: 440px; width: 220px;\"><div id=\"LeftstatusVars\" style=\"display: block;\"></div></div>')")

s = " $('#little_orange').click(function(){ "
  s = s + " if ($('#LeftstatusVarsAccordion').height() > 0){  "
    s = s + " $('#LeftstatusVarsAccordion').animate({height:'0px'}, 250); "
    s = s + " }else{ "
    s = s + " $('#LeftstatusVarsAccordion').animate({height:'440px'}, 250); "
    s = s + " }}); "
JS.eval (s)

from the script I've read, the animaion took 250ms.

---

Correction: I've added css property overflow hidden to #LeftstatusVarsAccordion I wish there was a way to make min-height:440px and height: auto as well as animate height to 0, but it just doesn't work.'

---

mrangel; I tried your code but it didn't work for some reason. It wouldn't animate

s = " $('#LeftstatusVarsLabel').click(function(){ "
  s = s + " if ($('#LeftstatusVarsAccordion').height() > 0){  "
    s = s + " $('#LeftstatusVarsAccordion').removeclass('ui-accordion-content-active').addclass('ui-accordion-content').animate({height:'toggle'}, 250, function(){"
      s = s + "$(this).hide();"
      s = s + " $('#LeftstatusVarsLabel').removeclass('ui-state-active ui-corner-top').addclass('ui-state-default ui-corner-all'); "
      s = s + " }); "
    s = s + " }else{ "
    s = s + " $('#LeftstatusVarsLabel').removeclass('ui-state-default ui-corner-all').addclass('ui-state-active ui-corner-top'); "
    s = s + " $('#LeftstatusVarsAccordion').show().removeclass('ui-accordion-content').addclass('ui-accordion-content-active').animate({height:'toggle'}, 250); "
    s = s + " }}); "
JS.eval (s)

---

I've tried adding or removing class manually too but it just doesn't work.

JS.eval ("$('#little_orange').removeclass('ui-icon-triangle-1-s');")
JS.eval ("$('#little_orange').addclass('ui-icon-triangle-1-e');")

---

Of course the mistakes can be so simple in coding

mistake: addclass ;;; correction: addClass -_-

here's the code for now:

s = " $('#LeftstatusVarsLabel').click(function(){ "
  s = s + " if ($('#LeftstatusVarsAccordion').height() > 0){  "
    s = s + " $('#LeftstatusVarsAccordion').removeClass('ui-accordion-content-active').addClass('ui-accordion-content').animate({height:'toggle'}, 250, function(){"
      s = s + "$(this).hide();"
      s = s + " $('#LeftstatusVarsLabel').removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all'); "
      s = s + " $('#little_orange').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); "
      s = s + " }); "
    s = s + " }else{ "
    s = s + " $('#LeftstatusVarsLabel').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top'); "
    s = s + " $('#LeftstatusVarsAccordion').show().removeClass('ui-accordion-content').addClass('ui-accordion-content-active').animate({height:'toggle'}, 250); "
    s = s + " $('#little_orange').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); "
    s = s + " }}); "

now the problem is when it's closed, I click on it, it opens and then immediately closes.
The else portion doesn't work.

---

instead of:

if ($('#LeftstatusVarsAccordion').height() > 0){

it's this now:

if ($('#LeftstatusVarsAccordion').hasClass('ui-accordion-content-active')){

it's now better. The appearance changes like the other game's panes.
Also I removed the removeClass ('ui-accordion-content') since there was no need to. only I had to change 'ui-accordion-content-active'

But the problem still stands: when I click on a closed Accordion, it opens and then immediately disappears.

---

okay instead of toggle, I've set height to 0 and 440px and it works!
Here's the code for anyone interested:

s = " $('#LeftstatusVarsLabel').click(function(){ "
  s = s + " if ($('#LeftstatusVarsAccordion').hasClass('ui-accordion-content-active')){  "
    s = s + " $('#LeftstatusVarsAccordion').removeClass('ui-accordion-content-active').animate({height:0}, 250, function(){"
      s = s + "$(this).css('display', 'none');"
      s = s + " $('#LeftstatusVarsLabel').removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all'); "
      s = s + " $('#little_orange').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); "
      s = s + " }); "
    s = s + " }else{ "
    s = s + " $('#LeftstatusVarsAccordion').css('display', 'block').addClass('ui-accordion-content-active').animate({height:'440px'}, 250); "
    s = s + " $('#LeftstatusVarsLabel').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top'); "
    s = s + " $('#little_orange').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); "
    s = s + " }}); "

now onto the next step: How can I set the min-height to 440px and height to auto? Setting a min-height property will stop the accordion from closing.

I've set the height to auto now; since jQuery won't accept auto as a value for animate function.

s = " var contentHeight = $('#LeftstatusVarsAccordion').prop('scrollHeight'); "
s = s + " $('#LeftstatusVarsLabel').click(function(){ "
  s = s + " if ($('#LeftstatusVarsAccordion').hasClass('ui-accordion-content-active')){  "
    s = s + " $('#LeftstatusVarsAccordion').removeClass('ui-accordion-content-active').animate({height:0}, 250, function(){"
      s = s + "$(this).css('display', 'none');"
      s = s + " $('#LeftstatusVarsLabel').removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all'); "
      s = s + " $('#little_orange').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); "
      s = s + " }); "
    s = s + " }else{ "
    s = s + " $('#LeftstatusVarsAccordion').css('display', 'block').addClass('ui-accordion-content-active').animate({ height: contentHeight }, 250, function(){ "
      s = s + " $('#LeftstatusVarsAccordion').css('height', 'auto'); "
      s = s + " }); "
    s = s + " $('#LeftstatusVarsLabel').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top'); "
    s = s + " $('#little_orange').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); "
    s = s + " }}); "
JS.eval (s)

instead of:
if ($('#LeftstatusVarsAccordion').height() > 0){

That might be a problem if you're using show() and hide(), because the return value of height() for an object that isn't on the screen can't be relied on.

Using show() and hide() once an element gets to zero was recommended (not sure if that's still the case) because it allows it to be skipped without doing any calculations whenever an element changes size and the rendering engine needs to work out whether a layout change is necessary. Saves work for the browser, and avoids some rare glitches in some browsers.

I believe the recommended way to check an element's visibility if you're showing and hiding it is:

if ($('#LeftstatusVarsAccordion').is(':visible')) {

However, in UI terms I do think it would be more intuitive to use the classes rather than the visibility of the accordion; just for the rare case where the player somehow manages to click on the button twice in a quarter of a second. That way, the second click can be made to reverse the animation in progress.

So… when showing the accordion, you would

• Change all the classes
• Animate it growing to full size

And when hiding it, you would:

• Change the little orange arrow
• Animate it shrinking
• Change the ui-corners-top or ui-corners-all

I don't know if you would remove the active class as the first or last step in hiding… when should the colour change happen? That's a matter of preference, I think. But if you check one of the classes that's changed at the beginning, then clicking in the middle of the animation should just reverse it (although it might be advisable to call .stop() on it first; I don't know if it will correctly clean up the previous animation or not, otherwise)

I wish I could share FlexiblePanesLib with you… that had the ability to move panes to the left side or both, change the order of panes during play, Quest functions to open/close/hide panes, functions to create as many extra panes as you want, and optional behaviour to let the player drag panes up and down, move them to the other side, undock them as floating windows, or expand the picture or map panes to the default frame.

Sadly, I only posted odd bits on the forum, and the 80% stable master version was lost when a former housemate stole one of my external HDDs. Having to go back and redo so much kind of killed my motivation for the project. Which must have been frustrating for Py too, because I was using it as a basis for the inventory icons thing.

Oh I see. Sorry to hear that, your library sounds amazing.
Your work is very much appreciated. I think I can slowly figure it out, bit by bit.
Thanks again!

Which must have been frustrating for Py too, because I was using it as a basis for the inventory icons thing.

Not to derail the thread, but what is Py? (The only thing Google pops up is Python releated.)

Not to derail the thread, but what is Py? (The only thing Google pops up is Python releated.)

Abbreviating the name of somebody who was on here for a while, because I couldn't remember how to spell it and meant to see if I can find some old messages before posting that message.

Oh, I see. I think I remember you helping someone called Pykrete, and I only remember that because their avatar was like one eyeball or something.