I have some images, and I want them to scale and change position when clicked (this part is working).
Then I want them to scale down and move back to their original position when clicked again (works), if I click the "close" button (partly works – "close" button is not fading on first click), or if I click anywhere on the screen (don't know how).
The main problem is that when the clicked image is back in its original position, none of the images are clickable, so I can't make the function work more than once.
Any help would be appreciated!
jQuery:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});
CSS:
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
Html:
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="items/image1.png">
<img class="bar" src="items/image2.png">
<img class="foobar" src="items/image3.png">
<img class="barfoo" src="items/image4.png">
</section>
You can do something like
$(document).ready(function() {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
itemImages.click(function() {
if ($(this).hasClass('blur')) {
return;
}
if ($(this).hasClass('scaled')) {
reset();
return;
}
$(this).addClass("scaled");
itemImages.not(this).addClass("blur");
$(this).removeClass("blur");
$('.close').fadeIn('slow');
});
$('.close').click(reset);
function reset() {
itemImages.removeClass("scaled blur");
$('.close').fadeOut('fast');
}
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height: 86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>
you are supposed to re-bind the click event, not to use on:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
var setClick = function(){
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
}
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
setClick();
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});
The problem is, that $().on(); does not work like this: $(itemImages).on('click');. I guess, you try to reverse the $(itemImages).off('click'); statement. You need to pass the event handler that shall get attached to the on function or use the click function again. So the easiest way is to define the event handler in a separate function and attach it again:
$(document).ready(function () {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(itemImages_click);
$('.close').click(function () {
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).click(itemImages_click);
}
function itemImages_click(e) {
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click', itemClicked);
};
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>
Related
Here is a codepen: https://codepen.io/jon424/pen/XWzGNLe
In this example, if you select the toggle button, the image will be covered by another div. The white square will gradually cover the image from the top of the image to the bottom.
I simply want to reverse this effect. I want the white square to cover the image, moving from the bottom of the image to the top.
I’ve tried using a negative value for max-height in the .covered class, but that wasn’t working. Any idea on how I can go about doing this?
document.querySelector('.child2').classList.add('covered');
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.child2').classList.toggle('covered');
});
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.child2 {
z-index: 1;
background: #ffffff;
transition: max-height 1s ease-in-out;
max-height:100%;
}
.covered {
max-height: 0px;
}
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>
Very simple: change the top: 0; attribute in .child1 to bottom: 0;
Here is another way to do it you can manipulate the top of the child2:
document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered');});
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.child2 {
position: absolute;
top: 100%;
z-index: 1;
background: #ffffff;
transition: top 1s ease-in-out;
max-height: 100%;
}
.covered {
top: 0px;
}
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>
By adding those lines on .child2 I am getting I think what you want:
bottom:0;
top:unset;
Here is the full working example:
document.querySelector(".child2").classList.add("covered");
document.querySelector("button").addEventListener("click", () => {
document.querySelector(".child2").classList.toggle("covered");
});
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.child2 {
z-index: 1;
background: #ffffff;
transition: max-height 1s ease-in-out;
max-height: 100%;
bottom:0;
top:unset;
}
.covered {
max-height: 0px;
}
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>
Not sure but are you looking for this type of effect, I know CSS solution if this help you.
.parent {
position: relative;
}
.parent::before {
content: "";
position: absolute;
height: 0;
width: 100%;
background-color: white;
bottom: 100%;
left: 0;
transition: all 0.9s ease-in-out;
}
.parent:hover::before {
height: 100%;
bottom: 0;
-webkit-transition: height 0.9s ease;
transition: height 0.9s ease;
}
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
</div>
</div>
I have this button that on click reveals and expands a div element using a css transition, giving the illusion that the button itself expands. In order to have the div positioned on top of the button i set it to position: absolute but when open needs to be position: fixed. The problem i have with this is that when it switches between absolute to fixed it moves ruining the expantion effect. Here is the jsfiddle to my example.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
.button {
position: relative;
width: 100%;
height: 100%;
}
.button>button {
position: absolute;
left: 50vw;
top: 50vw;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
}
.button>button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50vw;
top: 50vw;
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible!important;
}
.bigger {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
body {
height: 1000px;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>
You can set an opacity or a transform: translate() on the .button parent container to make a fixed position child relative to the parent vs. the root of the document.
Doing this should give you the effect you're looking for.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
html,body {
width: 100%;
height: 100%;
}
.button {
position: relative;
/* opacity: 1; */
transform: translate(0, 0);
width: 100%;
height: 100%;
}
.button > button {
position: fixed;
left: 50%;
top: 50%;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
transform: translate(-50%, -50%);
}
.button > button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible !important;
}
.bigger {
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>
you can place fixed position to content after your animation is done
so your animation effect wont ruin . i have edited your fiddle see if this works as you like
edited fiddle
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
setTimeout(function(){
document.getElementById("content").classList.add('position');
},1000)
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(()=>{
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
setTimeout(function(){document.getElementById("close").classList.add('show');},1100);
}
I'm trying to change the color every image on click but they are not properly selectable because of overlying each other with positioning and z-index...
code is working as you can check by clicking on top right corner it change color...tried different methods of CSS, not JavaScript... newbie in JavaScript.
body,div,p,h1,h2,h3,h4,h5,h6,span {
margin: 0;
}
div.nav {
height: 100px;
width: 100%;
padding: 20px 0;
background-color: #615d5d;
text-align: center;
}
.screens_wrap {
display: inline-block;
margin: 0 auto;
height: 100%;
position: relative;
}
.screen_inner {
position: relative;
height: 100%;
margin: 0 auto;
width: 150px;
}
.screen {
position: absolute;
width:100px;
height: 58px;
border: 3px solid #aeaeae;
}
/* transparent style -------------------------------------------------------------------*/
.nav .screen.screen1 {
bottom: 0;
left: 0;
z-index: 3;
background-color: #00ad63;
}
.nav a .screen.screen2 {
bottom: 15px;
left: 15px;
z-index: 2;
background-color: transparent;
}
.nav a .screen.screen2:hover{
background-color: #4f025a;
}
.nav .screen.screen3 {
bottom: 30px;
left: 30px;
z-index: 1;
background-color: transparent;
}
.nav .screen.screen3:hover{
background-color: #ffec36;
}
.nav .screen2:hover, .screen3:hover {
-webkit-animation-name: hover;
-webkit-animation-duration: 1s;
animation-name: hover;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
opacity: 1;
width: 100px;
}
.nav.nav6 {
height: 200px;
}
.screen_inner a.screenanchors:first-child img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.screen_inner a.screenanchors:nth-child(2) img{
position: absolute;
left: 20px;
top: 20px;
z-index: 2;
}
.screen_inner a.screenanchors:nth-child(3) img{
position: absolute;
left: 40px;
top: 40px;
z-index: 3;
}
.screenanchors img {
overflow: hidden;
}
#keyframes spinning {
from {
transform: translateZ(-5em) rotateY(0deg);
}
to {
transform: translateZ(-5em) rotateY(180deg);
}
}
#keyframes skewing {
from {
transform: translateZ(-5em) skew(-3deg, -25deg);
}
to {
transform: translateZ(-5em) skew(-3deg, 0deg);
width: 100%;
height: 100px;
z-index: 9999999;
bottom: 0;
}
}
/* Standard syntax */
#keyframes hover {
0% {
margin-bottom:+10px;
bottom: unset;
}
100% {
margin-bottom:+10px;
bottom: unset;
}
}
<div class="nav nav6" style="margin-top: 25px;">
<div class="screens_wrap">
<div class="screen_inner">
<img id="imgName" src="https://imageshack.com/i/plylrZh4p" onclick="changeSrc()" width="100px">
<img id="imgName1" src="https://imageshack.com/i/pljaZE0Gp" onclick="changeSrc1()" width="100px">
<img id="imgName2" src="https://imageshack.com/i/plm9slyTp" onclick="changeSrc2()" width="100px">
</div>
</div>
</div>
<script>
function changeSrc(){
document.getElementById("imgName").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName1").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName2").src="https://imageshack.com/i/pljaZE0Gp";
}
function changeSrc1(){
document.getElementById("imgName").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName1").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName2").src="https://imageshack.com/i/plylrZh4p";
}
function changeSrc2(){
document.getElementById("imgName").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName1").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName2").src="https://imageshack.com/i/plm9slyTp";
}
</script>
it should work by clicking every where on single image, no overlay effecting clickable space...
Just to Help out others, I fixed the issue using area mapping...
wanting to create a hover function transition and then a click function that transitions to a cross which has to be clicked to transition back (custom hamburger menu)... If you can help at all thank you!
$("#wrapper").hover(function() {
$(".menu").toggleClass("transition");
});
$("#wrapper").click(function() {
$(".transition").toggleClass("close");
});
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu.transition .line01 {
width: 65%;
}
.menu.transition .line02 {
width: 100%;
top: 66%;
}
.transition.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.transition.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
</div>
I want to display a tooltip when hovering a div. It should also be displayed when the mouse is hovering the tooltip-div.
Adding an event listener does this job, but if both divs are not overlapping the mouseout calls when the mouse is between them and the tooltip disappears.
Now I want to add a delay for the mouseout which is cancelled when it gets a new mouseover, but I don't know how.
document.getElementById("hoverElem").addEventListener("mouseover", function() {
document.getElementById("displayElem").style.visibility = "visible";
});
document.getElementById("hoverElem").addEventListener("mouseout", function() {
document.getElementById("displayElem").style.visibility = "hidden";
});
#hoverElem {
position: fixed;
height: 100px;
weidth: 200px;
top: 0px;
left: 50%;
background-color: white;
}
#displayElem {
position: fixed;
height: 100px;
weidth: 20px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: hidden;
}
<div id="hoverElem">
A little Div
<div id="displayElem">
Tooltip to show
</div>
</div>
You can intiate a timer in the mouseleave and then clear it in mouseenter of
displayElem like
document.getElementById("hoverElem").addEventListener("mouseenter", function() {
document.getElementById("displayElem").style.visibility = "visible";
});
var hoverTimer;
document.getElementById("hoverElem").addEventListener("mouseleave", function() {
hoverTimer = setTimeout(function() {
document.getElementById("displayElem").style.visibility = "hidden";
}, 500);
});
document.getElementById("displayElem").addEventListener("mouseenter", function() {
clearTimeout(hoverTimer);
});
document.getElementById("displayElem").addEventListener("mouseleave", function() {
this.style.visibility = "hidden";
});
#hoverElem {
position: fixed;
height: 100px;
weidth: 200px;
top: 0px;
left: 50%;
background-color: white;
}
#displayElem {
position: fixed;
height: 100px;
weidth: 20px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: hidden;
}
<div id="hoverElem">
A little Div
<div id="displayElem">
Tooltip to show
</div>
</div>
have you considered using pure CSS instead?
div {
position: fixed;
height: 100px;
width: 200px;
top: 0px;
left: 50%;
background-color: black;
}
div:hover span,
span:hover{
opacity:1;
}
span {
display:block;
opacity:0;
color:orange;
-webkit-transition-delay: .5s;
transition-delay: .5s;
-webkit-transition:opacity 1s ;
transition:opacity 1s ;
position: fixed;
height: 100px;
width: 100px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: visible;
}
<div>
<span>lorem Ipsum</span>
</div>