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

Map the Ajax post data to the model being sent to the controller

Is the JSON returned by WCF Data Services incorrect?

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Looking for assistance with Jquery - how to select a newly created DOM element immediately after its creation?

What is the best way to merge the two ajax functions into a single one in order to send both variables in the link simultaneously?

Uploading files using Ajax without the need for additional plugins or submitting a form

What is the best way to position my two icons next to each other in the footer of my React application?

"Exploring the Interaction Between Solr, Tomcat, and CORS

How to remove elements from a JavaScript array: exploring the potential use of the delete function in JavaScript

jquery accordion failing to display content

What is the best way to incorporate an URL with AJAX in Yii framework?

Show various attachment file names using jQuery

What is the best way to set up a side-opening feature in the UI design?

Altering the text field's content when the dropdown menu is modified

Unable to retrieve data using Ajax post method

What is the best way to navigate users to a different page when they click on a button?

Once the form has been loaded without any information, go ahead and submit

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

The animation of react-circular-progressbar is experiencing a slight delay of one second

Tips on creating animations for a background with a value of 2 using CSS3