Jump to content
  • 0

Coding Depending on Computer vs. Tablet vs. Mobile View



Hi guys,

Is it possible to create code in our Datapages in Headers/Footers that only activates if the view is on a Computer vs. Tablet vs. Mobile? I'd like to add a scroll bar and I have the code for it, but I don't want it to activate in the Mobile view.

Many thanks!

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0



So the code involves, adding on the Results configuration page:

1) Header:



{  overflow: auto; overflow-y: hidden; }

#doublescroll p

{  margin: 0; 

  padding: 1em; 

  white-space: nowrap; }


<div id="doublescroll">

2) Footer:


<script type="text/javascript">

function DoubleScroll(element) {

    var scrollbar = document.createElement('div');


    scrollbar.style.overflow = 'auto';

    scrollbar.style.overflowY = 'hidden';

    scrollbar.firstChild.style.width = element.scrollWidth+'px';

    scrollbar.firstChild.style.paddingTop = '1px';


    scrollbar.onscroll = function() {

    element.scrollLeft = scrollbar.scrollLeft;    };

    element.onscroll = function() {

    scrollbar.scrollLeft = element.scrollLeft;    };

    element.parentNode.insertBefore(scrollbar, element);}

document.addEventListener('DataPageReady', DoubleScroll(document.getElementById('doublescroll')));



Now this works perfectly for the computer and tablet view. However, it's required that I turn off the Enable Responsive button, which means my program can't adjust for mobile phones anymore.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...