How to pin to the top. Tried many things. Vid attchd.

Tagged: Html, top

This topic has 8 replies, 4 voices, and was last updated 7 years ago by Philip Fong.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
2018-10-06 at 11:35 pm #7921

tcdoe
Customer

Hi,
Sorry if this is already asked question (i did search).
I need to keep the screen ‘pinned’ to the top of the browser screen.
Right now what happens is that it looks great on PC (chrome) but when moving to mobile-tablet portrait, the rendered portal stays centered, which makes a huge top margin.
I’ve attached a video to better explain.
I just want it to always be on the top, and allow scrolling down for further content. Right now it gets centered no matter what I do.
I’ve tried googling/searching and many things but none of the ‘solutions’ found online (looking at CSS, etc.) seem to have any effect. Which means I’m missing something critical.
Thanks for any help. :*(

CEO, ABĒMIS LLC
visit: abemis.com

2018-10-07 at 9:07 am #7923

Yuri Kovelenov
Staff

Hi,

Can you attach a narrowed down example so that we can take a look?

Chief 3D Verger | LinkedIn | X

2018-10-07 at 1:45 pm #7945

tcdoe
Customer

Here is a 17Mb zip file of the whole thing. I get the same behavior whether sneak peek or export. As you compress the browser window, the scene ‘centers’ right in the middle, instead of remaining pinned to top. This makes it un-viewable on an iphone or android, or tablet in portrait.
Please don’t give this away. I’ve based this on your industrial robot demo, stripping out most everything except what I want to display. I still have no idea how to achieve the nice looking overlay that you have in the demo. I guess that’s next to learn.
the pword is your first name plus 123! no caps. Thanks. This is quite urgent I hope there is an easy solution.

: note archive removed from here. email me tcd at abemis dot com for any info/files.

CEO, ABĒMIS LLC
visit: abemis.com

2018-10-07 at 10:34 pm #7950

tcdoe
Customer

Does anyone in the community/forum have an idea? Thanksinadvance.

CEO, ABĒMIS LLC
visit: abemis.com

2018-10-08 at 12:07 pm #7966
Ivan Lyubovnikov
Staff
Hi tcdoe,

The only way I can think of achieving this is to write custom code for controlling the camera viewport, because now it just works according to the camera sensor fit behavior in Blender.

I modified the js file “AB Main 03.js” (attached as archive) from your project. It’s a template file, the only thing I added into it is an “onResize” method to handle window resizing. I think it should work for you.
Attachments:
1. custom_code.zip
Co-founder and lead developer at Soft8Soft.
2018-10-08 at 4:18 pm #7971

tcdoe
Customer

Thank you very much. I kind of thought this was the case. I’ll try it out and post back.

CEO, ABĒMIS LLC
visit: abemis.com

2018-10-08 at 5:39 pm #7972

tcdoe
Customer

It works. This is really important because now the window is positioned properly for portrait and I can better control margins, etc.
Thank you super-much. T.

CEO, ABĒMIS LLC
visit: abemis.com

2018-10-09 at 1:34 pm #8027

Yuri Kovelenov
Staff

Glad we could help!

Chief 3D Verger | LinkedIn | X

2018-10-10 at 1:17 pm #8087

Philip Fong
Customer

I set the render size X=480, Y=815 which is youtube video aspect ratio and it works for both mobile and desktop.
Author

Posts