-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!

  • You didn't say anything about problem... – Pedram Nov 08 '17 at 06:14
  • 1
    If you want to change attribute use `.attr()` i.e. `$('#overview').attr('data-scale', 2.5);` – Satpal Nov 08 '17 at 06: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);` – Alive to die - Anant Nov 08 '17 at 06:16
  • use `if($(window).width() >= 1680){}` instead your condition – mlimon Nov 08 '17 at 06: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 `
    ` good try do.     – KaoriYui Nov 08 '17 at 06:46
  • @KaoriYui thanks that do the trick. –  Nov 08 '17 at 06:59

1 Answers1

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.

Sunil Dora
  • 1,407
  • 1
  • 13
  • 26