jQuery - use css in if statement argument

Question

I'm using vw for previous divs, now I want to set an alert if a div is moved to the very left. Here's the div:

<div id='pagination'>some stuff</div>

Now its width is set to 84vw, which was calculated from early functions. I want to alert when its margin-left equals -84vw. I tried this in js but no luck:

if ($('#pagination').css('margin-left') == '-84vw') {
    alert('you're good to go!');
}

Could anyone help me with this argument? The real headache is I can't change vw to px.

The syntax error is one case, but your real issue is that `$('#pagination').css('margin-left')` gives you the value in `px`, then you need to convert the value to `vm`. — rrk, Feb 02 '16 at 06:34

score 7 · Accepted Answer · edited May 23 '17 at 12:25

7

For Conversion of px and vw refer this

1px = (100 / document.documentElement.clientWidth)vw

e.g. — If your viewport was 500px wide (equals by definition to 100vw) then

1px = (100 / 500) = 0.2vw

Plus you had a syntax error ..Please handle the quotes properly

alert('you\'re good to go!');

edited May 23 '17 at 12:25

Community

1
1

answered Feb 02 '16 at 06:21

Amar Singh

5,464
2
26
55

The value from `$('#pagination').css('margin-left')` is coming as `px`. You need to convert. – rrk Feb 02 '16 at 06:30
https://jsfiddle.net/Rino_Raj/4qwzpx52/2/... $('#pagination').css('margin-left') will have always value in PX.. There was an error in the code that you pointed out but your answer is not correct. – Rino Raj Feb 02 '16 at 06:36
@RinoRaj : i have already edited my answer and have shown him how to convert – Amar Singh Feb 02 '16 at 06:38
@YoYo You have not included that in your answer.. Please include that too – Rino Raj Feb 02 '16 at 06:39
1

@YoYo you'r answer was wrong, so the downvote. That does mean that you can go around downvoting other correct answers. – rrk Feb 02 '16 at 06:41

rrk · Answer 2 · 2016-02-02T06:47:43.847

There is a problem with the value units. LHS is px and RHS is vw.

1px = 100 / document.documentElement.clientWidth + 'vm';

var onePx = 100 / document.documentElement.clientWidth;
var valPX = $('#pagination').css('margin-left');
var valVW = Math.round( parseInt( valPX.replace(/[^-\d\.]/g, ''), 10 ) * onePx);
if ( valVW == -84) {
    alert('you\'re good to go!');
}

#pagination{
  margin-left:-84vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='pagination'>some stuff</div>

score 0 · Answer 3 · answered Feb 02 '16 at 06:38

0

You cannot compare pixels to vw, because the jQuery.css() always returns the width in pixels

answered Feb 02 '16 at 06:38

thexpand

641
13
28

gmanousaridis · Answer 4 · 2016-02-02T07:16:34.120

Simply change the conditional logic.

The value of the margin depends on the container width, so you can change the element's vw value with container's width value and use this to make your comparison.

You can use the sign of the margin's value for extra control.

//Compute the percent width of the element's container
var width = $('#container-of-pagination').width();
var parentWidth = $('#container-of-pagination').offsetParent().width();
var percent = 100*width/parentWidth;
//This will be used for the extra control.
var margin = parseInt( $('#pagination').css('margin-left') );
if ( percent == 84 && margin < 0 ) {
    alert('you\'re good to go!');
}

jQuery - use css in if statement argument

4 Answers4