I have a problem with the slideshow when I use "z-index" in CSS. Instead of showing one on top of the other, the photos appear one under the other. Without "z-index" it works fine.
function pp() {
var t = document.getElementsByClassName("m");
for (var i = 0; i < t.length; i++) {
t[i].style.display = "none";
}
imageIndex++;
if (imageIndex > t.length) {
imageIndex = 1;
}
t[imageIndex - 1].style.display = "block";
setTimeout(pp, 2000);
}
#m {
width: 100px;
height: 100px;
position: relative;
}
#img1,
#img2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#img2 {
z-index: 10;
margin: 20px;
}
<div id="m">
<div id="img1">
<img src="https://picsum.photos/seed/picsum/200/200" />
</div>
<div id="img2">
<img width="50px" height="50px" src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs"/>
</div>
</div>
<div id="m">
<div id="img1">
<img src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs" />
</div>
<div id="img2">
<img width="50px" height="50px" src="https://picsum.photos/seed/picsum/200/200"/>
</div>
</div>
I have attached the code above, something like this.
I don't know why the red border appears below the photo instead of on top of it.
enter image description here
Related
Im working in an image slider. What I was able to do is very simple, and I want to add a transition effect like image sliding , or something like that. If someone knows how to add it to my code it would help me a lot. Here is what I did so far:
.banner-container {
width: 100%;
position: relative;
z-index:0;
height:100% !important;
background: no-repeat center center scroll
}
.banner-container.nomgr {
margin-top:0px;
}
.banner-container-center {
margin-top:-105px;
width: 100%;
position: relative;
z-index:0;
}
.banner {
width: 100%;
position: relative;
z-index:0;
height:120 !important;
background: no-repeat center center scroll
}
.banner-full-height {
width: 100%;
height:auto;
position: relative;
z-index:2;
}
.banner-center {
width: auto;
position: relative;
z-index:2;
}
<div class="banner-container revolution">
<div class="banner">
<ul>
<li > <img src="/images/slide1.png" /></li>
<li > <img src="/images/slide2.png" /></li>
<li > <img src="/images/slide3.png" /></li>
</ul>
</div>
</div>
I have edited your code to add the effect. Change the image source before using
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
width: 100%;
padding: 0px;
}
.ani-top{position:relative;animation:animatetop 0.5s}
#keyframes animatetop{from{top:-500px;opacity:0}
to{top:0;opacity:1}}
</style>
</head>
<body>
<div style="max-width:500px">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(1).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(2).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download.jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(3).jpg" style="width:100%">
</div>
<script type="text/javascript">
var pos = 0;
slideshow();
function slideshow() {
var i;
var x = document.getElementsByClassName("slidetop");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
pos++;
if (pos > x.length) {pos = 1}
x[pos-1].style.display = "block";
setTimeout(slideshow, 2500);
}
</script>
</body>
</html>
I've made a container around the car pictures, and use overflow-y: scroll so I can scroll through them. How can I make it so I have two buttons I can click so I can scroll through them with buttons via javascript or jquery?
Current html is:
<div class="event_container">
<a href="/index.php?con=events&id=5">
<div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
<p>Kør med de store!</p>
<p>18-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=3">
<div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
<p>Den nye FIAT 500!</p>
<p>24-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=1">
<div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
<p>Event 1</p>
<p>30-04-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=2">
<div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
<p>Test kør bughatti!</p>
<p>03-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=4">
<div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
<p>Skal du køre suziki?</p>
<p>30-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
You can make action animated with jQuery to be more comfortable with moved image. Try example below:
var outer = $('.container');
$('#right').click(function() {
outer.animate({scrollLeft: '+=30px'}, 500);
});
$('#left').click(function() {
outer.animate({scrollLeft: '-=30px'}, 500);
});
$('#top').click(function() {
outer.animate({scrollTop: '-=30px'}, 500);
});
$('#bottom').click(function() {
outer.animate({scrollTop: '+=30px'}, 500);
});
.container {
width: 100px;
height: 100px;
overflow: scroll;
}
.inner {
width: 300px;
background-color: red;
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inner">
A B C D E F G 1 2 3 4 5 6 7 8 9
-------------------------------
9 8 7 6 5 4 3 2 1 A B C D E F G
</div>
</div>
<button id="left"> < </button><button id="right"> > </button>
<button id="top"> ^ </button><button id="bottom"> V </button>
I've made a container around the car pictures, and use overflow-y:
scroll so I can scroll through them. How can I make it so I have two
buttons I can click so I can scroll through them with buttons via
javascript or jquery?
Here are 3 approaches using:
jQuery
plain javascript
CSS and javascript
The last approach which uses CSS Transitions delivers the smoothest and best animation.
Approach 1 (of 3)
You can use jQuery's custom animate({scrollTop: [value]}) method to scroll the images up and down.
Working example in jQuery:
$(document).ready(function(){
$('button').eq(0).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'});
});
$('button').eq(1).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'});
});
});
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 2 (of 3)
If you want to skip jQuery, here is an alternative version using plain javascript.
Working example in plain javascript:
var buttons = document.getElementsByTagName('button');
var imageContainer = document.getElementsByTagName('div')[0];
var scrollValue;
var scrollDirection;
function scroll() {
scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1);
scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158);
var startPoint = imageContainer.scrollTop;
var scrollDiv = setInterval(function() {
imageContainer.scrollTop += scrollDirection;
if (imageContainer.scrollTop === (startPoint + scrollValue)) {
scrollDirection = 0;
clearInterval(scrollDiv);
}
}, 1);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 3 (of 3)
As you will have noted, the plain javascript approach immediately above comes across as a bit slow and jerky. So in the end (as with all animations), the optimum approach is to deploy some CSS to handle the animation.
Working example in CSS and plain javascript:
var buttons = document.getElementsByTagName('button');
var images = document.getElementsByTagName('img');
var scrollValue;
function scroll() {
var imageTransformStyle = window.getComputedStyle(images[0]).transform;
var yStart = (imageTransformStyle.lastIndexOf(',') + 2);
var yEnd = imageTransformStyle.lastIndexOf(')');
var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd));
scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158;
var newPosition = currentPosition + scrollValue;
if (newPosition > 0) {newPosition = 0;}
if (newPosition < -316) {newPosition = -316;}
for (var i = 0; i < images.length; i++) {
images[i].style.transform = 'translateY(' + newPosition + 'px)';
}
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 578px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: hidden;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
transform: translateY(0);
transition: transform 0.5s ease-out;
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
I am a jquery beginner and I need to get the height of an image by jquery.
This is the code I use:
$(document).ready(function ($) {
var height = $('#testor').height();
$('.slider-container').css("height", height);
});
This is the html code:
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg" class="alignnone size-medium wp-image-1558 testor" id="testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1557 testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1556 testor" /></div>
</div>
And the css:
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img{
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
It's working fine with Firefox and IE but not in Chrome and Safari.
I found out that it is a problem with webkitbrowser.
Often it is suggested to use $(window).load instead of $(document).ready but that also doesn't work.
Does anyone have an idea how to fix it. I tried for two days to find a solution and don't know what to do now.
Best reagards
Mythos
$(document).ready(function ($) {
var myimage = document.getElementById("testor");
var w = myimage.width;
var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});
JSfiddle
Attach load event to <img> element at .ready(); call .height() within load event handler, as the element may not be fully loaded if .height() is called before load event completes and could return 0
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img {
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function($) {
$('#testor').on("load", function() {
var height = $(this).height();
console.log(this.complete);
alert(height);
$('.slider-container').css("height", height);
console.log(".slider-container height:",
$('.slider-container').css("height"));
})
});
</script>
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image">
<img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1557 testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1556 testor" />
</div>
</div>
I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}
There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>
I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <p> and iframe lined up beside each other nicely, i have this code so far jsfiddle and here is an example of what the separation f the arrows and iframe looks like now
what i want to achieve:
200px----[ arrowLEFT ]---30px---[ Iframe ]---30px---[ arrowRIGHT
]
HTML:
<div id="miniFeed">
<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>
<div id="calender">
<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>
</div>
<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>
</div>
</div>
<p id="toggle">
<span> </span>
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>
</p>
</div>
JAVASCRIPT:
window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};
CSS:
#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}
Try this
html:
<div id="miniFeed">
<div class="arrow leftArrow">
</div>
<div class="calendars">
<div class="carousel">
<div class="calendar-1">
</div>
<div class="calendar-2">
</div>
</div>
</div>
<div class="arrow rightArrow">
</div>
css:
#miniFeed {
width: 400px;
height: 250px;
}
#miniFeed > div {
float: left;
height: 100%;
}
.arrow {
width: 100px;
background: blue;
}
.calendars {
width: 200px;
overflow: hidden; /*the magic*/
}
.carousel {
width: 400px; /* the size is number of calendars * the width per calendar */
height: 100%;
}
.carousel > div {
width: 200px;
height: 100%;
float: left;
}
.calendar-1 {
background: red;
}
.calendar-2 {
background: green;
}
js:
$('.leftArrow').click(function() {
//we move the carousel negative
//the value 200 is the width of a calendar
$('.carousel').animate({marginLeft: -200}, 300);
});
$('.rightArrow').click(function() {
//we move the carousel negative
$('.carousel').animate({marginLeft: 0}, 300);
});
We create a wrapper with overflow hidden, so inside it we have our collections of calendars.
Result:
http://jsfiddle.net/renanvalentin/kzTRz/