In short: clicking on an image moves it with a css transition. I want the hover effect of the image to go away when it moves away from under the mouse.
I have an image without a border. When you click on it the page zooms in using zoomooz. When you hover over the image a border shows and stays there while the page is zoomed in.
If you click anywhere you zoom back out. However if you click on the image to zoom out and don't move the mouse, the image stays in the hover state so the image will keep the border even when the mouse is not currently over the image.
I understand that this is logical because there is no event that triggers the change, but what would be a way to solve this? I tried adding a style change just to the click event but then there is no animation because it's not a transition in css ($("img").css("border-color","rgba(0,0,0,0)");))
Here is a JSFiddle
This is my HTML:
<body>
<img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>
CSS
img {
width: 100px;
border: 1px solid black;
border-color: rgba(0, 0, 0, 0);
margin-left: 10px;
transition: border-color 600ms;
}
img:hover {
border: 1px solid black;
transition:border-color 0s;
}
.zoomedimg {
border-color: rgba(0, 0, 0, 1);
}
Javascript:
$(document).ready(function() {
$("img").click(function(evt) {
event.stopPropagation()
if ($("img").hasClass('zoomedimg')) {
$("img").removeClass('zoomedimg');
$("body").zoomTo();
} else {
$("img").addClass('zoomedimg');
$("img").zoomTo();
}
});
$(window).click(function(evt) {
$("body").zoomTo({});
$("img").removeClass('zoomedimg');
});
});
Very closely related to these questions:
How to remove hover state when the element moves This had a very sober
answer, which in that example I could not get to work. I did try setting the border color when I clicked the image like in that solution. But then the changing border doesn't count as a transition so it will not animate.
Hover state is maintained during a transition even if the element has gone
This had a very extensive answer, but I didn't really understand how to apply it to my situation.
Edit: Junaid Ahmed offered a solution to make the hover transition using jQuery and a class. When you click to zoomout you remove the "hover" class and thus also the border. This poses a new problem:
if you hover over the image while clicking and you keep hovering until the zoomout ends the border disappears and doesn't return until you mouseout and mouseover again.
How would I solve this?
#Jason is right. You could drop the hover effect using CSS and accomplish the hover effect with JS/JQuery. Check my forked JSFiddle
The CSS:
img {
width: 100px;
border: 1px solid black;
border-color: rgba(0, 0, 0, 0);
margin-left: 10px;
transition: border-color 600ms;
}
img.hover {
border: 1px solid black;
transition:border-color 0s;
}
.zoomedimg {
border-color: rgba(0, 0, 0, 1);
}
The JS:
$(document).ready(function() {
$("img").on('mouseover', function(){
$("img").addClass('hover');
});
$("img").on('mouseout', function(){
$("img").removeClass('hover');
});
$("img").click(function(evt) {
event.stopPropagation()
if ($("img").hasClass('zoomedimg')) {
$("img").removeClass('zoomedimg').removeClass('hover');
$("body").zoomTo();
} else {
$("img").addClass('zoomedimg');
$("img").zoomTo();
}
});
$(window).click(function(evt) {
$("body").zoomTo({});
$("img").removeClass('zoomedimg').removeClass('hover');
});
});
use a variable to switch over the states:
<script>
var state;
function switch() {
if (state == 1){
/* your code to remove the border */
state = 0;
}else{
state = 1;
}
}
</script>
<img onclick="switch()">
customize the code as you need.
I changed like this, Check this.
$(document).ready(function() {
$("img").hover(function(evt) {
$("img").addClass('zoom-border');
event.stopPropagation()
if ($("img").hasClass('zoomedimg')) {
$("img").removeClass('zoomedimg');
} else {
$("img").addClass('zoomedimg');
$("img").zoomTo();
}
});
$(window).click(function(evt) {
$("body").zoomTo({});
$("img").removeClass('zoomedimg');
$("img").removeClass('zoom-border');
});
});
img {
width: 100px;
border-color: rgba(0, 0, 0, 0);
margin-left: 10px;
transition: border-color 600ms;
}
.zoom-border{
border: 1px solid black;
transition:border-color 0s;
}
.zoomedimg {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://dropfruitduo.github.io/jquery.zoomooz.min.js"></script>
<body>
<img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>
Related
trying to make a button like this: https://gyazo.com/9afbd559c15bb707a2d1b24ac790cf7a. The problem with the code right now is that it works as it is supposed to on the first time; but after that, instead of going from left to right as intented, it goes from right to left to right.
HTML
<div class="btn-slide block relative mx-auto" style="overflow: hidden; width: 12rem;">
<span class="z-10">View Pricing</span>
<span class="slide-bg block absolute transition" style="background-color: rgba(0,0,0,.1); z-index: -1; top: 0; left:-10rem; width: 10rem; height: 3rem;"></span>
</div>
Javascript
const btns = document.querySelectorAll(".btn-slide");
const slide = document.getElementsByClassName('slide-bg');
btns.forEach(function(btn) {
btn.addEventListener('mouseout', function () {
slide[0].style.transform = 'translateX(230%)';
slide[0].style.transform = 'none';
})
btn.addEventListener('mouseover', function() {
slide[0].style.transform = 'translateX(80%)';
}, true)
})
Unless you have to compute a value in JavaScript (like the height of an element).
Use CSS classes as modifiers (is-hidden, is-folded, is-collapsed, ...).
Using JavaScript, only add/remove/toggle the class
yourElement.addEventListener(
"mouseenter",
function (event)
{
yourElement.classList.remove("is-collapsed");
}
);
yourElement.addEventListener(
"mouseleave",
function (event)
{
yourElement.classList.add("is-collapsed");
}
);
is-collapsed is only an exemple, name it according to your class naming standard.
You're probably going to need a bit more code than what you're showing, as you have two mutually exclusive CSS things you want to do: transition that background across the "button" on mouseenter/mouseout, which is animated, and then reset the background to its start position, which should absolutely not be animated. So you need to not just toggle the background, you also need to toggle whether or not to animation those changes.
function setupAnimation(container) {
const fg = container.querySelector('.label');
const bg = container.querySelector('.slide-bg');
const stop = evt => evt.stopPropagation();
// step one: make label text inert. This is critical.
fg.addEventListener('mouseenter', stop);
fg.addEventListener('mouseout', stop);
// mouse enter: start the slide in animation
container.addEventListener('mouseenter', evt => {
bg.classList.add('animate');
bg.classList.add('slide-in');
});
// mouse out: start the slide-out animation
container.addEventListener('mouseout', evt => {
bg.classList.remove('slide-in');
bg.classList.add('slide-out');
});
// when the slide-out transition is done,
// reset the CSS with animations _turned off_
bg.addEventListener('transitionend', evt => {
if (bg.classList.contains('slide-out')) {
bg.classList.remove('animate');
bg.classList.remove('slide-out');
}
});
}
setupAnimation(document.querySelector('.slide'));
.slide {
position: relative;
overflow: hidden;
width: 12rem;
height: 1.25rem;
cursor: pointer;
border: 1px solid black;
text-align: center;
}
.slide span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slide-bg {
background-color: rgba(0,0,0,.1);
transform: translate(-100%, 0);
transition: none;
z-index: 0;
}
.slide-bg.animate {
transition: transform 0.5s ease-in-out;
}
.slide-bg.slide-in {
transform: translate(0%, 0);
}
.slide-bg.slide-out {
transform: translate(100%, 0);
}
<div class="slide">
<span class="label">View Pricing</span>
<span class="slide-bg"></span>
</div>
And thanks to browsers being finicky with rapid succession mouseenter/mouseout events, depending on how fast you move the cursor this may not even be enough: you might very well still need a "step" tracker so that your JS knows which part of your total animation is currently active, and not trigger the mouseout code if, by the time the slide-in transition ends, the cursor is in fact (still) over the top container (or, again).
I advice you use the .on event listener
$('').on("mouseentre","elem",function(){$('').toggleclass('.classname')})
$('').on("mouseleave","elem",function(){$('').toggleclass('.classname')})
Then you can toggle css classes to your element in the function
toggle class adds the css of a class to your jquery selection, you can do it multiple times and have keyframes for animation in the css class
Keyframes are great way to implement animation and are supported on every browers
I have a hover effect on a list of div, the css is:
.product:hover {
background-color: #f6f6f7;
border-left-color: #f6f6f7 !important;
border-right-color: #f6f6f7 !important;
outline: 10px solid #f6f6f7;
z-index: 1;
}
I want this hover effect to not be triggered when the user is scrolling the page, to not force the browser to repaint/reflow.
So I tried:
doc = $(document)
doc.scroll(->
$('.product').unbind('mouseenter').unbind('mouseleave')
)
But it doesn't seem to work, when I scroll the hover effect is still triggered. Any idea why? Or how I have achieve that?
Add this in your css style page
.disable-hover {
pointer-events: none;
}
You have to do is add the .disable-hover class to the body when you begin to scroll. This then allows the users cursor to pass through the body and thus disable any hover effects.
var body = document.body,timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
Add this script and execute it will works:-
Try setting
document.body.style.pointerEvents = 'none';
when scroll event is triggered. Detailed docs here.
CSS hover has nothing to do with JavaScript events.
If you want to do what you are after, you will need to do it by adding/removing a class onscroll
var scrollTimer;
$(window).on("scroll", function() {
if(scrollTimer) window.clearTimeout(scrollTimer);
$("body").removeClass("effect");
scrollTimer = window.setTimeout( function()
$("body").removeClass("effect");
}, 100);
});
and the CSS
.effect .product:hover {
background-color: #f6f6f7;
border-left-color: #f6f6f7 !important;
border-right-color: #f6f6f7 !important;
outline: 10px solid #f6f6f7;
z-index: 1;
}
and PS: using important is BAD practice
I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}
I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/
You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.
1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.
$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image
There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>
Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}
If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked
I posted a question about a script but I have another question about another script.
I have two blue buttons at the beginning that turn gray on a roll-over.
Blue becomes (and remains) gray when you click on one of the two buttons.
Both buttons must not be blue both. Each button brings up a form at a time (form contact and form quotation).
I have wrote this and I would to know if I can simplify it ?
How to make the "toggle" function compatible with iDevices (iPad, iPhone...) ?
Thank you in advance.
$(function() {
$("#form-contact").hide();
$("#form-devis").hide();
$("#btn-contact").click(function(){
$(this).toggleClass("btn-form-hover");
$("#form-contact").fadeToggle(500, "linear");
$("#form-devis").hide();
$("#btn-devis").removeClass("btn-form-hover");
});
$("#btn-devis").click(function(){
$(this).toggleClass("btn-form-hover");
$("#form-devis").fadeToggle(500, "linear");
$("#form-contact").hide();
$("#btn-contact").removeClass("btn-form-hover");
});
});
This looks about as simple as you can get for forcing only one button to have the "selected" state. If you need to do this for many elements, see my code below.
Toggle should work on iDevices as long as the jQuery library you included supports it. However, you will not get a hover effect on iDevices since there is no mouse.
Code Example:
If you plan to do this frequently with buttons (rocker switches) where only one element can have the "selected" state you could make a function like this:
CodePen: http://codepen.io/Skrypt/pen/dyCha
HTML
<div class="rockerSwitch myRocker1">
<button class="left">On</button><button class="right">Off</button>
</div>
<div class="rockerSwitch myRocker2">
<button class="left">True</button><button class="right">False</button>
</div>
<div class="rockerSwitch myRocker3">
<button class="left">Option 1</button><button class="right">Option 2</button>
</div>
CSS
.rockerSwitch button {
background-color: #dcffb2;
border: 1px solid #87cf30;
cursor: pointer;
outline: 0;
}
.rockerSwitch button.left {
margin-right: 0px;
border-radius: 5px 0px 0px 5px;
}
.rockerSwitch button.right {
margin-left: 0px;
border-radius: 0px 5px 5px 0px;
}
.rockerSwitch button:hover {
background-color: #fff;
}
.rockerSwitch button.selected {
background-color: #87cf30;
}
JS/jQuery
$(function() {
$('.myRocker1').rockerSwitch();
$('.myRocker2').rockerSwitch();
$('.myRocker3').rockerSwitch();
});
$.fn.rockerSwitch = function() {
var left = $('.left', this);
var right = $('.right', this);
left.on('click', function() {
left.addClass("selected");
right.removeClass("selected");
});
right.on('click', function() {
right.addClass("selected");
left.removeClass("selected");
});
}
I'm trying to make a <div> display and then fade out, on button click.
This works so long as the user waits for the fade to complete between <button> presses.
My problem is, if the <button> is clicked while the fade is ongoing, the <div> needs to immediately reappear, and then fade out.
I've managed to get it to immediately reappear, but now it doesn't fade out again.
To get an easier idea of what I'm doing, take a look at the JSFiddle I've setup.
Can anyone help me get this to fade out if clicked whilst already fading out?
I'm only targeting webkit.
<div id="saved">Saved!</div>
<button id="save">Save</button>
function save()
{
// Little "Saved!" div
var div = document.getElementById('saved');
// If still showing from previous save
if(div.style.visibility === 'visible')
{
resetTransition();
div.style.visibility = 'visible';
//div.style.opacity = 0;
console.log('reset');
}
// On transition end
div.addEventListener('webkitTransitionEnd', resetTransition);
function resetTransition()
{
// Disable transitions
div.className = 'notransition';
// Hide the div and reset the opacity
div.style.visibility = 'hidden';
div.style.opacity = 1;
// Need time to let CSS changes (^) refresh
setTimeout(function()
{
// Re-enable transitions
div.className = '';
// Remove the event listener by way of cloning
var dolly = div.cloneNode(true);
div.parentNode.replaceChild(dolly, div);
}, 1);
}
// Show the div and fade out - on timer due to "if still showing" needing
// to process first
setTimeout(function()
{
div.style.visibility = 'visible';
div.style.opacity = 0;
}, 1);
}
document.getElementById('save').addEventListener('click', save);
div#saved
{
-webkit-transition: opacity 1.25s ease-out;
-webkit-transition-delay: 0.75s;
background-color: #FFC;
/* Courtesy of http://fatcow.com/free-icons */
background-image: url('http://i.imgur.com/JMlclKE.png');
background-position: 3px 4px;
background-repeat: no-repeat;
border: 1px solid #333;
border-radius: 6px;
left: 5px;
opacity: 1;
padding: 10px 4px 10px 52px;
position: absolute;
top: 5px;
visibility: hidden;
width: 68px;
}
.notransition
{
-webkit-transition: none !important;
-webkit-transition-delay: none !important;
}
button
{
position: absolute;
top: 100px;
}
I updated your fiddle, moving the cloning to the top and clearing the timeout.
// Little "Saved!" div
clearTimeout(save.t);
var dolly = document.getElementById('saved');
// Remove the event listener by way of cloning
var div = dolly.cloneNode(true);
dolly.parentNode.replaceChild(div, dolly);
/* etc til */
save.t = setTimeout(/* */);