Question: I create my website and i've got a problem with an attribute of a div.
I try to change the value when the screen is small.

My css mediaquery:

```
@media screen and (min-width: 1000px) and (max-width: 2000px) {
#my-content { display: block; }
#my-slider {width: 670px;}

}

@media screen and (min-width: 0px) and (max-width: 1000px) {
#my-content { display: none; }   /* hide it elsewhere */
#my-text {font-size: 26px;}
#my-slider {content: attr(data-x : 700) ;}
}

```

My html :

```
<div id="my-slider" class="caption sfb" data-x="500" data-y="0" data-speed="900" data-start="900" data-easing="easeOutSine"><img src="code1.jpg" width="670px" height="500px"  alt="" /></div>

```

I want to change the data-x but don't work with all possibilities i've found...Can you help me? Thanks.

Answer: 
Your best gues is to build something that checks if the screen size of your browser has changed, than set the `data`-attribute accordingly:

```js
var resize = function() {
  var screenWidth = parseInt($('body').width()), mySlider = $( "#my-slider" );

  if (screenWidth < 1000) {
    mySlider.data('x','foo');
  }
  else if (screenWidth < 2000) {
    mySlider.data('x','bar');
  }
  else {
    mySlider.data('x','foo-bar');
  }
}

$( window ).resize(function() {
  resize();
});

$( document ).ready(function() {
  resize();
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="my-slider" class="caption sfb" data-x="500" data-y="0" data-speed="900" data-start="900" data-easing="easeOutSine"><img src="code1.jpg" width="670px" height="500px"  alt="" /></div>
```

But you will have to remember that just changing a data attribute may not necessarily change the behavior of your slider. You might be better of to get yourself a *responsive* slider in the first place.
You can use AngularJS to do this
Example: <https://docs.angularjs.org/guide/directive>