retrieve page height for variable? - Responsive course

tallpress5887
tallpress5887 Community Member Posts: 4
Hi there,

I'm looking to create a top level alert (inherited onto every page) which covers up the screen on specific orientations and asks the user to rotate their device.

My problem is that, because it's a responsive course, page height can vary based on the volume of content. This means the shape currently being used for the alert, won't always cover up the whole screen as it's set to the minimum height of tablet/mobile device.

What i'd like to achieve is having the shape re-size based on the current page height. The reasoning is so i don't have to add the alert to every single page, using a different height each time.

Is there a way to capture the current page height in a variable?

Or maybe there's another way of approaching the issue someone else has come up with?

Thanks in advance

Comments

  • smiller7502
    smiller7502 Community Member Posts: 181
    I've been working on something similar. Instead of covering the screen, I'm redirecting to a page that says "Please rotate your device." That bit works great. Here's what I did:
    1. Select the course title or the AU in the title explorer. (This makes the script available on every page, so if a learner leaves the course and returns in the middle, the script will still fire.)
    2. Insert tab > HTML Extension.
    3. Type Header Scripting.
    4. Paste in the script below.
    5. Add a page that says "Please rotate your device." This page could of course be prettied up with a gif or what have you.
    6. Add an action to the AU: On Show | GoTo | The rotate prompt page created in step 5.
    I was hoping that the built-in "On Device Rotation" action would let me redirect from there to the last visited page when the device is rotated. I added two such actions on the rotate prompt page, one to display a message and one to go to the last visited page. Sadly, though, it doesn't work. On my Android device, I never even see the message. On my colleague's iPhone, he sees the message but the GoTo action doesn't work. I could easily put a button on the rotate prompt page to go back to the last visited page, but that's clunkier than I like.

    I know this isn't exactly what you asked for, but it seems simpler than what you're trying to do. I'll post again if I figure out the return leg of this journey. (Happy for any suggestions anyone might have ...)
    var w = window.innerWidth;
    var h = window.innerHeight;
    if (h > w) {
    VarDeviceOrientation.set("Portrait");
    }
    else {
    VarDeviceOrientation.set("Landscape");
    }