-1

I am trying to change a data attribute of a div element base on the users screen resolution, i am using the impress.js library and i want to set the div overview that has a data attribute of scale, the value that i want to toggle is 2.0 for desktop and 2.5 for laptop.

So far below is my code.

<div id="overview" class="step" data-x="-700" data-y="-500" data-scale="2">
    </div>

My jquery code is.

$(window).resize(function() {

   if(window.innerWidth == 1680){

   $('#overview').data('scale', 2);

   }else{

     $('#overview').data('scale', 2.5);

   }

})

I am able to get the value of the innerWidth but cannot get to change the value of the data attribute, Any suggestion would be great!

Improve this question
6
  • You didn't say anything about problem... Commented Nov 8, 2017 at 6:14
  • 1
    If you want to change attribute use .attr() i.e. $('#overview').attr('data-scale', 2.5); Commented Nov 8, 2017 at 6:14
  • window.innerWidth == 1680 need to be window.innerWidth <= 1680. because exactly match will not possible all time. And it need to be:- $('#overview').attr('data-scale', 2.5); or $('#overview').attr('data-scale', 2); Commented Nov 8, 2017 at 6:16
  • use if($(window).width() >= 1680){} instead your condition Commented Nov 8, 2017 at 6:20
  • Sorry but you cannot change the value of the scale while impress is at work, impress.js has its own way of resetting the view port when the screen change, what you can to is disable the auto scaling by putting data-min-scale="1" data-max-scale="1" on your <div id='impress'></div> good try do. Commented Nov 8, 2017 at 6:46

1 Answer 1

Reset to default
0 

$(window).resize(function() {

   if(window.innerWidth == 1680){

   $('#overview').attr('data-scale', '2');

   }else{

     $('#overview').attr('data-scale', '2.5');

   }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overview" class="step" data-x="-700" data-y="-500" data-scale="2">demo
</div>

Hope this may helps you.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments