Manually trigger a scroll event of DOM element? - javascript

I have two independent web elements, if I scroll the content of one element, I also want the 2nd element scroll at same time. Here is an example: https://stackedit.io
I did the following code, but it is not working:
element.find('.fullscreen-mk-content-textarea').on('scroll', function(e){
// first element will trigger this event, then manully trigger the
// the scroll of the 2nd element. It's my plan.
console.log(e); // works
element.find('.right-side').trigger('scroll'); // doesn't work...
});
What shall I do?

Vanilla Javascript
var el = document.querySelector(".right-side");
el.dispatchEvent(new Event('scroll'));

Try this jsFiddle.
$('.e1').scroll(function(e){
$('.e2').scrollTop(parseInt($('.e1').scrollTop()));
});

You can just set the scrollTop value of the other to match. That will cause it to scroll a desired amount. That's how you scroll something. It won't cause it to scroll by trying to trigger a scroll event. A scroll event is an indicator of some scroll motion, not something that causes scroll motion.
If using jQuery, you can use .scrollTop() to retrieve the current value of the scroll or .scrollTop(val) to set the amount of scroll.

Related

Is it possible to detect a mouse click on a page on every element?

I want to trigger a function if a user clicks anywhere on the page, even clicking on no element or link. Is it possible?
The extension runs only on youtube.com so I can't add every element on the page to the trigger and I assume that every page has different element's ids.
Emmanouil Chountasis is correct, you can use the code at "Detect left mouse button press" to detect a left mouse click crossbrowser.
To the heart of your question, I think what you're looking for is Event Delegation. In jQuery,
// Select a wrapper for the events
$('body')
// Whenever any element in the <body> is clicked
.on('click', '*', function (evt) {
// Emmanouil Chountasis's suggestion would be called right here
if (isLeftClick(evt)) {
// ... do stuff
}
});
See http://learn.jquery.com/events/event-delegation/
Reed's answer works fine, but it triggers the action multiple times. I found this solution that only works on left mouse triggers and executes once per click.
$("body").unbind().click(function() {
//Do Stuff
});

How to detect scrolling in div when position is fixed

I am trying to detect scrolling in a div which is inside a div with position:fixed;.
This div with position fixed property is being added to DOM by javascript so i am attaching event handler like this
$(document).on('scroll', '.scroll_div', function(){
console.log("scrolled!");
});
But it is not working.
Try to use, everytime AFTER, when You add new .scroll_div element to DOM.
JSFiddle
$('.scroll_div').off('scroll').on('scroll', function(){
console.log("scrolled!");
});

jQuery scrollTop goes to the target then rolls up

I am using jQuery function scrollTop so when an element with a certain class is clicked your location changes. Here's what I have done:
$(document).ready(function (){
$(".paginacion").click(function() {
$(document).scrollTop( $("#galeria").offset().top );
});
});
I am navigating though a pagination menu which is in the middle of the page and I want to go back to that menu when I use the utility (clicking any element with the pagination class).
When I click any of those elements the page scrolls down for an instant but then scrolls back up.
What's wrong?
The <a> tag has a default href anchoring, which jumps to the target id and changes the URL hash/fragment. Just like #Khanh TO's example on the comment.
But if you are really wanting to handle this with jQuery. A good solution would be to first use preventDefault() which cancels the default execution on click event. Then switch to 'window' instead of 'document' when setting scrollTop. Both are going to have the same effect but $(window).scrollTop(value) is supported by all browsers.
$(".paginacion").click(function(e) {
e.preventDefault();
$(window).scrollTop( $("#galeria").offset().top );
});
If you are also looking to animate the scrolling, you just need to replace $(window).scrollTop() with:
$('html, body').animate({scrollTop: $("#galeria").offset().top});
FireFox and IE places the overflow at the html level so in order for animate(scrollTop) to work cross-browsers we need to include 'html'.
See this jsfiddle.

How do I make a div both scrollable and clickable?

<div id="menuContainer"></div>
<div id="menuItemTemplate" class="menuItem">
<div class="menuItemTitle"></div>
<div class="menuItemImage"><img src="resources/BlackRightChevron.png"/></div>
</div>
The menuContainer div is dynamically appended with clones of the menuItemTemplate. The current click event:
menuContainer.addEventListener('click',menuContainer_click,false);
does not fire when menuContainer overflows in the y-axis.
So I implemented some code found else where on stackoverflow.
Which makes it scrollable but the click events do not run (probably because of the preventDefault()s). Without them I figure every event would be registered as a click instead of a possible move.
Oh, I'm using jQuery mobile and it's UI as well.
Is there any solution to my problem?
The changes I made as per the suggestion:
var scrollStartPosY=0;
document.getElementById(element).addEventListener("touchstart", function(event) {
scrollStartPosY=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(element).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPosY-event.touches[0].pageY;
event.preventDefault();
move = true;
},false);
document.getElementById(element).addEventListener("touchend", function(event) {
if(move)
move = false;
else
menuContainer_Click(event);
},false);
I'm sure the preventDefaults are wiping out your click. In any case you're using click/mousedown/touchstart to scroll exclusively.
What I think you should do is register a touchend event to trigger whatever you intend to have the current click event do. You may want to verify whether there has been a scroll in the meantime and if so, ignore the touchend. That would differentiate between the two separate intentions of scrolling and clicking.
Decided that iScroll was just an easier solution. Though having difficulty with only one div not scrolling completely to the "bottom".

Is cursor over element (on page load)?

I have a .hover() action assigned to an element to hide/show something depending on the cursor being over it. The problem I am running into is that when the page loads and the cursor is OVER the element it doesn't register as being over because its not firing the mouseenter event.
Is there a another way to tell if the cursor is over a desired element?
Using the mouse position on page load you could call
var currentElement = document.elementFromPoint(x, y);
then if the element found at that position is the one with the hover event. You can trigger that hover event manually
$(currentElement).trigger('hover');
If you hide the element(s) until the page is done loading and then show them all at once, will your mouseover event now fire?
<div id='allmyelementsinhere' style='display:none'>
then use javascript to remove the display:none on page load.
I'm thinking that your mouseevent will fire as soon as you display the elements.
I also had this issue with next and previous navigation buttons that navigate between consistently designed pages.
A user would click next to go to the next page, and because their mouse was in the same position on the page load of the second page, they were able to click next again to continue navigating through the collection of pages. Essentially a convenient next/previous UI.
Except of course that the hover state didn't display on page load for the second and subsequent pages.
So I added a url parameter (action='next or action=prev) and then on load I put the next or previous button into the hover state if the relevant url parameter is present. If the user has somehow moved their mouse and isn't over the button then you do get a button incorrectly in it's hover state until the first mousemove event.
It's not perfect and it only suits this specific circumstance where a user is using a consistent UI within pages on your site, but as this sort of UI is a fairly common - especially in blogs/galleries I though I'd mention it.
Here is the jquery method to track mouse position starting from page load.
(function($) {
$.mousePos = {x: 0, y: 0};
var recordPos = function(e) {
$.mousePos.x = e.pageX;
$.mousePos.y = e.pageY;
};
$(document).mousemove(recordPos).mouseover(recordPos);
})(jQuery);
This will populate $.mousePos.x and $.mousePos.y as soon as the mouse starts to interact with the page.
Script to get mouse coordinates on load

Categories