My new inquiry piggybacks off of Cheese's recent thread about a second picture sidepane:
http://textadventures.co.uk/forum/samples/topic/q5zedoe560au_ii73oamoq/adding-graphics-in-a-specific-location-gui-solved
I was trying to expand the secondary picture in KV's sidepane by hovering the mouse pointer over it, like so:
https://www.w3schools.com/howto/howto_css_zoom_hover.asp
w3schools codes this with CSS, but I figure javascript would be more ideal. I was trying to combine this with javascript KV used to configure a Side Navigation Menu (another recent thread). I came up with garbage code such as this:
function setupZoomHover() {
var s = "<div id='myZoomHover' class='zoom'>";
$('body').append(s);
setCSS(".zoom", "transition: transform .2s;margin: 0 auto;");
};
function zoomHover() {
$('#AreaPicPane').bind('mouseover', function(){$(this).css('transform: scale(1.5)');})
$('#AreaPicPane').bind('mouseout', function(){$(this).css('transform: scale(1.0)');})
};
I clearly don't know what I'm doing, but at least you can kind of see my thought process (scary, I know). Input anyone?
Or (make sure the element exists before calling this function when doing it this way):
function zoomHover() {
$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'scale(1.5)';});
$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'scale(1.0)';})
}
Cool, it works. I did it the second way (I thought :hover
doesn't work in js). Now I'm trying to figure out the syntax for z-index
so that the expanded image stays on top...
------------------------------------------------------- (filler for updating post) ---------------------------------------------------------------------------------
Clumsy code (somehow I can condense some of the this.style
syntax, but I don't know how):
function zoomHover() {
$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'scale(1.5)';
this.style.position = "absolute";this.style.zIndex = '5'});
$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'scale(1.0)';
this.style.position = "absolute";this.style.zIndex = '0'});
};
"AreaPicPane" Quest function that displays the picture sidepane:
firsttime {
}
otherwise {
// Following the initial display, the line directly below changes the area pic thereafter.
JS.eval ("$('#AreaPicPane').attr('src', '" + GetFileURL(game.NewArea.AreaPic) + "');")
}
// The two-line combo directly below displays the "AreaPicPane" and the area's proper pic. The area pic is appended to the HTML body in order to prevent the bug wherein text is printed at the beginning of the text thread upon game restoration.
JS.eval ("$('body').append(\"<img id='AreaPicPane' style='display:none;' src='" + GetFileURL(game.NewArea.AreaPic) + "'/>\");$('#AreaPicPane').insertBefore($('#statusVarsLabel')).show().width('100%').css({'min-height':'150px','max-height':'150px','margin-top':'20px'});")
JS.zoomHover ()
Two problems:
2) When mousing out, the #AreaPicPane element disappears -- the pane is gone, but the picture is still there (on top of other panes).
Problem #2 is solved: Make this.style.position = "relative"
instead of "absolute"
.
function zoomHover() {
$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'scale(1.5)';
this.style.position = "relative";this.style.zIndex = '5'});
$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'scale(1.0)';
this.style.position = "relative";this.style.zIndex = '0'});
};
For problem #1, I'm trying to change the z-index and position of the #status element, but it seems to have no effect?
Still don't know how to get the expanded picture to overlay the Status Bar...
On the plus side, I made my code more efficient! I got rid of the js script and replaced everything with just two functions, one to load at the beginning of each playing session, and one to run during each picture change.
Loads at beginning:
JS.eval ("$('body').append(\"<img id='AreaPicPane' style='display:none;' src='" + GetFileURL(game.NewArea.AreaPic) + "'/>\");")
JS.eval ("$('#AreaPicPane').insertBefore($('#statusVarsLabel')).show().width('100%').css({'position':'relative','min-height':'150px','max-height':'150px','margin-top':'20px'});")
// ZOOMHOVER -
JS.eval ("$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'scale(1.5)';this.style.zIndex = '999'});")
JS.eval ("$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'scale(1.0)';this.style.zIndex = '0'});")
Runs each picture change:
firsttime {
}
otherwise {
JS.eval ("$('#AreaPicPane').attr('src', '" + GetFileURL(game.NewArea.AreaPic) + "');")
}
JS.setCss ("#AreaPicPane", "src: '" + GetFileURL(game.NewArea.AreaPic) + "';")
Still don't know how to get the expanded picture to overlay the Status Bar...
Version 2
JS.eval ("$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'scale(1.5)';this.style['z-index'] = '999'});")
JS.eval ("$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'scale(1.0)';this.style['z-index'] = '0'});")
Ok, progress! The #AreaPicPane now overlays the Status Bar! But it does not overlay the #gridCanvas (map)! I noticed that #gridCanvas has a certain property keepalive="true"
that might be keeping it on top? I will make it false and see what happens...
Ok, maybe you can't overlay the map. I will instead make the picture NOT expand to the left...
Ok, keepalive="false"
does nothing. Tried changing the picture's left-margin
to "0" -- then the zoomhover doesn't even work.
Tried changing the picture's left-margin to "0" -- then the zoomhover doesn't even work.
Open your HTML Tools while playing the game and adjust the CSS that way. Then, you can see your changes take place immediately. You can remember (or make a note of) what settings work, then add them to your code.
More garbage code:
JS.eval ("$('#AreaPicPane').bind('mouseover', function(){this.style.transform = {'translate(100px, 0px)';'scale(1.5)'};this.style['zIndex'] = '999'});")
Do it this way:
JS.eval ("$('head').append('<style>#AreaPicPane:hover{ transform: translate(100px, 0px);scale(1.5);z-index:999;}</style>');")
I think it's easier on Quest to just add the :hover
CSS to the head element this way, rather than binding a mouseover
and a mouseout
. (Of course, it may be just as efficient either way, for all I know.)
I only posted the mouse event methods for completion's sake.
And clean up that language! Spit-spot!!!
(Sorry. I've been watching Mary Poppins. I actually curse more than Yosemite Sam, Popeye, and Donald Duck combined! I don't really give a shit if you say "damn".)
Ok, goshdarnnit, now I know why the AreaPicPane was overlaying the Status Bar -- because I set the z-index of the Status Bar to 0.
Hmm, your last code didn't do anything (ZoomHover doesn't come on anymore). Good thing you people cannot hear what I'm saying here at home!
JS.eval ("$('head').append('<style>#AreaPicPane:hover{transform: translate(100px, 0px);scale(1.5);z-index:999;}</style>');")
Got rid of an errant space, but still doesn't work.
This seems to work! Dagnabbit!
JS.eval ("$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'matrix(1.5, 0, 0, 1.5, 100, 0)';this.style['zIndex'] = '999'});")
JS.eval ("$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'matrix(1.0, 0, 0, 1.0, 0, 0)';this.style['zIndex'] = '0'});")
I don't know why I can't get your CSS code to work, so I'm just going to use my matrix code. For some reason, setting the z-index of the #status element to 0 (but not 1 or higher) allows #AreaPicPane to overlap it, even if #AreaPicPane is already set to 999.
Final code (works on game reload) -- this function only needs to be run once at the beginning of each playing session (new game or reload):
// The line directly below displays the "#AreaPicPane" and the area's proper pic.
JS.eval ("$('body').append(\"<img id='AreaPicPane' style='display:none;' src='" + GetFileURL(game.NewArea.AreaPic) + "'/>\");")
JS.eval ("$('#AreaPicPane').insertBefore($('#statusVarsLabel')).show().width('100%').css({'position':'relative','min-height':'150px','max-height':'150px','margin-top':'20px'});")
// ZOOMHOVER -
JS.eval ("$('#AreaPicPane').bind('mouseover', function(){this.style.transform = 'matrix(1.5, 0, 0, 1.5, 65, 5)';this.style['z-index'] = '999'});")
JS.eval ("$('#AreaPicPane').bind('mouseout', function(){this.style.transform = 'matrix(1.0, 0, 0, 1.0, 0, 0)';this.style['z-index'] = '0'});")
Run this function each time picture changes:
firsttime {
}
otherwise {
// Following the initial display, the line directly below changes the area pic thereafter.
JS.eval ("$('#AreaPicPane').attr('src', '" + GetFileURL(game.NewArea.AreaPic) + "');")
}
// The line directly below (re)displays the area pic.
JS.setCss ("#AreaPicPane", "src: '" + GetFileURL(game.NewArea.AreaPic) + "';")
And make sure this is in the Init UI tab so that #AreaPicPane will overlap the Status Bar:
JS.eval ("$('#status').css({'position': 'fixed', 'z-index': '0'});")
Thanks KV for all of your beautiful code!
I changed all my zIndex
back to z-index
. It only seems to matter in the #status element anyways.
What is all that matrix stuff? You're in it right now, as we speak!
You know what you call someone who shows up after all the work is done?
HA! I thought you were going to say "the boss".
Totally off-topic:
I couldn't test anything for the past hour because I'm running Linux.
Ah... It feels so nice to be running Linux...
I just can't use Quest or Trizbort.
What about the online version, you ask?
Well... I'd rather just do without.
The online version of Quest is just a big tease. She's all like, "ooh, yeah! I think I'm ready to do this now!" Then, as soon as she lets you get past first base, she just freezes up.
The desktop version... She's more mature; you know what I'm sayin'? (Wink, wink.)