0

So I have this button:

<button type="button" class="close" data-dismiss="modal">Close</button>

and I have this CSS attribute: 

.rouletteWheelGradient{
margin-top: 52;
}

Is that possible to change the 52px to 62px when the button is pressed?

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
Karbonis
  • 21
  • 1
  • 2

3 Answers3

2

Not with raw CSS, but this is certainly possible with JavaScript. First, we need to add a click function to the HTML to trigger the JavaScript:

<button type="button" class="close" onclick="move()" data-dismiss="modal">Close</button>

Then we need to build a function that moves .rouletteWheelGradient:

function move() {
  for (var i = 0; i < document.getElementsByClassName("rouletteWheelGradient").length; i++) {
    document.getElementsByClassName("rouletteWheelGradient")[i].style.marginTop = "62px";
  }
}

Note the px at the end of the function, which represents pixels. You need to specify a unit of measurement for your selector, and you're missing this in your CSS.

Here's a working example:

function move() {
    for (var i = 0; i < document.getElementsByClassName("rouletteWheelGradient").length; i++) {
      document.getElementsByClassName("rouletteWheelGradient")[i].style.marginTop = "62px"
    }
}
<button type="button" class="close" onclick="move()" data-dismiss="modal">Close</button>
<div id="1" class="rouletteWheelGradient">One</div>
<div id="2" class="rouletteWheelGradient">Two</div>
<div id="3" class="rouletteWheelGradient">Three</div>

The above sample gives every element with class rouletteWheelGradient a top margin of 62px when the button is clicked.

I've also created a JSFiddle showcasing this here.

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • I'd recommend doing this by id rather than classname since you might later apply that class to multiple objects. – Glen Pierce Mar 12 '17 at 20:32
  • That's what I was thinking at first, though by the name `gradient`, I'm assuming there could be multiple classes with the same name. I'd assume that they would all want to be changed at once in a roulette wheel's offset. You can always target an individual element with `document.getElementsByClassName('.rouletteWheelGradient')[x]` anyway, where `x` is the nth element with that class :) – Obsidian Age Mar 12 '17 at 20:34
0

Yes, with a little JQuery:

$('button.close').click(function(e){
    e.preventDefault();
    $('.rouletteWheelGradient').css({'margin-top':'62px'});
});

https://jsfiddle.net/wrunnvqa/2/

symlink
  • 11,984
  • 7
  • 29
  • 50
0

Yes, you can do it with some regular JavaScript.

Just add an id and onclick attribute to your button tag like so

<button id="btn" onclick="change()" type="button" class="close" data-dismiss="modal">Close</button>

then somewhere on the page you add a function inside a script tag

<script> function change(){ document.getElementById("btn").style.marginTop= '62px'; } </script>

Dubliyu
  • 61
  • 5