Explore the community Forums Lectora Lectora Questions & Answers retrieve page height for variable? – Responsive course

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #381326 Score: 0
    Profile photo of Tom Allpress
    Tom Allpress
    Member
    friend finder
    beginner
    intermediate
    curious george
    @tallpress5887

    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

    #385937 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    LUC17 Attendee
    38 pts
    @smiller7502

    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");
    }
    
    
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.