How to unbind/off jQuery event when window resize - javascript

I am trying to delete a jquery event when the window gets >490. However, the unblind() or off() elements do not deactivate the action activated when the window gets smaller than 490px. Why is this? Does anyone knows any method to make a selection return to its original state?
$(document).ready(function(){
$(window).resize(function(){
if ($(window).width()<490) {
$("#shown").unbind().click(function(){
event.preventDefault();
$("body div hidden").toggle('slow');
});
}
else if ($(window).widht()>=490) {
$("#shown").unbind();
$("body div hidden").unbind();
}
});
});
</script>

Here is how you can achieve your desired, the below code will unbind the hide event based on the screen size.
$(document).ready(function()
{
var eventPresent = false;
$(window).resize(function()
{
console.log("current width : ", $(window).width());
if ($(window).width()<490 && eventPresent == false)
{
$("#shown").unbind().click(function(event)
{
event.preventDefault();
$("#divText").toggle('hide');
});
eventPresent = true;
}
else if ($(window).width()>=490 && eventPresent == true)
{
$("#shown").unbind();
$("#divText").show()
eventPresent = false;
}
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<a id="shown">click me to hide text</a>
<div id="divText">
You can not toggle me if screen is more than 490 px wide
</div>
P.S Run the snippet in full page mode.

Related

Disable mouse scroll middle click event with jQuery

I wrote the below code for disabling the scroll in the mouse while it is clicked.
but my code does not work an when I click with the scroll of my mouse it opens my link.
Here is my code :
$('a').on('mousedown', function(e) {
if (e.which === 2) {
console.log('Disabled');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You have to use auxclick in order to disable this feature. Replace your 'click' with 'auxclick', and add e.preventDefault(), it will work, tested in chrome and FF
$('a').on('auxclick', function(e) {
if (e.which === 2) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You can use event.preventDefault() to cancel a action
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
try the code below, thanks :
click here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script>
<script>
var el = document.getElementById('link_click');
el.onmousedown = mouse_down;
function mouse_down() {
alert('mouse_down() called');
return false;
}
</script>

How to open link on new window without calling onclick

I have HTML code as follows:
Text
When user clicks by "Left mouse button" on the link, then reloadPage() should be called.
But when user clicks using "Ctrl + click" or "middle button" on the link then I want to open a new window without reloadPage().
How can I do that?
You can refference here. Its my code
Click Me
<script>
$(document).ready(function() {
$(document).keydown(function(event){
if(event.which==17)
cntrlIsPressed = true;
});
$(document).keyup(function(){
cntrlIsPressed = false;
});
});
var cntrlIsPressed = false;
function reloadPage(mouseButton,event)
{
//event.preventDefault();
if( event.which == 2 ) {
//todo something
//window.open($("#test").attr("href"));
alert("middle button");
return false;
}
if(cntrlIsPressed)
{
//window.open($("#test").attr("href"));
// ctrl + click
return false;
}
//todo something
window.location.href = $("#test").attr("href");
return true;
}
</script>
You can simply set the href attribute on the a tag to the current page url, this way when a user clicks it will open the same page (reload) and if he middle clicks it will open the same page in a new tab.
If you want to use that on multiple pages then you can set the href in javascript to the current page url like this
document.getElementById('myId').href = location.href
You can try this approach (html):
Text
Javascript:
$(function () {
$("#mylink").click(function (event) {
if ((event.button == 0 && event.ctrlKey) || event.button == 1) {
event.preventDefault();
window.open("http://www.google.com");
}
else
if (event.button == 0)
window.location.reload();
});
});
I have two options for you.Pure javascript and with the use of jquery.
Here's the full code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#jqueryStyle').mousedown(function(e){
//3 is right click
if(e.which == 3){
window.open("http://www.w3schools.com");
//1 is for click
}else if(e.which == 1){
reloadPage();
}
});
});
function reloadPage(){
location.reload();
}
function onMouseDown(e,obj){
e = e || window.event;
//3 is for right click
if(e.which == 3){
window.open("http://www.w3schools.com");
//1 is for click
}else if(e.which == 1){
reloadPage();
}
}
</script>
</head>
<body>
<a href="#" id="jqueryStyle">JQuery Code</a ><br/>
<a href="#" onmousedown="onMouseDown(event,this)">Pure Javascript Code</a >
</body>
</html>
Hope that helps.

jQuery button toggle

I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?
jsFiddle: http://jsfiddle.net/PPcfN/
$('.quicklinks-rollover').click(function () {
$('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The mouseup function has to take care of the click on the button (quicklinks-rollover).
If fixed the whole thing here:
http://jsfiddle.net/8VUnq/1/
$(document).mouseup(function (e) {
var popup = $('#quickLinksPopup'),
button = $('#quickLinksToggle');
if (popup.is(':visible')
&& !popup.is(e.target)
&& !button.is(e.target)
&& popup.has(e.target).length === 0
&& button.has(e.target).length === 0) {
popup.toggle();
}
});
Keep in mind those two things:
Use IDs to refer to the items quicker and prevent multiple popup conflicts
Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.
You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').
Try :
var $quicklinks = $('.quicklinks');
var msOverLinks = false;
$('.quicklinks-rollover').click(function () {
$quicklinks.toggle();
});
$quicklinks.mouseenter(function() {
msOverLinks = true;
}).mouseleave(function() {
msOverLinks = false;
});
$(document).mouseup(function (e) {
if( ! msOverLinks ) {
$quicklinks.toggle();
}
});
You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...
put your HTML button with attribute p="closed" by default:
<button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>
Change Your Jquery:
$('.quicklinks-rollover').click(function () {
var a = $(this).attr("p");
var container = $(".quicklinks");
if(a=="closed"){
container.show();
$(this).attr("p","open");
}else{
container.hide();
$(this).attr("p","closed");
}
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.
So instead try like below.
$('.quicklinks-rollover').on('click', function (e) {
$('.quicklinks').toggle();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
var container = $(".quicklinks");
console.log(container.has(e.target).length);
if (container.has(e.target).length === 0) {
container.hide();
}
});
Working Fiddle

if statement and popup case

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
});

Catch scrolling event on overflow:hidden element

Any insights on how to catch a scrolling event on a element that has overflow:hidden? I would like to scroll in a column without showing a scrollbar to the user.
This is actually a somewhat indepth process. What I do is set global flags when users mouse enters and leaves the element that you want to scroll. Then, on the mousewheel event for the body I check to see if the MOUSE_OVER flag is true, then stop propagation of the event. This is so the main body doesnt scroll in case your entire page has overflow.
Note that with overflow hidden, the default scrolling ability is lost so you must create it yourself. To do this you can set a mousewheel listener on your div in question and use the event.wheelDelta property to check whether the user is scrolling up or down. This value is different according to browser, but it is generally negative if scrolling down and positive if scrolling up. You can then change position of your div accordingly.
This code is hacked up quickly but it would essentially look like this...
var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
if(MOUSE_OVER){
if(e.preventDefault) { e.preventDefault(); }
e.returnValue = false;
return false;
}
});
$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });
$('#myDiv').bind('mousewheel', function(e){
var delta = e.wheelDelta;
if(delta > 0){
//go up
}
else{
//go down
}
});
I use overflow:scroll, but also Absolutely position a div over the scroll bar in order to hide it.
$("body").css("overflow", "hidden")
$(document).bind('mousewheel', function(evt) {
var delta = evt.originalEvent.wheelDelta
console.log(delta)
})
works for me. adapted from How do I get the wheelDelta property?
I edited #anson s answer to Vanilla Javascript since it may be useful for others. Also note that "mousewheel" event is deprecated. So my code uses "wheel" instead. Next to that I added arrow functions for practical access the to "this".
fixScrollBehavior(elem) {
elem.addEventListener('scroll', (e) => {
console.log('scrolling');
});
let MOUSE_OVER = false;
elem.addEventListener('wheel', (e) => {
if (MOUSE_OVER) {
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
return false;
}
});
elem.addEventListener('mouseenter', () => {
MOUSE_OVER = true;
});
elem.addEventListener('mouseleave', () => {
MOUSE_OVER = false;
});
elem.addEventListener('wheel', (e) => {
let delta = e.wheelDelta;
if (delta > 0) {
//go up
} else {
//go down
}
});
}
Note that this does not fix the mobile touch-"scroll"s.
$("div").on('wheel', function (e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
This did the trick for me.
JSFiddle
StackFiddle:
$("div").on('wheel', function(e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
div {
height: 50px;
width: 300px;
background-color: black;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I am late, but I think I have a better answer.
Style your container as overflow: overlay, this will free up space of scrollbar, then style scrollbar or hide it or make its handle height/width 0,
Then you should get scroll events also.
Note : styling the scrollbar is not supported in all web browsers.

Categories