Question

I had a jquery/css question.

I was wondering if you knew how to make a link in a list item (one that is longer that its container) not wrap to a new line and instead stay on 1 single line and fade/cut off the overflowing rest of the link. Also, the link would “ticker” (right to left) across to show the remainder of the text when the user rolled over it (on hover).

Also, the text doesn’t have to be necessarily “faded out” but could just be cut off a few pixels from the edge of the container.

.list_wrapper li {
display: block;
height: 23px;
margin: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.list_wrapper li:last-child {
margin-bottom: 5px;
}

.list_wrapper li:nth-child(odd) {
background:#FAFAFA;
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #FAFAFA;
}

.list_wrapper li:nth-child(even) {
background:#FFFFFF;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}

.list_wrapper li:hover {
cursor: default;
background: #F3F3F3;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}

.list_wrapper a {
color: #145F92;
font: 400 11px/23px "Lucida Grande", tahoma, verdana, arial, sans-serif;
margin-left: 13px;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
transition: color .3s ease;
 }

.list_wrapper a:hover { text-decoration: underline; }

.article_list {
float:left;
display: block;
width:100%;
}

Have any ideas how I could achieve this?

Wanted look:

http://i1132.photobucket.com/albums/m563/carrako/link_face.jpg

Answer 1

To “cut off” the text, use the following CSS:

.list_wrapper li {
    overflow: hidden;
}

.list_wrapper li a {
    white-space: nowrap;
    position: relative; // Needed for the animation!
}

Then, for the “ticker”-animation, use an animation-framework, e.g. jQuery, to “move” the <a> element (animate the CSS left-property) when it’s hovered; but only, if offsetWidth of the element exceeds the width of the parent node (otherwise we don’t need to scroll). On mouseout, we stop the animation and move the element back.

Example, using jQuery:

$('.list_wrapper li a').mouseover( function() {
    if( this.offsetWidth > this.parentNode.offsetWidth ) {
        $(this).animate({'left': '-'+(this.offsetWidth)+'px'}, 5000, function(){this.style.left='0px';});
    }
} ).mouseout( function() {
    $(this).stop();
    this.style.left = '0px';
} );

For this JavaScript-Snippet to work, you would need to embed the jQuery-framework to your website. The snippet should be executed when the page finished loading: either you put it at the very end of your HTML (just before the </body>), or you trigger it window.onload.

For a running example, see here:
http://jsfiddle.net/z7V7d/2/

Edit: Actually, I don’t like doing the homework for others; but I had fun doing it so I guess it’s okay. I updated the code to your wishes. 😉