CODEWITHSUNDEEP
jqueryhtmlcssoverflowmarquee
Kelsey
Kelsey

Reputation: 921

Make JQuery Marquee When Text Overflows

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.

Upvotes: 1

Views: 2482

Answers (1)

Mikk3lRo
Mikk3lRo

Reputation: 3496

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>

Upvotes: 3

Related Questions