CSS transition JS function not working

Question

1) I want to change the CSS properties of a div so that it pops out like a modal when clicked. This CSS code changes the div's size and position to what I need:

 #slot1{        
      position: absolute;
      top: 10px;
      left: 20%;
      height: 600px;
      width: 60%;
      margin: auto;
}

2) For this I made a JS function that will let me change the CSS of the elements to the ones above:

function boxPop(id, cssValue, cssValue, cssValue, cssValue, cssValue)
    {
        document.getElementById(id).style.position = cssValue;
        document.getElementById(id).style.top = cssValue;
        document.getElementById(id).style.left = cssValue;
        document.getElementById(id).style.height = cssValue;
        document.getElementById(id).style.width = cssValue;
        document.getElementById(id).style.margin = cssValue;
    }

3) I added this with the desired parameters to the HTML element:

<div class="slot_content" id="slot1" onclick="boxPop('slot1', 'absolute', 
'10px', '20%', '600px', '60%', 'auto')">

</div>

The result of all this is that it does change size and position, but not the way it does when I just paste the same values into the CSS (which does what I want). Does anyone know why the CSS values are not being assigned correctly by this function?

Your function as written takes in 6 parameters, but when you call it you pass in 7 — blackandorangecat
– blackandorangecat, Commented May 29, 2017 at 4:15
you have 5 arguments called cssValue ... how do you expect the function to "know" which is which? — Jaromanda X
– Jaromanda X, Commented May 29, 2017 at 4:22

Kosh · Accepted Answer · 2017-05-29 04:25:18Z

2

Your mistake is that your function accepts 5 values into the same variable:

function boxPop(id, cssValue, cssValue, cssValue, cssValue, cssValue)

So your cssValue will always be equal 'auto'.

Also suggest you to describe your pop-up in a separate CSS class, then in JS function change just the className:

.pop-up {your pop-up css here}

function boxPop(element) {element.className = 'pop-up'}

<div onclick="boxPop(this)"></div>

answered May 29, 2017 at 4:25

Kosh

18.6k2 gold badges24 silver badges39 bronze badges

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

Comments

user7365852 · Accepted Answer · 2017-05-29 04:13:32Z

0

Try changing your function so that you're not using the function parameter variable over and over again (you're using cssValue repeatedly):

function boxPop(id, positionValue, topValue, leftValue, heightValue, widthValue, marginValue)
    {
        document.getElementById(id).style.position = positionValue;
        document.getElementById(id).style.top = topValue;
        document.getElementById(id).style.left = leftValue;
        document.getElementById(id).style.height = heightValue;
        document.getElementById(id).style.width = widthValue;
        document.getElementById(id).style.margin = marginValue;
    }

You might also think about migrating to a JS library like JQuery where you can more easily set the CSS on a DOM object.

answered May 29, 2017 at 4:13

user7365852

1 Comment

Argut Over a year ago

You're right. Thank you. I'm still new to this and did not notice that. Thanks for your help!

blackandorangecat · Accepted Answer · 2017-05-29 04:26:28Z

0

Here are two ways to do it... I added a red background simply so I could see what was happening.

Here is a better method using javascript.

function boxPop(id, positionValue, topValue, leftValue, heightValue, widthValue, marginValue) {
  document.getElementById(id).style.position = positionValue;
  document.getElementById(id).style.top = topValue;
  document.getElementById(id).style.left = leftValue;
  document.getElementById(id).style.height = heightValue;
  document.getElementById(id).style.width = widthValue;
  document.getElementById(id).style.margin = marginValue;
}

#slot1 {
  position: absolute;
  top: 10px;
  left: 20%;
  height: 600px;
  width: 60%;
  margin: auto;
  background: red;
}

<div class="slot_content" id="slot1" onclick="boxPop('slot1', 'absolute', 
'10px', '20%', '600px', '60%', 'auto')">

</div>

And here is a better way using jQuery.

$(document).on("click", "#slot1", function(e) {
  $(this).css({
    "position": "absolute",
    "top": "10px",
    "left": "20%",
    "height": "600px",
    "width": "60%",
    "margin": "auto"
  });
});

#slot1 {
  position: absolute;
  top: 10px;
  left: 20%;
  height: 600px;
  width: 60%;
  margin: auto;
  background: red;
}

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

<div class="slot_content" id="slot1">

</div>

answered May 29, 2017 at 4:26

blackandorangecat

1,3426 gold badges19 silver badges43 bronze badges

1 Comment

Argut Over a year ago

You're right. Thank you. I'm still new to this and did not notice those repeated parameter values. Thanks for your help!

Collectives™ on Stack Overflow

CSS transition JS function not working

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related