3

Hi I have successfully made a marquee transition in css3 which scrolls my sql data from my website and database but the only issue I have is that I would like it so there is never any space under it and it constantly keeps going can anybody help please below is my code and css

Live Preview Here

Thanks in advance

  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
  animation-name: marquee;
  -webkit-animation-name: marquee; 
  animation-duration: 60s;
  -webkit-animation-duration: 60s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count:infinite;
  animation-direction:normal;
  -webkit-animation-direction:normal;
    #marquee:hover {
     -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

@keyframes marquee {
  from { top: 100%; }
  to { top: 0%; }
}
}

@-webkit-keyframes marquee {
    from {top: 100%;}
    to {top: 0%;}
 }
<div id="main">
        <div class="marquee">
          <?php
require('connect.php');
$run = mysql_query("SELECT * FROM comment ORDER BY id DESC");

 $numrows = mysql_num_rows($run);
 if($numrows > 0){
  while($row = mysql_fetch_assoc($run)){
  $dbname = $row['name'];
  $dbrating = $row['rating'];
  $dbwebsite = $row['website'];
  $dbservice = $row['service'];
        $dbdate = $row['postdate'];
  $dbcomment = $row['comment'];
  $newDate = date("l dS F Y", strtotime($dbdate));
?>   

<div id="commenttop">
 <div id="userdetails"><?php echo "{$dbname} - {$dbservice}" ?></div>
  <div id="rating">
  <?php 
if ($dbrating == 1) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" />';
}

if ($dbrating == 2) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 3) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 4) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 5) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" />';
}
?>
  </div>
</div>

<div id="commentbtm"><?php echo "$dbcomment"?>
<div id="date"><?php echo $newDate?></div>
</div>

<?php 
        }
 }
 else
  echo "No Comments Found";
?>

        </div>
        </div>
RicPurcell
  • 86
  • 12

1 Answers1

0

I could not find or recode a solution to this original query using css3 so instead I decided to go with Javascript and it works exactly how I wanted it too :) for those of you that may have a solution to the original post for future reference please do let me know thankyou below you will find the code I used for those of you wishing to do similar good luck.

<script>
window.addEventListener('load', function () {
    function go() {
        i = i < height ? i + step : 1;
        m.style.marginTop = -i + 'px';
    }
    var i = 0,
        step = 3,
        space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    var m = document.getElementById('marquee');
    var t = m.innerHTML; //text
    m.innerHTML = t + space;
    m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
    var height = (m.clientHeight + 1);
    m.style.position = '';
    m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
    m.addEventListener('mouseenter', function () {
        step = 0;
    }, true);
    m.addEventListener('mouseleave', function () {
        step = 3;
    }, true);
    var x = setInterval(go, 50);
}, true);
</script>
#marquee {
  border:1px solid #007df8;
  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
}
<div id="main">  
        <div id="marquee"> 
        <div>  
          <?php  
require('connect.php');  
$run = mysql_query("SELECT * FROM comment ORDER BY id DESC");  

    $numrows = mysql_num_rows($run);  
    if($numrows > 0){  
        while($row = mysql_fetch_assoc($run)){  
        $dbname = $row['name'];  
        $dbrating = $row['rating'];  
        $dbwebsite = $row['website'];  
        $dbservice = $row['service'];  
        $dbdate = $row['postdate'];  
        $dbcomment = $row['comment'];  
        $newDate = date("l dS F Y", strtotime($dbdate));  
?>              

<div id="commenttop">  
 <div id="userdetails"><?php echo "{$dbname} - {$dbservice}" ?></div>  
  <div id="rating">  
  <?php   
if ($dbrating == 1) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" />';  
}  

if ($dbrating == 2) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 3) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 4) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 5) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" />';  
}  
?>  
  </div>  
</div>  

<div id="commentbtm"><?php echo "$dbcomment"?>  
<div id="date"><?php echo $newDate?></div>  
</div>  

<?php      
        }  
    }  
    else  
        echo "No Comments Found";  
?>  
        </div> 
        </div>  
        </div>
RicPurcell
  • 86
  • 12