Increase the negative property value by a fractional amount depending on the size of the window

Question

Increase the negative property value by a fractional amount depending on the size of the window

This question is quite similar to another one I came across. The main difference that's stumping me is the CSS value increment.

In the previous question, there was an element on the page with a negative margin, and I wanted it to increase by 1 pixel each time the screen size increased by 1 pixel, starting from 1400px wide and up.

.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 should be -194px, or if it was 1451px wide, the margin-left should be -184px, and so forth.

The responses were fantastic and helped me resolve it using CSS or JavaScript.

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

However, after implementing the solution, I realized that instead of a 1-pixel increment, the element's margin actually needs only a 0.1-pixel increment:

So:

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

If the window size is 1441px wide, the margin-left should be -194.9px.

Or if the window size is 1452px wide, the margin-left should be -193.8px, and so on.

Starting at 1400px wide and up.

I understand that these questions are very similar, but this one seems to present a new challenge.

IMPORTANT NOTE: What I need is a dynamic margin-left value that increases based on screen size, rather than being fixed within a range of screen sizes through media queries. Implementing a huge number of media queries is not an option for me.

Is this achievable with JavaScript, jQuery, or even CSS?

javascript jquery css

Answer 1

Answer №1

This is the CSS version:

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

And here is the 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');

Check out this CODEPEN EXAMPLE for CSS styling.

And here's a CODEPEN EXAMPLE for Javascript implementation.

Answer 2

This is the CSS version:

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

And here is the 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');

Check out this CODEPEN EXAMPLE for CSS styling.

And here's a CODEPEN EXAMPLE for Javascript implementation.

Answer 3

Answer №2

While this code may be functional, there are potentially better approaches to achieve the desired outcome...

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";
    }
  }
}

Answer 4

While this code may be functional, there are potentially better approaches to achieve the desired outcome...

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";
    }
  }
}

Increase the negative property value by a fractional amount depending on the size of the window

Answer №1

Check out this CODEPEN EXAMPLE for CSS styling.

And here's a CODEPEN EXAMPLE for Javascript implementation.

Answer №2

Similar questions

Has the user successfully authenticated with Google?

Choose a specific Div element in JQuery without unintentionally selecting its parent Div

Stop const expressions from being widened by type annotation

Verifying the presence of various strings across multiple files

Having trouble with PHP when using JQuery Ajax to post data

Guide to adding information to an .xml document

What is the best way to retrieve the value stored in the key "headerText" from a JSON object and display it in the result div?

What are the best practices for maximizing the efficiency of bootstrap-sass?

Unable to use .ajax within autocomplete function

JavaScript vs. GSP: Exploring How to Trigger a Grails Action

The ellipsis feature is malfunctioning when applied to labels

Combining Multiple Arrays into a Multidimensional Array

Zod handling the visual component

Is it possible for a prop to change dynamically?

Utilizing JsSIP in a real-world telephone device

Calculate and retrieve the result from the event handling function

Why do users struggle to move between items displayed within the same component in Angular 16?

Running a Python script through a Javascript event

Using a for loop to create visualizations using amCharts in JavaScript

Creating a collapsible sidebar feature in Angular 2