JUST FOR FUN -- Expanding a Picture with ZoomHover [success!]

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?


function zoomHover() {
    $('head').append('<style>#AreaPicPane:hover{ transform: scale(1.5);}</style>');
}

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)';})
}

No matter which way you do it, the CSS getting changed correctly is all that matters in the end, and all Javascript is doing is modifying either the CSS, the HTML's content, or both.


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:

  1. When mousing over, the Status Bar is covering the enlarged picture (even if z-index is put to 1000).

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) + "';")

Its position is fixed by default. And the z-index is set to 100. What are you trying to change?

Try something like this:

JS.eval("$('div#status').css({'z-index': '999', 'top': '50%'});")

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...


Oh, I don't know how I did, but I completely forgot about that map.

It defeats me every time I try mess with its display settings.


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.


I think keepalive is just for the online player, to keep your session from timing out.


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'});")

It's z-index, not zIndex.


Damn, now the z-index (or zIndex) is not working anymore.


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.


Hrmm...

It works for me in the little example game I made to test this...

Note that I'm pretty sure it completely resets all the settings for #AreaPicPane:hover every time you modify the settings of #AreaPicPane:hover.


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'});")

Okay, well maybe you did need zIndex.

What is that matrix() stuff?

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

Oh.

(Yep. I talk to myself.)


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!


You do all the work. I just come in at the end and change a little syntax.


You know what you call someone who shows up after all the work is done?

[ A BLISTER! ]


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".


What is all that matrix stuff? You're in it right now, as we speak!

No way! I didn't take EITHER pill! So, NAH!


I thought you were going to say "the boss".

It has been rumored that Bruce Springsteen behaves this way.

#BadBadJoke


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.)


I only use the desktop version myself. I guess I like'm mature : )


Piggybacking is what it’s all about! Coolio.


Log in to post a reply.

Support

Forums