How to prevent body scrolling when scroll on Drop down menu.? 1
Dear friends,
actually i'm facing problem in my project. see project
i did horizontal scrolling on this page. its is working smoothly.
but when i scroll on drop down menu the page also scrolling. is there any option to prevent the page scrolling when mouse hover in drop down menu?
adding the script here which i used for horizontal scroll:
<script type="text/javascript">
// By default, swipe is enabled.
$('section').horizon();
// If you do not want to include another plugin, TouchSwipe, you can set it to false in the default options by passing in the option as false.
//$('section').horizon({swipe: false});
$(document).on('click', '.go-to-2', function () {
$(document).horizon('scrollTo', 'section-section2');
});
</script>
please help me to find out Any solution...
If you want to prevent the text area below Emporio Kannur... from scrolling, try adding a mousewheel event listener and stop event propagation, so it does not bubble up to the horizon jquery plugin.
Something like this:
// .work_detail_wraper contains the text you down want to see scrolling
$('.work_detail_wraper')
.on('mousewheel DOMMouseScroll' , function(e) {
e.stopPropagation()
})
You can also take a look at the horizon plugin's code, and adapt it so it doesn't scroll on certain events.
You can use 'stopPropagation()' for this
$('.section-section2').scroll(function(e){
e.stopPropagation();
})
Related
I'm using revslider plugin with one page vertical slide and a form in the first slide. I would like to prevent all revslider scroll function when inside the form div.
Can it be possible to prevent revslider scroll function and use the normal scroll inside the form?
Any help would be appreciated !
Solved by adding this, referred to this post
// prevent scroll when inside form div
$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});
$('#YourID').bind('mousewheel DOMMouseScroll', function (e) { return false; });
What's happening: Scrolling works no matter which position i have the mouse while i scroll.
What i want to achieve: When the user scrolls with the mouse pointer positioned inside a particular container, I would like to disable the plugin from changing pages. When the user scrolls with the mouse pointer outside that same container, the normal functionality of the plugin should be restored; i.e. the pages should be scrollable again.
What have i tried: I listened for the scroll event on the document and found out whether the mouse is inside the container while executing the scroll and store the possibilities as a boolean.
$(document).bind("mousewheel", function(event) {
// preventScroll = true;
console.log(event);
if($(event.target).closest(".no-scroll").length) {
preventScroll = true;
}
else {
preventScroll = false;
}
});
Then onLeave i try to find out the value of preventScroll and try to stop event propagation (since in want to stop an actual event) by returning false
setTimeout(function() {
console.log(preventScroll);
if(preventScroll) {
console.log("no-scroll")
return false;
}
}, 10);
I an using setTimeout to capture the desired value of preventScroll although I guess the plugin executes a scroll within that 10 ms and that's why return false doesn't seem to have an effect. I can't seem to figure out how else to proceed to achieve the desired functionality.
Codepen: https://codepen.io/binarytrance/pen/YxBqPj
In this implementation, the container i want to disable scroll is in the second page/section. Please be aware of the values spit out in the console.
Use the fullpage.js option normalScrollElements. Check the fullpage.js docs for more info:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.
Background:
I am using the materialize JS to create collapsible divs. When a div that has a class of collapsible-header is clicked, a slide down animation occurs on the sibling div that has a class of collapsible-body, showing the contents of the collapsible-body.
What I am trying to accomplish is when a collapsible header is clicked, the browser should scroll to the top of that div so that the contents are in full view of the user. I have used an on click event, which works fine on the first collapsible. But then, if you have an open collapsible and you click on another to open it, it doesn't scroll to the top of the clicked div properly (it will scroll to the middle of the body, or way above the top of the div).
JS Fiddle of on click functionality: https://jsfiddle.net/f83dct8f/4/
I am able to accomplish what I am looking to do by editing the Materialize JS itself. Here is how the line looks before my edit:
object.siblings('.collapsible-body').stop(true, false).slideDown({
duration: 350,
easing: "easeOutQuart",
queue: false,
complete: function() {
$(this).css('height', '');
}
});
I add the following to the complete portion of the above statement to accomplish what I'm looking for:
$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');
Question: I do not want to edit the Materialize 3rd party code to accomplish what I need, so I need to find a way to implement the body animate code after the slide down is finished, without editing the Materialize animation. I know there has to be a way to do it?
I have tried event queues on the collapsible body, which seemed promising, but my test console print executed during the animation. See below. If someone could point me in the right direction of what else I could try, I would greatly appreciate it.
$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){
console.log('DONE');
});
You should be able to use the onOpen option when initialising your .collapsible. Pass in a function to execute when the accordion is opened. The function receives the element as a argument.
$(document).ready(function() {
$('.collapsible').collapsible({
onOpen: function(el) {
$('body').animate({scrollTop: el.offset().top },'slow');
}
});
});
I am using BlueImp Gallery (DEMO). I need to lock hide the buttons on certain situations, that worked great. But now I also need to hide the mouse and touch swipes as well.
Explanation: Users can swipe left or right, this will change the current picture.
I was not able to find the responsible event yet. How can I deactivate the swipe events and active it again? Is that possible?
They had no intend of publishing this feature, but it's in there.
var galleryContext
// initalize your gallery
blueimp.Gallery([{/* your images */}], {
// we need the context of the gallery
onopened: function () {
galleryContext = this
}
})
// now disable
galleryContext.destroyEventListeners()
// or enable
galleryContext.initEventListeners()
You can use on() like,
$(document).on('click touchmove',function(){
if(CERTAIN_SITUATIONS){ // only on certain situations
return false;// it will prevent to do anything in your document
}
});
If you want a div or container to be disable then use it like,
$(document).on('click touchmove','CONTAINER_ID_OR_CLASS',function(){
....
You can use stopPropagation() to prevent bubbling,
$(document).on('click touchmove',function(e){
if(CERTAIN_SITUATIONS){ // only on certain situations
e.stopPropagation();
return false;// it will prevent to do anything in your document
}
});
this worked for me: (tested on v3.2.0)
this.galleryInstance = blueimp(this.config.images, options);
this.galleryInstance.destroyEventListeners();
//this line makes sure no touch events are registered in the init function
//and preserving other events in tact
this.galleryInstance.support.touch = false;
this.galleryInstance.initEventListeners();
I have a jQuery menu (jQuery 1.4.2 and UI 1.8.6) that I need to drop down when you tab into it with the keyboard. It needs to behave the same with the keyboard as it does with the mouse. When you mouse over it, it drops down, then remove the mouse, it slides back up. However, when you tab into it with the keyboard, it doesn't drop. Here is the code that someone provided to make it drop on keyboard, but I couldn't make work:
$(document).load(function(){
$('#buttonbar').attr('tabIndex', 0).on({
focus: function(){
$("#buttonbar").triggerHandler("mouseenter");
},
blur: function(){
$("#buttonbar").triggerHandler("mouseleave");
}
});
});
Live DEMO
Note: the window needs to be 950pixels or wider for it to show.
Something like this should fix it for you.
$(document).ready(function(){
$('#buttonbar').focus(function(){
$("#buttonbar").triggerHandler("mouseenter");
});
$("#buttonbar #visitor-links .last-item a").blur(function(){
$("#buttonbar").triggerHandler("mouseleave");
});
});
Here is the demo: http://jsbin.com/udobuc/8/edit