+ 1

jQuery inconsistency: width of a <div> element

The following code is based on the example from the course jQuery>Effect>animate(1of3). There's a <div> element (grey background) and below it a <p> element. By clicking on the <p> element you'll get an alert with the <div> element's width in pixels. By clicking on the <div> you'll get the same alert. When hovering over the <div> element its width increases to 450px, when the mouse leaves the div element its width is supposed to shrink back to the initial value, which was stored in the divWidth variable. Unfortunately this is not the case: if you test this code in the code playground you can see that when the page is loaded the <div>'s width is 230.58999633789062 px, after hovering with the mouse and leaving the <div> will shrink to 230.57998657226562 px. This 0.01px difference is enough to force the text to break in two lines. Is there any workaround against this, or do I have to change the code to divWidth+0.01 so that the <div> returns to its exact original width? HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div class="test">We are writing a long text here now</div> <p>Check box width</p> </body> </html> CSS: div { display:inline-block; padding:25px; background-color:grey; color:white; text-align:center; cursor:pointer; text-align:left; } JS: $(function() { var divWidth = $("div.test").width(); $("div").hover(function() { $("div").animate({width: '450px'}, 1000); }); $("div").mouseleave(function() { $("div").animate({width: divWidth}, 1000); }); $("div").click(function() { alert($("div").width()); }); $("p").click(function() { alert($("div").width()); }); });

javascript jquery

4th Jan 2017, 11:13 AM

Bruno De Lucia

2 Answers

+ 6

try this css : "white-space:nowrap;overflow:hidden;"

4th Jan 2017, 11:18 AM

Valen.H. ~

+ 2

Thanks ValentinHacker, that worked. I've also found out that there's actually a weird asymmetry in this whole resize thing: if you set the width to increase by 200.01px and decrease by 199.99px upon hovering/unhovering the <div> width will stay exactly the same after expanding and shrinking the same number of times. I made a new version with an increase and a decrease button, and the width is displayed in the page and automatically update upon resizing, just to make everything easier to see. HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div id="test">We are writing a long text here now</div> <p>Box width is (click here to update): <span id=wids></span></p> <button id="decr">DECREASE 200px</button><button id="incr">INCREASE 200px</button> </body> </html> JS: $(function() { $("#wids").text($("#test").width()); $("#test").hover(function() { $("#test").animate({width: '+=200.01px'}, 1000); setTimeout(function(){$("#wids").text($("#test").width())},1000); }); $("div").mouseleave(function() { $("#test").animate({width: '-=199.99px'}, 1000); setTimeout(function(){$("#wids").text($("#test").width())},1000); }); $("#test").click(function() { $("#wids").text($("#test").width()); }); $("p").click(function() { $("#wids").text($("#test").width()); }); $("#decr").click(function(){ $("#test").animate({width: '-=199.99px'}, 1000); setTimeout(function(){$("#wids").text($("#test").width())},1000); }); $("#incr").click(function(){ $("#test").animate({width: '+=200.01px'}, 1000); setTimeout(function(){$("#wids").text($("#test").width())},1000); }); });

4th Jan 2017, 12:57 PM

Bruno De Lucia