Coding Depending on Computer vs. Tablet vs. Mobile View

[Garni]

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!

[kpcollier]

Can you share your code? It may make it easier for us.

Read up on Media Queries, you can set a class for different sized viewports. This will let you use CSS to disable/hide the scrollbar on specific screen sizes.

[Garni]

@kpcollier

 

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

1) Header:

<style>

#doublescroll

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

#doublescroll p

{  margin: 0; 

  padding: 1em; 

  white-space: nowrap; }

</style>

<div id="doublescroll">

2) Footer:

</div>

<script type="text/javascript">

function DoubleScroll(element) {

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

    scrollbar.appendChild(document.createElement('div'));

    scrollbar.style.overflow = 'auto';

    scrollbar.style.overflowY = 'hidden';

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

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

    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));

    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')));

</script>

 

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.