I am in the process of developing a rails app where I would like to include a side div for displaying news updates in a vertical feed style. I have made some progress with the layout, but now I am facing issues with finding a suitable news-ticker plugin that actually works.
<%#= page.html.erb %>
<%= stylesheet_link_tag 'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'welcomeindex' %>
<div class="row">
<div class="jumbotron col-lg-10 col-md-12" style="background-color:grey;"></div>
<div class="jumbotron col-lg-2 col-md-12">
<div id="newsFlash" class="updates">NEWS</div>
<div id="newsPosts" class="">
<%#= it will go in loop manner %>
<% for i in 0..90 do %>
<div class="card">
<div class="card-body">
Here update will go
</div>
</div>
<% end %>
</div>
</div>
</div>
welcomeindex.js
//= require application
$(function() {
blinkeffect('#newsFlash');
})
function blinkeffect(selector) {
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
blinkeffect(this);
});
});
}
welcomeindex.css
*= require bootstrap
*= require application
.jumbotron{
height: calc(100vh - 78px);
min-height: calc(100vh - 155px);
//overflow: hidden;
}
.jumbotron{
margin-bottom: 0px;
}
@media (max-width: 991px) {
.jumbotron{
height: 100%;
}
}
div.jumbotron.col-lg-2.col-md-12{
padding: 2rem 1rem;
}
.updates{
text-align: center;
background-color: transparent;
border: none;
}
#newsFlash{
color: red;
}
Any suggestions on how to achieve this using CSS and jQuery?