Discovering the true width of elements that have overflow hidden in IE7 using jQuery

Question

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

I am dealing with a dynamic list that contains around 50 elements, but the exact number may vary.

<div style="width:465px;">
    <ul>
     <li>aaa</li>
     <li>aaa</li>
     <li>aaa</li>
     <li>aaa</li>
    ....
     <li>aaa</li>
    </ul>
</div>

The ul element has "overflow: hidden" applied in the CSS. I am attempting to retrieve the width of the ul using jQuery. When I use the width() method on the ul element in Internet Explorer 7, I get a value of 465. However, when I try it in other modern browsers, I get a larger value like 1549. Which one is correct? Any suggestions on how to handle this discrepancy?

jquery css internet-explorer-7

Answer 1

Answer №1

When using IE7, the width value is treated as a string and not parsed properly in IE.

You can try something like this:

var w = $("ul").width();
if ($.browser.msie && parseInt($.browser.version, 10) <= 6) {
    w = parseFloat(w);
}

Alternatively, you can shorten it to:

var w = ($.browser.msie && parseInt($.browser.version, 10) <= 6) ? 
    parseFloat($("ul").width()) : $("ul").width();

Or for a really short version that probably won't cause too much trouble:

var w = parseFloat($("ul").width());

Answer 2

When using IE7, the width value is treated as a string and not parsed properly in IE.

You can try something like this:

var w = $("ul").width();
if ($.browser.msie && parseInt($.browser.version, 10) <= 6) {
    w = parseFloat(w);
}

Alternatively, you can shorten it to:

var w = ($.browser.msie && parseInt($.browser.version, 10) <= 6) ? 
    parseFloat($("ul").width()) : $("ul").width();

Or for a really short version that probably won't cause too much trouble:

var w = parseFloat($("ul").width());

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

Answer №1

Similar questions

Trouble with placing an absolutely positioned element using Tailwindcss

Manually incorporating multiple React components into a single container

The static menu is malfunctioning and is disrupting the smooth operation of the website

Tips for implementing an ajax request in SharePoint 2013

Conceal and reveal a list on page load with jQuery

Is there a problem with the string comparison in my JavaScript code?

Modify the JS/JQuery variable by utilizing the data entered into an HTML input field

Implementing a tooltip popup inside the header cell of the ordering table

Tips for correctly positioning CSS elements:

Starting up jQuery VSDoc in WebMatrix

Having trouble accessing listview capabilities in jquerymobile?

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Using CSS styles in emails can lead to an unexpected horizontal scrolling effect

Styling with Radial Gradients in CSS

Steps to send parameters to external web service in MVC3

After removing a record from the data table, the deletion does not take effect until the page is reloaded. Is there a way to achieve

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

Is there a way for me to assign values to my array within each loop when the inner elements vary?

Pass data from viewmodel back to controller in C# MVC

Ways to turn off hover highlighting