Disabling button/symbol when mobile

Mobile
1

Hi. Any idea how to disable button when user using mobile browser (in my case it is fullscreen button/symbol)?

2

If you only have one scene:

Create a media query in your Head-HTML with a class in it called .hideOnMobil and then apply the class to your button. Adjust the 600px to the breakpoint you need and fits your demands!

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px) {
    .hideOnMobil {
        display:none;
    }
}

You can also use one scene with two layouts (with Hype Pro):

https://tumult.com/hype/documentation/3.0/#responsive-layouts

3

Thanks but there are many scenes in my project. Breakpoints overlapping on different devices so I use window Width/High ratio to switch between layouts instead breakpoints. I’d like to disable a Fullscreen Button when using iPhone/iPad in landscape mode.

4

Well, if you have code that switches based on ratio then there must be a function overriding regular Hype-Switching based on only horizontal width. The solution is actually simple… edit the function that does the switching for you and enter the code to disable the button in there.

5

I use a solution proposed by h_classen:
https://forums.tumult.com/t/width-high-ratio-based-document-layouts/12651/2

There is one landscape layout and one portrait layout in the document that works on any device. I just need to detect moblie browser and make invisible/remove fullscreen button no matter which layout is used. The layout has nothing to do with fullscreen button in this case.

6

If the button is not part of the layout (because then it would be easy to remove) you can run a script on layout loading that gets the button by ID or Class and sets the button to elm.style.display = “none”.
Can you code a bit or not?

7

It is a shame but i have no clue about coding.

8

I am not near a „real“ computer…so I can only give advise. So it is not possible to put the fullscreen button into hype in only one of the layouts and delete it from the other? That would be easy.

If the button is not part of your of hype you need to know a bit of coding as you need to find its ID or Class. Google „using the webinspector“ in that case and at least you can learn how to find the ID of an object on the page on the weekend.

9

Yes I know that using two layouts to on/off the fullscreen button would be easy but I can’t use it for this project. I have to find a way to detect mobile browser and remove the button. For now it is not urgent as I’m working on prototype but it would look better. Thanks anyway.

10

I understand it is a matter of being on a mobil device or not no matter witch layout is shown so look at the regular expression here https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

On Monday I am back in town if nobody else chips in until then.

11

Here you go: hideOnMobileAndTablet.hype.zip (33,2 KB)

Should do the trick.

2 Likes
12

Magic works. Thanks so much.