I have a navigation with mouseover and mouseout animations. They work. I also have a statement for the click listener that adds a CSS class. The class sets the height of a div, the issue is that the mouseout also alters this div. So I'm trying to figure out a way to disable the mouseout listener when the link is clicked.
I tried to unbind it with no luck
js
var currentDiv;
function slideMenu(e) {
if(e.type === "mouseover"){
// console.log("mouseover");
TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
// console.log("mouseout");
TweenMax.to($(this).find('div') , 0.25, {height:1});
}
else if(e.type === "click"){
console.log("click");
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
$(currentDiv).unbind('mouseout'); // not working
}
}
$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
css
.selected{
height: 20px;
}
Would this accomplish your goal? Instead of worrying about the binding of click events, you could just check the "selected" class before you do anything else within that click event. Like the following...
var currentDiv;
function slideMenu(e) {
if(e.type === "mouseover"){
// console.log("mouseover");
var child_div = $(this).find("div")
if (!$(child_div).hasClass("selected")) {
TweenMax.to($(this).find('div') , 0.25, {height:20});
} else {
$(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
}
}
else if(e.type === "mouseout"){
// console.log("mouseout");
var child_div = $(this).find("div")
if (!$(child_div).hasClass("selected")) { // check to see if selected/clicked on
TweenMax.to($(this).find('div') , 0.25, {height:1})
} else {
$(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
}
}
else if(e.type === "click"){
console.log("click", this);
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
}
}
$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
If I'm understanding you correctly, you want the height of the element to remain the same size when you click on it and move the mouse off the element. You can try using
var currentDiv;
// add a state
var hasBeenClicked = false;
function slideMenu(e) {
if(e.type === "mouseover"){
TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
// only resize if the element hasn't been clicked
if (!hasBeenClicked) {
TweenMax.to($(this).find('div') , 0.25, {height:1});
}
}
else if(e.type === "click"){
// assuming all this stuff is what you want and wasn't testing code
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
// set state to true
hasBeenClicked = true;
}
}
Note that this will only work for one element, if you plan to use this function for multiple elements you'll need to have a var hasBeenClicked set up for every element.
Hi i want to have my side slider button to smoothly slide back to position if the user clicks outside of it.
If you wanna check it here is the jfiddle of it
as of now it doesnt go back to position when you click outside of it.
JS
$(document).ready(function () {
$('#slideleft .mybutton').click(function () {
var $lefty = $(this).parent();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() + 31 : 0
});
});
});
Please try the below:
$(document).mouseup(function (e) {
var $lefty = $('#slideleft .mybutton').parent();
var container = $("#slideleft");
if (parseInt($lefty.css('left')) == 0) if (container.has(e.target).length === 0) {
animate();
}
});
Here is a working fiddle:
JSFiddle
Using some event.target trickery gives you this:
$(document).on('click', function (event) {
if (event.target !== $('#slideleft .mybutton')[0]) {
$('#slideleft .mybutton').hide(); //or slide however you want to.
}
});
If you notice this actually compares the actual HTML and not the jQuery object.
This is because .target give you back the actual HTML of what was clicked.
Adding this works:
$(document).click(function () {
var $lefty = $('#slideleft .mybutton').parent();
if(parseInt($lefty.css('left'), 10) == 0){
$lefty.animate({
left: -$lefty.outerWidth() + 31
});
}
});
Here is the fiddle
I have a textbox. its name is PhoneNumber. I want to do a popup if len(input value)=0.
When I do a tag it doesn't work. (I looked in debug mode)
When I do it in an another Jq script which is already works. it works but popup window stay screen only a few mil seconds so I can not do anything.
I am new in programming and I am still learning. İf you help me I will be happy. Thanks.
<script type="text/javascript">
$('#PhoneNumber').bind('keypress', function (e) {
if (e.keyCode == 13) {
var test = $('#PhoneNumber').val().length;
if (test == 0) {
alert('At Least');
/* $('a.login-window').one(function () {
var loginBox = $(this).attr('href');
//Fade in the Popup and add close button
$(loginBox2).fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function () {
$('#mask , .login-popup').fadeOut(300, function () {
$('#mask').remove();
});
return false;
});*/
}
else
{
alert('At Least');
$("#PhoneNumber").val("");
$('#PhoneNumber').focus();
}
}
});
</script>
Always put your jquery code into:
$(document).ready(function() {
//Your code
});
This makes sure that the DOM is loaded when you attach event handlers to elements.
And for me it looks like the return false of your one callback function is killing the fadeIn before it's finished.
You could add the event object e as a parameter of the function and then use e.stopPropagation() and e.preventDefault() instead of return false; like that:
$('a.login-window').one(function (e) {
e.stopPropagation();
e.preventDefault();
//Your code
});
I have a search suggestion div that appears when you keyUp an input. This works fine, but now I am trying to make keyboard shortcuts in action.
I want a behavior like when you click down keyboard arrow button a span gets selected and if it is selected then another span that is after gets selected, similarly, if you click up arrow an upward span gets selected, when you click enter then link opens.
I am stuck because I could not remove a:hover and could not add classes to it. Even after I have basically no idea how to do it. But I really tried hard and a lot..
Here is a jsfiddle link (type anything in field). maybe somebody will help me.
This code should go when the request is made and data is being returned:
<script type="text/javascript">
$(document).ready(function(){
total = 3;
$(".result-item").mouseenter(
function(){
hovered = $(this).attr("id");
total = 3;
$(".result-item").each(function(){
$(this).children("a").css({
'background-color':'#e4e4e4',
'color':'#000000'
});
$(this).find(".searchheading").css({
'color':'#191919'
});
$(this).find(".searchcaption").css({
'color':'#555555'
});
});
$(this).children("a").css({
'background-color':'#b7b7b7',
'color':'#ffffff'
});
$(this).find(".searchheading").css({
'color':'#ffffff'
});
$(this).find(".searchcaption").css({
'color':'#f1f1f1'
});
}
);
});
</script>
And this code on a page where request is made:
$("#suggestions").hide();
$("#search").bind('keyup', function(event){
if (event.which == 40 || event.which == 38 || event.which == 13) return false;
else
{
hovered = undefined;
lookup($(this).val());
}
});
$("#search").bind('keydown', 'down', function(evt){
if ($("#suggestions").is(":visible"))
{
if (typeof hovered == 'undefined')
{
$("#result-item-0").trigger("mouseenter");
return;
}
count = parseInt($("#"+hovered).attr("count"));
next = (count + 1);
if (next == total)
next = 0;
$("#result-item-"+next).trigger("mouseenter");
}
});
$("#search").bind('keydown', 'up', function(evt){
if ($("#suggestions").is(":visible"))
{
if (typeof hovered == 'undefined')
{
$("#result-item-"+(total-1)).trigger("mouseenter");
return;
}
count = parseInt($("#"+hovered).attr("count"));
prev = (count - 1);
if (prev == -1)
prev = (total-1);
$("#result-item-"+prev).trigger("mouseenter");
}
});
$("#search").bind('keydown', 'return', function(evt){
if ($("#suggestions").is(":visible"))
{
if (typeof hovered == 'undefined')
{
str = $("#search").val();
window.location.href = urlencode(str); // urlencode is a custom function
return false;
}
count = parseInt($("#"+hovered).attr("count"));
current = count;
$("#result-item-"+current).trigger("mouseenter");
$("#suggestions").fadeOut();
window.location.href = $("#"+hovered).children("a").attr("href");
}
});
})
;
Also I removed onkeyup="" attribute on element, this approach is nicer.
I have a modal box window (pop-up) that contains an iframe,
and inside that iframe there's a div that is scrollable.
When I scroll the iframe's inner DIV, and it has reached its top or bottom limit, the window of the browser itself starts to scroll. this is an unwanted behavior.
I've tried something like this, which kills the main window scroll when onMouseEnter when mouse enters pop-up box area:
e.preventDefault() is not working as it should for some reason...
$("#popup").mouseenter(function(){
$(window).bind("scroll", function(e){
e.preventDefault();
});
}).mouseleave(function(){
$(window).unbind("scroll");
});
Solved (for some browsers) using a simple CSS property: overscroll-behavior:
auto
The default scroll overflow behavior occurs as normal.
contain
Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
none
No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.
body{
height: 600px;
overflow: auto;
}
section{
width: 50%;
height: 50%;
overflow: auto;
background: lightblue;
overscroll-behavior: none; /* <--- the trick */
}
section::before{
content: '';
height: 200%;
display: block;
}
<section>
<input value='end' />
</section>
Simply apply that style property on the element which the scroll should be "locked-in" to and the scroll event will not bubble up to any parent element which might have a scroll as well.
Same demo as above but without the trick:
body{
height: 600px;
overflow: auto;
}
section{
width: 50%;
height: 50%;
overflow: auto;
background: lightblue;
}
section::before{
content: '';
height: 200%;
display: block;
}
<section>
<input value='end' />
</section>
Sorry, as far as I'm aware it is impossible to cancel any kind of scroll event.
Both W3 and MSDN say:
Cancelable No
Bubbles No
I think you'll have to leave this up to browser authors to fix. Firefox (3.5 on Linux, anyway) seems to have a better behaviour for me: it only scrolls the parent if the child is already at the top/bottom end at the moment you start using the scrollwheel.
If we cannot prevent window scrolling, why not undo it?
That is, catching the scroll event and then scrolling back to a fixed position.
The following code locks the Y-Axis as long as one hovers over $("#popup"):
// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;
$(window).scroll(function(event) {
if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
$(window).scrollTop(forceWindowScrollY);
}
});
$("#popup").hover(function() {
if(forceWindowScrollY == -1) {
forceWindowScrollY = $(window).scrollTop();
}
}, function() {
forceWindowScrollY = -1;
});
I use this for the query suggest box on http://bundestube.de/ (enter some characters into the top search box to make the scrollable pane visible):
This works flawlessly in Chrome/Safari (Webkit) and with some scrolling glitches in Firefox and Opera. For some reason, it does not work with my IE installation. I guess this has to do with jQuery's hover method, which appears to not work correctly in 100% of all cases.
I know it's quite an old question, but since this is one of top results in google... I had to somehow cancel scroll bubbling without jQuery and this code works for me:
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
document.getElementById('a').onmousewheel = function(e) {
document.getElementById('a').scrollTop -= e. wheelDeltaY;
preventDefault(e);
}
my jQuery plugin:
$('.child').dontScrollParent();
$.fn.dontScrollParent = function()
{
this.bind('mousewheel DOMMouseScroll',function(e)
{
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if (delta > 0 && $(this).scrollTop() <= 0)
return false;
if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
return false;
return true;
});
}
As of now in 2018 and onwards e.preventDefault is enough.
$('.elementClass').on("scroll", function(e){
e.preventDefault();
});
This will prevent scroll to parent.
That's how I solved the problem:
I call the following when I open the popup:
$('body').css('overflow','hidden');
Then, when I close the popup I call this:
$('body').css('overflow','auto');
The popup is meant to be modal so no interaction is required with the underlying body
Works pretty well
Apparently, you can set overflow:hidden to prevent scrolling. Not sure how that'd go if the doc is already scrolled. I'm also on a mouseless laptop, so no scrolly wheel testing for me tonight :-) It's probably worth a shot though.
you can try jscroll pane inside the iframe to replace the default scroll.
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
I am not sure, but give it a try
Here's what I do:
$('.noscroll').on('DOMMouseScroll mousewheel', function(ev) {
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
return prevent();
});
demo fiddle
Use CSS overflow:hidden to hide the scrollbar as this will do nothing if they drag it.
Works cross-browser
New web dev here. This worked like a charm for me on both IE and Chrome.
static preventScrollPropagation(e: HTMLElement) {
e.onmousewheel = (ev) => {
var preventScroll = false;
var isScrollingDown = ev.wheelDelta < 0;
if (isScrollingDown) {
var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
if (isAtBottom) {
preventScroll = true;
}
} else {
var isAtTop = e.scrollTop == 0;
if (isAtTop) {
preventScroll = true;
}
}
if (preventScroll) {
ev.preventDefault();
}
}
}
Don't let the number of lines fool you, it is quite simple - just a bit verbose for readability (self documenting code ftw right?)
I would like to add a bit updated code that I found to work best:
var yourElement = $('.my-element');
yourElement.on('scroll mousewheel wheel DOMMouseScroll', function (e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if (delta > 0 && $(this).scrollTop() <= 0)
return false;
if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).outerHeight())
return false;
return true;
});
The difference between this one and one that is already mentioned above is the addition of more events and the usage of outerHeight() instead of height() to avoid crashing if element has padding!
$('.scrollable').on('DOMMouseScroll mousewheel', function (e) {
var up = false;
if (e.originalEvent) {
if (e.originalEvent.wheelDelta) up = e.originalEvent.wheelDelta / -1 < 0;
if (e.originalEvent.deltaY) up = e.originalEvent.deltaY < 0;
if (e.originalEvent.detail) up = e.originalEvent.detail < 0;
}
var prevent = function () {
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
return false;
}
if (!up && this.scrollHeight <= $(this).innerHeight() + this.scrollTop + 1) {
return prevent();
} else if (up && 0 >= this.scrollTop - 1) {
return prevent();
}
});
Try the below code:
var container = document.getElementById('a');
container.onwheel = (e) => {
const deltaY = e.wheelDeltaY || -(e.deltaY * 25); // Firefox fix
container.scrollTop -= deltaY;
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
};
function stopPropogation(e)
{
e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
}
This should work.