Menu
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!
837
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
We can use a combination of overflow-x and overflow-y to place the scrollbar vertically, horizontally, or both. For the vertical scrollbar, overflow-x:hidden and overflow-y:auto will be set in the CSS file, and vice versa for the horizontal scrollbar.
To fit all the text inside the div, the bi-directional scrolling method will be used. You can apply it by placing the overflow:scroll and white-space:nowrap in the id lifestyle inside the style tag. Notice the scroll bar at the bottom and right side of the div .
Just use overflow: auto . Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified.
Here's the most simple solution I can come up with - it will achieve what you want, and also adjust to the CSS code you define (so if you change your height in CSS, the script won't have to be altered).
var i = 0;
$(document).ready(function(){
var interval = setInterval(function () {
i += 4; // speed
$('#container').animate({ scrollTop: i }, 1);
if (i >= $('#container').prop('scrollHeight') - $('#container').height()) {
i = 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. At 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. At 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. At 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. At 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 that I have set the "speed" to 4 for quicker reviewing of the result - change it to 1 for the outcome you wanted. I also put absolutely everything in it's correct place, meaning have no inline styles or inline scripts, which will be way easier to maintain in your project the more it grows.
Also, in order to wrap everything into a run-able snippet, I omitted the PHP code, but the generation is essentially the same as you've had it in your example, except you'll need the #container element around it for context.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
