So I've been learning more about (i.e., getting into more trouble with) javascript while still tinkering with my sidenav menu...
Ok, enough with the pleasantries! So I have this in my sidenav js script:
function SetQuitBarDisplay() {
var QuitBarDisplay = "off";
};
function openNav() {
if (QuitBarDisplay = "off") {
$("#mySidenav").show('0.1s;');
ASLEvent('QuitBarSound', '');
var QuitBarDisplay = "on";
} else {
$("#mySidenav").hide('0.1s;');
ASLEvent('QuitBarSound', '');
var QuitBarDisplay = "off";
}
};
function closeNav() {
if (QuitBarDisplay = "on") {
$("#mySidenav").hide('0.1s;');
ASLEvent('QuitBarSound', '');
var QuitBarDisplay = "off";
}
};
My first function just sets the display status of my sidenav to "off" at the game's start. In my second function openNav, I switched from a toggle format to an if/then one (for greater control). So if the sidenav is "off", my Quit command will show the sidenav, play a sound, and set the display status to "on". If the sidenav is "on", Quit will hide the sidenav, play the same sound, and set the status to "off" (doing the opposite of the current state, just like a toggle). closeNav just does the same thing as the "else" half of the openNav fucntion, but only if the sidenav is "on".
So this should work right, but it doesn't :P What happens is that only the "if" part of the openNav and closeNav functions work; the "else" (or latter parts) never kick in. If I add an "else if" step to the function, that is not seen either. In the openNav function, if I swap the content of the "if" part with the "else" part, the new content in the "if" part will work, but not in the "else" part. In fact, it doesn't matter what value I set QuitBarDisplay to, it will always act in the same way -- the "if" part will be run and everything else ignored. What gives?
Luke Skywalker
You're going get angry, Luke. And remember: anger leads to hate.
To see if something is equal value in JS, you need to use == or ===.
https://www.w3schools.com/js/js_comparisons.asp
function openNav() {
if (QuitBarDisplay == "off") {
function closeNav() {
if (QuitBarDisplay == "on") {
function SetQuitBarDisplay() {
var QuitBarDisplay = "off";
};
function openNav() {
if (QuitBarDisplay == "off") {
$("#mySidenav").show('0.1s;');
ASLEvent('QuitBarSound', '');
var QuitBarDisplay = "on";
} else {
$("#mySidenav").hide('0.1s;');
ASLEvent('QuitBarSound', '');
var QuitBarDisplay = "off";
}
};
function closeNav() {
if (QuitBarDisplay == "on") {
$("#mySidenav").hide('0.1s;');
ASLEvent('QuitBarSound', '');
var QuitBarDisplay = "off";
}
};
Ok, that's progress -- assignments are given 1 equal sign, comparisons are given 2. But now the sidenav doesn't even display. I should also mention that even though the sidenav doesn't display, the 'QuitBarSound' does play (this is just a Quest function that plays a sound).
I can feel my anger rising within me...
I would have my javascript "print" out the value of QuitBarDisplay for debugging purposes, but I have to do that in HTML and I don't know how to do that.
Ben...Ben! I wish Ben were here -- he'd know what to do...
Under my Start script I had:
JS.addText (game.QuitBar) // string attribute containing all of the CSS/HTML for the sidenav
JS.SetQuitBarDisplay () // sets QuitBarDisplay variable to "off"
If I change it to this:
JS.addText (game.QuitBar)
JS.SetQuitBarDisplay ()
JS.addText (QuitBarDisplay)
or this:
JS.addText (game.QuitBar)
JS.addText (QuitBarDisplay)
JS.SetQuitBarDisplay ()
I get an error -- Error running script: Error compiling expression 'QuitBarDisplay': Unknown object or variable 'QuitBarDisplay'
PS
To keep Javascript junkies from accosting you, you might use camelCase for JS variable names in the future. (I am not one of them. You can use whatever you like, as far as I'm concerned.)
They'd say to make that quitBarDisplay and setQuitBarDisplay(). (Just so you can't ask why I never mentioned that.)
JS.eval("addText(QuitBarDisplay);")
That got rid of the error message, but my sidenav is still not displaying (even though the QuitBarSound plays correctly).
I will try to remember to change my JS stuff to lower camel case, to keep the Java Jawas from accosting me (filthy creatures!).
When you use var inside of a function, JS keeps that value local, so it wasn't declaring or setting a global variable.
Try this:
var QuitBarDisplay = "off"; // Declare the global variable.
function SetQuitBarDisplay() {
QuitBarDisplay = "off"; // Modify the value of the global variable.
};
function openNav() {
if (QuitBarDisplay == "off") {
$("#mySidenav").show('0.1s;');
ASLEvent('QuitBarSound', '');
QuitBarDisplay = "on"; // Modify the value of the global variable.
} else {
$("#mySidenav").hide('0.1s;');
ASLEvent('QuitBarSound', '');
QuitBarDisplay = "off"; // Modify the value of the global variable.
}
};
function closeNav() {
if (QuitBarDisplay == "on") {
$("#mySidenav").hide('0.1s;');
ASLEvent('QuitBarSound', '');
QuitBarDisplay = "off"; // Modify the value of the global variable.
}
};
PS
Add this to QuitBarSound:
game.suppressturnscripts = true
That will prevent turn scripts from firing in the next release of Quest, and it won't hurt anything at all in the current version.
In fact, to prevent turn scripts from firing in your current game:
Copy FinishTurn into your game, and replace its script with this:
// This bit will cover you once 5.8 is released.
if (HasAttribute (game, "runturnscripts")){
if (GetBoolean(game,"runturnscripts")) {
if (not GetBoolean(game, "suppressturnscripts")) {
RunTurnScripts
}
}
}
// Non 5.8 game will do this.
else if (not GetBoolean(game, "suppressturnscripts")) {
RunTurnScripts
}
// Do not create this attribute if it doesn't exist (to keep non 5.8 games working correctly).
if (HasAttribute (game, "runturnscripts")){
game.runturnscripts = false
}
game.suppressturnscripts = false
UpdateStatusAttributes
CheckDarkness
UpdateObjectLinks
Every time ASLEvent() is called, it causes an extra call to FinishTurn. This makes the turn scripts fire an extra time.
Ha! It's working!
var QuitBarDisplay = "off"; // global variable set here
function openNav() {
if (QuitBarDisplay == "off") {
$('#mySidenav').show('0.1s;');
ASLEvent('QuitBarSound', '');
QuitBarDisplay = "on"; // NOT having "var" here is key
} else {
$('#mySidenav').hide('0.1s;');
ASLEvent('QuitBarSound', '');
QuitBarDisplay = "off"; // NOT having "var" here is key
}
};
function closeNav() {
if (QuitBarDisplay == "on") {
$('#mySidenav').hide('0.1s;');
ASLEvent('QuitBarSound', '');
QuitBarDisplay = "off"; // NOT having "var" here is key
}
};
As you stated, the key was when you deleted var from the function statements that have QuitBarDisplay = "" inside of them. I only needed var in the initial global variable declaration. The SetQuitBarDisplay function is completely unnecessary; putting these in the Start script is also unnecessary, and they have been deleted:
JS.SetQuitBarDisplay ()
JS.addText (QuitBarDisplay)
I will need to futz around with FinishTurn next...
PS
Always set up JS stuff in "User Interface Initialisation" (when you're not just testing stuff out) so it loads in saved games, too.
(Sometimes you need to add a timeout to give elements time to print out before you can adjust their values.)
The reason I put js scripts under Start instead of UI Init is because of the Quest printing bug -- printing stuff from UI Init (in a reloaded game) causes the game to start printing things from the beginning of the text thread instead of from the end. I will have to be more judicious, then, in which js scripts should go under Start and which should go under UI Init. Thanks again KV!
A follow-up issue -- when another command clears the screen, the sidenav gets cleared too and won't display anymore. Should be easy to fix?
Placing "JS.addText (game.QuitBar)" in my sidenav command (to refresh the attribute that contains all of the sidenav CSS/HTML) doesn't work.
You can define the clearScreen function in javascript, and it will replace the default one.
clearScreen = function() {
$("#divOutput").css("min-height", 0);
$("#divOutput").children(":not(#mySidenav)").remove();
createNewDiv("left");
beginningOfCurrentTurnScrollPosition = 0;
setTimeout(function () {
$("html,body").scrollTop(0);
}, 100);
};
this one changes clearScreen to remove all output that doesn't have the id="mySidenav".
I recently posted (in another thread) a modified clearScreen script that would remove everything except elements with class="donotclear" or something like that; and I think KV said it looked like a good thing to include in a future version of Quest. So if that gets included, you'll be able to prevent individual elements from being cleared very easily.
Sorry I was busy fixing multiple issues with my game...
@mrangel:
I tried putting your code into a new js script, but it didn't work. Is this the previous thread to which you were referring?
https://textadventures.co.uk/forum/samples/topic/arefgacf4eotexvb1yjtka/printing-a-transcript
Unfortunately, no workie:
function clearScreen() {
if (!saveClearedText) {
$("#divOutput").children(":not(#mySidenav)").remove();
} else {
$("#divOutput").append("<hr class='clearedAbove' />");
if (!clearedOnce) {
addText('<style>#divOutput > .clearedScreen { display: none; }</style>');
}
clearedOnce = true;
$('#divOutput').children(":not(#mySidenav)").addClass('clearedScreen');
}
$('#divOutput').css('min-height', 0);
createNewDiv('left');
beginningOfCurrentTurnScrollPosition = 0;
setTimeout(function () {
$('html,body').scrollTop(0);
}, 100);
}
Try this:
function clearScreen() {
if (!saveClearedText) {
$("#divOutput").children(":not(.donotclear)").remove();
} else {
$("#divOutput").append("<hr class='clearedAbove' />");
if (!clearedOnce) {
addText('<style>#divOutput > .clearedScreen { display: none; }</style>');
}
clearedOnce = true;
$('#divOutput').children(":not(.donotclear)").addClass('clearedScreen');
}
$('#divOutput').css('min-height', 0);
createNewDiv('left');
beginningOfCurrentTurnScrollPosition = 0;
setTimeout(function () {
$('html,body').scrollTop(0);
}, 100);
}
Then, in the script where you create the sidenav stuff, change this line:
<div id="myQuitBar" class="sidenav">
... to this:
<div id="myQuitBar" class="sidenav donotclear">
Still no workie : (
function clearScreen() {
if (!saveClearedText) {
$("#divOutput").children(":not(#myQuitBar, #myQuitBar-open)").remove();
} else {
$("#divOutput").append("<hr class='clearedAbove' />");
if (!clearedOnce) {
addText('<style>#divOutput > .clearedScreen { display: none; }</style>');
}
clearedOnce = true;
$('#divOutput').children(":not(#myQuitBar, #myQuitBar-open)").addClass('clearedScreen');
}
$('#divOutput').css('min-height', 0);
createNewDiv('left');
beginningOfCurrentTurnScrollPosition = 0;
setTimeout(function () {
$('html,body').scrollTop(0);
}, 100);
}
I did the last thing you suggested, KV -- still doesn't work! All my ids are myQuitBar. Replaced all mySidenav with myQuitBar.
Nope.
That doesn't work because that element is a child element of a child element of divOutput, so the clearScreen() function doesn't even check to see if it has the class donotclear.
I just tested this on your game. It works.
Change your openNav() function to this:
var quitBarInBody = false; // Global varialbe is set to make sure the element is not cleared during ClearScreen. - KV
function openNav() {
if (quitBarDisplay == "off") {
if (!quitBarInBody){
$('body').append($('#myQuitBar'));
quitBarInBody = true;
}
$("#myQuitBar").show('0.1s;');
ASLEvent('QuitBarSound', ''); // For some reason, a dummy parameter is needed for an ASLEvent-called function to work.
quitBarDisplay = "on"; // Using "var" here inside a function sets it as local and stops the QuitBar from displaying.
} else {
$("#myQuitBar").hide('0.1s;');
ASLEvent('QuitBarSound', '');
quitBarDisplay = "off";
}
};
Replaced:
$("#divOutput").children(":not(.donotclear)").remove();
$('#divOutput').children(":not(.donotclear)").addClass('clearedScreen');
with
$("#divOutput").children(":not(.sidenav donotclear)").remove();
$('#divOutput').children(":not(.sidenav donotclear)").addClass('clearedScreen');
No change.
Trying your last post now...
I got this:
var quitBarInBody = false; // Global variable is set to make sure the element is not cleared during ClearScreen. - KV
function openNav() {
if (quitBarDisplay == "off") {
if (!quitBarInBody){
$('body').append($('#myQuitBar'));
quitBarInBody = true;
}
$("#myQuitBar").show('0.1s;');
ASLEvent('QuitBarSound', ''); // For some reason, a dummy parameter is needed for an ASLEvent-called function to work.
quitBarDisplay = "on"; // Using "var" here inside a function sets it as local and stops the QuitBar from displaying.
} else {
$("#myQuitBar").hide('0.1s;');
ASLEvent('QuitBarSound', '');
quitBarDisplay = "off";
}
};
function closeNav() {
if (quitBarDisplay == "on") {
$("#myQuitBar").hide('0.1s;');
ASLEvent('QuitBarSound', '');
quitBarDisplay = "off";
}
};
function clearScreen() {
if (!saveClearedText) {
$("#divOutput").children(":not(#myQuitBar)").remove();
} else {
$("#divOutput").append("<hr class='clearedAbove' />");
if (!clearedOnce) {
addText('<style>#divOutput > .clearedScreen { display: none; }</style>');
}
clearedOnce = true;
$('#divOutput').children(":not(#myQuitBar)").addClass('clearedScreen');
}
$('#divOutput').css('min-height', 0);
createNewDiv('left');
beginningOfCurrentTurnScrollPosition = 0;
setTimeout(function () {
$('html,body').scrollTop(0);
}, 100);
}
And this is back to normal:
<div id="myQuitBar" class="sidenav">
Now the sidenav doesn't even come up (no sound either).
This should be the entire JS file (the clearScreen() mod doesn't help you here):
var quitBarDisplay = "off"; // Global variable is set here.
var quitBarInBody = false; // Global varialbe is set to make sure the element is not cleared during ClearScreen. - KV
function openNav() {
if (quitBarDisplay == "off") {
if (!quitBarInBody){
$('body').append($('#myQuitBar'));
quitBarInBody = true;
}
$("#myQuitBar").show('0.1s;');
ASLEvent('QuitBarSound', ''); // For some reason, a dummy parameter is needed for an ASLEvent-called function to work.
quitBarDisplay = "on"; // Using "var" here inside a function sets it as local and stops the QuitBar from displaying.
} else {
$("#myQuitBar").hide('0.1s;');
ASLEvent('QuitBarSound', '');
quitBarDisplay = "off";
}
};
function closeNav() {
if (quitBarDisplay == "on") {
$("#myQuitBar").hide('0.1s;');
ASLEvent('QuitBarSound', '');
quitBarDisplay = "off";
}
};
Go watch your game while I putter...
No way!
That was a miscommunication. I meant to replace your function with that code, not remove that variable.
...but I can see how you'd think I meant to remove that variable...
Do I have to play WarriorCats?
I will... but this is a technicality! I think the judges should have mercy on me!!!
Ok, one last thing as far as I can see -- when you open (and close) the sidenav, then save and reload the game, the sidenav still(!) stays hidden. However, in a new game, if you open/close the sidenav and then restart the game, it works fine. Something needs to be refreshed upon reload, like this maybe?
var quitBarInBody = false;
I transferred this code from the Start tab to the User Init tab:
JS.addText (game.QuitBar)
That's the attribute holding the CSS/HTML for the sidenav element. The sidenav still doesn't display in a reloaded game after being open/closed in a new game (but it does play the proper sound). Because something is being printed from the UI tab, the Quest printing bug also rears its ugly head. Ho hum.
This is all the code you need in the game to display this menu. You can delete the QuitBar attribute from the game object.
Add this to QuitBar.js (it could be done differently, but you'll be able to see how it works this way):
function setupQuitBar(){
var s = "<style>";
s += ".sidenav {";
s += "height: 100%;";
s += "width: 275;";
s += "position: fixed;";
s += "z-index: 1;";
s += "top: 0;";
s += "left: 0;";
s += "background-color: #111;";
s += "overflow-x: hidden;";
s += "padding-top: 60px;";
s += "transition: display 0.5s;";
s += "display: none;";
s += "}";
s += ".sidenav a {";
s += "padding: 20px 38px;";
s += "text-decoration: none;";
s += "font-size: 25px;";
s += "color: #818181;";
s += " transition: display 0.3s;";
s += "display: block;";
s += "}";
s += ".sidenav a:hover {";
s += "color: #f1f1f1;";
s += " }";
s += ".sidenav .closebtn {";
s += " position: absolute;";
s += " top: 0;";
s += " right: 25px;";
s += " font-size: 36px;";
s += " margin-left: 50px;";
s += "}";
s += "</style>";
s += "<div id=\"myQuitBar\" class=\"sidenav\">";
s += "<a onclick=\"ASLEvent('QuitBar', 'restart');\" style=\"cursor:pointer;\">Restart this Game</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'quit');\" style=\"cursor:pointer;\">Quit</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'savequit');\" style=\"cursor:pointer;\">Save then Quit</a>";
s += "<a onclick=\"closeNav()\" style=\"cursor:pointer;\">Cancel</a>";
s += "</div>";
$('body').append(s);
};
In your start script, change JS.addText(game.QuitBar) to this:
// INITIALIZE JS -
JS.setupQuitBar()
Then add this line to User Int Init:
// The following scripts are run only in a restored game -
JS.setupQuitBar()
I emailed you the two files I changed.
This is the way I'd code it (but only for cosmetic purposes):
EDITED (to fix the issue when hovering over a link in the sidenav)
function setupQuitBar(){
var s = "<div id=\"myQuitBar\" class=\"sidenav\">";
s += "<a onclick=\"ASLEvent('QuitBar', 'restart');\" style=\"cursor:pointer;\">Restart this Game</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'quit');\" style=\"cursor:pointer;\">Quit</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'savequit');\" style=\"cursor:pointer;\">Save then Quit</a>";
s += "<a onclick=\"closeNav()\" style=\"cursor:pointer;\">Cancel</a>";
s += "</div>";
$('body').append(s);
setCss(".sidenav", "height: 100%;width: 275;position: fixed;z-index: 1;top: 0;left: 0;background-color: #111;overflow-x: hidden;padding-top: 60px;transition: display 0.5s;display: none;");
setCss(".sidenav a", "padding: 20px 38px;text-decoration: none;font-size: 25px;color: #818181; transition: display 0.3s;display: block;");
setCss(".sidenav .closebtn", "position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;");
$('.sidenav a').bind('mouseover', function(){$(this).attr('oldcolor',$(this).css('color'));this.style.color = '#f1f1f1';})
$('.sidenav a').bind('mouseout', function(){this.style.color = $(this).attr('oldcolor')})
};
Success at last!!! So you got rid of the string attribute and replaced it with a js variable, then load that with a js function on both start and reload. Awesome, awesome! I will delete the game.QuitBar attribute. Hopefully that was the last major hurdle! Thank you again and again and again!
Hate to be a pain, but here goes...
The highlighting of the sidenav text when your mouse pointer hovers over it no longer works:
setCss(".sidenav a:hover", "color: #f1f1f1;");
Hopefully a minor adjustment? (sorry)
Switch back to this (it works with this code):
function setupQuitBar(){
var s = "<style>";
s += ".sidenav {";
s += "height: 100%;";
s += "width: 275;";
s += "position: fixed;";
s += "z-index: 1;";
s += "top: 0;";
s += "left: 0;";
s += "background-color: #111;";
s += "overflow-x: hidden;";
s += "padding-top: 60px;";
s += "transition: display 0.5s;";
s += "display: none;";
s += "}";
s += ".sidenav a {";
s += "padding: 20px 38px;";
s += "text-decoration: none;";
s += "font-size: 25px;";
s += "color: #818181;";
s += " transition: display 0.3s;";
s += "display: block;";
s += "}";
s += ".sidenav a:hover {";
s += "color: #f1f1f1;";
s += " }";
s += ".sidenav .closebtn {";
s += " position: absolute;";
s += " top: 0;";
s += " right: 25px;";
s += " font-size: 36px;";
s += " margin-left: 50px;";
s += "}";
s += "</style>";
s += "<div id=\"myQuitBar\" class=\"sidenav\">";
s += "<a onclick=\"ASLEvent('QuitBar', 'restart');\" style=\"cursor:pointer;\">Restart this Game</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'quit');\" style=\"cursor:pointer;\">Quit</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'savequit');\" style=\"cursor:pointer;\">Save then Quit</a>";
s += "<a onclick=\"closeNav()\" style=\"cursor:pointer;\">Cancel</a>";
s += "</div>";
$('body').append(s);
};
JS can't handle :hover in a css setting, so we have to use 'mouseover' and 'mouseout' events. (Note: the above code works, too. This is just an alternate method.)
function setupQuitBar(){
var s = "<div id=\"myQuitBar\" class=\"sidenav\">";
s += "<a onclick=\"ASLEvent('QuitBar', 'restart');\" style=\"cursor:pointer;\">Restart this Game</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'quit');\" style=\"cursor:pointer;\">Quit</a>";
s += "<a onclick=\"ASLEvent('QuitBar', 'savequit');\" style=\"cursor:pointer;\">Save then Quit</a>";
s += "<a onclick=\"closeNav()\" style=\"cursor:pointer;\">Cancel</a>";
s += "</div>";
$('body').append(s);
setCss(".sidenav", "height: 100%;width: 275;position: fixed;z-index: 1;top: 0;left: 0;background-color: #111;overflow-x: hidden;padding-top: 60px;transition: display 0.5s;display: none;");
setCss(".sidenav a", "padding: 20px 38px;text-decoration: none;font-size: 25px;color: #818181; transition: display 0.3s;display: block;");
setCss(".sidenav .closebtn", "position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;");
$('.sidenav a').bind('mouseover', function(){$(this).attr('oldcolor',$(this).css('color'));this.style.color = '#f1f1f1';})
$('.sidenav a').bind('mouseout', function(){this.style.color = $(this).attr('oldcolor')})
};
I chose the JS Solution for the compactness. It works -- thank you kindly!
This question is just for educational purposes -- why does this work?
function openNav() {
if (quitBarDisplay == "off") {
if (!quitBarInBody){
$('body').append($('#myQuitBar'));
quitBarInBody = true;
I see that #myQuitBar starts off not in the HTML body. Then when openNav is called and the sidenav is opened, if #myQuitBar is not in the body, it is appended to it. This enables it to display after clearing the screen, but I don't understand how?
clearScreen() only clears the divOutput element. So, when we put something in the body (outside of that element), it isn't effected by clearing the screen.
Also note that divOutput is the only element that is saved, so anything not in divOutput will not be loaded in a saved game.
mrangel came up with a fix for that, but it only works if you don't have elements inside of elements, which you do. So, we just create the element and append it to the body each time the game is loaded, whether it's a saved game or the player is starting a new game.
but it only works if you don't have elements inside of elements, which you do.
Oops. .children(":not(.donothide)"). should be .find(":not(.donothide,:has(.donothide))"). (which finds all descendants at any level below divOutput which do not either have the .donothide class or a child with that class).
i love this ! what about ur check mine ?
https://bandarcemekeliling.com/
https://rumahpk99.com/
https://judicapsasusunonline.com/
Follow us on Facebook
Follow @TextAdv on Twitter