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>
Related
I can't figure out why I'm getting this little bit of green when the window is an odd number of pixels wide. I think it has something to do with sub-pixel rendering, but I'm just not sure where the green is coming from. It's just the 2nd div too which is weird.
I have some script that is animating the BG of this div. I'm sure this is part of the issue, but I can't figure out why it's only happening to my 2nd div.
I tried to manually set the width of this div, but I was hoping it would be responsive and scale with the window size.
let currentStage = 1
function performAction(selectedStage) {
currentStage = selectedStage
let stages = document.body.getElementsByClassName('stage-flow-item')
let stageLines = document.body.getElementsByClassName('stage-flow-line')
console.log("selectedStage: " + selectedStage)
for (let stage of stages) {
if (stage.id > currentStage) {
stage.classList.remove('completed')
stage.classList.add('active')
} else {
stage.classList.remove('active')
stage.classList.add('completed')
}
}
for (let stageLine of stageLines) {
if (stageLine.id > currentStage) {
stageLine.classList.remove('lineCompleted')
stageLine.classList.add('lineActive')
} else {
stageLine.classList.remove('lineActive')
stageLine.classList.add('lineCompleted')
}
}
}
.stage-flow-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 0 30px;
}
.stage-flow-item {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.stage-flow-item.active {
background-color: #ddd;
}
.stage-flow-item.completed {
background-color: #6ab04c;
}
.stage-flow-line {
width: calc(100vw);
height: 6px;
background-color: #ddd;
/* default color */
background: linear-gradient(to left, #ddd 50%, #6ab04c 50%) right;
position: relative;
background-size: 200%;
transition: .5s ease-out;
}
.stage-flow-line.lineCompleted {
background-position: left;
background-color: #6ab04c;
}
.stage-flow-line.lineActive {
background-position: right;
background-color: #ddd;
}
<div class="stage-flow-container">
<div id=1 class="stage-flow-item" onclick="performAction(1)">1</div>
<div id=1 class="stage-flow-line"></div>
<div id=2 class="stage-flow-item" onclick="performAction(2)">2</div>
<div id=2 class="stage-flow-line"></div>
<div id=3 class="stage-flow-item" onclick="performAction(3)">3</div>
</div>
I'm not sure if this is on the right track, but I'd eliminate the odd 100vw width on the connectors and instead make them flex. I'd then remove the 200% background size multiplier. By setting the gradient points to 100% the problem is gone. I really don't know if this covers your use case, though.
I converted from background gradient to a pseudo-element solution for the color transition. I think it's simpler. You'd probably have to use CSS animations (as opposed to simple transitions) to make it work otherwise. Of course, you could apply the same principle to the stage items as well, implementing a delay to crate a consistent animation across the item and the line.
Note that duplicated ID values are invalid in HTML. They must be unique. I've refactored to use data attributes instead and an event listener instead of inline JavaScript.
const stageEls = document.querySelectorAll('.stage-flow-item')
const lineEls = document.querySelectorAll('.stage-flow-line')
let currentStage = 1
stageEls.forEach(el => {
el.addEventListener('click', () => {
performAction(el.dataset.stage)
})
})
function performAction(selectedStage) {
currentStage = selectedStage
for (let el of stageEls) {
if (el.dataset.stage > currentStage) {
el.classList.remove('completed')
el.classList.add('active')
} else {
el.classList.remove('active')
el.classList.add('completed')
}
}
for (let el of lineEls) {
if (el.dataset.stage > currentStage) {
el.classList.remove('lineCompleted')
el.classList.add('lineActive')
} else {
el.classList.remove('lineActive')
el.classList.add('lineCompleted')
}
}
}
.stage-flow-container {
display: flex;
align-items: center;
height: 70px;
padding: 0 30px;
}
.stage-flow-item {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.stage-flow-item.active {
background-color: #ddd;
}
.stage-flow-item.completed {
background-color: #6ab04c;
}
.stage-flow-line {
flex: 1;
height: 6px;
background: #ddd;
position: relative;
}
.stage-flow-line::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #6ab04c;
transition: all 0.5s ease-out;
}
.stage-flow-line.lineCompleted::after {
width: 100%;
}
<div class="stage-flow-container">
<div data-stage=1 class="stage-flow-item">1</div>
<div data-stage=1 class="stage-flow-line"></div>
<div data-stage=2 class="stage-flow-item">2</div>
<div data-stage=2 class="stage-flow-line"></div>
<div data-stage=3 class="stage-flow-item">3</div>
</div>
I'm new to programming and currently working on my portfolio. I've created a dropdown list that appears when a user hovers over it. Once it appears I want to make the rest of the website darker so the dropdown list can stand out from the rest.
I'm trying to use the body::after pseudo class for that and it works but not when I hover over the dropdown so I must be doing something wrong. Could anyone please help me?
The dropdown list has a class of .dropdown
body::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
}
.dropdown:hover body::after {
opacity: 0.5;
}
Link to my project in case that helps:
https://annaxt.github.io/product_landing_page/plant_store.html
Thank you!
You could add the overlay as it's own element and then control the opacity using JavaScript. Everything you would want to show above it would need to have a z-index higher than what you're setting on the overlay and everything that would be affected by the overlay should have a lower z-index (default is 0).
let overlay = document.getElementById("overlay");
function showOverlay() {
overlay.style.zindex = 9;
overlay.style.opacity = 0.3;
}
function hideOverlay() {
overlay.style.zindex = -1;
overlay.style.opacity = 0;
}
#overlay {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
transition: opacity .8s;
}
.dropdown {
font-size: 50px;
background: #369;
color: white;
font-family: sans-serif;
}
<body>
<div class="dropdown" onmouseout="hideOverlay()" onmouseover="showOverlay()">Hover me</div>
<div id="overlay" />
</body>
I am not sure whether we can do this with css or not. but what you are trying to achieve can be easily done by js.
Below is code to help you.
$(document).ready(function() {
$(".dropdown").mouseenter(function() {
$("body").addClass("open");
});
$(".dropdown").mouseleave(function() {
$("body").removeClass("open");
});
});
.main {
display: flex;
}
.open {
height: 100%;
width: 100%;
background: #232323;
transition:.5s;
}
.dropdown {
background-color: #f5f5f5;
height: 200px;
width: 200px;
margin-right: 15px;
transition:.5s;
}
.main:hover .dropdown{
filter:blur(1px);
}
.main:hover .dropdown:hover {
background-color: red;
filter:blur(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="dropdown">
dropdown1
</div>
<div class="dropdown">
dropdown2
</div>
<div class="dropdown">
dropdown3
</div>
<div class="dropdown">
dropdown4
</div>
</div>
</body>
I want to create an animation where every X seconds the active
class is changing to the next span inside the profession-wrapper span,
in a way that the developer span will slide on top of the active span in a way
that will show the letters of the new active span, slide on top of it while hiding each letter
and when it covers the entire word the active class will go to the next span.
I got the developer span to slide, and the active class to work as they should,
however the developer span does not cover the active span that it slides on,
and since the length of the text is different for each span the sliding doesn't finish on the end of the word but in a fix place that leaves a lot of empty space between the | and the active span.
How can I achieve the slide to cover the text it slides on, and make sure that the slide will finish on the end of the new active word?
const firstProfession = document.querySelector('.profession-wrapper').firstElementChild;
let professionActive = document.querySelector('.active');
setInterval(() => {
professionActive.classList.remove('active');
professionActive.classList.add('inactive');
if (professionActive.nextElementSibling) {
professionActive = professionActive.nextElementSibling;
} else {
professionActive = firstProfession;
}
professionActive.classList.remove('inactive');
professionActive.classList.add('active');
}, 6000);
.profession-header {
display: flex;
width: 100%;
position: relative;
}
.profession-wrapper {
position: relative;
display: flex;
padding-right: 7px;
}
.inactive {
opacity: 0;
position: absolute;
overflow: hidden;
display: inline-block;
}
.active {
opacity: 1;
display: inline-block;
position: relative;
overflow: hidden;
width: max-content;
padding-right: 5px;
}
.developer::before {
content: '';
border-left: 2px solid white;
display: block;
margin-right: 5px;
height: 1.5rem;
position: absolute;
left: -7px;
}
.developer {
position: absolute;
animation: slide-text-in-out 6s ease-in-out infinite;
}
#keyframes slide-text-in-out {
0% {
left: 8px;
}
45%, 55% {
left: 50%;
}
100% {
left: 8px;
}
}
<h5 class="profession-header">
<span class="profession-wrapper">
<span class="profession active">Web</span>
<span class="profession inactive">Full Stack</span>
<span class="profession inactive">Front End</span>
<span class="profession inactive">Back End</span>
</span>
<span class="developer">Developer</span>
</h5>
UPDATED VERSION
In response to the OP's comment below, here is an updated version of the animation script/css, that respects the width of the profession when animating the .developer element.
It works basically the same, but uses CSS transition and transform instead of animation and left to move the .developer div.
setupProfessionAnim(document.querySelector('.profession-header'));
function setupProfessionAnim(containerEl) {
let professions = Array.from(containerEl.querySelectorAll('.profession')),
sliding = containerEl.querySelector('.developer'),
covered = true; // <-- state tracking variable
sliding.addEventListener('transitionend', runNextAnimation); // <-- changed event
runNextAnimation(); // <-- starts the first transition
function runNextAnimation() {
let active, next;
covered = !covered; // <-- inverse the state
if (covered) { // <-- are we in covering mode?
sliding.style.transform = 'translateX(0)'; // <-- then cover
return; // <-- and stop further processing
}
// otherwise
active = getWithClass(professions, 'active');
next = active.nextElementSibling ? active.nextElementSibling : professions[0];
next.classList.add('active'); // <-- switch the .active class
active.classList.remove('active'); // <-- here, too
sliding.style.transform = 'translateX(' + getWidth(next) + 'px)'; // <-- and let the .developer div uncover
}
}
function getWithClass(elList, className) {
return elList.find
? elList.find(el => el.classList.contains(className))
: elList.filter(el => el.classList.contains(className))[0];
}
function getWidth(el) {
return el.getBoundingClientRect().width;
}
.profession-header {
display: flex;
width: 100%;
position: relative;
}
.profession-wrapper {
position: relative;
display: flex;
padding-right: 7px;
}
.profession {
display: none;
width: max-content;
padding-right: 1ex;
}
.profession.active {
display: block;
}
.developer {
position: absolute;
width: 160px; /* adjust if necessary */
background-color: #fff; /* remove if you like, just for demonstation purposes */
transform: translateX(0);
transition: transform 2s ease-in-out 0s;
}
<h5 class="profession-header">
<span class="profession-wrapper">
<span class="profession active">Web</span>
<span class="profession inactive">Full Stack</span>
<span class="profession inactive">Front End</span>
<span class="profession inactive">Back End</span>
</span>
<span class="developer">Developer</span>
</h5>
PREVIOUS VERSION
You should avoid having an implicit requirement between setInterval and CSS animation timings. Instead, use the events a CSS animation fires to switch classes. This makes sure your animation "timelines" cannot get out of sync (another way to view it is that it ensures there's just a single timeline instead of multiple).
Below is a working example that addresses your problems. Please note the comments I left!
setupProfessionAnim(document.querySelector('.profession-header'));
function setupProfessionAnim(containerEl) {
let professions = Array.from(containerEl.querySelectorAll('.profession')), // get an array of all professions
sliding = containerEl.querySelector('.developer'); // get the 'developer' element
sliding.addEventListener('animationiteration', runNextAnimation); // re-execute runNextAnimation whenever an animation iteration finishes
function runNextAnimation() {
// this actually switches the classes from 'active' to 'inactive' and vice-versa
let active = getWithClass(professions, 'active'), // get the current 'active' profession
next = active.nextElementSibling ? active.nextElementSibling : professions[0]; // find next profession
active.classList.replace('active', 'inactive'); // switch!
next.classList.replace('inactive', 'active'); // here, too!
}
}
function getWithClass(elList, className) {
// convenience helper, uses Array.prototype.find if available and falls back to Array.prototype.filter
return elList.find
? elList.find(el => el.classList.contains(className))
: elList.filter(el => el.classList.contains(className))[0];
}
.profession-header {
display: flex;
width: 100%;
position: relative;
}
.profession-wrapper {
position: relative;
display: flex;
padding-right: 7px;
}
.inactive {
opacity: 0;
position: absolute;
overflow: hidden;
display: inline-block;
animation: slide-text-out 2s ease-in-out;
}
.active {
opacity: 1;
display: inline-block;
position: relative;
overflow: hidden;
width: max-content;
padding-right: 5px;
animation: slide-text-in 2s ease-in-out;
}
/* --- removed ---
.developer::before {
content: '';
border-left: 2px solid white;
display: block;
margin-right: 5px;
height: 1.5rem;
position: absolute;
left: -7px;
}
--- removed --- */
.developer {
position: absolute;
/* --- new additions --- */
width: 160px; /* adjust if necessary */
border-left: 2px solid white;
padding-left: 5px;
background-color: #fff; /* remove if you like, just for demonstation purposes */
/* --- end new additions --- */
animation: slide-text-in-out 6s ease-in-out infinite;
}
#keyframes slide-text-in-out {
0% {
left: 0;
}
45%, 55% {
left: 50%;
}
100% {
left: 0;
}
}
<h5 class="profession-header">
<span class="profession-wrapper">
<span class="profession active">Web</span>
<span class="profession inactive">Full Stack</span>
<span class="profession inactive">Front End</span>
<span class="profession inactive">Back End</span>
</span>
<span class="developer">Developer</span>
</h5>
I'm creating a portfolio website and the way I'm navigating through projects is by using "status". So for instance, if you click/scroll once, project 1 will reveal. Click/scroll a second time, project 2 will reveal. So on so forth.
<body onwheel="switchprojects()"></body>
<div class="explore-box" onClick="switchprojects()"></div>
projectStatus = 1;
function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}
else if(projectStatus==2) {
$('#peak').removeClass('float');
$('#trap').addClass('float');
projectStatus = 3;
}
else if(projectStatus==3) {
$('#trap').removeClass('float');
$('#fp').addClass('float');
projectStatus = 4;
}
else if(projectStatus==4) {
$('#fp').removeClass('float');
$('#bona').addClass('float');
projectStatus = 1;
}
}
As you can see I have two separate elements, one for scrolling and one for clicking. It's working great so far, but I'm running into one issue—the status does not update between the two elements. If I scroll twice in the body for example, the same function on the clickable div won't update its status. Does anyone know how to fix this?
Thank you!
https://codepen.io/anon/pen/qozoKj Here's the codepen.
UPDATE: I'm not sure why, but when I uploaded my code to codepen, it seems to have updated the status of the clicks....but now every key on my keyboard activates the css change. I'm very confused.
The reason all the keys are triggering switchprojects() is because you have an onkeydown="switchprojects()" on the <body>.
The reason the clicks are not listened to is that the <div class="explore-box"> has no height or width set on it although its position: absolute. Mabey you should consider changing the click event to the <div class="section"> CodePen
Try something like
$(function(){
$('#bona').addClass('float');
});
projectStatus = 1;
function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}else if(projectStatus==2) {
$('#peak').removeClass('float');
$('#trap').addClass('float');
projectStatus = 3;
}else if(projectStatus==3) {
$('#trap').removeClass('float');
$('#fp').addClass('float');
projectStatus = 4;
}else if(projectStatus==4) {
$('#fp').removeClass('float');
$('#bona').addClass('float');
projectStatus = 1;
}
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.section {
width: 100%;
height: 100vh;
position: relative;
}
h1 {
color: white;
font-family: 'league';
font-size: 8vw;
position: absolute;
text-align: center;
line-height: 100vh;
width: 100%;
font-weight: 100;
margin: 0;
padding: 0;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
transition: 0s;
}
.float {
transform: translate(0)!important;
transition: transform 1s;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
opacity: 1!important;
}
.explore-box {
position: absolute;
margin-left: 55%;
margin-top: 70vh;
}
.explore-line {
background-color: white;
width: 70px;
height: 1px;
position: relative;
float: left;
margin-top: 9pt;
margin-right: 7pt;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
transition: 0.4s;
}
.explore-wrap {
overflow: hidden;
float: right;
}
.explore-wrap h2 {
color: white;
margin: 0;
font-size: 14pt;
transform: 1s ease;
}
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<body style="background-color: #141219;" onwheel="switchprojects()">
<div class="section">
<h1 id="bona" style="transform: translateY(10%); opacity: 0;">BONA COFFEE</h1>
<h1 id="peak" style="transform: translateY(10%); opacity: 0;">PEAK EXPLORATIONS</h1>
<h1 id="trap" style="transform: translateY(10%); opacity: 0;">TRAP MAGAZINE</h1>
<h1 id="fp" style="transform: translateY(10%); opacity: 0;">FIELD & PANTRY</h1>
<div class="explore-box" onClick="switchprojects()">
<div class="explore-line"></div>
<div class="explore-wrap">
<h2>View</h2>
</div>
<br>
<div class="explore-wrap" style="position: absolute; right: 0;">
<h2>Project</h2>
</div>
</div>
</div>
</body>
As You say I have added the click event on View Projects instead of body
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>