How do you capture mouseout on window? - javascript

QUESTION DOES NOT ALREADY HAVE AN ANSWER (if you can provide code that works instead of googling my question and linking to whatever answer comes up for the sweet sweet internet points then I will accept it as an answer. But since I have already been to all of those questions don't pretend like they work unless you can provide actual code that you have tested)
If you just do
$(window).on("mouseout", function() { alert("OUT"); });
you can mouseout on the left or right side of the window and it doesn't fire the event. I made a jsfiddle here but it actually works fine because there is a border around the iframe.
So what is the best way to know if a mouse has left the window? I can put a 1px border around the page (composed of 4 divs). I can monitor x/y and tell if the mouse is on an edge. But ideally $(window).on("mouseout", foo) would tell me when the mouse has left the window.

This answer is working: https://stackoverflow.com/a/3187524/2831645
Using jQuery you can rewrite the code like this:
$(window).on("mouseout", function(e) {
if(!e.relatedTarget || e.relatedTarget.nodeName == 'HTML') {
alert('left window');
}
});
The code has been tested on latests Firefox & Chrome.

Related

how to scroll to an anchor point with smooth animation adobe edge

I can't find this seemingly simple answer. I am trying to make an animated button on my site scroll to an anchor point on my site(it's just one huge page)
The code I currently have in the code snippet box in edge doesn't work. It's kind of frustrating because with edge you're not entirely sure where your code is being thrown into the end result.
// insert code for mouse click here
window.scrollTo(0,0);
//want it to scroll to #Main
most of the code in edge starts you off with:
sys.someAction()
Here's my site if you want to look at what I'm trying to do:
www.daniellachman.com
Thanks!
Edit: Here is the full code snippet, provided with the code supplied below:
//Edge binding end
//CUSTOM CODE FROM Monty82
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
//Edge binding end
//Original Mouse Clicking Function Provided by Edge
Symbol.bindElementAction(compId, symbolName, "${_newlogoheader}", "click", function(sym, e) {
// insert code for mouse click here
//Stuff I added to call custom function above
sym.scrollToTag("main")
});
It didn't work. But I feel like I'm on the right track.
www.daniellachman.com
If anyone knows how to look at the javascript for the menu nav buttons "about" "contact" and see what that is referencing for the scroll. I'd love to hear it.
This function in JavaScript/jQuery may help you:
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
The parameter is the name (not the id but the name) of the anchor to which you want to scroll.
Notice that the function is designed for vertical scrolling, your site seems to require vertical and horizontal, so you may need to use scrollLeft too.

Firefox seems to ignore event.preventDefault()

I'm working on a page where I have a draggable item (a map inside a container). When you click and drag with the mouse, the map moves and everything is fine. I then wanted to add the same functionality for touch devices (such as a smartphone or a tablet). I searched the net and found a working script that "changes" touch input to mouseinput and thus making it possible to drag the map without dragging the entire page (which is standard behaviour). This is done using the line
event.preventDefault()
It is even possible to have click events as well by timing how long apart the touches are. I am no coding genius and all this programming was done by others. You can see the discussion at Javascript Drag and drop for touch devices (I have used the original code in the top answer as well as the timing code in the answer just below the top answer).
So far, so good. It is now possible to drag the map around and click any links on it or the page just as you would, if you were using a mouse. This works on all touch browsers I have tried (I haven't tried a lot, but the ones I've tried work). The only problem is, that you cannot drag the page itself around, since the default behaviour of the touch has been disabled. This is a problem when the content of the page (for instance the size of the map container) is larger than the browser window.
Luckily an answer was provided for this as well (it is the bottom-most answer on the page I linked to above): replacing
event.preventDefault()
with
if (touches.length > 1) event.preventDefault();
the default scrolling/resizing etc. of a touch works if you use one finger, but if you use more than one finger, the default behaviour is prevented. In other words: If you use two fingers, you can drag the map around without dragging the page (just as before), but if you use one finger, you can drag the page around! I really like this solution as it seems quite elegant to me.
Well, I added the line and tested on the default browser on my HTC Incredible phone (way to small screen but it is what I have). The default browser is just called "Internet". Everything works perfectly!
So, I test on Firefox and Opera, and unfortunately, they are not working perfectly. It seems that once the
event.preventDefault()
is inside the "if" statement, it is completely ignored, so when I drag the map, it IS dragged (as the touch is still converted to a drag of the mouse), but the page itself is also dragged, regardless of the number of fingers I use. In short: The page behaves as if no
event.preventDefault()
is triggered.
I have looked around for several hours and have come to suspect that the event variable needs to be initialized or imported for Firefox and Opera to be able to use it, as described here: jQuery event.preventDefault() not working in Firefox (JSFiddle included)
My question (at long last): Could this be right, and how do I go about "importing" the event into the "if" statement?
The code is here (the init() function is triggered by body onload)
<script type="text/javascript">
var clickms = 400;
var lastTouchDown = -1;
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
var d = new Date();
switch(event.type)
{
case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
case "touchmove": type="mousemove"; lastTouchDown = -1; break;
case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
if (touches.length > 1)
{
event.preventDefault();
}
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
</script>
Edit: I should add that I have tried inserting an alert statement into the if statement, just to see whether Firefox or Opera actually register that a two-finger gesture is performed. The alert is triggered without problems, so perhaps the problem is that once Firefox or Opera has started a two-finger gesture, the standard behaviour of the gesture (draggring or resizing the page) cannot be stopped, at least not in this way.
I seem to have solved the problem (at least on the browsers at my disposal for testing)
What I did was changing
if (touches.length > 1) {
event.preventDefault();
}
to
if (event.touches.length > 1) {
event.preventDefault();
}
It's now possible to drag the draggable element around using two fingers without having the rest of the page move. It's still possible to drag the map with one finger on Firefox and Opera, but this is a minor thing, as soon as you adopt a "use only two fingers when you want to drag" attitude.
The only small issue is that both Firefox and Opera seem to jump back and forth between which fingertip they choose to focus on, making the draggable element jitter somewhat, especially when the fingers are a bit apart. This behaviour is not displayed in the "Internet" browser.

Why doesn't dragging images using JavaScript work in Firefox?

I'm using the code below for dragging an image (#StndSoln1). It works perfectly in Chrome and all, but not in Firefox. Here startDrag() is the function which i attached to the mousedown event listener. Could anybody please help me.
function initialFunction(){
document.getElementById("StndSoln1").addEventListener('mousedown',startDrag,false);
document.getElementById("StndSoln1").addEventListener('mousemove',drag,false);
document.getElementById("StndSoln1").addEventListener('mouseup',stopDrag,false);
}
function startDrag()
{
if (!moveFlag){
currentTraget=document.getElementById("StndSoln1");
offsetX=currentTraget.offsetLeft;
offsetY=currentTraget.offsetTop;
ImgPlaced=false;
moveFlag=true;
x=window.event.clientX;
y=window.event.clientY;
event.preventDefault();
}
}
// Fn for drag the current target object...
function drag(){
if (moveFlag && !ImgPlaced){
currentTraget.style.left=(offsetX+window.event.clientX-x)+"px";
currentTraget.style.top=(offsetY+window.event.clientY-y)+"px";
}
}
I actually had a similar problem, so I can try to help even without the code you're using.
See, the Firefox developers had this bright idea of making it so that, when you drag an image, you can "move" it around and possibly drop it in an Explorer window to quickly and easily download it, or to the tab bar to open the image in a new tab. The obvious downside of this is that it results in a default behaviour that other browsers don't have.
The simple solution is to make sure that all your events are properly cancelling the default action (event.preventDefault, return false, that kind of thing). Should that fail too, then you should use a <div> element with a background-image instead of an <img> element.

Multiple key presses in JavaScript only working in IE

I have the following code:
function handle_paste_keydown(key)
{
if(key.keyCode == 86 && key.ctrlKey) // Ctrl + V
{
alert("Test...");
}
}
This works in IE, but none of the other browsers. My reason for doing this is that I have finished creating a rich-text editor, but I need to handle the onpaste event carefully because formatted text is able to make it in to my editor, which could pose a minor risk to security, but also butchers my layout if malicious <span>s and <div>s make it in.
My current method is to give focus to an off-screen textarea, which means all code will be pasted in to that (which removes formatting); then I immediately grab the textarea.value and insert it at the current caret position in my contentEditable <div>.
So anyway, how do I get the Ctrl+V to work in all browsers and why doesn't it work in its current state?
Thank you.
If it works in IE but nowhere else you did something wrong.
Use the keypress event rather than keydown.
http://jsfiddle.net/Lxvgr/1/
document.getElementById('foo').onkeypress = function(e) {
if(e.charCode == 118 && e.ctrlKey) alert('pasted');
};
#Eric Sites: "use jQuery" isn't the answer to every javascript question. including an entire external framework to solve a simple 4byte issue like this is ridiculous.

Enabling close pop up similar to markers in Google maps

I think my problem is fairly simple, however I am unable to figure it out. I want to close a note pop up with an "x" icon/div in the top right corner of the note.
Currently I have this as the code. The only solution to minimize the note is to double click on it, which obviously isn't a viable solution.
$('.note').click(function (event) {
$(this).find('.notepopup').show();
});
$('.note').dblclick(function (event) {
$(this).find('.notepopup').hide();
});
I tried changing the second part to target the '.close' div, like this:
$('.close').click(function (event) {
$(this).find('.notepopup').hide();
});
I am beginning to think it has something to do with the relationship between .close and .notepopup - as in - .close is within the popup, whereas .note is in a sense the parent element of .notepopup
Any help would be great. If you really want to get crazy, you can look at what I'm working on: http://www.scottefloyd.com/notewebapp/demo.php
The problem is that you're looking for '.notepopup' inside '.close'. You need $(this).parents('.notepopup'); and that should get the element.

Categories