javascript - How to scroll div contents vertically in a loop like news feed in php page -
i'm making php webpage right , have little "news" div on right. has auto scrolling vertical text page loads. but, 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 * newsfeedtest order 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"> = 0 var speed = 1 function scroll() { = + speed var div = document.getelementbyid("news") div.scrolltop = if (i > div.scrollheight - 160) {i = 0} t1=settimeout("scroll()",100) } </script> </body> </html> also, can possible on mouseover stop scroll , on mouse out scrolling starts continue in loop. i've tried searching correct code, nothing has worked far.
" i'm frustrated ! "
any immensely appreciated!
here's simple solution can come - achieve want, , adjust css code define (so if change height in css, script won't have altered).
var = 0; $(document).ready(function(){ var interval = setinterval(function () { += 4; // speed $('#container').animate({ scrolltop: }, 1); if (i >= $('#container').prop('scrollheight') - $('#container').height()) { = 0; } }, 100); });#container { background-color: #000; color: #fff; height: 180px; overflow: hidden; padding: 5px 20px; width: 350px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> </div>note have set "speed" 4 quicker reviewing of result - change 1 outcome wanted. put absolutely in it's correct place, meaning have no inline styles or inline scripts, way easier maintain in project more grows.
also, in order wrap run-able snippet, omitted php code, generation same you've had in example, except you'll need #container element around context.
Comments
Post a Comment