That button don't remain in his position

Elements
1

Hello to everyone,
I’m thinking to convert my web site in a total HYPE presentation (I like the multimedia possibilities that Hype offer to me). Why this button don’t remain in his position?

10
Schermata 2018-10-05 alle 15.37.10.png989×727 122 KB
16
Schermata 2018-10-05 alle 15.37.16.png1153×879 120 KB

2

Looks like a scaling issue to me. I would adjust the flexible layout settings in the metrics tab or alternativly match your document size to the size of the output and see if that corrects the problem.

1 Like
3

It looks like you are using Firefox. It has different line height calculations than Safari and Chrome. You can get a consistent line height by:

  1. Select your text element
  2. Go to the Typography Inspector (command-5)
  3. Click up and then down on the line height stepper control (so it changes but then goes back to the same value)

The line height starts out by showing a calculated value, but by changing it will be explicitly set and then Firefox will use this value.

Note that text rendering really isn’t consistent across browsers/devices, so it might not appear in the same spot for other items, and there’s not too much that can be done when trying to align absolutely positioned items to large flowing rendered blocks of text. Instead you may want to consider editing the Inner HTML to get the desired effect.

1 Like
4

@MultimediaMan

An example of Jonathan's suggestion:

<span style="background-color:yellow">Walt Disney</span> the rest of your text.

1 Like
5

@JimScott the yellow bar is a button that start a new timeline where I show a little baloon with info inside. I have not idea how I can run a script to show a baloon on that text if I don’t put over a transparent button… :frowning:

6

Hi Giovanni!

I think this example will point You in the right direction: textTrigger.hype.zip (14.7 KB)

We are still going to use the “span” tag approach as in my previous post - but we are adding two more things to the “span” tag: a change to the cursor style when the cursor is over the “span” and an ID for the “span”.

<span style="background-color:yellow; cursor:pointer" id="textTrigger01">Walt Disney</span> the rest of your text.

We have also added a timeline (“Rotate”) that will rotate a square, and at which time text will display inside the square, then disappear after the square stops rotating.

A function has been created (“activateTimeline”) that will be called by the “On Scene Load” event:

function activateTimeline

hypeDocument.getElementById("textTrigger01").addEventListener("click", runTimeline);
	
function runTimeline() { 
     hypeDocument.startTimelineNamed('Rotate', hypeDocument.kDirectionForward);
}

So, clicking “Walt Disney” triggers the timeline “Rotate” to run.

2 Likes
7

I feel that I still am not able follow these advanced practices very well (for me they are currently advanced practices). So, let’s see if I understand anything…

You inserted a trigger on the text “walt disney” working on the HTML code of the text box (I discovered it right now!). This way you labeled the word “Walt Disney” with an ID. Then you created a piece of script where you tell him that if the event happens click on that piece of text, the script launches the timeline rotate…

  1. I don’t know how to use Javascript so I’ll definitely study it but when you create the function and call up the ID, the script “listen” the ID even if it is at scene 20?

  2. Add a “.addEventListener(“click”, runTimeline)”, ok…all these pieces of code you know with memory or Hype gives you the possibility to have some suggestions and then insert them?

Thank you for your help and thank you also for your patience. Sorry for my english…
Thanks also to jonathan and Chriswhardy

2 Likes
8

Hi Giovanni!

So, let’s see if I understand anything…

Yes, You are understanding how the set-up works. One important thing is You can use an ID only once in a Hype project - so You could not use "textTrigger01" as an ID for another "span" - it would have to be something like "textTrigger02" or whatever name You wanted (no spaces in the name).

Yes. A Hype project is really one big page that, using Scenes, can give the appearance of many pages.

I know almost no JavaScript from memory - I usually have to look things up.

Hype did not have this particular code for me to reference so I looked it up here - a great source to learn about JavaScript.

BUT under many circumstances Hype does provide - through its Application Programming Interface (API) - help in creating JavaScript code - read more about this feature here in Hype's on-line documentation.

9

You’ve definitely become a friend of mine!
Thank you for your help!

1 Like