Is it possible to retrieve the width of an absolute/fixed element using jquery/js while resizing the window?

Imagine you have a fixed or absolutely positioned element:

<div>
   This is my fixed div.
</div>

With the CSS styling as follows:

div:first-of-type {
    background-color: red;
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

To determine the width, you can use the following JavaScript code:

$(function() {
    $(window).resize(function() {
        var $myFixedDiv = $('div:first');

        console.log($myFixedDiv.width()); //$myFixedDiv.innerWidth(), $myFixedDiv.outerWidth() 
    });

});

However, both Firefox and Chrome may report a width of 0 when resizing the window.

How can one accurately determine the true width of the element?

Answer №1

To adjust for the window size, subtract 40 from both the width and height dimensions.

var adjustedWidth = $(window).width()-40;
var adjustedHeight = $(window).height()-40;

Instead of relying on CSS properties like top, left, bottom, and right to set the div's dimensions in the long run, it's more reliable to use JavaScript to define the width and height.

var myDiv = $('#myDiv');
myDiv.width = adjustedWidth;
myDiv.height = adjustedHeight;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting script not detecting changes in form

I am currently implementing a script to detect any changes in the form fields and notify the user if there are any. However, instead of triggering the alert box as intended, a different JavaScript box is displayed. Despite my efforts, the script is not re ...

Unable to apply custom border color to Material UI Select component in React

I have been experimenting with material-ui v5 to improve my skills. I am currently struggling to customize the default style of the mui Select component. My goal is to modify the color of the Select element when it is being hovered over or in a focused sta ...

Saving data from the Viewbag into a jQuery array or object on the client side

Imagine this scenario: I have a dynamic object called ViewBag, which is essentially a list filled with some results; Scenario 1: User 1 enters and populates the ViewBag.Products object with a list of 50 items; Scenario 2: User 2 enters and fills t ...

Retrieve a collection of JSON files using a single function

The format of JSON links is as follows: www.example.com/link-number-end-of-link.com.json I need to retrieve multiple JSON link files where the only variable changing is the number in the link. For example, it could range from 10 to 40, with the first ...

What is the best way to utilize Google Maps autocomplete while filtering addresses by county and city?

Currently, I am working on a project that requires integration of the Google Maps autocomplete address API. In the registration form, I need to collect the user's address in three separate input fields: Country: ______________ City: _______________ ...

Looking to ensure that the blockquote element is placed on its own separate line?

We are attempting to ensure that our blockquote element appears on a separate line. Despite trying both clear:both and display:block CSS properties, we have not noticed any changes. Our target browsers are IE7 and Firefox 3. Any assistance would be great ...

Unexpected JSONP Parsing Issue Despite Correct JSON Data

I've implemented a Cross Domain AJAX request using JSONP, and it's working fine with CORS. However, I'm facing an issue with JSONP. I've checked other threads but couldn't find a solution for my case. Below is the code snippet: ...

Ways to prevent a div from loading an HTML page

When an external button is clicked, the remove() function on id main is triggered. The issue arises when a user quickly clicks on btn1 and then presses the external button, causing the removal to occur before the event handler for btn1. This results in the ...

Error message: The variable datepicker_instActive is not defined within Jquery-ui Datepicker

Having trouble with a Rails + Angular app where I've implemented the jquery-ui datepicker. The console is showing an error that says: TypeError: datepicker_instActive is undefined if(!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? ...

The functionality of cloning an object is experiencing issues on a webpage containing jQuery code generated by a PHP script

<li style="padding: 5px; width: 150px; overflow: hidden; float: left; height: 202px;"> <div class="title"> <a href="/index.php?option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=68&amp;virtuemart_category ...

Adjust the child content within a React component based on the element's width, rather than the overall window size, by implementing dynamic resizing without fixed breakpoints

I am working with a react component that displays a div containing menu items which are aligned horizontally using inline-block. The menu items have text labels "Toy Store", "Configure your Toy", and "About Us". My challenge is to dynamically change the ...

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I curre ...

Tips for Deactivating One Button While Allowing Others to Remain Active

Whenever the $order_status is marked as Accepted, only the button labeled Accept should be disabled. If the $order_status changes to Dispatched, then the button that should be disabled is labeled as Sent. However, if the status is Cancelled, then the butto ...

I am having trouble adding a second image. The functionality only seems to work for the first image input

How come I can't access the second file chooser when the first one works perfectly fine? This section contains HTML code <form action="<?php url("image/uploadImg"); ?>" method="post" en ...

Jumbotron causes navigation bar to malfunction on mobile site

I'm experiencing an issue with Bootstrap Jumbotrons on my website - they extend beyond the container, causing the navbar on the mobile version to not fill the screen. This problem only occurs on pages with a jumbotron present. Attempting to use a Car ...

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

Modify the background color of the entire page when the main div is clicked

I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here: $(document).ready(function() { var color = 1; $('#main').click(function(){ if (colo ...

Delete an element once the ajax request is complete

After closing the modal, I noticed that a div element was left behind causing the screen to become unresponsive. <div class="modal-backdrop fade show"></div> I found that removing this element using the console command below fixed the issue: ...

Can you insert a query into an HTML value?

Is it possible to include HTML code inside a table row in order to later select it? I have variables hstatus1 and hstatus2, where their meanings are htmlstatus1 and htmlstatus2. It seems to work when filling in words, but not when filling in HTML code. The ...

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...