Hello I am making a JS slide show script. The problem I am having is that the slide2 div that I am using to load the second img is not playing nice with the frame. when you click the next slide the new dive is put at the bottom of the frame. I want the new frame to come next to the old image. can you guys help me get this right? ill be around to answer any questions.
$(document).ready(function() {
$('#next_slide').on('click', function(e) {
console.log("next_slide was clicked");
$("#slide1").toggleClass('clicked');
$("#slide2").toggleClass("clicked");
});
});
body {
margin: 0px;
}
#main {
display: flex;
justify-content: center;
}
#slide_show {
background-color: gray;
border: 1px solid black;
width: 50%;
height: 350px;
margin-top: 50px;
display: flex;
}
#slide1 {
width: 100%;
height: 100%;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slide2 {
width: 0%;
float: right;
height: 100%;
position: fixed;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slid_container {
width: 100%;
height: 100%;
background-color: gray;
}
#next_slide,
#last_slide {
opacity: .5;
width: 20px;
height: 100%;
background-color: yellow;
}
#slide1.clicked {
transition: width 2s;
width: 0px;
}
#slide2.clicked {
transition: width 2.1s;
width: 100%;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<div id="main">
<div id="slide_show">
<div id="last_slide">
</div>
<div id="slid_container">
<div id="slide1">
</div>
<div id="slide2">
</div>
</div>
<div id="next_slide">
</div>
</div>
</div>
</body>
</html>
It looks like I was able to hack a fix by setting the display mode for the slid_container div to flex and making the transitions both to 2s each. If there is a better way to do this feel free to respond.
Related
CSS/JS beginner here, I'm following a webkit 3d-transforms guide and trying to apply a hidden front-face option for the ring-rotation part:
The "backfaces-visible" checkbox hides/shows the backface, could the opposite be implemented where the backface is visible and the front is hidden?
Edit:
With respect to the first comment, I'd like to clarify that the desired result should look like this (front planes are hidden while rotating):
(Front panels were erased with photo-editing, the rest are CSS changes. Mind the poorly edited left card)
Not 100% sure if this is what you are looking for, but If you don't use the backface-visiblity parameter at all, i.e. leave it at its default "visible" and if it has a non-transparent background, the backside will always cover the frontside, if its z-index or order in the HTML code is set that way.
My snippet below is derived from some older code I had at hand, in case you wonder. Press the button below the circle to trigger a turning animation.
function turn1() {
$('#front').css({transform: 'rotateY(180deg)'});
$('#back').css({transform: 'rotateY(360deg)'}).delay(2000).promise().then(turn2);
};
function turn2() {
$('#front').css({transform: 'rotateY(0deg)'});
$('#back').css({transform: 'rotateY(180deg)'}).delay(2000).promise().then(turn1);
};
$('#go').on('click', turn1);
.wrapper {
position: relative;
margin: 20px auto;
width: 180px;
height: 180px;
font-size: 36px;
perspective: 150px;
}
#front, #back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 2s;
display: flex;
justify-content: center;
align-items: center;
}
#front {
background: green;
}
#back {
background: yellow;
transform: rotateY(180deg);
}
.x {
text-align: center;
}
button {
padding: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
<div class="x"><button id="go">Press to rotate</button></div>
If you add backface-visibility: hidden to the otherwise unchanged code, you see both sides when rotating:
function turn1() {
$('#front').css({transform: 'rotateY(180deg)'});
$('#back').css({transform: 'rotateY(360deg)'}).delay(2000).promise().then(turn2);
};
function turn2() {
$('#front').css({transform: 'rotateY(0deg)'});
$('#back').css({transform: 'rotateY(180deg)'}).delay(2000).promise().then(turn1);
};
$('#go').on('click', turn1);
.wrapper {
position: relative;
margin: 20px auto;
width: 180px;
height: 180px;
font-size: 36px;
perspective: 150px;
}
#front, #back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 2s;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
}
#front {
background: green;
}
#back {
background: yellow;
transform: rotateY(180deg);
}
.x {
text-align: center;
}
button {
padding: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
<div class="x"><button id="go">Press to rotate</button></div>
I am trying to display a highlighted circle when the user double clicks on a certain part of an image(which should be erasable if clicket wrong). If the wanted position is clicked i want to create an "ID" and next to it a simple Inputfield.
The Inputfields should be in a countainer/box which is scrollable.
How can I achieve this ?
here is a edited pic as example for what i hope to achieve:
till now i only did the ground work like bulding the header, footer and sidebar
#wrapper {
margin-left: auto;
margin-right: auto;
background-color: red;
width: 1000px;
height: 800px;
}
#header {
width: 100%;
height: 100px;
background-color: blue
}
#footer {
width: 100%;
height: 50px;
background-color: green;
clear: both;
}
#menue-right {
width: 300px;
height: 650px;
background-color: black;
float: right
}
#content {
width: 700px;
height: 650px;
background-color: yellow;
float: left;
}
#content-center {
width: 500px;
height: 400px;
background-color: darkorange;
margin: auto;
margin-top: 125px
}
#wundbild {
height: 400px
}
<div id="wrapper">
<div id="header">
<h1 style="color: white; text-align: center;padding-top: 25px;">Wundposition ermitteln</h1>
</div>
<div id="menue-right">
</div>
<div id="content">
<div id="content-center">
<img id="wundbild" src="https://i.stack.imgur.com/c3CDS.png">
</div>
</div>
<div id="footer">
</div>
</div>
I'm trying to recreate a slideshow/carousel effect I've seen on this website (scroll down past the hero banner): https://www.ktm.com
I think the background of the carousel changing once an item is hovered over looks great. This is how far I've gotten:
https://codepen.io/moy/pen/QVvMxo
Looking at the KTM example it seems overly complicated to me, maybe part of some framework? So I've tried to simplify it where I can.
I don't think my example is a million miles away but it needs some refinement. The main issue I'm having is when the 3 items are hovered over, making sure the images fade in/out rather than instantly change. Is that going to be possible with the method I'm using, updating the img src="" using a data-* attribute?
I tried adding in .fadeIn and .delay but it didn't seem to do anything.
Another issue I'm having is when you remove the mouse from the carousel after hovering over the items the text seems to flicker. It looks like it's to do with the img opacity changing as when I remove that it doesn't happen - but I haven't gotten to the bottom of that yet, so any pointers will be greatly appreciated.
Thanks!
$(".carousel__item").hover(function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
var value = $(this).attr('data-src');
$(".carousel__bg img").attr("src", value);
});
.carousel {
background: #222;
border: 1px solid white;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
}
.carousel__item {
border: 1px solid white;
box-sizing: border-box;
float: left;
position: relative;
width: 33.33333%;
}
.carousel__content {
box-sizing: border-box;
color: #fff;
height: 100%;
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel__title {
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__subtitle {
display: none;
-webkit-backface-visibility: hidden;
}
.carousel__btn {
background: #fff;
color: #222;
display: block;
opacity: 0;
position: absolute;
padding: 15px 30px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
text-decoration: none;
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__image {
display: block;
opacity: 1;
transition: all .25s;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel:hover .carousel__title {
opacity: .25;
}
.carousel:hover .carousel__image {
opacity: 0;
}
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
.carousel:hover .carousel__item:hover .carousel__flag {
display: none;
}
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="https://fillmurray.com/800/300">
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/500">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #1</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/400">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #2</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/300">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #3</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
</div>
Create those images with style="display: none" instead of replacing the image source. Then you can use jquery $(".carousel__item").hover( showImage, hideImage ) to achieve your goal.
$(image).show() and $(image).hide() should be enough for what you want
I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed
Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>
You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle
Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output
You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>