Forum Discussion

ahmadhabhab's avatar
ahmadhabhab
Community Member
5 years ago

Removing objects if I watch my project on a different device

Hey Guys, I am working on an E-Learning project on Storyline 360, there is an object that i want  removed or hidden if i switched device, for example i want a specific icon to be displayed only in...
storyline 360
RussellKillips-'s avatar
RussellKillips-
Community Member
5 years ago

Hello ahmad,

Storyline automatically adds in identifiers (classes) depending on the device and orientation.

I wrote some javascript to check for these identifiers (classes).

The javascript updates true/false variables: isDesktop, isPhone, isTablet, isLandscape, isPortrait

Depending on these variables, you can add a trigger to change the state of 'an icon' to hidden or normal.

Here is the javascript that I use:

var player = GetPlayer();

player.SetVar('isDesktop', document.body.classList.contains('view-desktop'));

player.SetVar('isPhone', document.body.classList.contains('view-phone'));

player.SetVar('isTablet', document.body.classList.contains('view-tablet'));

player.SetVar('isLandscape', document.body.classList.contains('is-landscape'));

player.SetVar('isPortrait', document.body.classList.contains('is-portrait'));

  • ahmadhabhab's avatar
    ahmadhabhab
    Community Member
    5 years ago

    Hello Russell,

    Thanks for your reply

    so now i just post your java script on my project 

    and i'll create a variable x (True/False) default true

    then ill adjust variable x to be true,  when the timeline starts ( do i have to put a condition ?)

    finally i change state an icon to be hidden if this variable is false ( for example, the false scenario is that the user is using a mobile or ipad )

    Thanks again for your help...

    Regards,