nethken nethken - 4 months ago 10
jQuery Question

Put a scrollbar to a div and put the fetched data inside it

Hello i want to put a scroll bar to my div and put all the fetch data inside it. Can someone help me and give me ideas how to do it? im just starting to learn php and html.

here is the example of what i want to do. exactly the same.
enter image description here

and here is my work. i want to put a scrollbar to the 3 divs, the events, the news, and the announcements.
enter image description here

here is the code of news, events, and the annoucements.

<div class="content">
<div class="container">
<div class="row">

<div class="col-xs-12 col-md-9">
<div class="fix leftbar floatleft">
<div class="fix left_sidebar">
<div class="news">
<h2><i class="fa fa-newspaper-o"></i> Latest News</h2>
<hr class="carved">


<?php
include_once('connection.php');
$sql ="SELECT * FROM news ORDER BY news_id ASC limit 4";
$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($result)){
$title = $row['news_title'];
$date = $row['news_date'];
$content = $row['news_content'];
$newsimage = $row['news_image'];
?>
<div class="fix single_news">
<div class="single_image">
<img src="<?php echo $newsimage; ?>" alt="court">
</div>
<a href="#"><?php echo $title; ?></a>
<p><?php echo $date; ?></p>
<p><?php echo $content; ?></p>
</div>
<hr>
<?php
}
?>


<a href="#" class="view_news">View More News</a>

</div>
</div>
</div>
</div>

<div class="col-xs-6 col-md-3">
<div class="fix sidebar floatright">
<div class="fix single_sidebar">
<div class="events">
<h2><i class="fa fa-calendar"></i> Upcoming events</h2>
<hr class="carved">
<div class="fix single_events">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Independence Day</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_events">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>New Year</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_events">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Thesis Defense</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<a href="#" class="view_calendar">View Academic Calendar</a>
</div>
</div>
</div>
</div>

<div class="col-xs-6 col-md-3">
<div class="fix bottombar floatright">
<div class="fix bottom_bar">
<div class="announcements">
<h2><i class="fa fa-bullhorn"></i> Announcements</h2>
<hr class="carved">
<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<div class="fix single_announce">
<a href="#">Sample Announcements</a>
</div>

<hr>
<a href ="#" class="view_announcements">View more announcements</a>

</div>
</div>
</div>
</div>


</div>

</div>
</div>

Answer

If you want the div to scroll, set the height and overflow to scroll

.scrollDiv{
    display:block;
    max-height:150px; /*Put your maximum height here*/
    overflow-y:scroll; /*Tell it to scroll if the content is larger than max-height*/
}
Comments