Need Help - Centering an Element On Click

I have a window (sample) that opens on click using show and hide examples found in this forum, but I added a drag option. I would like to click the square icon on the right hand title bar and have the window return to it’s centered state… as it was on load.

I have tried several javascript functions and style.position = “initial”, but nothing seems to work.

Any advise or help is much appreciated. (27.8 KB)

Hi Steven!

I gave your problem a go, but I ran into something that I can’t figure out why it’s happening; while the issue is based on your problem it is also separate - so I’ve placed it in another topic: “Element Drag > Location Reset Issues”.


Hi Steven!

Did your issue get resolved?

In case You haven’t followed the linked thread above (placed in the “Head HTML”)…

function reSetSymbol(hypeDocument, element, event) {
    var reSet = hypeDocument.getElementById('window');
    hypeDocument.setElementProperty(reSet, 'left', 100);
    hypeDocument.setElementProperty(reSet, 'top', 100);

It works for me in using your example Hype doc.

OK, what am I missing? (27.9 KB)

I placed into JavaScripts, Head of main page and Head of inline HTML… no go.

Hi Steven!

Sorry was reading my old notes - easier just to look at this: (30.0 KB)

Look for the “resetWindow” function triggered by the"Box" element.

OK, I now understand why it’s not working for me. I can only assume you do not use Safari. I tried your file and still did not work… so I installed Firefox and tried again. Functions perfectly in Firefox, unfortunately I only program for Safari. I have a lot of friends and family that I have converted to Mac and they only use Safari, quite honestly I don’t believe they even know how to install anything that is not in the Apple App Store. (1.3 MB)

Hi Steven,

Unfortunately, I can easily break things with certain repeated movements - or one particular movement - whether in FireFox, Safari or Chrome.

Repeated drags (4+) and “reset” clicks; or moving the symbol offstage left leads to squirrely behavior.

I have stripped out the innerHTML coding of the symbol & the only function is an Alert(“Clicked”); when I click on the “reset” box… barebones and still we have an enigma.

The video below shows what I am speaking of - literally. Don’t know what’s going on. (30.0 KB)

It is a problem in “scaling”. I believe it’s a math processing issue when the document is scaled through the “viewport” container.

This one works perfectly, but it is unscaled. (231.3 KB)

Here is an example of what happens “Scaled”. You will notice the Hype Window opens messed up and improperly sized. Once you resize the browser window… even by 1 pixel something passes numbers to the Hype Document and fixes everything. It’s my belief there are some missing figures being parsed at the time of the file being loaded. Primarily the Height and Width of the current Viewport.

Solved using Scenes instead of Java… I still incorporated the script you provided for improved UI and interaction. Thank you so much Jim! (2.8 MB)

Glad You found a solution!