Increment negative value of property based on window size by less than 1px

Question

This question is very similar with other. The only difference (and for me is a huge difference because I cannot figure it out) is the value of the CSS value increment.

I have an element on the page with negative margin and in the other question I wanted it to increment by 1 pixel each time the screen was larger by 1 pixel, starting on 1400px wide upwards.

.element {
margin-left: -195px;
}

So, if the window size was 1440px wide the margin-left of the element should be -195px, if the window size was 1441px wide the margin-left of the element should be -194px or if the window size was 1451px wide the margin-left of the element should be -184px and so on.

The answers were awesome and I got it resolved (with CSS or javaScript).

.........................

However now that is implemented I noticed that instead of 1 pixel the element's margin needs only 0.1 pixels of increment:

So:

if window size is 1440px wide the margin-left of the element should be -195px.

If the window size is 1441px wide the margin-left of the element should be -194.9px

or if the window size is 1452px wide the margin-left of the element should be -193.8px and so on.

Starting at 1400px wide upwards.

I am aware that the questions are very similar. However I feel this one is a different level somehow.

IMPORTANT NOTE: What I want is a dynamic value for the margin-left that increases based on screen size and not a kind of media query which would make the value always remain the same between an interval of screen sizes. What I want would force me to add a massive number of media queries.

Is this possible with javaScript or jQuery? (or even CSS?)

Use calc() and [vw](https://css-tricks.com/viewport-sized-typography/). — Jan Jongboom, May 29 '16 at 14:33
@JanJongboom My math is really poor. I spent hours already trying to figure out a possible calc() but whatever numbers, operations I choose the increment is always by 1 pixel :( If you have a nice formula tweaking this one: `margin-left: calc(-195px + 100vw - 1440px);`would be more than welcome. — viery365, May 29 '16 at 14:38

max · Accepted Answer · 2016-05-29T14:53:11.877

2

CSS version:

@media screen and (min-width: 1440px) {
  .element {
    margin-left: calc(-195px + (100vw - 1440px) * 0.1);
  }
}

JS version:

var element = $('.element'), windowWidth, x;

$(window).resize(function () {
  if ($(window).width() > 1440) {
    windowWidth = $(window).width();
    x = (windowWidth - 1440) * 0.1;
    element.css('margin-left', -195 + x);
  } else {
    element.css('margin-left', -195)
  }
});

$(window).trigger('resize');

CODEPEN EXAMPLE (CSS)

CODEPEN EXAMPLE (JS)

edited May 29 '16 at 14:53

answered May 29 '16 at 14:31

max

8,632
3
21
55

Instead of duplicating your code, you can just keep the resize event, and trigger a `resize()` manually. – Bram Vanroy May 29 '16 at 14:35
I haven't tried yet. Give me some minutes but by the codepen I start feeling this is it!:) I will give you feedback:) – viery365 May 29 '16 at 14:39
It works!!!! Amazing!!! You are a saviour really!!!!I spent hours and hours on this. I can move on with my life:) Thank you so much! – viery365 May 29 '16 at 14:47
1

You can use only CSS too. – max May 29 '16 at 14:48
And I haven't noticed. You also added CSS. Amazing really! – viery365 May 29 '16 at 14:48

score 1 · Answer 2 · answered May 29 '16 at 14:41

1

This code can work, but I don't think that this is the best way to do it ...

var elements = document.getElementsByTagName('element');

window.onresize = function(){
  if (window.innerWidth >= 1400) {
    var margin, i;
    margin = -195 - (0.1*(window.innerWidth - 1400));
    for (i=0; i < elements.length; i++) {
      elements[i].style.marginLeft = margin + "px";
    }
  }
}

answered May 29 '16 at 14:41

boehm_s

5,254
4
30
44

Thank you for your answer and for your time. This also works! For anybody that has the same question there is also a solution in here. Thank you again! – viery365 May 29 '16 at 14:50
1

Your'e welcome, I'm happy to see the CSS solution above ;) – boehm_s May 29 '16 at 14:52

Increment negative value of property based on window size by less than 1px

2 Answers2

CODEPEN EXAMPLE (CSS)

CODEPEN EXAMPLE (JS)

Linked