I've this function perfectly working on chrome and firefox (both on macOs). I've checked it in safari 10.03(macOs) and it fire on mouseenter but not on mouseleave.
Function:
$(document).ready(function(){
$("#mazzo").on("mouseenter", ".pick", function() {
var immagine = $(this).data('immagine');
$("#anteprima").attr("src", immagine);
});
$("#mazzo").on("mouseleave", ".pick", function() {
$("#anteprima").removeAttr("src");
console.log("Mouse out");
});
});
HTML:
<div id="peranteprima">
<img id="anteprima" src="immagini/void.png" alt="">
</img>
</div>
<div id="mazzo">
<div class="pick" id="0" data-immagine="immagini/12345.png">
<img src="immagini/pick.png" alt="immagine box" class="box">First pick
</div>
</div>
CSS:
#peranteprima {
position: relative;
margin-left: -213px;
}
#anteprima {
position: fixed;
bottom: 75%;
top: 0%;
max-width: 215px;
height: 322px;
z-index: 10;
}
I've tried to set .attr("src", "") but the behaviour on safari it's the same. I've also tried mouseout but with no luck.
The mouseleave event reference say this:
Safari 7 fires the event in many situations where it's not allowed to,
making the whole event useless. See bug 470258 for the description of
the bug (it existed in old Chrome versions as well). Safari 8 has
correct behavior
I've checked many times for a solution here and on other sites but I've found only unanswered question or nothing that fit my problem right now.
There's a way to make it work on safari?
Related
I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same.
Is there a difference between the two, and if so when should I use them?
(Also applies for mouseout vs mouseleave).
You can try out the following example from the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.
var i = 0;
$("div.overout")
.mouseover(function() {
i += 1;
$(this).find("span").text("mouse over x " + i);
})
.mouseout(function() {
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave")
.mouseenter(function() {
n += 1;
$(this).find("span").text("mouse enter x " + n);
})
.mouseleave(function() {
$(this).find("span").text("mouse leave");
});
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>
In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from outside this element to this element.
Or as the mouseover() docs put it:
[.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.
Mouseenter and mouseleave do not react to event bubbling, while mouseover and mouseout do.
Here's an article that describes the behavior.
As is often true with questions like these, Quirksmode has the best answer.
I would imagine that, because one of jQuery's goals is to make things browser agnostic, that using either event name will trigger the same behavior. Edit: thanks to other posts, I now see this is not the case
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
});
I couldn't find a more direct way to ask people who are familiar with hammer.js so i'm posting here.
So i've been working on a web app with 8thwall using hammer.js for swiping/scrolling. i've been testing it on my samsung 10 and only now testing on the iphones. The swiping/scrolling has been working fine with my samsung 10 but it doesnt work at all with iphones that i could get my hands on. I've tried iphone 8plus, iphone xr, iphone 6s. Please advise on what i need to do. Thank you.
my codes :
//SCROLLING FUNCTION
AFRAME.registerComponent('scroll-lines', {
init: function(){
var container = document.getElementById("scrolling-container");
var content = document.getElementById("button-collections");
var hammer = new Hammer(container);
var initialX = 0;
var deltaX = 0;
var offset = initialX + deltaX;
hammer.on("panleft panright", function(ev) {
deltaX = ev.deltaX;
offset = initialX + deltaX;
container.scroll(-offset, 0);
});
Hammer.on(container, "mouseup", function(e) {
initialX = offset;
});
}
})
<!--SCROLLING BUTTONS-->
<!--IN ORDER FOR THESE TO BE DISPLAYED NEED TO STYLE THE Z-INDEX: 10. REFER style.css PAGE-->
<div id="scrolling-container">
<div id="button-collections">
<div id="box-all" class="cantap"></div>
<div id="box-seremban" class="cantap"></div>
<div id="box-klang" class="cantap"></div>
<div id="box-ampang" class="cantap"></div>
<div id="box-petaling" class="cantap"></div>
<div id="box-kj" class="cantap"></div>
<div id="box-ekspres" class="cantap"></div>
<div id="box-transit" class="cantap"></div>
<div id="box-monorail" class="cantap"></div>
<div id="box-kajang" class="cantap"></div>
<div id="box-skypark" class="cantap"></div>
</div>
</div>
The CSS:
#scrolling-container{
z-index: 10;
position: absolute;
display: flex;
top: 55%;
width: 100%;
cursor: pointer;
background-color: red;
}
#button-collections{
display: flex;
flex-direction: horizontal;
overflow: scroll;
height: 150px;
padding-top: 170px;
width: 100%;
}
UPDATE: I tried the suggestions below but they did not resolve the issue. I found that if i used var hammer = new Hammer(container); it works for android not iOS but if i use var hammer = new Hammer(content); it works for both but at the mouseup function i am not able to scroll to the end for both iOS and android. using panleft, panright, panend
UPDATE 2: So since hammerjs is sorta working on the iphone, my question is sort of answered. closed question. opened a new follow up question for current situation
Well are you sure you want to use pan? Pan is for dragging basically. Swipe is called swipe in hammer.js. It could be that on android the correct gesture is triggered, but not on iphone. If you move your finger fast, its a swipe, and won't be recognized as a pan. Also instead of mouseup you should use panend probably (because maybe android fires mouseup, and iphone doesn't).
Possible events with pan are:
panstart
panmove
panend
pancancel
panleft
panright
panup
pandown
Try to use swipeleft and swiperight events instead of pan events.
Without a cursor defined on the elements iOS does not fire the mousedown or mouseup client-side events which are needed for swipe. See How to make my 'click' function work with iOS.
Assign a class ios-device to your <body> when you detect iOS and use the following style.
body.ios-device {
cursor: pointer !important; /* iOS click events don't fire without this! */
}
I want to use this drag and drop function also on mobile devices but when I run it on my mobile phones it doesn't work.
Here is the code:
copy = 1;
$('.dragArea img').on('dragstart',function(e) {
console.log('dragge it!',e);
e.originalEvent.dataTransfer.setData("text",e.target.id);
}).on('dragend',function(e) {
console.log('dragged',e);
});
$('.drop-field').on('dragover',function(e) {
//console.log('dragover',e);
e.preventDefault();
}).on('drop',function(e) {
e.preventDefault();
//window.status = 'successfully dragged';
console.log('drop',e,window.status);
data = e.originalEvent.dataTransfer.getData("text");
$(this).append(copy ? $('#' + data).clone() : $('#' + data));
});
.drop-field {
border: 4px #287CA1 dashed;
display: inline-block;
min-width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragArea">
<img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" />
</div>
<div class="dropArea">
<span class="drop-field"></span>
<span class="drop-field"></span>
</div>
Probably because the drag and drop functions use mousedown and mouseup, whose are not mobile compliant.
Here is a linked topic : How to get jquery dragging working on mobile devices? where the suggested solution to use jQuery UI Touch Punch (which convert click events to touch events).
I'm using the fullscreen.js script and in one of my screens I will have a fullscreen Vimeo video. Apparently this will cause issues in FF and prevents me from scrolling up or down as soon as I reach the screen with the video. The issue was submitted to the GitHub page of the script but the author dismissed it as it's a FF issue (https://github.com/alvarotrigo/fullPage.js/issues/803).
I'm using all this with foundation CSS for the responsive video:
<div class="flex-video widescreen vimeo">
<iframe src="<?php the_sub_field('video') ?>"
width="400"
height="225"
frameborder="0"
webkitAllowFullScreen
mozallowfullscreen
allowFullScreen></iframe>
</div>
The bug is this one: https://bugzilla.mozilla.org/show_bug.cgi?id=779286 but I don't see that it was solved on FF 36 on Mac. The issue is not happening on chrome either.
Here is an example of the issue by someone else on the GitHub thread: http://jsbin.com/tunove/1/edit?html,output
The Issue:
The Mozilla bug you are looking at actually refers to the fullscreen mode API, an unrelated API that was fixed. I think the bug report you are looking for is this one:
Bug 1084121 - Mouse wheel event is captured by iframe and not propogated.
Steps to reproduce:
I have a div in which I manually capture mousewheel events, and use
that to scroll the div. Inside of this div, I have an embedded youtube
video, in an iframe.
Actual results:
While scrolling, if the mouse is over the iframe, scrolling no longer
works, because all mouse events, including mouse wheel events, are
captured by the iframe, and are not sent to the parent window.
Expected results:
The mouse wheel event should have been propagated to the parent
window. This is the behavior in chrome and safari.
Since the iframe is on a different domain, there does not appear to be
any feasible workaround for this.
This bug report is still open, and does not appear to be in the process of being implemented.
Also, according to the bug report, this behavior is not defined by any specification.
For what it's worth, I gave this bug report a vote to increase the importance. I agree, this is a user experience problem.
Workarounds:
Unfortunately, as far as directly fixing the wheel event issue goes, the suggestions in that GitHub issue are about all we have for cross-origin iframes. If the framed content were on the same domain or otherwise under your control, you could add another event listener inside the iframe, but Same-Origin Policy prevents this cross-domain.
The only options available to prevent the iframe from stealing the wheel events for cross-origin frames are:
Cover most or all of the iframe with transparent divs.
Use pointer-events: none; on the iframe. This will also prevent clicking on the video at all, so it has the same effect as covering the entire video with a transparent div.
Other Options:
This issue is apparently limited to the wheel events as it is possible to scroll a parent document while scrolling over an iframe.
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E" style="width: 100%; height: 100px;"></iframe>
<div style="background: red; width: 20px; height: 5000px;"></div>
fullPage.js is not structured this way, but if a parent element to the iframe were actually a scrollable element, it would be possible to listen for the scroll event and react to that.
It's a little shaky, but here's an example of something similar using the scroll event instead of the wheel event.
Example (JSFiddle):
var autoScrolling = false;
$('.wrap').on('scroll', function(e) {
if (autoScrolling) {
return;
}
//Get this element and find the number of children.
var $this = $(this);
var children = $this.children('.pane').length;
//Find the height of each pane, and the current position.
var paneHeight = this.scrollHeight / children;
var position = this.scrollTop / paneHeight;
var positionRound = Math.round(position);
//Find the target position.
var positionOff = position - positionRound;
var toShow = null;
if (positionOff < 0) {
toShow = positionRound - 1;
}
else if (positionOff > 0) {
toShow = positionRound + 1;
}
//If scrolling to a new pane, find the next one.
if (toShow !== null) {
autoScrolling = true;
$this.animate({
scrollTop: paneHeight * toShow
}, {
duration: 1000,
complete: function() {
setTimeout(function() {
autoScrolling = false;
}, 500);
}
});
}
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
overflow: auto;
}
.pane {
width: 100%;
height: 100%;
position: relative;
}
iframe {
background: white;
border: 0;
outline: 0;
display: block;
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="pane" style="background: red;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
<div class="pane" style="background: green;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
<div class="pane" style="background: blue;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
</div>
(Please see this link to jsfiddle -
http://jsfiddle.net/AshThomas/742tvhqy/1/)
Hi there,
If this code runs on a computer... when the menu button is clicked, the button still appears 'hovered' until the cursor is moved (i.e. if you click the button and don't move the cursor, the button still appears 'hovered')
Also, if this code is run on the Samsung Galaxy S3 Mini's standard internet browser (this could be the same for other android phones), the menu opens and then closes instantly, even though the menu button is only pressed once.
I believe these two occurrences are linked but I cannot seem to find a solution.
Basically, I am looking to stop the menu button from appearing 'hovered' once the button is clicked (and without having to move the cursor) and I would like the menu to stay open when the menu button is pressed on the phone mentioned above... hopefully these two problems are related!
<body>
<div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed;
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease;
transition: right 300ms ease; right: -15.625em; -webkit-overflow-scrolling: touch;">
<div id="menuWrapper">
<ul>
<li class="boldMenu">Home
</li>
<li class="boldMenu">About
</li>
<li class="boldMenu">Contact
</li>
</ul>
</div>
</div>
<div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">
☰
</div>
I've fixed your issue. I guess it's a bug of browser, because it's not re-rendering DOM elements after animation.
http://jsfiddle.net/742tvhqy/4/
Check out line #104
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
You see that last line with fadeOut/fadeIn? That's the fix. I've tried with hide().show(); but it's not working, even if i use fadeOut(1) it's not working :) But common, 5ms is same as 1ms. I can't think any better solution right now. It works.
BTW. In your place I would just do all this stuff with few lines of jQuery code instead of all that fancy css animation stuff..
maybe do this... add another class to the button and give the class the hovered properties in css...
menu-link-class:hover {...}
then do this in your js
$('.menu-link').click(function() {
var me = $(this);
me.removeClass('menu-link-class');
setTimeout(function() {
me.addClass('menu-link-class');
},1);
});
UPDATE:
Special thanks to #Lukas Liesis
you have 2 choises :)
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
or
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.removeClass('menu-link-class');
setTimeout(function() {
menuLink.addClass('menu-link-class');
},1);
});