Vir Vir - 4 months ago 53
HTML Question

How to scroll div contents vertically in a loop like news feed in php page

I'm making a Php webpage right now and would like to have a little "News" DIV on the right. that has auto scrolling vertical text as soon as the page loads. But, the below code not working in php page.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous">
</script>

<style>
span
{
display:block;
width:350px;
word-wrap:break-word;
}

.display
{
height:200px;
border:none;
overflow: hidden;
padding:5;
}
</style>

</head>

<body onLoad="scroll()" style="background-color: black;">

<!---***************** Php Code Start ************************--->
<?php

error_reporting(E_ALL ^ E_DEPRECATED);

//********************* DB Configuration Code *********************
ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'xxxx');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'MyDb');

$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());

//************** Selection of Data *********************
$select=mysql_query("SELECT * FROM newsfeedtest order by created asc");
$i=1;

//************* Display Data *********************
while($userrow=mysql_fetch_array($select))
{

$id=$userrow['id'];
$usernews=$userrow['news'];
$created=$userrow['created'];

//******** Div Displays Data *******
echo '<div class="display" id="news" style="width:350px; margin-bottom:-20px;">

<!-------------------- News : --------------------------------->
<p style="color:#fff;">
<span style="color: #fff;font-size:17px;">'.$usernews.'</span> </p><br />

</div>';
}

//********************* End of Php Code *********************
?>


<script language="javascript">
i = 0
var speed = 1
function scroll()
{
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) {i = 0}
t1=setTimeout("scroll()",100)
}
</script>

</body>

</html>


Also, can it possible that on Mouseover to stop the scroll and on mouse out scrolling starts continue in a loop.
I've tried searching for the correct code, but nothing has worked thus far.

" I'm just so frustrated now ! "

Any help would be immensely appreciated!

Vir Vir
Answer

I use marquee with some its properties and the problem is solved !

  <marquee behavior="scroll" height="50px" scrollamount="1"  direction="up" onmouseover="this.stop();" onmouseout="this.start();">

  <!---*********************** Php Code Start ***************************--->
       <?php

         //********** Php code goes here ***********

       ?>
  <!---******************** Php Code End ********************************--->

   </marquee>
Comments