Internal link makes scene move to top


(mobileme4) #1

I have a scene with internal links that start a new timeline, which simply opacifies some overlay arrows and labels over an existing image.

On iPhone or iPad, the scene jumps to the top when the link is clicked. Is there a way to stop this action and hold the scene in place?

I have also notice that the scene is too big for the iPhone or iPad window if the tabs are showing.

Or do I have to make the scene smaller so it just fills the iPhone/iPad window (so it cannot move)? And if I do so, will the tabs at the top of Safari be accounted for by the new size.

Thanks!


#2

If you’re linking to another scene, the scroll position shouldn’t change unless the scene you’re changing to has a different responsive layout configuration.

If you link to another .html page, the scroll position will be reset. If you’re seeing scene changes change scrolling, can you share a document?

Unless you are making a web app (or embedding within an app), I wouldn’t worry about the height of your document. The top tabs and URL bar shouldn’t matter in your design. If your content is larger than the available screen area with tabs on (when first loading the page), the user can scroll down. The width of the top tabs will change when scrolling down so it’s tricky to plan on that height.


(mobileme4) #3

Thank you, Daniel.

Actually, you didn’t mention the situation I currently have. There is no change of scene, or link to another .html page. I am on the same scene, with a new timeline that opacifies arrows and labels overlying an image. Every time I tap the link to start this timeline, the webpage scrolls very quickly to the top. Is there a way to eliminate this action?

Also, my second question regards sizes of documents on an iPad or iPhone. If I use your built-in layouts, does that include the tabs? If not, the document must be scrolled just a bit to make up for this extra space at the top. I am trying to create my new layouts with elements close to the edge, which is why I ask this question.

Thanks!


(Andrew) #4

Can you share the doc ?


#5

Is it a ‘mouse click action’ that runs a timeline? Can you share an example document? I’m not sure why this would be happening.

The sizes defined in Responsive Layouts depend on the size that the browser reports back. You can get the size being reported back by running this script:

alert( 'Dimensions: ' + screen.width + ' px wide & ' + screen.height + ' px tall');

The iPhone 6 reports: 375x667, even if the window has been scrolled down and the top tabs have been hidden.

Screen size measurer.zip (11.6 KB)


(mobileme4) #6

Thanks, MrAddy and Daniel-

Currently, the doc was set up in the Layout panel, with a standard iPad landscape size.

It opens and operates fine on my iPad, but it is significantly larger than the available window. There’s a title bar and there are tabs. When I scroll up with my fingers, the tabs and a part of the title bar disappear, but the doc is still too big. Then, when I tap an internal link, the doc scrolls down, and the tabs and all of the title bar reappear.

I uploaded the document.

Daniel-I downloaded the Screen size measurer, and do not know how to use it. Am I supposed to open it on my iPad, for example? Could you please elaborate?

Arterial_TOS.zip (823.0 KB)


(mobileme4) #7

Follow-Up:

I figured out how to use the screen size measurer. I get measurements of 768 px wide & 1024 px tall in landscape mode on my iPad (note they are reversed from true width and height).

I double-checked the document I created, and it is 1024 x 768 px. Therefore, I believe my document is the correct size, but it is behaving badly for reasons I haven’t yet figured out.

Thanks for any help.


(mobileme4) #8

Further information:

In Hype reflect, the image exactly fills the iPad screen if the titlebar is off. If the titlebar is on, and if I scroll the document up a bit, I have the same issue with the document jumping when I tap on an internal link.

Thanks


(Andrew) #9

Hiya, I cannot replicate the issue with the exported files. I would need the Hype document to test on Reflect.


(Hans-Gerd Claßen) #10

Hallo Andrew,

in this case a ‘.plist’-file is included within resources.
so: hype ->help -> ‘restore document from export’ should do this job

:smile:
nice day!


(Andrew) #11

I did not know you could do that :o


(mobileme4) #12

Has anybody been able to replicate my results?

Thanks


#13

Yes you can open it in Hype and load it in any browser and it will return the screen size detected by running screen.width and screen.height.

Yes it does look like you will need to decrease the height of you document if you don’t want to have any scrolling. ( I think reducing your document by 30 pixels should keep your document within the limit )


(mobileme4) #14

Thanks, Daniel. I did figure out how to use the screen size measurer, although it gave me the dimensions I expected.

Can you help me understand the issue? It seems like Hype Reflect won’t be of use, but perhaps I am doing something wrong. Is there a way to automatically correct for the tabs and title bar in iOS Safari?

Thanks


(mobileme4) #15

Daniel-

I could really use some help with this.

First, its way, way more than 30 pixels, and I am still spending time trying to resize pixel by pixel to make it work. That is just not conducive to using the software, I’m afraid. And I’m making the document so small that I have to lose elements in it. That will mean a major replacing of the design.

Second, I can’t believe this is what was intended as its function. It doesn’t correlate with Hype Reflect at all.

Third, without accounting for the tabs and title bar, it looks pretty poor. Everything jumps whenever any part of the interface is touched.

I’m sure I must be missing something, and I apologize for being dense. Has anybody else had this trouble when trying to create a document for the current iPad and iOS?

Thank you in advance


(mobileme4) #16

Sorry, but one more item that I hope will be helpful, both for me and for others working with iPad documents:

As I make the document smaller, I am getting it to fit in the window of iOS safari. I can scroll up to make the tabs disappear and the title bar minimize. However, when I tap on an internal link (in other words, a link that uses the same scene, but starts a timeline that opacifies a label and arrows), the tabs reappear and the title bar enlarges again.

Is this something that can be controlled with Javascript in the internal link? Is there something I can put into the timeline to avoid this behavior?

Thank you again


(mobileme4) #17

I am continuing with the same issues.

No matter the size of the document:

iPad Safari

  1. If I tap on a button or other element of the Hype document, the document doesn’t scroll, the tabs don’t appear, the title bar doesn’t expand.

  2. If I tap on an internal link that JUST starts a timeline, the document scrolls to the top AND the tabs appear AND the title bar expands.

This looks just terrible. Its very jarring to view it.

I am using an internal link in the format:

subclavian artery

Surely there is something related to this link that is making these events happen, because the chain of events only occurs when I tap on one of these links.

Surely there must be somebody out there with experience uploading a document to the web, and viewing it on an iPad.


#18

Hi @mobileme4 sorry for the delay.

So you’re currently using this to trigger a timeline:

<a href="#" onclick="window.myhypedocument.startTimelineNamed('Subclavian Artery');">subclavian artery2</a>

If you use this format, the href won’t link to the top of the page:

<a href="javascript:void;" onclick="window.myhypedocument.startTimelineNamed('Subclavian Artery');">subclavian artery2</a>