Bringing text elements to foreground to make clickable

Using JavaScript with Hype
1

I am trying to hyperlink from objects and text using scripting ( window.location.href ) which works fine in itself. Each object has its own links which work OK, but there is a problem when I reveal and hide different text elements all in the same screen space. I want a number of messages to appear in the centre of the screen, each of which should also be clickable. At present only the ‘top’ text is clickable and it seems to still be ‘in the way’ even when visibility is 0 (I have inhibited clicking on each layer when in this state). I have tried setting z-index to bring layers forward, but may be calling this incorrectly as it does not seem to be working.

If anyone has a moment to take a look at this and advise I would be grateful. link text tst.hype.zip (21.4 KB)

2

You know how it is - you write something down and then find a solution! I think I have got there with the following syntax for z-index:
hypeDocument.getElementById('elementId').parentNode.style.zIndex = 9999;

An updated demo: link text tstv2.hype.zip (21.5 KB)

3

look at the getter and setter functions in the API :wink:

hypeDocument.getElementProperty(element, propertyName);
hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName);

using the above you can set and get the z-index property.

example:

hypeDocument.getElementProperty(element, "z-index");
hypeDocument.setElementProperty(element, "z-index", 9999, 1.0, "easeinout");

Note using element here with a mouse click action will enable you to change the z-index on whatever element you click. You can put in an id of an element instead if you wish.

3 Likes
4

I have already tried a number of alternative for this, but I just cant find a way to change the Z-Index by selecting the ID of each symbol instance:

this.parentNode.style.zIndex = 500;
this.id.parentNode.style.zIndex = 500;
hypeDocument.setElementProperty(this, 'z-index', 500);
hypeDocument.setElementProperty(this.id, 'z-index', 500);
hypeDocument.getElementProperty(element.id, 'z-index', 500);

hypeDocument.getSymbolInstanceById(this).parentNode.style.zIndex = 500;
hypeDocument.getSymbolInstanceById(this).getElementProperty(element.id, 'z-index', 500);

I also get this error on the console when using my attempts to use ID instead of element
TypeError: undefined is not an object (evaluating 'H[L[a.id]][c.HYP_r]')

================

Never mind: I fixed it using the hype file above, I should use hypeDocument.getElementById instead of hypeDocument.getSymbolInstanceById
hypeDocument.getElementById(dynammicbuttonClean).parentNode.style.zIndex = zON;

5

This is a specific error referring to the fact that "this" and also "get symbol instance by id" does not return an element the latter returns an "instance" so it cannot be used in the context of getting/setting an elements property.

As of the latest version (I do find it amusing when a 4 year old post gets brought back :slight_smile: ) you can use the API's symbolInstance.element() method to get the actual element of a symbol instance.

const mySymbol = hypeDocument.getSymbolInstanceById('mySymbol')
hypeDocument.setElementProperty(mySymbol.element(), 'z-index', 100, 1.0, 'easeinout')

As stated in original post though you can also use "element" if the action is being fired by the symbol element within your document.

So:

hypeDocument.setElementProperty(element, 'z-index', 100, 1.0, 'easeinout')

would also work as long as the symbol is being clicked/mouse downed/mouseovered, etc

Hope this clarifies things further for you :wink:

2 Likes