0

I don't know if this question has an easy or hard answer.

The situation is that I have an element on the page with negative margin:

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

It works well with a screen size 1440x532 (check with Chrome's inspector element).

What I want is kind of simple to explain.

I want an increase of 1 pixel (for instance) in the margin-left of the element anytime the window is larger by one pixel:

So, if window size is 1441, the margin-left of the element be -194px. If the window size is 1451, the margin-left of the element be -184px.

In the same way, I want this to work from 1440px upwards.

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?)

viery365
  • 935
  • 2
  • 12
  • 30

3 Answers3

1

This is not possible with CSS since there is no property or method to capture the window size. If there would be, this could be done using calc().

However, this is possible with JavaScript.

function resizeScreen() {
    var windowWidth = $(window).width();
    var $element = $('.element');

    if (windowWidth > 1440) {
        // Calculate the new (negative) margin by subtracting the windows width by 1440 (e.g. 1500-1440 = 60). The new margin would be: -195 + 60 = -135.
        var newMargin = $element.css('margin-left') + (windowWidth - 1440);

        $('.element').css('margin-left', newMargin)
    }
}

$(window).resize('resizeScreen');
JasonK
  • 5,214
  • 9
  • 33
  • 61
  • Thank you for your answer. I am going to try it out:) – viery365 May 29 '16 at 10:04
  • This works perfectly. I chose the other answer because of the CSS-only matter but this one works fine as well. However, I take your comments in consideration and I will try it in different browsers. Anyway, other question has arisen from this one. After testing the increment of the margin-value by 1px is too much for what I need. What my layout needs is a smaller increase, like 0.1pixels per window screen pixel increment. I will add another question here and I will let you know. Thank you very much for your help anyway! – viery365 May 29 '16 at 12:37
1

The Jquery solutions that other users gave you works perfectly for this use, but if you prefere you can also use a CSS-only alternative (it works even if the user has disabled scripts!).

It has got also a good support among browsers

You can implement your CSS in this way:

    #element{
        margin-left: -195px;   
    }
    @media screen and (min-width: 1440px){
        #element{
            margin-left: calc(-195px + 100vw - 1440px); //100vw is the width of the screen

        }
    }

It adds a pixel for each pixel above 1440 Tell me if this is what you mean

viery365
  • 935
  • 2
  • 12
  • 30
Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
  • Thank you:) This is almost perfect because is fully CSS. It is almost there. Just two things: I had to change max-width to min-width in the media query and one thing happens which is weird: when the screen size reaches the 1440px the margin-left goes from -195px to -235px but then it works well from there increasing the size by one pixel any time the screen is 1 pixel larger. I will tweak the numbers to see what happens. Maybe I have something wrong with specificity or so. Then, I will give you feedback. – viery365 May 29 '16 at 10:42
  • 1
    Ok, what I did was to change the min-width to 1440 as well. the difference between -195px and -235px (40px) had to do with that. I am going to edit slightly your answer if you will and mark it as the correct answer. Thank you so much!!! – viery365 May 29 '16 at 10:49
  • Ops, I missed it. Thank you for the edit. Nice to help you – Christian Vincenzo Traina May 29 '16 at 11:02
  • Please keep in mind that this will not work for every browser. Both the `vw` (http://stackoverflow.com/questions/21624014/css-are-view-height-vh-and-view-width-vw-units-widely-supported) and `calc` (http://caniuse.com/#search=calc) properies have their issues. This could lead to different results depending on the client's browser. You should be safe (most of the time!) with IE10 or newer browsers, though. – JasonK May 29 '16 at 11:15
0

Yes is it possible with Jquery with resize()

$(window).resize(function() {
  if (($(window).width() <= 1441)) {
     $('.element').css('margin-left', "-194px")
  }else if($(window).width() <= 1451){
     $('.element').css('margin-left', "-184px")
  }

});

But i suggest to you to use media queries with css:

@media screen and (max-width: 1441px) {
  .element {
    margin-left: -194px;
  }
}

@media screen and (max-width: 1451px) {
  .element {
    margin-left: -184px;
  }
}
elreeda
  • 4,525
  • 2
  • 18
  • 45
  • thank you so much for your quick answer! I am going to try and then I give you feedback – viery365 May 29 '16 at 09:49
  • The problem with css in this case is that I had to make 'infinite' media queries if I wanted a different value for a different screen size. From that screen size upwards the value of margin-left would remain the same. But I understand your point. – viery365 May 29 '16 at 09:53
  • Wait just a minute:) – viery365 May 29 '16 at 09:55
  • No, unfortunately because what happens is that if the screen size is larger or equal to 1451px the margin-left remains always -184px. Your jQuery is a translation of a css media query and unfortunately is not what I want. What I want is a dynamic value for the margin-left. But thank you for your time!!! – viery365 May 29 '16 at 10:03
  • if you want a dynamic value check out @JasonK answer. – elreeda May 29 '16 at 10:05
  • Thank you so much. I am going to try it:) – viery365 May 29 '16 at 10:11