While I may not be a CSS expert, I've almost got this code working the way I want it to. My goal is to create a simple page that cycles through a PowerPoint deck exported as .jpgs with just two buttons for navigation and fullscreen display of the images.
The main issue I'm facing is that the top portion of the image keeps getting cropped, even after adjusting the padding. It displays correctly at times but gets clipped when switching between images. Any suggestions on how to fix this would be greatly appreciated!
<html>
<head>
<style>
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("Slide1.JPG");
/* Full height */
height: 90%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.center {
position: relative;
vertical-align: middle;
top: 100%;
}
.button {
background-color: #0033ff; /* Blue */
border: solid;
border-width: medium;
border-color: black;
color: white;
padding: 2px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
vertical-align: text-top;
height: 5%;
width: 40%;
font-size: 100%;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var refreshIntervalId = setInterval(autoNextSlide, 8000);
var clicks = 1;
var isPaused = false;
var time = 0;
function pictureBack() {
clicks -= 1;
checkImage("Slide" + clicks + ".JPG", function () { }, function () { clicks = 1; });
// alert("slides/Slide" + clicks + ".JPG");
var str_image = 'background-image: url("Slide' + clicks + '.JPG");';
document.getElementById('bkground').style.cssText = str_image
isPaused = true;
time = 0;
}
function pictureNext() {
clicks += 1;
checkImage("Slide" + clicks + ".JPG", function () { }, function () { clicks = 1; });
//alert("slides/Slide" + clicks + ".JPG");
var str_image = 'background-image: url("Slide' + clicks + '.JPG");';
document.getElementById('bkground').style.cssText = str_image
isPaused = true;
time = 0;
}
function checkImage(imageSrc, good, bad) {
var img = new Image();
img.onload = good;
img.onerror = bad;
img.src = imageSrc;
}
function autoNextSlide() {
if (isPaused) {
time++;
if (time > 4) {
isPaused = false
};
//isPaused = true
//alert("is paused")
} else {
pictureNext();
time = 0;
isPaused = false;
};
}
</script>
</head>
<body>
<div class="bg" id="bkground">
<div class="center">
<p><input type="button" class="button" id="theButton" value="Previous" onclick="pictureBack()" style='float:left;' padding="10%"></p>
<p><input type="button" class="button" id="theButton2" value="Next" onclick="pictureNext()" style='float:right;'></p>
</div>
</div>
</body>
</html>