Reputation: 23

text-overflow:ellipsis scrolling text on hover

I'm trying to implement a horizontal text scroll for the div that contains the first-row line of text in my code (there will be lots of rows)... It should be scrolling in a loop as long as it's hovered or in focus, and only if the text is truncated. If it's not, then no need for scrolling on that row.

P.S: There's some extra CSS, don't bother with that... I need it for the other parts of the page.

<style>
table {

    background-color: #EFEFEF;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
}

table, td, th {
    border: 0px;
}

tr:nth-child(even) {background-color: #FBFBFB;}


th, td {
    padding: 0px;
}

tr:hover {
          background-color: #F2F4EB;
        }

.relpack-genre {
    margin-top: -7px;
    margin-bottom: 5px;
    font-size:13px;
    color:#777777;
}

.relpack-like {
    width: 15%;
    text-align: right;
    height: 24px;
    vertical-align: middle;
    padding-right:10px;
    cursor: pointer;
}

.relpack-session{
    margin: 5px 0 0 5px;
    white-space: nowrap;
    text-overflow: ellipsis;

}
.relpack-art-cover {
    display: flex;      
    width:200px;
    overflow: hidden;
    position: relative;
    }

.clicked {
        color : chartreuse; 
    }

span.like-count .fa-thumbs-up:before{

    margin-right:5px;

    }


.widget-container .relpack-genre{
      margin-top: 0;
}
.like-count .far{
font-family: 'Font Awesome 5 Free','Roboto';
}
</style>

<table style="table-layout: fixed;">
  <tbody>
    <tr style="height: 24px;">
                <td class="relpack-art-cover">
                  <div class="relpack-session">
                      <div>This text should be scrolling horizontally when it's hovered or in focus.</div>
                      <div>second text</div>
                  </div>
                </td>
    </tr>
     <tr style="height: 24px;">
                <td class="relpack-art-cover">
                  <div class="relpack-session">
                      <div>This text should be scrolling horizontally when it's hovered or in focus.</div>
                      <div>second text</div>
                  </div>
                </td>
    </tr>
     <tr style="height: 24px;">
                <td class="relpack-art-cover">
                  <div class="relpack-session">
                      <div>This shouldn't scroll,as it fits.</div>
                      <div>second text</div>
                  </div>
                </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Answers (2)

Wex

Reputation: 23

I've managed to do it myself (spend half a day, lol)

Here's the script I used: codepen.io/Daryl_Ross/pen/ZEYwYaw

Thank you for all the people who tried to help!

Upvotes: 1

Gourav Saini

Reputation: 677

Try this way....

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
<style>
    table {
    
        background-color: #EFEFEF;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
        -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
    }
    
    table, td, th {
        border: 0px;
    }
    
    tr:nth-child(even) {background-color: #FBFBFB;}
    
    
    th, td {
        padding: 0px;
    }
    
    tr:hover {
              background-color: #F2F4EB;
            }
    
    .relpack-genre {
        margin-top: -7px;
        margin-bottom: 5px;
        font-size:13px;
        color:#777777;
    }
    
    .relpack-like {
        width: 15%;
        text-align: right;
        height: 24px;
        vertical-align: middle;
        padding-right:10px;
        cursor: pointer;
    }
    
    .relpack-session{
        margin: 5px 0 0 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    
    }
    .relpack-art-cover {
        display: flex;      
        width:300px;
        overflow: hidden;
        position: relative;
        }
    
    .clicked {
            color : chartreuse; 
        }
    
    span.like-count .fa-thumbs-up:before{
    
        margin-right:5px;
    
        }
    
    
    .widget-container .relpack-genre{
          margin-top: 0;
    }
    .like-count .far{
    font-family: 'Font Awesome 5 Free','Roboto';
    }
    .relpack-session:hover .scroll {
        animation: sweep 3s linear infinite;
    }
    @keyframes sweep {
        0% {
            transform: translate(10%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
    }
    </style>
    
    <table style="table-layout: fixed;">
      <tbody>
        <tr style="height: 24px;">
                    <td class="relpack-art-cover">
                      <div class="relpack-session">
                          <div>This text should be scrolling horizontally when it's hovered or in focus.</div>
                          <div>second text</div>
                      </div>
                    </td>
        </tr>
         <tr style="height: 24px;">
                    <td class="relpack-art-cover">
                      <div class="relpack-session">
                          <div>This text should be scrolling horizontally when it's hovered or in focus.</div>
                          <div>second text</div>
                      </div>
                    </td>
        </tr>
         <tr style="height: 24px;">
                    <td class="relpack-art-cover">
                      <div class="relpack-session">
                          <div id="short">This shouldn't scroll,as it fits.</div>
                          <div>second text</div>
                      </div>
                    </td>
        </tr>
      </tbody>
    </table>

<script>
    
    $( ".relpack-session div" ).each(function() {
        if ($(this)[0].scrollWidth >  $(this).innerWidth()) {
            $(this).addClass("scroll")
            $(this).css("border", "1px solid transparent")
        }
    });

</script>
</body>
</html>

Upvotes: 1

text-overflow:ellipsis scrolling text on hover

Answers (2)

Related Questions