Make JQuery Marquee When Text Overflows

StackOverflow https://stackoverflow.com/questions/23641244

Question

I am trying to make a Jquery script that will place marquee tags around text if it overflows outside of the #box div. The text is obviously wider than 30px, and the div does hide most of the text. My problem is the marquee effect is not appearing. Here is my full code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#box {
    width:30px;
    overflow:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>

<div id="box">
Overflooooooooooow
</div>

<script>

$(function(){
  $box = $('#box');
  $box.children().each(function(){
    if ($box.width() < $(this).width()) {
      $(this).wrap('<marquee>');
    }
  });
});
</script>
</body>
</html>

Thank you for any help. All help is appreciated.

Was it helpful?

Solution

The text inside the div is just a text-node, not an element you can get the width of. Just add an inner block-element:

<div id="box">
   <div>Overflooooooooooow</div>
</div>

Edit:

Sorry, won't work with an inner div, as it inherits the parents width by default. Use a span:

<div id="box">
   <span>Overflooooooooooow</span>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top