Action - Go to URL HTML commands?

1

Hi!
I have a question regarding a project. I want to put a hyperlink on a symbol that links to an anchor on the page. Cause my main hype graphic is inside an iframe i need to add a target="_top" command.

My link would be something like this:

<a href=“http://my_website.com/#anchor-id_1“ target=”_top">anchor-id_1< /a>

Can I use the Acton > Go to URL field for that or is this the wrong way cause it only accepts the blank URL not HTML? I’m struggling how to assign that Link.

Can someone put me in the right direction?

Thank you!

2

Attach a method to the onClick of the symbol and refer to the page using JavaScript?

self.frames['idofyouriframe'].location.href = 'http://my_website.com/#anchor-id_1';

or

top.location.href = 'http://my_website.com/#anchor-id_1';

Example: onclick.hype.zip (9.0 KB)

3

Maybe you can use an "anchor" in Hype. Give an element an "ID' (I used 'bottom')
and use an Action with the ID as the url, like this '#bottom' here's a simple example...

anchor.hype.zip (14.8 KB)

1 Like
4

Hi Greg! Thanx a lot. Checked your demo. Interesting! The problem is I need to jump out of the animation to an anchor on the site that the animation is embedded in (iframe).

A bit hard for me to explain cause I’m not a native speaker. Sry for that :wink:

Greetings,
Stefan

5

Hi Vic,
I’m not so experienced in using java script but I will check your example to learn something new. Thanx a lot!
Greetings,
Stefan

6

Sure no problem. Let me know if things don’t work out. I’m happy to help.

7

Hi Vic,
checked your example. I understand the process and the java code is not complicated as it seems. Now I need a concept to adapt it to my animation. I have 8 single graphics / symbols in my animation. I need to apply a different action/link to each one of them.
Can I use one script for all to put the different codes in it or do I have to use a single script for each single graphic?

I know it sounds like a silly question. ;). Maybe you can update your demo project with 2 graphics.

Appreciate it!
Stefan

8

Hi Stefan,

All learning is done in small steps. Good to see that you can deal with a bit of coding.

There actually is a way to change the script so it can work on different buttons. A way would be to write an if-else statement (https://www.w3schools.com/js/js_if_else.asp) that checks a specific parameter of the element the script is attached to (i.e. the name or ID) and based on that parameter acts differently (in your case: open a different URL).

In basics this would go like this:

	var buttonID = element.getAttribute('id');

if(buttonID == "buttonOne"){
	// do stuff here for button one
	top.location.href = 'http://my_website.com/#anchor-id_1';
} else if (buttonID == "buttonTwo"){
	// do stuff here for button two
	top.location.href = 'http://my_website.com/#anchor-id_2';
}

Download with example: onclick_extended.hype.zip (12.7 KB)

Make note that the name of an object in the TimeLine is NOT the ID. ID’s (and classes) are allocated in the Identity-tab in the inspector.

If you want to go real fancy, you can change the if-else statement to an case-switch statement (https://www.w3schools.com/js/js_switch.asp). These provide a bit more functionality and are a bit more manageable if you have a lot of buttons.

If this is all too much, you can easily create a single onClickScript per button. There is no shame in that.

Using these types of setups is rather dynamic. It takes less effort to create multiple buttons, however, you need to keep track of your workflow and allocation of ID’s. You can easily mess this up (for instance if you change ID’s without taking into account the effect of this change to your codebase).

Good luck!

1 Like