i have little animation with picture, i want to change cursor to default ( on picture ), after animation start, if you try my animation, you will see that after onclick function you still have cursor: pointer on pic. but i want there to be default after animation.
my fiddle: http://jsfiddle.net/1u6kbz7q/
HTML
<div id="facebook_text">
Odkaz
</div>
<div id="facebook_image">
<img class="facebook_animation" src="facebook.jpg"></img>
</div>
<script src="facebook_animation.js" type="text/javascript"></script>
CSS
#facebook_text {
display: none;
}
#facebook_text a {
position: absolute;
font-size: 15px;
text-decoration: none;
margin-left: 50px;
margin-top: 35px;
z-index: 1;
}
#facebook_text a:hover {
color: #e5e500;
}
#facebook_image.fly {
position: absolute;
margin-left: 125px;
margin-top: 0px;
transition: ease-in-out 1s;
}
#facebook_image img {
position: absolute;
z-index: 10;
height: 35px;
width: 35px;
margin-top: 25px;
transition: ease-in-out 1s;
cursor: pointer;
}
javascript
document.querySelector('.facebook_animation').onclick=function() {
var d = document.getElementById("facebook_image");
d.className = d.className + " fly";
d.style.cursor = 'default';
var t = document.getElementById("facebook_text");
var delayed = setTimeout(function() {
t.style.display = 'block';
}, 500);
}
No need to involve JS on that cursor matter: http://jsfiddle.net/1u6kbz7q/3/
you're already adding the .fly, so simply target the .fly's image in CSS
#facebook_image.fly img{
cursor: default;
}
also <img> is a self-closing tag. no need to use the closing </img>
Related
So I have a page where I have replaced my cursor with a div.
The cursor is simply a part of the page that I can animate using CSS.
The main thing I want to achieve is to make this cursor change size when I hover over any button.
I cannot get it to work...
Cursor positioning is handled by a JQuery script but the vanilla one doesn't seem like it wants to work with me...
I can can't fix the error...
// Jquery code that moves the cursor (div element)
$(document).on('mousemove', function(e){
$('#cursor').css({
left: e.pageX - 7,
top: e.pageY - 7
});
});
// Function to be executed when mouse is over a button
document.querySelectorAll('button').addEventListener("mouseover", cursorHovering);
function cursorHovering() {
document.getElementById('object').style = "transform: scale(2);";
}
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*, body { cursor: none !important; }
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>
You mean something like this?
// Jquery code that moves the cursor (div element)
var c = document.getElementById('cursor');
document.addEventListener('mousemove', (e) => {
c.style.left = e.pageX - 7 + 'px';
c.style.top = e.pageY - 7 + 'px';
});
// Function to be executed when mouse is over a button
document
.querySelectorAll('button')
.forEach(b => {
b.addEventListener("mouseover", () => c.style.transform='scale(2)');
b.addEventListener("mouseout", () => c.style.transform='scale(1)');
});
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*, body { cursor: none !important; }
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>
Here's a vanilla JS solution.
document.addEventListener('mousemove', handleMouseMove, false);
// Cache the elements
const cursor = document.getElementById('cursor');
const buttons = document.querySelectorAll('button');
// For each button add the two event listeners
[...buttons].forEach(button => {
button.addEventListener('mouseover', handleMouseOver, false);
button.addEventListener('mouseout', handleMouseOut, false)
});
function handleMouseMove(e) {
// You need to ensure that you add "px" to the
// end of the value. jQuery does this automatically.
cursor.style.left = `${e.pageX - 7}px`;
cursor.style.top = `${e.pageY - 7}px`;
}
function handleMouseOver() {
cursor.style.transform = 'scale(2)';
}
function handleMouseOut() {
cursor.style.transform = 'scale(1)';
}
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*,
body {
cursor: none !important;
}
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>
I have a function that's triggered by onClick. Here's the example. I want to only be able to trigger the function 'slide1' when 'slide2' is not triggered. I tried setting up a conditional statement like this:
function slide1() {
btn1.classList.toggle('slide', btn2.className != 'slide');
}
I also tried an if statement like this:
function slide1() {
if(btn2.className != 'slide') {
btn1.classList.toggle('slide');
}
}
That didn't work either.
I just need a simple way to toggle classes if certain conditions are met; without jQuery or a library. Thanks.
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
function slide1() {
btn1.classList.toggle('slide');
}
function slide2() {
btn2.classList.toggle('slide');
}
* {
margin: 0;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div {
width: 50%;
height: 100vh;
display: block;
position: absolute;
text-align: center;
cursor: pointer;
}
#btn1 {
background: blue;
}
#btn2 {
background: red;
left: 50%;
}
#btn1.slide {
width: 80%;
z-index: 999;
}
#btn2.slide {
width: 80%;
z-index: 999;
left: 20%;
}
<div id="btn1" onClick="slide1();">
left
</div>
<div id="btn2" onClick="slide2();">
right
</div>
UPDATE: Here is an expanded example of the problem I'm dealing with. There are several elements with classes that need to be toggled only under certain circumstances. If 'panel1' is triggered when 'panel2' has already been triggered, then 'panel1' will cover 'panel2'. and the same with 'panel3'.
To answer your question, the proper way to check if an element has a class in JavaScript is element.classList.contains.
So, in your example, you should replace the condition with
if(btn2.className.contains('slide')) {
...
}
As a sidenote, having different functions doing the exact same thing on different elements should be avoided, where possible. Instead of having two functions, you should have only one and use the click event's target:
let halves = document.querySelectorAll("div");
function slide(event) {
// remove `slide` class from both divs:
[].map.call(halves, function(half){
half.classList.remove('slide');
});
// add `slide` class to currently clicked div:
event.target.classList.add('slide')
}
* {
margin: 0;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div {
width: 50%;
height: 100vh;
display: block;
position: absolute;
text-align: center;
cursor: pointer;
}
#btn1 {
background: blue;
}
#btn2 {
background: red;
left: 50%;
}
#btn1.slide {
width: 80%;
z-index: 999;
}
#btn2.slide {
width: 80%;
z-index: 999;
left: 20%;
}
<div id="btn1" onClick="slide(event);">
left
</div>
<div id="btn2" onClick="slide(event);">
right
</div>
On a different note, I assume you're aware the selectors used in both your question and my answer are outrageously generic and should never be used in production ready code.
And as a last note, your CSS is quite faulty but I'm not considering fixing it here, as it wouldn't help anyone except yourself, which goes against the first principle of SO: one answer should help multiple users having the same problem. Here's how I'd have coded your example:
let br = document.querySelector('#blueRed');
br.addEventListener('click', function(event) {
event.target.classList.toggle('slide');
[].map.call(br.querySelectorAll('div'), function(div) {
if (div !== event.target) {
div.classList.remove('slide');
}
});
})
body {
margin: 0;
}
#blueRed {
height: 100vh;
display: flex;
}
#blueRed div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1);
flex-grow: 1;
background-color: blue;
color: white;
cursor: pointer;
}
#blueRed div:last-child {
background-color: red;
}
#blueRed div.slide {
flex-grow: 3;
}
<div id="blueRed">
<div>left</div>
<div>right</div>
</div>
Fiddle here. Should be prefixed.
I think I understand your objective...
I condensed the functions into one and start off one button with the className = 'slide'. If one button is clicked then the class slide always alternates between the two buttons.
Demo
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
function slide() {
btn1.classList.toggle('slide');
btn2.classList.toggle('slide');
}
* {
margin: 0;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div {
width: 50%;
height: 100vh;
display: block;
position: absolute;
text-align: center;
cursor: pointer;
}
#btn1 {
background: blue;
}
#btn2 {
background: red;
left: 50%;
}
#btn1.slide {
width: 80%;
z-index: 999;
}
#btn2.slide {
width: 80%;
z-index: 999;
left: 20%;
}
<div id="btn1" onClick="slide();" class='slide'>
left
</div>
<div id="btn2" onClick="slide();">
right
</div>
I have been trying desperately to solve my problem and I just don't find the mistake in my code. So what I am programming is a slider which works with jQuery and I had everything precisely as I wanted it but then I made some completely irrelevant changes and it didn't work any more. My issue is that (as you can see in the jsfiddle) the arrows to navigate the slider don't (always) show up. They only show up at the very end of the Interval (see jsfiddle). Am I doing something wrong with the .mouseenter and .mouseleave-handlers?
Would you recommend using the `.hover-handler?
Thanks in advance
JSFiddle: http://jsfiddle.net/VincentBS/ogm967bz
And if that helps: Here is the website the slider is programmed for
$(document).ready(function(){
hideArrows();
hideImages();
$(".back").click(function(){prevImage()});
$(".pre").click(function(){nextImage()});
$("#slider").mouseenter(function(){
//showArrows();
$(".back").show();
$(".pre").show();
})
$("#slider").mouseleave(function(){
//hideArrows();
$(".back").hide();
$(".pre") .hide();
})
start();
});
function hideArrows(){
$(".back").hide();
$(".pre") .hide();
}
function showArrows(){
$(".back").show();
$(".pre") .show();
}
function hideImages(){
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
}
function start(){
// save when we started for calculating progress
var startedAt = Date.now();
// set animation bounds
var startValue = 1;
var endValue = 100;
// figure out how much change we have over the whole animation
var delta = endValue - startValue;
// Animation function, to run at 60 fps.
t = setInterval(function(){
// How far are we into the animation, on a scale of 0 to 1.
var progress = (Date.now() - startedAt) / 5000;
// If we passed 1, the animation is over so clean up.
if (progress > 1) {
nextImage();
}
}, 1000 / 60);
}
function prevImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) - 1;
if(next < 1){next = 5}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
function nextImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) + 1;
if(next > 5){next = 1}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
#slider {
float: left;
width: 700px;
height: 233px;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
}
.back {
float: left;
margin-left: 10px;
}
.pre {
float: right;
margin-right: 10px;
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
<span class="back">◀</span>
<span class="pre">▶</span>
</div>
Position problem I have change some css property
#slider {
float: left;
width: 700px;
height: 233px;
position: relative;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
color: #FFF;
font-size: 25px;
position: absolute;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
}
.back {
left: 0;
margin-left: 10px;
top: 50%;
}
.pre {
margin-right: 10px;
right: 0;
top: 50%;
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
http://jsfiddle.net/ogm967bz/1/
I have tweaked your CSS a bit of .back, .pre
$(document).ready(function(){
hideArrows();
hideImages();
$(".back").click(function(){prevImage()});
$(".pre").click(function(){nextImage()});
$("#slider").mouseenter(function(){
//showArrows();
$(".back").show();
$(".pre").show();
})
$("#slider").mouseleave(function(){
//hideArrows();
$(".back").hide();
$(".pre") .hide();
})
start();
});
function hideArrows(){
$(".back").hide();
$(".pre") .hide();
}
function showArrows(){
$(".back").show();
$(".pre") .show();
}
function hideImages(){
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
}
function start(){
// save when we started for calculating progress
var startedAt = Date.now();
// set animation bounds
var startValue = 1;
var endValue = 100;
// figure out how much change we have over the whole animation
var delta = endValue - startValue;
// Animation function, to run at 60 fps.
t = setInterval(function(){
// How far are we into the animation, on a scale of 0 to 1.
var progress = (Date.now() - startedAt) / 5000;
// If we passed 1, the animation is over so clean up.
if (progress > 1) {
nextImage();
}
}, 1000 / 60);
}
function prevImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) - 1;
if(next < 1){next = 5}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
function nextImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) + 1;
if(next > 5){next = 1}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
#slider {
float: left;
width: 700px;
height: 233px;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
top: 92px; /* Chnages here */
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
position:absolute; /* Chnages here */
}
.back {
float: left;
left: 10px; /* Chnages here */
}
.pre {
float: right;
right: 10px; /* Chnages here */
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
<span class="back">◀</span>
<span class="pre">▶</span>
</div>
Refer : http://jsfiddle.net/ogm967bz/8/
add the following css in the file
position:relative;
under the
.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
cursor: pointer;
position:relative;
}
my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page.
I am trying to use an image for a link, and would like the image to change when you hover over it. The link below is what I am trying to accomplish, but for whatever reason when I substitute my code from my page to it, it doesn't work.
EXAMPLE http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onmouseover
I am completely lost now and just need a little help. Here is my code.
DEMO
function hoverImg(x) {
x.style.backgroundImage = "url(image/arrowBtnHover.png)"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.style.backgroundImage = "url(image/arrowBtn.png)"
}
#header {
background-color: #473D39;
height: 100%;
width: 100%;
display: table;
position: absolute;
z-index: 10;
}
#wrapper {
display: table-cell;
vertical-align: middle;
}
#header h1 {
text-align: center;
margin: 0px;
font-size: 80px;
padding-top: 5%;
font-weight: normal;
color: #FFF;
letter-spacing: 18px;
text-transform: uppercase;
}
#header h5 {
text-align: center;
color: #FFF;
margin: 15px 15px 50px;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
<div id="header">
<div id="wrapper">
<h1>Premier Webster</h1>
<h5>Local Web Design For The Profesional In You</h5>
<img onmouseover="hoverImg(this)" onmouseout="normalImg(this)" src="image/arrowBtn.png" />
</div>
</div>
Please take a look at https://jsfiddle.net/avzfdc2j/3/
It has been done using css with background image and transition
div.smile {
background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
cursor: pointer;
}
div.smile:hover {
background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");
transition: ease 0.5s;
}
<div class="smile"></div>
You should be changing the src attribute instead:
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
But I don't think that the transition will work with this.
Since it's an image, you need to change it's src property, not it's CSS.
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
I have some simple transition animation, I want to make text ( A href ) invisible, so I used "display: none" and I want to make it visible with "display: block" after image coming through it using "onclick" thing from javascript on that image. Here is my jsfiddle : http://jsfiddle.net/ofy4t5a8/
#facebook_text a {
position: absolute;
font-size: 15px;
color: #000;
text-decoration: none;
margin-left: 50px;
margin-top: -10px;
z-index: 1;
display: none;
}
#facebook_image.fly {
position: absolute;
margin-left: 125px;
margin-top: 0px;
transition: all 5s ease-out;
}
#facebook_image img {
position: absolute;
z-index: 10;
height: 35px;
width: 35px;
margin-top: -15px;
}
<div id="facebook_text">
Facebook
</div>
<div id="facebook_image">
<img class="image_animation" src="facebook.jpg"></img>
</div>
<script>
document.querySelector('.image_animation').onmouseover=function() {
var d = document.getElementById("facebook_image");
d.className = d.className + " fly";
}
</script>
facebook_imageYou should catch event when it ends, you can do it like this:
transitionEnd = (function transitionEndEventName() {
var i,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] != undefined) {
return transitions[i];
}
}
})();
var a = document.querySelector('a');
var b = document.querySelector('.facebook_image');
b.addEventListener(transitionEnd, function(){
a.style.display = "block";
}