geting handle (class or id ) on a webobject in the player.

Jan 16, 2017

Luke ODonnell
By Luke ODonnell

Hi all,

I have been mucking about with web objects and the ability to use them as "plugins" or "widgets". The Javascript here works fine in a browser on its own. But once in Storyline it fails due to the this.scrollY etc not being accessible. I know I can get a handle to the player using - parent.document.player and I can set and get variables. But if I want to get inside a web object in the player I can't. Is there a way to get to variables and properties inside the web object inside the player?

The code I have is checking the scroll property of the document. It works fine when run outside the player but fails when placed inside the storyline document and published.  Disregard the count function that just updates a variable in the player. It's working fine.

<!DOCTYPE html>
<head>
<script>
function count()
{
Atr_Story = parent.document;
var myVar = setInterval(myTimer, 10);
var onoff = Atr_Story.player.GetVar('onoff');
var num = Atr_Story.player.GetVar('checker');
function myTimer() {
if (onoff == 0){
num = num + 1
if (num == 20) {
num = 0
onoff = Atr_Story.player.GetVar('onoff');
}}
Atr_Story.player.SetVar('checker',num);
}
}
window.addEventListener("scroll", function(event) {

var top = this.scrollY,
left = this.scrollX;

var horizontalScroll = document.querySelector(".horizontalScroll"),
verticalScroll = document.querySelector(".verticalScroll");

horizontalScroll.innerHTML = "Scroll X: " + left + "px";
verticalScroll.innerHTML = "Scroll Y: " + top + "px";
Atr_Story.player.SetVar('scroll01',top);
}, false);
</script>
<style>
body {
overflow: -moz-scrollbars-vertical;
overflow-y: hidden;
overflow-x: auto;
}
*{box-sizing: border-box}
:root{height: 100vh;width: 105vw}
.wrapper{
position: fixed;
top:20px;
left:0px;
width:320px;
background: black;
color: green;
height: 64px;
}

.horizontalScroll{color: orange}
</style>


</head>
<html>
<body onload = "count()">

 

 

<div class=wrapper>
<div class=horizontalScroll>Scroll (x,y) to </div>
<div class=verticalScroll>see me in action</div>
</div>

<div style="background-image: url(image/image.png); height:458px; width:2840px; border: 0px solid black;"> </div>

</body>
</html>

Any ideas?

4 Replies

This discussion is closed. You can start a new discussion or contact Articulate Support.