I'm trying to make a dynamic javascript menu (contained in a div) appear at a visitor's mouse coordinates when they press ctrl+m on their keyboard (m signifying menu, and ctrl+m not being bound in most browsers as far as I'm aware). This way, wherever they are on my site and wherever their mouse is, they can pull up the menu by just pressing that combination and return to wherever they wish to go. At the same time, having the menu not shown until they press the key allows me to control the design experience completely without having to worry about a nav menu.
I've pulled together two different pieces of code I found on here in an attempt to do this myself, but I'm running into an unexpected issue.
I'm not sure how to denote the ctrl+m key combination in the event handler.
I'm getting a couple of errors on the code checker that I'm not sure how to fix myself.
I'm not sure how to make it so that the menu appears on ctrl+m, and stays there until ctrl+m is pressed again (a toggle switch).
I'm still learning how Javascript works.
Here's the link to the progress I've made so far: http://jsfiddle.net/nrz4Z/
In your example, you're binding the mousemove handler inside the keypress handler. You need to do them separately:
var mouseX;
var mouseY;
$(document).ready(function () {
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(document).keypress(function (event) {
if (event.which == 109) {
$('#examples').css({
'top': mouseY,
'left': mouseX
}).fadeIn('slow');
};
});
});
That should allow you to get the position at which to show the menu.
Firstly the use of keypress is not a good idea - web is something that is on an unknowable amount of browsers and devices and plugins and you don't know what shortcuts are bound to especially ones using modifiers with a single key (in this case cmd+m or ctrl+m is an OS shortcut to minimise the window on many OSes. ctrl exists as cmd in os x and not at all on phones.)
To detect multiple key presses check here: Can jQuery .keypress() detect more than one key at the same time?
Next you can detect mouse movements and store them in a variable for use anywhere: How to get mouse position in jQuery without mouse-events?
Your menu should then be at the bottom of the DOM with only body as it's parent:
<nav>
<p>My Menu</p>
<nav>
</body>
Your nav should have whatever styling it needs in the css, as well as:
nav {
position: absolute;
display: none;
/*z-index: 700; nav is at bottom of dom so it will go above anything without a z-index but you may want it to go over other things */
}
When you have detected your key-presses you should do:
$('nav').css({top: mouseYCoord, left: mouseYCoord}).show();
Obviously give your menu a more useful name and don't select upon all 'nav' tags.
Related
I am trying to make some collapsible accordion containers on my website accessible, but I am running into an issue.
The accordions are controlled by link elements on the page - this way, a keyboard-only user can tab to them and access them. The first issue I ran into was that if a user tabbed to one of the links, the page wouldn't always scroll up to show them which one they had tabbed to. I fixed this issue setting the focus using the following code, which scrolls the link to the top of the viewport:
$(".accordion .accordion-item .accordion-heading a").focus(
function()
{
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(this).offset().top
}, 250);
}
);
The problem I am encountering now is that when a mouse-user clicks on the link, it jumps to the top of the page and does not open the container unless the mouse-user clicks the link again.
Is there a way I can set the focus code above to only fire if the link has been tabbed to? Or, is there a better way of handling the focus issue so that it works for both keyboard-only and mouse users?
Thanks!
Firstly a quick apology, having now seen your accordion is built correctly, links with in-page anchors are actually preferable if the accordion is constructed using javascript on page load and falls back to just a list of in page anchor links and content between them.
I am that used to seeing <a href="#"> on accordion openers and weird accordion implementations I jumped to conclusions, change it back from <buttons>!
Fixing your problem
Probably not the answer you are looking for but remove the .focus() function entirely.
It produces strange behaviour where if I have one accordion item open and i tab back with Alt + Tab quickly scrolling can be really confusing as it jumps around if you tab quicker than the scroll.
One of the golden rules of accessibility is to only adjusted the scroll position on a page if it is expected (i.e. a return to top button or using in-page anchors).
In the example and on your website once I disabled the 'scroll to top on focus' the site actually behaved as expected.
I understand why you did it as occasionally a link that is focused appears off the page, however this remedies itself when you tab again or by scrolling down (your site is logical so that if I tab and my focus is not visible I know it is off the page.)
This tends to happen (items not scrolling into view) when the item is just out of sight, by a px or two, it is common and ironically now falls into 'expected' behaviour (another rule, follow accepted and expected behaviour when designing components and pages).
If you really want to fix it
In your focus function instead of just scrolling to the top of the page whenever an item is focused, check if it is off the page.
Below is an example function I found (not tested) that you can use to check if the item is in the viewport, if it is then don't do anything, if it isn't then do your scroll function.
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
So roughly (yet again haven't tested that the correct items are passed in, this is just to give you an idea).
$(".accordion .accordion-item .accordion-heading a").focus(
function()
{
if(isInViewport(this) === false){
//item is not in the viewport so scroll it into view
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(this).offset().top //I would perhaps add a couple of hundred pixels here to make the item appear in a more natural area.
}, 250); //remove the animation as a further accessibility improvement, animations can be off putting to people with motion or anxiety disorders.
}
}
);
This fixes your problem as no mouse user will ever be able to click an item that is off the page so they won't ever trigger the scroll event that causes the focus issue.
You can change the event setting: Instead focus() event you will do a click() event: When you click a link, you'll scroll up. This will solve the problem of both keyboard navigation and mouse clicking;And this is also more true in terms of accessibility.
$(".accordion .accordion-item .accordion-heading a").click(
function(e)
{
e.preventDefault();
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(this).offset().top
}, 250);
}
);
Don't forget to change the link setting to a button by adding role=button attribute.
and add aria-expanded attribute.
I'm seeking an onmouseover event to detect when the mouse hovers the top of the window. I'm only able to find onmouseover events for the whole page. How do I restrict it to just the very top of the window?
There's no "element" on the page I'm trying to attach the event to, as some have suggested. This should work with any webpage - I do not have any control over the HTML on the page.
Need only support modern browsers, simplest method possible, no jQuery.
The onmouseover can be added to any HTML element, that is any div, p, span, img, ul, anything. Do you have an element that covers the portion of the page you are interested in? Then just add the event to that element.
If the area where you want to catch the mouse movement doesn't correspond to an actual element, you can do it by adding the eventlistener to the body and the check where the pointer is:
document.body.addEventListener("mousemove", function(event) {
//Check if we are in the top area of the page.
if(event.pageY < 300) {
//Do something here.
}
});
If you want it to use the top of the page area of the browser as opposed to the page itself (so that scrolling does not affect where the cut off is on the screen) just use clientY instead of pageY.
JSFiddle for pageY.
JSFiddle for clientY.
alerts when mouse is at top of page: demo on jsfiddle: DEMO
JS:
(function (){//alert at top
function getPosition(e){
if (e.pageY < 75) alert('top');//switch to clientY for top of screen
}
document.addEventListener('mousemove', getPosition, false);})();
EDIT:
use: clientY for top of view screen, as page may be longer, this stays with screen
use: pageY for top of your website only
Maybe works...
$('body').on('mouseover', function () { // bind change event to select
if (event.pageY < 10)
alert(event.pageY)
});
After searching and trying for a long time I can't seem to find a solution for this just yet.
What I am trying to do is animate an arrow to go to a specific location above the button that is clicked. There are 3 buttons (let's call them A, B and C), if A is clicked the arrow will go there and when C is clicked the arrow will go from A to C or when B is clicked, it will go from A to B.
A simple "left" animate function won't work since the positions and distances change every time. I have tried with the .step function and I guess it could work with that method but I can't seem to get it working the way it should. There is not much info about the .step function out there.
Closest I have came to achieve this is this, it moves to the correct position from any place the arrow is but it isn't animated, it just jumps. Here is the line of code:
Symbol.bindElementAction(compId, symbolName, "${_Button1}", "click", function(sym, e) {
sym.$("arrow").css({"-webkit-transform":"translate(11px, 201px)"})
});
(The weird markup is because I'm working in Adobe Edge. I'm testing all the possible ways of making HTML(5)/javascript ads and this is one of them)
How I would make an arrow animate to a clicked button:
$('.btn').click(function(){
$('#arrow').animate({
'left': ($(this).offset().left + ($(this).outerWidth()/2)) - $('#arrow').outerWidth(),
'top': $(this).offset().top - 20
});
});
Also, make the arrow position:absolute; if the buttons themselves dont have position:fixed.
Maybe I don't understand the question completely. But I don't understand why this wouldn't work.
If you mean the btns change position continously you will need to place the animate in a setInterval().
In Adobe Edge the code has to be something like this (based on this link):
sym.$('#arrow').animate({
'left': ($(this).offset().left + ($(this).outerWidth()/2)) - $('#arrow').outerWidth(),
'top': $(this).offset().top - 20
});
I never used Adobe Edge, but I could be that your error (Javascript error in event handler! Event Type = element) is having problems with this here and that there is another name to refer to the object that triggered the event.
I have a element on my website which is freely resizable. This is done by 4 handles on the edges. On hovering these handles and while resizing the element I want to show the respective resize arrows.
Currently I implemented this behavior by setting the css cursor style of the body/root to these arrows. The problem about it is the limit to the client area of the browser window. It would be visually more consistent and less confusing, if the arrow cursor would be visible everywhere while the mouse is hold down.
Google Maps is doing the same thing with their hand cursor while moving the map. So my question is how to achive this effect on my own.
My current (relevant) source:
function startObjectScaling(e){
e.stopPropagation();
e.preventDefault();
document.documentElement.style.cursor = this.style.cursor;
window.addEventListener("mouseup", stopObjectScaling, false);
}
function stopObjectScaling(e){
e.stopPropagation();
document.documentElement.style.cursor = '';
window.removeEventListener("mouseup", stopObjectScaling);
}
[...]
var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
handle.addEventListener("mousedown", startObjectScaling, false);
handle = handle.nextSibling;
}
There is a special function implemented in the more modern browsers for this purpose. The name is setCapture(). It redirects all mouse input to the object the method was called on. Now a simple css cursor definition on that element is enough to archive the desired effect. After mouse release this effect stops (for security for sure). It can also be stopped manually by calling releaseCapture
example:
<style type="text/css">
#testObj {
/* this cursor will also stay outside the window.
could be set by the script at the mousedown event as well */
cursor: hand;
}
</style>
[...]
document.getElementById('testObj').onmousedown = function(e){
// these 2 might be useful in this context as well
//e.stopPropagation();
//e.preventDefault();
// here is the magic
e.target.setCapture();
}
if the arrow cursor would be visible everywhere while the mouse is hold down.
You're relying on a potential OS quirk to create your behavior. This is not something you can ASSUME will always hold true. However, once you start a mousedown, the cursor at that point will normally stay the same, no matter where you move the mouse to, UNTIL something else (another window that you may mouse over? the desktop? a system-interrupt?) changes the cursor.
In other words, don't rely on this behavior. Find something else that will work for you. If you must do this, re-examine your business requirements.
I want to hide the cursor when showing a webpage that is meant to display information in a building hall. It doesn't have to be interactive at all. I tried changing the cursor property and using a transparent cursor image but it didn't solve my problem.
Does anybody know if this can be done? I suppose this can be thought of as a security threat for a user that can't know what he is clicking on, so I'm not very optimistic... Thank you!
With CSS:
selector { cursor: none; }
An example:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>
To set this on an element in Javascript, you can use the style property:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>
If you want to set this on the whole body:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>
Make sure you really want to hide the cursor, though. It can really annoy people.
Pointer Lock API
While the cursor: none CSS solution is definitely a solid and easy workaround, if your actual goal is to remove the default cursor while your web application is being used, or implement your own interpretation of raw mouse movement (for FPS games, for example), you might want to consider using the Pointer Lock API instead.
You can use requestPointerLock on an element to remove the cursor, and redirect all mousemove events to that element (which you may or may not handle):
document.body.requestPointerLock();
To release the lock, you can use exitPointerLock:
document.exitPointerLock();
Additional notes
No cursor, for real
This is a very powerful API call. It not only renders your cursor invisible, but it actually removes your operating system's native cursor. You won't be able to select text, or do anything with your mouse (except listening to some mouse events in your code) until the pointer lock is released (either by using exitPointerLock or pressing ESC in some browsers).
That is, you cannot leave the window with your cursor for it to show again, as there is no cursor.
Restrictions
As mentioned above, this is a very powerful API call, and is thus only allowed to be made in response to some direct user-interaction on the web, such as a click; for example:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
Also, requestPointerLock won't work from a sandboxed iframe unless the allow-pointer-lock permission is set.
User-notifications
Some browsers will prompt the user for a confirmation before the lock is engaged, some will simply display a message. This means pointer lock might not activate right away after the call. However, the actual activation of pointer locking can be listened to by listening to the pointerchange event on the element on which requestPointerLock was called:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
Most browsers will only display the message once, but Firefox will occasionally spam the message on every single call. AFAIK, this can only be worked around by user-settings, see Disable pointer-lock notification in Firefox.
Listening to raw mouse movement
The Pointer Lock API not only removes the mouse, but instead redirects raw mouse movement data to the element requestPointerLock was called on. This can be listened to simply by using the mousemove event, then accessing the movementX and movementY properties on the event object:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
If you want to hide the cursor in the entire webpage, using body will not work unless it covers the entire visible page, which is not always the case. To make sure the cursor is hidden everywhere in the page, use:
document.documentElement.style.cursor = 'none';
To reenable it:
document.documentElement.style.cursor = 'auto';
The analogue with static CSS notation is html {cursor:none} (or, depending on what exactly you want * {cursor:none} / :root {cursor:none}).
I did it with transparent *.cur 1px to 1px, but it looks like small dot. :( I think it's the best cross-browser thing that I can do.
CSS2.1 has no value 'none' for 'cursor' property - it was added in CSS3. Thats why it's workable not everywhere.
If you want to do it in CSS:
#ID { cursor: none !important; }
For whole html document try this
html * {cursor:none}
Or if some css overwrite your cursor: none use !important
html * {cursor:none!important}