JS newsticker issues

1 Views

I have a site that wanted a TV credits-style ticker & I just went back to revisit & check up on them & noticed that the display was starting to break down. I’m hoping that those of you more experienced JS veterans can help me figure out where I’ve gone wrong, here.

My JS is as follows:

Read More
$('.sidescroll').totemticker({
row_height  :   '120px',
next        :   '#ticker-next',
previous    :   '#ticker-previous',
stop        :   '#stop',
start       :   '#start',
mousestop   :   true 
});

jQuery(".sidescroll li").append("<hr />");

and the my CSS for it is as follows: 

.sidescroll {
    height: 100% !important;
    display: block;
}

.sidescroll li {
    margin: 10px;
    text-align: left;
    height: 120px;
}

.sidescroll hr {
     height: 3px; 
     border: 0; 
     box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}

.sidescroll li a {
    font-family: 'lulo' !important;
}

.sidescroll li a:hover {
    text-decoration: none;
    color: #5c4770;
}

The ticker is for their blog posts, sort of a running list of posts, which is being pulled by the list category plugin & is limited to 20 characters for the excerpt. The issue that I noticed was that the horizontal row is starting to interact with a couple of the posts, which was not the case when the site was set up.

Post Views: 1

Related posts

1 comment

  1. Turns out it’s fairly simple. There is sometimes too much content in the boxes and they overflow into the one below. Either too much text or the word wrapping is splitting over too many lines.

    Bonus (completely optional)

    We can elegantly suppress this behavior (assuming the use of CSS3 to generate a gradient).

    First we modify the javascript to insert the horizontal line as first child, then we insert a div with a class as a last child:

    jQuery(".sidescroll li").prepend('<hr />');
jQuery(".sidescroll li").append('<div class="fadeToWhite"></div>');

    Then we modify the css:

    .sidescroll {
    height: 100% !important;
    display: block;
}

.sidescroll li {
    margin: 10px;
    text-align: left;
    height: 120px;

    /* additions: */
    position: relative;
    overflow: hidden;
}

.sidescroll hr {
     height: 3px;
     border: 0;
     box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}

.sidescroll li a {
    font-family: 'lulo' !important;
}

.sidescroll li a:hover {
    text-decoration: none;
    color: #5c4770;
}

/* additions */
.sidescroll li div.fadeToWhite {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(transparent, white);
}

    This will hide any overflowing text while turning the additional div into a fade-to-white bar at the bottom of each list element to avoid a hard text-cut.

Comments are closed.