I have 3 identical divs and I want to add a class to one of those divs every 5 seconds one a rotating carousel type thing.
The following JSFiddle is what I have atm and I want the :hover styles to to be added to one of those divs every 5 seconds in a rotating sequence but still work as an on hover; JSFiddle
.action {
padding: 10px 50px 10px 10px;
background-color: #eaeaea;
color: #525454;
}
.action:hover {
background-color: #b5b5b5;
color: #000;
}
.action h3 {
margin: 0 0 10px 0;
}
.action .corner {
position: absolute;
width: 0;
height: 0;
border-bottom: 50px solid #db7575;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
}
.action:hover .corner {
border-bottom: 50px solid #CC0000;
}
.action i {
position: absolute;
margin-left: -20px;
margin-top: 27px;
color: #fff;
}
<div class="row">
<a href="#">
<div class="col-md-4 action">
<h3> Title 1 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="col-md-4 action">
<h3> Title 2 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="col-md-4 action">
<h3> Title 3 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
</div>
Something like this ?
http://jsfiddle.net/15od56d3/
CSS
.action:hover,.my_turn { background-color: #b5b5b5; color: #000;}
Javascript
var myTurn = 0;
setInterval(function(){
var i = 0;
$(".action").each(function(){
if(i==myTurn)
$(this).addClass("my_turn");
else
$(this).removeClass("my_turn");
i++;
});
myTurn = (myTurn + 1)%3 ;
},5000);
What I don't get in the accepted answer is that the carousel doesn't pause when the mouse hovers over an item. This is very confusing, especially since the same style is applied. I would create a jQuery object of the rows and use the available jQuery functions to walk over/select them and apply the a class for the hover instead of using the css property.
See the JSFiddle for a demo
var $rows = $('.action');
var $start= $rows.first(); // select one to start with (can be any of the elements in the set)
var $current = $start;
var interval;
var hover = function() {
$current.removeClass('hover');
$current = $rows.eq($rows.index($current)+1);
if (!$current.length) {
$current = $rows.eq($rows.index($start));
}
$current.addClass('hover');
};
The carousel should keep the expected direction and move on from where the hover-style was last applied; from the hovered element (as this is the most natural behavior imho):
$('.action').mouseover(function() {
window.clearInterval(interval);
$current.removeClass('hover');
$current = $(this).addClass('hover');
}).mouseout(function() {
interval = window.setInterval(hover, 2000);
});
$start.addClass('hover').mouseout(); // apply the class immediately to the first row
Related
I coded this:
$("#scroll-to-left-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x - 10);
});
$("#scroll-to-right-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x + 10);
});
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button id="scroll-to-left-button">Scroll to left</button>
<button id="scroll-to-right-button">Scroll to right</button>
You need to click the buttons pretty often to navigate through this container. Is there a way to let it based on the duration of the mouse press? Like if you keep the mouse pressed, it continues constantly scrolling? And if you stop, it stops.
Would be happy if someone could help me.
Here's a working solution. Also your code was a bit wet, so I refactored it a bit. You only need one mousedown event listener.
let interval;
$('.scroll-btn').on('mousedown', ({ target }) => {
const type = $(target).attr('id');
interval = setInterval(() => {
var x = $('#scroll-area').scrollLeft();
$('#scroll-area').scrollLeft(type === 'left' ? x - 10 : x + 10);
}, 50);
});
$('.scroll-btn').on('mouseout mouseup', () => clearInterval(interval));
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</div>
</div>
</div>
<button id="left" class="scroll-btn">Scroll Left</button>
<button id="right" class="scroll-btn">Scroll Right</button>
Well, the mousedown and mouseup make a good pair, although you have used only mousedown :)
Here's a sample how it could be done.
Note that there're couple other things that could be done to this code for it to look nicer:
.on(... is not probably needed, you could just write it as .mousedown(...
the code for the right and left buttons look really similar, you could unite these blocks in one and distinguish by an additional attrubute (let's say like move="10" for the right button and move="-10" for the left one, and then just getting this value in order to add it to scrollLeft)
var tmr;
$(".scroll-button").mousedown(function() {
//let's setup the timer here...
move = +$(this).attr("move");
tmr = setInterval(function(){
$("#scroll-area")[0].scrollLeft+=move;
}, 250)
});
$(".scroll-button").mouseup(function() {
// and destroy the timer here
clearInterval(tmr);
});
#container {
width: 50%;
height: 300px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button class="scroll-button" move="-10">Scroll to left</button>
<button class="scroll-button" move="10">Scroll to right</button>
I'm trying to replicate a input horizontal scroll on a div element, so whenever the user move along the input the div element scrolls exactly the same as the input.
My problem is with Chrome as it seems the input has a different scroll behavior, causing the scrollLeft value to be different in both elements. In Firefox it works as expected.
Is there any way to achieve this in Chrome without using jQuery or other libraries? or am I asking the impossible?
var theTextDiv = document.getElementById("the-text");
var theText = document.getElementById("the-text-input");
function keepScroll(txt) {
theTextDiv.scrollLeft = theText.scrollLeft;
}
theText.addEventListener("blur", function() { keepScroll("blur"); });
theText.addEventListener("change", function() { keepScroll("change"); });
theText.addEventListener("focus", function() { keepScroll("focus"); });
theText.addEventListener("input", function() { keepScroll("input"); });
theText.addEventListener("keydown", function() { keepScroll("keydown"); });
theText.addEventListener("keyup", function() { keepScroll("keyup"); });
theText.addEventListener("scroll", function() { keepScroll("scroll"); });
theText.addEventListener("select", function() { keepScroll("select"); });
#the-text {
border: 1px solid red;
max-width: 98px;
font-size: 14px;
overflow-x: scroll;
word-wrap: break-word;
white-space: nowrap;
font-family: "Times New Roman", Times, serif;
padding: 1px;
margin-right: 10px;
}
#the-text-input {
border: 1px solid red;
width: 100px;
font-size: 14px;
font-family: "Times New Roman", Times, serif;
}
<div id="the-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<input type="text" id="the-text-input" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
EDIT:
I tried the above code on Chrome 77 on a Mac and it works as expected, there's no gap between both elements, and I'm starting to think this is a Windows problem rather than a Chrome problem
EDIT(2):
After restarting my PC all work as expected (seriously) maybe some chrome cache was causing to have a weird behavior
This probably has to do with paddings and borders on the input and/or the div, and as it looks like it's working fine in Chrome 77, you either forgot to add some code in the example you posted or the default styles for those elements are also playing a role here.
In any case, my suggestion would be to remove margins, paddings and borders from both elements and adding a wrapping div with those instead (red example).
You can also use box-sizing: border-box, keep those styles and avoid the wrapper, but padding behaves differently in an input, as content in the padding area is not visible (blue example).
Lastly, your code to update the scroll was not working properly on blur, as when the event fires the scroll on the input hasn't been reset to 0 yet. Wrapping it with setTimeout or window.requestAnimationFrame solves the issue. Additionally, the latter will also make the update much smoother and in-sync.
const text = document.getElementById('text');
const input = document.getElementById('input');
function updateScroll() {
// Scroll not updated on blur without requestAnimationFrame
// or setTimeout:
requestAnimationFrame(() => text.scrollLeft = input.scrollLeft);
}
input.addEventListener('blur', updateScroll);
input.addEventListener('change', updateScroll);
input.addEventListener('focus', updateScroll);
input.addEventListener('input', updateScroll);
input.addEventListener('keydown', updateScroll);
input.addEventListener('keyup', updateScroll);
input.addEventListener('scroll', updateScroll);
input.addEventListener('select', updateScroll);
const textAlternative = document.getElementById('text-alternative');
const inputAlternative = document.getElementById('input-alternative');
function updateScrollAlternative() {
// Scroll not updated on blur without requestAnimationFrame
// or setTimeout:
requestAnimationFrame(() => textAlternative.scrollLeft = inputAlternative.scrollLeft);
}
inputAlternative.addEventListener('blur', updateScrollAlternative);
inputAlternative.addEventListener('change', updateScrollAlternative);
inputAlternative.addEventListener('focus', updateScrollAlternative);
inputAlternative.addEventListener('input', updateScrollAlternative);
inputAlternative.addEventListener('keydown', updateScrollAlternative);
inputAlternative.addEventListener('keyup', updateScrollAlternative);
inputAlternative.addEventListener('scroll', updateScrollAlternative);
inputAlternative.addEventListener('select', updateScrollAlternative);
body {
margin: 0;
}
.box {
position: relative;
display: block;
width: 50%;
box-sizing: border-box;
/* Moved styles here: */
border: 3px solid red;
padding: 8px;
margin: 8px auto 0;
}
#text,
#input,
#text-alternative,
#input-alternative {
display: block;
width: 100%;
font-size: 14px;
font-family: monospace;
outline: none;
}
#text,
#input {
/* Removed margin, padding and borders: */
border: 0;
padding: 0;
margin: 0;
}
#text-alternative,
#input-alternative {
width: 50%;
box-sizing: border-box;
/* Keep styles here thanks to box-sizing, but behaves differently: */
border: 3px solid blue;
padding: 8px;
margin: 8px auto 0;
}
#text,
#text-alternative {
word-wrap: break-word;
white-space: nowrap;
/* No need to keep it visible unless you want to scroll manually too: */
overflow-x: hidden;
}
<div class="box">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<label class="box">
<input id="input" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
</label>
<div id="text-alternative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<input id="input-alternative" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
I have an unordered list of over 10 list items which I need to add mouse events to. The onMouseover and onMouseout works just with the first list item but does not work with all the other list item. I need the mouse events to work on all the lists
const showSlideElement = (myID) => {
document.querySelector(myID).style.display = 'block';
document.querySelector('.services-box').style.height = '110px';
}
const hideElement = (myID) => {
document.querySelector(myID).style.display = 'none';
document.querySelector('.services-box').style.height = '26px';
}
.slideList {
width: 100%;
}
.slideList li {
position: relative;
}
.slideList .service-highlight {
background-color: #0088ff;
position: absolute;
color: white;
bottom: 0;
left: 0;
right: 0;
}
.slideList .service-highlight p {
display: inline-block;
color: white;
font-size: 18px;
font-weight: bold;
}
.slideList .service-highlight .services-box {
text-align: center;
background-color: #003768;
width: 270px;
font-weight: bold;
float: left;
}
.slideList .service-highlight .services-detail {
width: calc(100% - 270px);
float: left;
padding-left: 5px;
}
.slideList .hide-description {
display: none;
font-weight: normal;
}
.slideList .hide-description p {
font-weight: normal;
padding-top: 10px 5px 10px;
}
<ul class="slideList">
<li data-transition="fade">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="" width="1920" height="630">
<div class="service-highlight" onMouseover='showSlideElement(`.hide-description`)' onMouseout='hideElement(`.hide-description`)'>
<p class="services-box">SOME SERVICES:</p>
<div class="services-detail">
<p>The service headline</p>
<div class="hide-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
</li>
<li data-transition="fade">
<img src="https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg" alt="" width="1920" height="630">
<div class="service-highlight" onMouseover='showSlideElement(`.hide-description`)' onMouseout='hideElement(`.hide-description`)'>
<p class="services-box">SOME SERVICES:</p>
<div class="services-detail">
<p>The service headline</p>
<div class="hide-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
</li>
</ul>
This can all be achieved using simple CSS:
.hide-description {
display: none;
}
.services-box {
height: 26px;
background: #0bf;
transition: 0.4s;
}
.service-highlight:hover .hide-description {
display: block;
}
.service-highlight:hover .services-box {
height: 110px;
}
<div class="service-highlight">
<p class="services-box">SOME SERVICES:</p>
<div class="services-detail">
<p>The service headline</p>
<div class="hide-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
I'm currently working on an image slider for my company's new homepage and just can't figure out the error that seems to lie in the javascript part ..
The slider contains 4 images and should, as soon as the last image is reached, begin at the first image again. The problem is that the images are displayed in that order "1-2-1-2-3-4-1-2-3-4..."
Here the code:
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
$('#next').on('click', nextSlide);
$('#prev').on('click', prevSlide);
// Auto slider
if (options.autoswitch === true) {
setInterval(nextSlide, options.autoswitch_speed);
}
function nextSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.prevActive').next().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
function prevSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.prevActive').prev().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
});
and the corresponding CSS:
#slider-container {
height: 600px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
position: relative;
width: 800px;
}
#sldier {
height: 100%;
width: 100%;
}
#slider .slide img {
height: 100%;
width: auto;
}
#prev, #next {
cursor: pointer;
max-width: 30px;
opacity: 1;
position: absolute;
top: 8%;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
z-index: 999;
}
#prev { left: 12px; }
#next { right: 3px; }
#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }
.slide {
position: absolute;
width: 100%;
}
.slide-copy {
background: #777;
background: rgba(0, 0, 0, .5);
bottom: 0;
color: #fff;
left: 0;
padding: 20px;
position: absolute;
}
#media (min-width: 600px) {
#prev, #next {
top: 45%;
}
}
and the HTML
<div id="slider-container">
<img src="img/arrowprev" id="prev" alt="prev">
<ul id="slider">
<li class="slide">
<div class="slide-copy">
<h2>Placeholder</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
</ul>
<img src="img/arrownext" id="next" alt="next">
</div>
Maybe it has something to do with
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
I just can't figure out the problem and would appreciate any help.
Thank you in advance :)
This is the page I took as source:
https://www.jqueryscript.net/slider/Tiny-jQuery-Image-Slider-Slideshow-With-Caption-Support.html
I found the fail, the unique thing it wasn't working, is the apply of visibility on each prevActive and active elements on each next/prev actions, so I've added this lines to both functions:
$('.prevActive').hide();
$('.active').show();
(Also I've commented the lines referencing to options variable, as is not defined in the description).
You can see the fiddle working here:
https://jsfiddle.net/a4bssrf5/8/
I am trying to figure out the best way to JSONify a set of repeated HTML that I have with me.
I have the following piece of code that gets repeated for "n" number of times.
<article class="style2">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3>This is my first article</h3>
<div class="meta">
<span>by Benjamin K.</span>
<span>on Sep 23, 2016</span>
<span class="comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
Read More
</div>
</div>
</div>
</article>
I want to create a template, something like this (suggestions welcome)
<article class="style2">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="">
<div class="article-thumb">
<img src="" class="img-responsive" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3></h3>
<div class="meta">
<span>by </span>
<span></span>
<span class="comment"><i class="fa fa-comment-o"></i> </span>
</div>
<p></p>
Read More
</div>
</div>
</div>
</article>
and then dynamically generate this element based on a JSON file. The contents of the JSON will be similar to the following:
url = http://www.google.com
image = https://place-hold.it/370x231/5
title = This is my first article
author = Benjamin K.
date = Sep 23, 2016
abstract = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
comments = 1
CodePen https://codepen.io/iwant2learn/pen/PEmBMN
Thanks in advance for any help!
If your "template" really is fixed (no variants) and quite simple as what you posted... The .clone() method may be an interest for you.
Yes... As mentionned in comments, there is templating libs that exist. You should also look. But a simple way to do it by yourself, using just one jQuery method, is to give each of your template "field" a class.
Then populate a clone of your template with the jsons you have and append it to the document.
Notice the ".template" class I added in your CSS to hide the template.
var myJSONarray = [
{
url : "http://www.google.com",
image : "https://place-hold.it/370x231/5",
title : "This is my first article",
author : "Benjamin K.",
date : "Sep 23, 2016",
abstract : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
comments : 1
},{
url : "https://learn.jquery.com/",
image : "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
title : "This is my first script!!!",
author : "J. Q. Harry",
date : "Dec 31, 2017",
abstract : "You can do what you want, if you are a bit creative, my friend.",
comments : 172
}
];
$(document).ready(function(){
for(i=0;i<myJSONarray.length;i++){
var clone = $(".template").clone();
clone.find(".template-url").attr("href",myJSONarray[i].url);
clone.find(".template-title").find("a").html(myJSONarray[i].title);
clone.find(".template-image").attr("src",myJSONarray[i].image);
clone.find(".template-author").html(myJSONarray[i].author);
clone.find(".template-date").html(myJSONarray[i].date);
clone.find(".template-abstract").html(myJSONarray[i].abstract);
clone.find(".template-comment").html('<i class="fa fa-comment-o"></i> '+myJSONarray[i].comments);
clone.removeClass("template");
$(".template-spot").append(clone);
}
});
.template{
display:none;
}
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.inner-content {
padding: 50px 0 57px;
}
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
.section-head {
margin-bottom: 22px;
}
.section-head h2 {
font-weight: 300;
}
article.style2 {
padding-bottom: 30px;
margin-bottom: 30px;
}
article {
border-bottom: 1px solid #eeeeee;
padding-bottom: 15px;
margin-bottom: 30px;
}
article .article-thumb {
position: relative;
overflow: hidden;
background: #fff;
}
article:hover .article-thumb {
background: #000;
}
article .article-thumb img {
width: 100%;
}
article .article-thumb img {
}
article .article-thumb:hover img {
}
article .post-excerpt {
padding: 9px 0;
}
article .meta {
margin-top: 2px;
}
.meta span {
font-size: 14px;
color: #787878;
}
a.link:hover, a {
color: #333;
}
a.link, a:hover {
color: #33ccff;
}
.small-title {
font-size: 10px;
letter-spacing: 0.10em;
font-weight: bold;
line-height: 18px;
color: #333333;
margin-bottom: 5px;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner-content">
<div class="container">
<div class="section-head">
<h2>Latest Bits</h2>
</div>
<div class="row">
<div class="col-md-8 template-spot">
<article class="style2 template">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com" class="template-url">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3 class="template-title">This is my first article</h3>
<div class="meta">
<span>by Benjamin K.</span>
<span class="template-date">on Sep 23, 2016</span>
<span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
Read More
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
CodePen (Updated with an infinite scroll)
var myJSONArray = [{
url: "http://www.google.com",
image: "https://place-hold.it/370x231/5",
title: "This is my first article",
author: "Benjamin K.",
date: "Sep 23, 2016",
abstract: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
comments: 1
}, {
url: "https://learn.jquery.com/",
image: "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
title: "This is my first script!!!",
author: "J. Q. Harry",
date: "Dec 31, 2017",
abstract: "You can do what you want, if you are a bit creative, my friend.",
comments: 172
}];
$(document).ready(function() {
for (const val of myJSONArray) {
var clone = $(".template").clone();
clone.find(".template-url").attr("href", val.url);
clone.find(".template-title").find("a").html(val.title);
clone.find(".template-image").attr("src", val.image);
clone.find(".template-author").html(val.author);
clone.find(".template-date").html(val.date);
clone.find(".template-abstract").html(val.abstract);
clone.find(".template-comment").html(`<i class="fa fa-comment-o"></i> ${val.comments}`);
clone.removeClass("template");
$(".template-spot").append(clone);
}
});
.template {
display: none;
}
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.inner-content {
padding: 50px 0 57px;
}
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
.section-head {
margin-bottom: 22px;
}
.section-head h2 {
font-weight: 300;
}
article.style2 {
padding-bottom: 30px;
margin-bottom: 30px;
}
article {
border-bottom: 1px solid #eeeeee;
padding-bottom: 15px;
margin-bottom: 30px;
}
article .article-thumb {
position: relative;
overflow: hidden;
background: #fff;
}
article:hover .article-thumb {
background: #000;
}
article .article-thumb img {
width: 100%;
}
article .article-thumb img {}
article .article-thumb:hover img {}
article .post-excerpt {
padding: 9px 0;
}
article .meta {
margin-top: 2px;
}
.meta span {
font-size: 14px;
color: #787878;
}
a.link:hover,
a {
color: #333;
}
a.link,
a:hover {
color: #33ccff;
}
.small-title {
font-size: 10px;
letter-spacing: 0.10em;
font-weight: bold;
line-height: 18px;
color: #333333;
margin-bottom: 5px;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner-content">
<div class="container">
<div class="section-head">
<h2>Latest Bits</h2>
</div>
<div class="row">
<div class="col-md-8 template-spot">
<article class="style2 template">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com" class="template-url">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt="" />
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3 class="template-title">This is my first article</h3>
<div class="meta">
<span>by Benjamin K.</span>
<span class="template-date">on Sep 23, 2016</span>
<span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
Read More
</div>
</div>
</div>
</article>
</div>
</div>
Same as what Louys did but used for..of loop as it's cleaner.