Created a movable element that opens/closes by click. It stores a list that will scroll.
let widget = document.getElementById("widget") // div wrapper
Added an event addEventListener("mousewheel") to close my element by scroll:
window.addEventListener("mousewheel", (event) => {
Plugin.prototype.widget.close() // close widget
})
It is necessary to achieve the result: the widget is closed everywhere along the scroll, except for the scroll in the widget itself, taking into account all child elements.
The following code defines the active scroll area:
window.addEventListener("mousewheel", (event) => {
if ( event.target !== widget ) { // isn't widget
Plugin.prototype.widget.close() // close widget
}
})
Is it possible to make a check to determine the element and all its children by scrolling?
Related
If the route changes, I want to find the element with scroll on the page I moved and give it window.scrollTo(0,0), how should I find the element?
current code
if (process.client) {
router.afterEach((to, from) => {
document.querySelector('.overflow-scroll').scrollTo(0, 0)
})
}
The code work well but, I don't want use document.querySelector. I want to find scrolling element when route!
Make an event listener and a parameter "scroll" in the event listener write predefined functions or keywords just like scrollX or scrollY You can aslo use bottom or top.
scroller.addEventListener("scroll", event => {
output.textContent = `scrollBy: ${scroller.scrollBy}`;
});
Here is scroll is html class and Id html elements you want to scroll.
And output is just show much px you scroll it he is **html class or Id ** you can remove it.
To know or learn in depth.
https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop
On desktop, clicking outside of my bootstrap nav menu closes it. However this behaviour does not work on mobile.
I've tried to edit some code from a codepen to reference the relevant classes on my website, to no avail.
Here is the code I've used:
const $menu = $('#id-of-menu');
$(document).mouseup(e => {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.removeClass('show');
}
});
I'd hoped that clicking outside the menu would remove the 'show' class from the menu, thereby hiding it. In practice though, nothing happens.
SOLUTION
The answer provided here by Henrywright solved my problem (obviously after changing relevant class and id names).
This is the eventual code I used:
jQuery('body').bind('click', function(e) {
if(jQuery(e.target).closest('.navbar').length == 0) {
// click happened outside of .navbar, so hide
var opened = jQuery('#id-of-menu').hasClass('show');
if ( opened === true ) {
jQuery('#id-of-menu').collapse('hide');
}
}
});
'mouseup' event is not present on mobile devices, try 'click'
function onMenuClick(){
$('#id-of-menu').collapse('hide');
}
Add this in your menu items:
onclick="onMenuClick()"
I'm trying to get link (url of clickable elements) with the left mouse click, next method doesn't work for all elements:
function callback(e) {
if (e.button != 0 ) {
return;
}
alert(e.target.href);
}
document.addEventListener('click', callback, true);
For example for some elements on Youtube site - titles or thumbnails (all of them are clickable and they lead to some video/playlist):
href is undefined
but it's clickable and Google Chrome browser shows a preview of link to which this element leads:
UPDATE
The problem that some A tags on Youtube site wraps other elements inside them: <span>...<span/><div.......>
I tried debug mode (inspect), selected some of such element to inspect and it picked <span> inside of <a>.
Additional Solution: https://jsfiddle.net/z2huqjjh/2/ (will be good solution if links (A tags) are dynamically being added to a page)
By default, events bubble. This means that you could have an element that is nested within 100 others. Clicking on that nested element will cause a click event and that event will propagate up through all the ancestor elements until it is either cancelled or reaches the window.
Now, just about everything in the document is clickable. Just because something is clickable doesn't mean it will navigate to a URL, like an <a> element does.
For example:
document.querySelector("div").addEventListener("click", function(){
alert("Thanks for clicking me!");
});
<div>I'm a <div> and I don't have an 'href'. But, click me anyway</div>
Since only a few elements actually have an href attribute, you could alter your code to look only at those:
function callback(e) {
if (e.button != 0 ) {
return;
}
alert(e.currentTarget.href);
}
// Get all the anchors and place into an array
var anchorArray = Array.from(document.querySelectorAll("a"));
// Loop through the anchors
anchorArray.forEach(function(anchor){
// Assign a click event handler to each. When the click event
// bubbles to the element, the callback will be called
anchor.addEventListener('click', callback);
});
<div>I'm a div - click me anyway</div>
<span>I'm a span inside of an anchor, click me too!</span>
I'm using Jquery to display a dropdown menu onMouseEnter a navigation link, I wrapped onMouseEnter with hoverIntent:
https://github.com/briancherne/jquery-hoverIntent (used to control sensitivity of OnMouseEnter without using OnMouseOut as that's not what I want):
I want jquery code to close dropdown menu when clicked outside of that dropdown menu or onMouseEnter another navigation link.
Codepen:
https://codepen.io/anon/pen/zNPbRp
JSFiddle: https://jsfiddle.net/6jc6pjLu/1/
Structure:
-I have two navigation links that carry a dropdown menu, one with a class MySecondLink, the other with a class MyThirdLink.
-Dropdown menus, one with a class MySecondLinkTabLinks, the other with a class MyThirdLinkTabLinks
jQuery Process:(onMouseEnter a navigation link, replace class value "PopupClosed" with "PopupOpen" on navigation link for styling purposes, and replace display:none; with display:block; on dropdown menu to show it) that is the process of displaying the dropdown menu, Closing it (replace PopupOpen with PopupClosed on navigation link and replace display:block; with display:none; on dropdown menu) :
jQuery(document).ready(function($) {
var config = {
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback
/* Don't want onMouseOut from hoverIntent */
// timeout: 0, // number = milliseconds delay before onMouseOut
// out: doClose // function = onMouseOut callback
};
function doOpen() {
$(this).removeClass('PopupClosed').addClass('PopupOpen');
var cls = $(this).data('target'); // fetch data-target value.
$('.Menu.' + cls).css('display','block'); // will make display block
}
/* Commented out because I want to apply another approach for closing the menu as doClose() depends only on mouseOut.
function doClose() {
$(this).addClass('PopupClosed').removeClass('PopupOpen');
var cls = $(this).data('target'); // fetch which class to target.
$('.Menu.' + cls).css('display','none'); // will make display none
}
*/
$(".navTab.Popup").hoverIntent(config);
});
As you want to keep submenus visible until clicked outside of that submenu. You need to do followings:
Remove out: doClose from config so that your submenus stays visible after hover menu items.
But you need to add $('.Menu').hide(); top of the function function doOpen() {....}
Add these script which will allow to hide opened submenus on body click.
$(document).click(function(event) {
$('.Menu').hide();
});
https://codepen.io/avastamin/pen/XpzQXB
I have target that should move around in it's parent, where that parent is clicked.
Some Fiddle: http://jsfiddle.net/GMerZ/
Some HTML:
<div id="rControl">
<p>R1 / R2</p>
<div class="widget">
<div class="target"></div>
</div>
</div>
Some jQuery via CoffeeScript:
rControl = $('#rControl')
widget = rControl.find '.widget'
target = rControl.find '.target'
clicked = no
widget
.mousedown =>
clicked = yes
.mouseup =>
clicked = no
.mousemove (e) =>
if clicked
target.css
top: "#{e.offsetY}px"
left: "#{e.offsetX}px"
Problem is the target jitters around as you drag. It seems to be that the first event places the widget under the cursor, and the second event occurs on the target and not the widget background, so the offset is now relative to the target, not the parent widget, and the offset values are much smaller. The target now incorrectly moves to the top left of the widget.
Clearly, the target should not be handling these events, and should not be providing click location info based on the target's position.
How can I make this work so that I get the mouse position relative to .widget on every firing of the event, regardless of whether or not the mouse is in the .target?
Also, I'd love to do this without rearranging the HTML forcing the target under the widget, there must be a tricky bit of event delegation magic I'm missing.
Just filter out mousemove calls to only act on the ones fired by widget:
Updated JS (just one small change to the mousemove if):
rControl = $('#rControl')
widget = rControl.find '.widget'
target = rControl.find '.target'
clicked = no
widget
.mousedown =>
clicked = yes
.mouseup =>
clicked = no
.mousemove (e) =>
if clicked and e.target == widget[0]
target.css
top: "#{e.offsetY}px"
left: "#{e.offsetX}px"
See on jsfiddle.