Adding custom <div> item to a page

1

Below is from a client’s IT department that I am trying to build a tutorial system for. They are now needing an EXIT button that will show ONLY when it is in a secure browser. I’ve tried to implement the code as they’ve requested but I’m not sure HOW to apply this to the one page of the site where it needs to live… I come from a animation and video editing background, so all this stuff is new to me sorry for the stupid ‘newbie’ nature of my questions…

From the Client:
They may have been confused by our example of using an < a> tag, since they are using a CSS class that makes the element resemble a button and not a hyperlink. However, if they change their code to use the correct ids and add a child element like a tag, they can still use their CSS class that resembles a button and our code will function correctly:

< div id=“secure-browser-exit”>
< span href="#" id=“secure-browser-exit-link”>Exit
< /div>

Thanks for your insight.

2

To do this, you would create a rectangle, and then select Edit > Edit Inner HTML, and then paste your HTML within the area. You may want to remove the color and border from this rectangle.

Next, run this JavaScript on ‘Scene Load’ for the scene where you have this element.

if (location.protocol === 'https:') {
    // page is secure, so keep things as they are.
    
} else {
   // remove the div
   document.getElementById("secure-browser-exit").innerHTML = ' ';
}

If you have any CSS you’d like to use, you can place that within style tags in the head of the document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

3

Wow, thank you SO much. I’ll try this tonight and see if it solves my issue. I can’t tell you how much I appreciate your responsiveness. (Also on my previous question about detecting video ends to trigger an action…) I’m REALLY enjoying working with HYPE. I come from a background of AfterEffects and Cinema 4D, and Flame, and so this has been an awesome way for me to bridge the gap of delivering what my clients need and not having my head pop-off with complication or killing me with my lack of CSS and HTML5 knowledge. Kudos for a very versatile program that is a FANTASTIC value!

1 Like