I have a pop up menu that appears when the users name is hovered over using onmouseeneter and the menu disapeers when onmouseleave is triggerd.
The problem i have is that on occasion the mouseleave is not triggered and the menu stays showing, which is ok but i require another check to see if mouse is within the div on mouse move. and also a click event to close the div if the click is outside of the div.
How can i check weather a click or a mousemove is within a div or not.
I have tried the following with no luck. allthough the code is fine i require another way.
<div id='overlay' class='overlay' style='display:none;'
onmouseover='showoverlay();' onmouseleave='removeoverlay();'> </div>
function showoverlay() {
var overlay=document.getElementById("overlay");
overlay.style.display="block";
overlay.style.zIndex="999";
overlay.style.opacity="1";
}
function removeoverlay() {
var overlay = document.getElementById("overlay");
overlay.style.opacity="0";
overlay.style.display="none"
overlay.style.zIndex="-999";
}
$(document).ready(function(){
$(document).mouse(function(e)
{
var subject = $("#overlay");
if(e.target.id != subject.attr('id') &&
!subject.has(e.target).length)
{
removeoverlay();
}
});
});
You can use is jQuery function like so:
$(function() {
$('ul').on('click', function (event) {
let target = $(event.target);
let handle = $(this).find('i');
let checkbox = $(this).find('input[type=checkbox]');
if (false === target.is(handle) && false === target.is(checkbox)) {
checkbox.prop('checked', !checkbox.prop('checked'));
}
});
});
Related
Hi I'm currently working on a reactjs web application and trying to provide accessibility features in web pages. In one page there's a drawer popping up once a button clicked, and I wanted to make sure the tab navigation only through the drawer without going outside of the drawer when it expanded. How can I do that?
Here I have attached the screen shot of the page including the expanded drawer.
I'd recommend writing a keyboard handler in JavaScript to restrict tab order to the pop-out "drawer" (or modal as I'd call it).
Hidde de Vries wrote an excellent short tutorial on this, see here.
I adapted this very slightly:
// Function to trap tab movement to a specific container element
trapFocusInArtworkModal = function (el) {
// Gather all focusable elements in a list
var query = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='email']:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]), [tabindex='0']"
var focusableEls = el.querySelectorAll(query);
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
// Add the key listener to the modal container to listen for Tab,
// Left Arrow, Right Arrow, Enter and Escape
el.addEventListener('keydown', function(e) {
var isTabPressed = (e.key === "Tab" || e.keyCode === KEYCODE_TAB);
var isEscPressed = (e.key === "Escape" || e.keyCode === KEYCODE_ESCAPE);
// Define behaviour for Tab or Shift+Tab
if (isTabPressed) {
// Shift+Tab
if (e.shiftKey) {
if (document.activeElement === firstFocusableEl) {
// Move keyboard focus to the last focusable element in the container
lastFocusableEl.focus();
e.preventDefault();
}
}
// Tab
else {
if (document.activeElement === lastFocusableEl) {
// Move keyboard focus to the first focusable element in the container
firstFocusableEl.focus();
e.preventDefault();
}
}
}
// Define behaviour for Escape
if (isEscPressed) {
// This will close out the modal when the Escape key is pressed
// by clicking the modal's close link/button
el.querySelector("a").click();
}
});
};
// Find the modal
var modal = document.querySelector("[role='dialog']");
// Attach the trap keyboard function to the modal
trapFocusInArtworkModal(modal);
You can then attach the code to run when the page has loaded.
On my site links in submenu (parent element - TERAPIA MANUALNA) do not work. The problem only appears after left click. Right click and 'open in new tab' works great. What cause the problem? I am using Divi template.
My site
$('.menu-item-has-children').on('click', function(e) {
$('menu-item-has-children').toggleClass("submenu-open"); //you can list several class names
e.preventDefault();
});
This code is causing that the up level link "Terapia manualna" won't open on left click... It is because the call of "e.preventDefault();" stops the following of the link!
I can't find the problem with the submenu links that fast and easy, but I guess that this has something to do with this function:
(function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu > .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
$(this).next('.sub-menu').addClass('hide');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).next('.sub-menu').toggleClass('visible');
});
}
});
}
There again is a "prevent default" on all children of the submenu as far as i can see...
Try to change that and test again!
I'm new to Mootools and I have found that I have to use the click element but I'm not 100% sure where I am meant to put it in the below code:
function setInStockOption (labels, e) {
active = false;
labels.some (function (item,index) {
if(item.hasClass ('selected')) {
if(item.hasClass ('unavailable')) {
item.removeClass('selected');
item.addClass ('unselected');
active = true;
} else {
return true;
}
}
if(active) {
if (!item.hasClass ('unavailable')) {
e.target = this;
item.fireEvent ('click', e);
active = false;
return true;
}
}
});
}
window.addEvent('load', function(e) {
var labels = $$('div.option-radios label.radio');
setInStockOption(labels, e);
});
I basically need to add the class selected on click instead. At the moment this script is adding the selected class to the first child of Radio in the html and then when you click on others it'll add the class selected. I basically want all the classes to be unselected when the page loads
.
Any ideas?
You'll want something like this:
window.addEvent('domready', function(e) {
$$('div.option-radios label.radio').each(function(label, i) {
label.addEvent('click', function(event) {
event.target.toggleClass('selected');
});
});
});
Note that this uses the Array.each method instead of Array.some. The latter doesn't do what you expect. It then registers a click event on every label which simply toggles the selected class on the event target.
Then you can add other initialization code to the each loop and more logic to the click event handler.
I also used the domready event which is usually preferred over load since it fires earlier.
Here's a fiddle to play around with.
I have a div element and a I want to fire a function when mouse enters it.
But it is really in the center of the page so mouse is usually on it on page load and function runs.
Is there a way to make it so my function doesn't run when mouse is already in but when enter?
<div id = "mouse-control-div">.....</div>
<script type="text/javascript">
$('#mouse-control-div').mouseover(function() {alert('some thing');});
</script>
I also tried .mouseenter but the same result.
(code sample is added)
What if you have a boolean that tells you if you already have entered?
For information about the jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave look here
// When the DOM is ready, init scripts.
jQuery(function( $ ){
var isEntered = false;
// Bind the mouse over /out to the first DIV.
$( "#mouse-control-div" ).bind(
"mouseover mouseout",
function( event ){
if(!isEntered)
{
isEntered = true;
echo('entered');
}
}
);
// Bind the mouse enter to the second DIV.
$( "#mouse-control-div" ).bind(
"mouseenter mouseleave",
function( event ){
if(isEntered)
{
isEntered = false;
echo('left');
}
}
);
function echo(string)
{
$('#output').append('<li>'+string+'</li>');
}
});
For the working demo look here
I'm thinking about making a website for my business where all the content is on one long page which the user will not be able to scroll through and you will have to navigate through the site by clicking the buttons which will then animate between the anchor points to the next page. I'm will make a long image with the home point being an office and the user then can go up into the sky then space for different pages.
So how would I stop the user from being able to scroll and how would I make it animate or slowly scroll between each anchor. Would it be possible to scroll horizontally as well?
I would try to solve your problem by disabling temporally the scrolling functionality of the browser. You can achieve this by unbinding any event listeners associated with keypress or mouse scroll.
You can deny the mouse scroll to get triggered by preventing it's default action associated with the event handler. Technically this is how can be done in Javascript:
window.onload = function() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', disableScroll, false);
} else if (window.attachEvent) { //IE event handler
window.attachEvent('DOMMouseScroll', disableScroll);
} else {
window.onscroll = disableScroll;
}
}
function disableScroll(event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault(); // prevent the default action to get triggered\
}
event.returnValue = false; // IE method
}
var keys = [37, 38, 39, 40];
function onKeydown(event) {
var e = event || window.event;
for (var i = 0, len = keys.length; i < len; i++) {
if (e.keyCode == keys[i]) {
console.log("Forbidden event");
e.preventDefault();
}
}
}
document.onkeydown = onKeydown;
Then you can construct your code by using anchor points and on click advanced to the desired place. That's it.