Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

Question

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted to manually moving a box alongside the slider thumb. However, as my window shrinks or expands, the boxes don't stay in place. Does anyone have any suggestions on how I can keep them positioned correctly, regardless of the window size?

Below is the code I'm working with (Note: this is just for testing purposes and not a finalized version):

<html>

<head>
    <title>Home</title>

    <!-- CSS -->
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

    <div id="login-box">
        <div id="logo"><img border="0" src="logo.png"></div>
        <div id="text_boost">Boost your account now!</div>

        <div id="slider1"><input id="range1" type="range" min="10" max="100" value="0" step="1" onchange="change(1)"></div>
        <div id="slider2"><input id="range2" type="range" min="0.5" max="4" value="0" step="0.5" onchange="change(2)"/></div>
    </div>


    <div id="sliderInfo1" class= "ui-widget-content" style="background-color: #d9d9d9; border-radius:10px; width: 59px;
                                                          height: 22px; text-align:center; display: table">
        <span style="line-height: 22px"></span>
        <div style="display: table-cell; vertical-align: middle; text-align: center; font-size:12px;"><span id="slider_1">10.000</span></div>
    </div>

    <div id="sliderInfo2" class= "ui-widget-content" style="background-color: #d9d9d9; border-radius:10px; width: 59px;
                                                          height: 22px; text-align:center; display: table">
        <span style="line-height: 22px"></span>
        <div style="display: table-cell; vertical-align: middle; text-align: center; font-size:12px;"><span id="slider_2">500</span></div>
    </div>

<script type="text/javascript">
    var newPoint, newPlace, offset;

    var savedOffset_1 = document.getElementById("sliderInfo1").getBoundingClientRect().top - 
                    document.getElementById("range1").getBoundingClientRect().top;
    change(1);

    var savedOffset_2 = document.getElementById("sliderInfo2").getBoundingClientRect().top - 
                    document.getElementById("range2").getBoundingClientRect().top;
    change(2);

    function change (id) { 
        var el = $("#range" + id);
        var top = el.position().top;
        var left = el.position().left;

        var bodyRect = document.getElementById("range" + id).getBoundingClientRect(),
            elemRect = document.getElementById("sliderInfo" + id).getBoundingClientRect(),
            offset_2   = elemRect.left - bodyRect.left;

        if(id == 1) {
            offset_1 = savedOffset_1;
        } else if(id == 2) {
            offset_1 = savedOffset_2;
        }

        // Measure width of range input
        var width = 430;

        // Determine placement percentage between left and right of input
        newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));

        offset = -1;

        // Calculate new box position
        if (newPoint < 0) { 
            newPlace = 0;
        } else if (newPoint > 1) { 
            newPlace = (bodyRect.left - width); 
        } else { 
            newPlace = width * newPoint + left + width + (59 / 2); 
            offset -= newPoint; 
        }

        // Move box
        $("#sliderInfo" + id).css({ position: "fixed", left: newPlace, marginLeft: offset + "%", top: top - offset_1 - 5 + "px",
                                width: 59 + "px", height: 22 + "px", display: "table", fontSize: 12 + "px", 
                                backgroundColor: "#d9d9d9", borderRadius: 10 + "px", verticalAlign: "middle", textAlign: "center",
                                lineHeight: 22 + "px"})
                         .text(numberWithCommas(el.val() * 1000));

    }

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    </script>
</body>

My CSS: http://pastebin.com/rASpFWjN

https://i.sstatic.net/0v1JB.png

https://i.sstatic.net/lqTlY.png

javascript jquery html css fixed

Answer 1

Answer №1

When you set elements to have a fixed position, you'll need to handle the window.onresize and window.onscroll events in order to correctly position your labels. This is because elements with position: fixed are always relative to the viewport of the browser. So, an element with

position: fixed; top: 100px; left: 100px

will always remain 100px from the top left corner of the window, regardless of window size or scrolling.

However, using position: fixed in your situation may unnecessarily complicate the code. You can simply position the labels inside the slider divs so that they remain relative to the sliders.

<div id="slider1">
  <div id="sliderInfo1" class="sliderInfo">
    <span id="slider_1">10.000</span>
  </div>

  <input id="range1" type="range" min="10" max="100" value="0" step="1" />
</div>

<div id="slider2">
  <div id="sliderInfo2" class="sliderInfo">
    <span id="slider_2">500</span>
  </div>

  <input id="range2" type="range" min="0.5" max="4" value="0" step="0.5" />
</div>

This approach also reduces the need for extensive position calculations in JavaScript.

function change(id) {
  var thumbWidth = 28;
  var el = $("#range" + id);
  var inputWidth = el.width() - thumbWidth;
  var newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
  var newPlace = inputWidth * newPoint;

  // Adjust the new left position by adding half of the thumb width to it.
  newPlace += (thumbWidth / 2);    

  $("#sliderInfo" + id).css({
    left: newPlace,
  }).text(numberWithCommas(el.val() * 1000));
}

You can see a full example of this on https://jsfiddle.net/dnm7qr6j/

Answer 2

When you set elements to have a fixed position, you'll need to handle the window.onresize and window.onscroll events in order to correctly position your labels. This is because elements with position: fixed are always relative to the viewport of the browser. So, an element with

position: fixed; top: 100px; left: 100px

will always remain 100px from the top left corner of the window, regardless of window size or scrolling.

However, using position: fixed in your situation may unnecessarily complicate the code. You can simply position the labels inside the slider divs so that they remain relative to the sliders.

<div id="slider1">
  <div id="sliderInfo1" class="sliderInfo">
    <span id="slider_1">10.000</span>
  </div>

  <input id="range1" type="range" min="10" max="100" value="0" step="1" />
</div>

<div id="slider2">
  <div id="sliderInfo2" class="sliderInfo">
    <span id="slider_2">500</span>
  </div>

  <input id="range2" type="range" min="0.5" max="4" value="0" step="0.5" />
</div>

This approach also reduces the need for extensive position calculations in JavaScript.

function change(id) {
  var thumbWidth = 28;
  var el = $("#range" + id);
  var inputWidth = el.width() - thumbWidth;
  var newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
  var newPlace = inputWidth * newPoint;

  // Adjust the new left position by adding half of the thumb width to it.
  newPlace += (thumbWidth / 2);    

  $("#sliderInfo" + id).css({
    left: newPlace,
  }).text(numberWithCommas(el.val() * 1000));
}

You can see a full example of this on https://jsfiddle.net/dnm7qr6j/

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

Answer №1

Similar questions

Applying class to target specific screen size in Bootstrap

Unable to alter the default error message within the jquery-validation plugin

Troubleshooting Issue with Nested ng-include in AngularJS: Difficulty arises when the parent element with the ng-include attribute is dynamically added using the ng-

Having trouble showing the text on the screen, but after checking my console, I notice empty divs with p tags. Surprisingly, the app is still functioning properly without any

Creating dynamic HTML elements for each section using JavaScript

Using a jQuery if statement to target a particular div and apply custom CSS styling

What is the significance of the "@" in JXON conversion in JavaScript?

Using Pug/Jade, be sure to call a function during each loop iteration

Which is quicker when utilizing jQuery selectors: selecting by .classname or div.classname?

The element referenced by `$(this)` in jQuery seems to be

Angular4 allows for the creation of a div that can horizontally scroll

Applying box shadow to input group addon in Bootstrap 3 using CSS

Error: The value provided is not compatible with the HTMLInputElement interface

"Exploring the Interaction Between Solr, Tomcat, and CORS

Tips for preserving data while attempting to access the schema

Plugin for controlling volume with a reverse slider functionality

Tips for arranging Radio buttons in multiple columns within the same Radio group in Material UI

Tips for successfully incorporating a jQuery plugin into your React project

I am curious about when the CSS of my website will start impacting its search engine ranking

ES6 Set enables the storage of multiple occurrences of arrays and objects within