CODEWITHSUNDEEP
jquerycss
ShrimpWonder
ShrimpWonder

Reputation: 61

How can I make content slide horizontally only if it overflows parent div?

Client wants a random quote to show on the front page every time a user loads the page. Some of the quotes are too long, and design-wise we don't want the quotes to take up more than one line. What I want to do is make the quotes move horizontally if it is too long for the parent div and then loop back around, like a news ticker.

I was given a script that checks if the content overflows, but the script doesn't seem to be working properly, see here

And the relevant code:

HTML:

<div class="frases_wrapper" style="width: 960px; height: 20px; background-color: black;">
  <div class="frases" style="white-space: nowrap; position: relative; overflow: hidden; color: white; width: 958px;"></div>
</div>

JS:

$(document).ready(function () {

  var pageWidth = $("div.frases_wrapper").width();
  var elementWidth = $("div.frases").width();
  var elementLeft = $("div.frases").position().left;

  if (pageWidth - (elementWidth + elementLeft) < 0) {
    alert("overflow!");
  } else {
    alert("doesn't overflow");
  }

});

Upvotes: 0

Views: 821

Answers (2)

ShrimpWonder
ShrimpWonder

Reputation: 61

I know that the original post made it seem like I was only asking about how to fix the JS that checks for overflow, but I was also asking how to give the text a marquee effect when it overflows its parent element.

After a lot of trial and error, I have found a decent solution. You can see a working example here

And the code is:

HTML:

<div class="quotes_wrapper">
    <div class="quotes">
            Flab flee wheezer doo ingle wheezer twaddle ha shnozzle. Ding duh wobble! Tizzle boo wobble ha dabba flong hum flee? Hum shnizzle zangle twaddlefl.
    </div>

CSS:

div.quotes_wrapper {
width: 960px;
height: 20px;
background-color: black;
overflow:hidden;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
}

div.quotes {
    white-space: nowrap;
    position: relative;
    color: white;
    float:left;
}

.marquee{
-webkit-animation: marquee 30s infinite linear 3s;
}

@-webkit-keyframes marquee{
  0% {left: 0px;}
50% {left: -1920px;color:white}
51%{color:black}
53%{left:1000px}
54%{color:white}
100%{left: 0px;}
}

JS (using JQuery):

$(document).ready(function() {
    var pageWidth = $("div.quotes_wrapper").width();
    var elementWidth = $("div.quotes").width();
    var elementLeft = $("div.quotes").position().left;

    if(pageWidth - (elementWidth + elementLeft) < 0){
      $("div.quotes").addClass("marquee");
    } else {
      console.log("No overflow");
    }
  });

The animation itself needs adjusting depending on the content.

Upvotes: 0

showdev
showdev

Reputation: 29168

I'm not sure how you are handling the horizontal scrolling, so my answer may not completely solve your issue. However, here's what I've noticed:

It looks like div.frases has a hard-coded width of 958px.

That prevents the div from ever expanding beyond the width of its wrapper, which is necessary for horizontal scrolling.

In order to determine the width of that element as defined by its content, you may want to "shrink wrap" that element by floating it left: float:left. (There are other methods of "shrink wrapping" if floating doesn't work for your application.)

Also, move overflow:hidden from div.frases to div.frases_wrapper in order to limit the visible content to the width of the wrapper.

So, your CSS definitions would look like this:

div.frases_wrapper {
  width: 960px;
  height: 20px;
  background-color: black;
  overflow: hidden; /* ADDED */
}

div.frases {
  white-space: nowrap;
  position: relative;
  color: white;
  float:left;
  /*width: 958px; REMOVED */
  /*overflow: hidden; REMOVED */
}

EDIT:

Here is a working example based on the code you provided.

Try adjusting the length of the text content so that it does/doesn't overflow.

Upvotes: 1

Related Questions