I am trying to create an jsp home page with slide show. I am using eclipse ide, JSP,CSS and JS. I am able to get the slide show everything works just fine but the height of the images in the slideshow are different i have given height as 60% for all images. But each image shows thier own original height. Can anyone guide what needs to be corrected. Below is the code.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next {
font-size: 11px
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="kn">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<div class="divider"></div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/1.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/2.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/3.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/4.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/5.jpg" height="50%" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<script src="js/home.js"></script>
</body>
</html>
welcome to SO,
you need to define height for your container of slideshow in your case it is slideshow-container so in css,
.slideshow-container{
height:300px;
}
this should do the trick.!, hope this helps.
Related
I'm trying to emulate flipbook-vue component, but with pure CSS.
I would like to combine that component with this CSS example on CodePen.
On the flipbook-vue side, I like how the book remains centered when the first page opens, is that possible to do with CSS only? I tried, but the book doesn't expand as the cover rotates.
Also, do the pages need to go backwards like on CodePen example?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page flip</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
text-align: center;
}
div {
height: 100%;
}
#book {
border: 1px solid blue;
display: inline-block;
background: #eee;
text-align: center;
}
div.page {
border: 1px solid red;
width: 40vw;
height: 60%;
}
div.page.flipped {
transition: transform 1s;
transform: rotateY(180deg);
transform-origin: left center;
}
</style>
<script>
window.onload = () => {
setTimeout(flipPage, 1000);
}
flipPage = () => {
document.getElementById('page-1').classList.add('flipped');
}
</script>
</head>
<body>
<div id="book">
<div class="page" id="page-1">
PAGE 1
</div>
<div class="page" id="page-2">
PAGE 2
</div>
</div>
</body>
</html>
I think I'm happy enough with the solution I came up with
var page = 1;
var timerId = null;
window.onload = () => {
timerId = setInterval(flipPage, 1000);
}
toggleClass = (id, cssClass) => {
document.getElementById(id).classList.toggle(cssClass);
}
flipPage = () => {
if (page === 1) {
toggleClass('book', 'two-pages');
} else if (page === 8) {
toggleClass('book', 'closed');
toggleClass('book', 'two-pages');
clearInterval(timerId);
}
toggleClass('page-' + page, 'flipped');
page ++;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--page-width: 40vw;
--transition-speed: 2s;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
perspective: 400vw;
background: #ccc;
}
body, .page > div {
display: flex;
align-items: center;
justify-content: center;
}
#book, .page {
width: var(--page-width);
height: 80vh;
}
#book {
transform-style: preserve-3d;
backface-visibility: visible;
flex-shrink: 0;
transition: var(--transition-speed) all ease;
position: relative;
margin: 0 auto;
}
#book.two-pages {
width: calc(2 * var(--page-width));
}
#book.closed {
width: calc(3 * var(--page-width));
}
.front, .back {
background: navy;
}
.page {
background: white;
border: 1px solid red;
position: absolute;
right: 0;
}
div.page.flipped {
transform: rotateY(180deg);
transition: transform var(--transition-speed);
transform-origin: left center;
}
.page > div {
position: absolute;
width: 100%;
height: 100%;
}
.page > div.back-face {
opacity: 0;
}
.page.flipped > div.front-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 0;
}
.page.flipped > div.back-face {
opacity: 0;
}
.page.flipped > div.back-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 1;
}
#page-1.flipped {
transform: rotateY(-180.04deg);
}
#page-2.flipped {
transform: rotateY(-180.03deg);
}
#page-3.flipped {
transform: rotateY(-180.02deg);
}
#page-4.flipped {
transform: rotateY(-180.01deg);
}
#page-5.flipped {
transform: rotateY(-180.0deg);
}
#page-6.flipped {
transform: rotateY(-179.99deg);
}
#page-7.flipped {
transform: rotateY(-179.98deg);
}
#page-8.flipped {
transform: rotateY(-179.97deg);
}
<div id="book" class="book">
<div class="page back" id="page-8">
<div class="front-face">PAGE 8</div>
<div class="back-face">BYE</div>
</div>
<div class="page page6" id="page-7">
<div class="front-face">PAGE 7</div>
<div class="back-face"></div>
</div>
<div class="page page5" id="page-6">
<div class="front-face">PAGE 6</div>
<div class="back-face"></div>
</div>
<div class="page page4" id="page-5">
<div class="front-face">PAGE 5</div>
<div class="back-face"></div>
</div>
<div class="page page3" id="page-4">
<div class="front-face">PAGE 4</div>
<div class="back-face"></div>
</div>
<div class="page page2" id="page-3">
<div class="front-face">PAGE 3</div>
<div class="back-face"></div>
</div>
<div class="page page1" id="page-2">
<div class="front-face">PAGE 2</div>
<div class="back-face"></div>
</div>
<div class="page front" id="page-1">
<div class="front-face">HELLO</div>
<div class="back-face">TO</div>
</div>
</div>
I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help?
here is my fiddle: https://jsfiddle.net/Lcb7okfn/
.section-tours{
background-color:pink;
padding:5rem 0 50rem 0;
}
.center-text{
background-color:blue;
padding:30px 0;
}
.col-1-of-3{
width: calc((100%-20px)/3);
}
.card{
background-color: orange;
height:15rem;
transition: all .8s;
perspective: 1000px;
-moz-perspective: 1000px;
}
.card:hover{
transform: rotateY(180deg);
}
Apply the hover to a parent element and also move the perspective declaration to the parent:
.section-tours {
background-color: pink;
padding: 5rem 0 50rem 0;
}
.center-text {
background-color: blue;
padding: 30px 0;
}
h2 {
padding: 0;
margin: 0;
}
.col-1-of-3 {
width: calc((100%-20px)/3);
perspective: 1000px;
}
.card {
background-color: orange;
height: 15rem;
transition: all .8s;
}
.col-1-of-3:hover .card {
transform: rotateY(180deg);
}
<section class="section-tours">
<div class="center-text">
<h2>
Most popular tours
</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card class_side">
TEXT
</div>
</div>
</div>
<div class="col-1-of-3">
</div>
<div class="col-1-of-3">
</div>
</div>
</section>
Hi I have the following css- html slideshow with controls but I would like to add the autoplay function too. Is it possible? I tried with javascript but I didn t have luck. I would like to leave the arrows and get rid of the bullets underneath.
<div class="slideshow-container">
<div class="mySlides fade">
<img src="lara_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="tremor_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="femina_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="kingcoya_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="sofia_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="1_zizektours.jpg" alt="" name="slide" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
/* SLIDESHOW CONTAINER */
.slideshow-container {
max-width: 2000px;
position: relative;
margin: 0px;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: yellow;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: yellow;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Assuming your slideshow works now (you didn't post the javascript) you can set a simple setInterval and trigger click() on one of your arrow keys.
I added an ID to each of the arrows so it's easier to target in javascript. And I added a plusSlides() function here just to console.log the event triggering - you don't need that since you should already have it in your code.
var next = document.getElementById('next'),
seconds = 3;
var interval = setInterval(function() {
next.click();
}, (seconds * 1000))
/* you don't need this function - just for the demo */
function plusSlides(val) {
console.log(val);
}
<a class="prev" id="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" id="next" onclick="plusSlides(1)">❯</a>
https://www.w3schools.com/w3css/w3css_slideshow.asp provides an answer under the heading Automatic slideshow. You can compare with and reuse their codes and scripts.
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body {
background-image: url("bg.jpg");
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #000000;
margin-left:100px;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000000;
}
img {
position: absolute;
margin-top:10px;
border: 1px solid #ccc;
}
img img {
width: 100%;
height: auto;
}
img:nth-of-type(2){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(3){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(4){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(5){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
#-webkit-keyframes fadeInOut{
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.image-wrapper {
position: relative;
height: 600px; // change to whatever works for you
}
.image {
position: absolute;
top: 50%;
border: 1px solid #ccc;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container { width: 1000px; }
.logo {
float: left;
width: 100px;
height: 50px;
}
.nav {
float: right;
width: 880px;
}
</style>
<title>Badass Burgers</title>
</head>
<body style="height:1500px">
<img class="logo" src='logo.jpg'/>
<div class="container">
<ul class="nav">
<li><a class="active" href="homepage.php">Home</a></li>
<li>About</li>
<li>Team</li>
<li>Menu</li>
<li>Book A Table</li>
<li>Message Us</li>
</ul>
<div style="clear: both"></div>
</div>
<div class="image-wrapper">
<img class="image" src='food1.jpg' width="1400" height="600" />
<img class="image" src='Food2.jpg' width="1400" height="600" />
<img class="image" src='Food3.jpg' width="1400" height="600" />
<img class="image" src='Food4.jpg' width="1400" height="600" />
</div>
</body>
</html>
hi, i am trying to fade between these 4 images for a website. so far
so good, however im trying to alter this code. does anyone know how to
alter the code such that each image changes after 5 seconds please ?
any help is very appriciated
As litel says, the bootstrap carousel would be perfect for your example. W3 Schools have a good tutorial on Bootstrap here, which is what I used to build my first carousel.
But to answer your question in your present context, I think it would be much easier to do it with a short script rather than the CSS animations. I added the following code to the end of your document and that seemed to do what you were asking. Hope that helps.
<style>
.image-wrapper .image{
display: none; /*Hide the images to begin with*/
}
</style>
<script>
var currentImage = 0;
$(document).ready(function(){
imageChanger(); /*First image fades in on page ready*/
setInterval(imageChanger, 5000);}); /*set a timer of 5000ms for each subsequent image*/
function imageChanger(){
$('.image-wrapper img').eq(currentImage).fadeOut();
currentImage = (currentImage+1)%4;
$('.image-wrapper img').eq(currentImage).fadeIn();
}
</script>
I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle
http://jsfiddle.net/EuRJE/
Here's the testing site: http://www.wandernetwork.com/
and here's the code:
also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated.
<head>
<meta charset='UTF-8'>
<title>Wandercraft Network</title>
<style media="screen" type="text/css">
#page-wrap {
width:620px;
margin:0px auto;
}
.slide-up-boxes a {
display:block;
width:300px;
height:300px;
background: #eee;
overflow:hidden;
}
.slide-up-boxes h5 {
height:300px;
width:300px;
text-align:center;
line-height:150px;
-webkit-transition: margin-top 0.3s linear;
background-color:#white;
}
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}
.slide-up-boxes div {
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
-webkit-transform: rotate(0);
opacity:1;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
.banner {
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}
/* Limit the width of the tray to 30px to make it stack vertically*/
#enjin-tray {
max-width: 30px;
margin: 0;
bottom: 175px;
}
#enjin-tray li#notificationpanel {
border-radius: 3px;
}
#enjin-tray ul li.tray-item {
border-style: solid;
border-width: 1px;
}
#notificationpanel .notification-icon.apps {
background-position: -84px 3px;
}
#notificationpanel .notification-icon.general {
background-position: -54px 3px;
}
#notificationpanel .notification-icon.messages {
background-position: -25px 3px;
}
#notificationpanel .notification-icon.dashboard {
display: none;
}
#enjin-tray li#notificationpanel .subpanel {
width: 380px;
bottom: 0;
}
#enjin-tray #notificationpanel .subpanel.general {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.messages {
right: 40px;
}
#enjin-tray .subpanel {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {
display: none;
}
#messages-notification-tip {
bottom: 231px !important;
right: 35px !important;
}
#general-notification-tip {
bottom: 205px !important;
right: 35px !important;
}
#apps-notification-tip {
bottom: 180px !important;
right: 35px !important;
}
.triangle {
display: none;
}
#enjin-tray-messaging {
display: none;
}
</style>
</head>
<body>
<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
<div id="page-wrap">
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<div style="clear:both;"></div>
</div>
</body>
Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.
What version of IE are you using? Your page looks fine on IE10.
I can't help you if you are running an older version, but have a look at this :
Imitate CSS3 transition in IE?
-webkit-transition won't work on IE.