Skip to content

Instantly share code, notes, and snippets.

@pverhaert

pverhaert/jquery1ITF1.html

Created May 17, 2018 11:55
Show Gist options
  • Save pverhaert/666e65093f407839c1cf24cb535bffb2 to your computer and use it in GitHub Desktop.
Save pverhaert/666e65093f407839c1cf24cb535bffb2 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery 1ITF
Raw
jquery1ITF1.html
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<style>
.green {
background-color: greenyellow;
}
.orange {
background-color: orange;
}
.greyscale {
filter: grayscale(100);
transform: scale(1.5);
z-index: 1000;
}
.trans {
opacity: .5;
}
</style>
<title>Events</title>
</head>
<body>
<main class="container">
<h1>Events</h1>
<p><img id="topimg" src="http://via.placeholder.com/400x250" alt="Image placeholder" class="img-fluid"></p>
<hr>
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/400?1" alt="Foto 1">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam libero sequi
sunt suscipit veniam? Aperiam hic iusto laborum modi, nobis perferendis ratione voluptatem.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/400?2" alt="Foto 2">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Accusamus assumenda dignissimos iste magni minima. Adipisci asperiores
aspernatur aut, autem
consequatur cupiditate dolorum ducimus earum eius hic ipsa laboriosam minima natus.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/400?3" alt="Foto 3">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">necessitatibus nihil nostrum nulla quaerat quod ratione reprehenderit saepe
sint, sunt, veniam?
Dolorem, ipsam neque.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.card').hover(function () {
$('.card').addClass('trans');
$(this).removeClass('trans').addClass('greyscale');
}, function () {
$('.card').removeClass('trans greyscale');
});
/*$('.card').click(function () {
var x = $(this).parent().remove();
setTimeout(function () {
$('.card:first').parent().before(x);
}, 2000);
});*/
// $('.card-title').wrap('<div class="green">');
// $('.card-title').prepend(' +++ ').append(' <a href="#!">***</a> ');
/*setInterval(function () {
var x = rnd(3);
console.log('x', x);
var img = $('.row img:eq(' + x + ')').attr('src');
$('#topimg').attr('src', img);
}, 1000);*/
/*$('.btn').click(function () {
var img = $(this).closest('.card').find('img').attr('src');
$('#topimg').attr('src', img);
});*/
/*$('.btn').click(function () {
$(this).prev().slideToggle(1000);
});*/
/*$('.card:last').hover(function () {
$('.card:first').addClass('orange');
}, function () {
$('.card:first').removeClass('orange');
});*/
/*$('.btn').click(function () {
$(this).closest('.card').css('background-color', rgb());
//$('body').css('background-color', rgb());
});
setInterval(function () {
$('.btn').click();
}, 2000);*/
function rgb() {
var color = 'rgb(' + rnd(256) + ',' + rnd(256) + ',' + rnd(256) + ')';
//console.log('color', color);
return color;
}
function rnd(max) {
return Math.floor(Math.random() * max);
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment