click function only available above 1024px breakpoint - javascript

I have a mute button that I only want to work above screen width 1024.
The function should not be available below the mentioned break point. I have tried a couple of ways but still not able to achieve this. Any pointers would be helpful. Please see my snippet below:
if($(window).width() > 1024) {
$("#mute").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Removed javascript error, It should work now.
if($(window).width() > 1024) {
$("#mute").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
});
}

I think, You should check for the window width if there was a resize and then perform the necessary action.
Something like this:
$(document).ready(function(){
$( window ).resize(function() {
if(window.width < 1024)
{
$("#mute").off("click");
}
else
{
$("#mute").click(function() {
. . .
})
}
});
$("window").trigger("resize"); // On trigger resize to make button active if window is already > 1024
})

You're adding click handler when executing the code, not when doing the click. when width > 1024px at the time you execute that code the handler gets created and will still work when width drops below 1024px. Similarly when execute that code and width < 1024px then the click handler will never be created!
So, try this code (inside $.ready or similar):
$("#mute").click(function() {
if ($(window).width() <= 1024) return; // maybe return false;
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
});
EDIT: as already commented above while I was answering...

Just try to swap the if statement with the click event handler.
$(document).ready(function() {
$("#mute").click(function() {
if ($(window).width() > 1024) {
alert("Clicked");
}
});
});
Here's a Fiddle for you to test.

Related

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

jQuery responsive hover and click swtich

How to switch hover and click when window size change
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
$(window).resize(checkWidth);
However I found hover is always on, so I had to change to this way
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').off('click', function(){
......//code
});
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
but still doesn't work properly, if someone has a better solution?Thanks
Take a close look at $window.width(). I suspect that. Try changing it to $(window).width(). Make changes to the code that you provided at the top. Because the code at the bottom looks messed up.
Also make sure to check the window width by using an alert or log. Just to make sure that the if statement is working right.
Try it like this
var permit=2;
$('#clickPoint').on('click', function(){
if(permit==0)
{
......//code
}
});
$('#clickPoint').on('hover',function(){
if(permit==1)
{
......//code
}
});
function checkWidth() {
var windowsize = $(window).width();
if (windowsize > 480) {
permit=0;
}else {
permit=1;
}
}
$(window).resize(checkWidth);

I need some javascript condition like media query

I want to add some condition in jquery like media queries in CSS, anyone can help me with this? I try the code below but is not working:
jQuery(document).ready(function(){
if (jQuery(window).width() >= 320) && (jQuery(window).width() <= 479) {
}
if (jQuery(window).width() >= 480) && (jQuery(window).width() <= 567) {
}
});
You have parentheses around your individual conditions, but not around the if conditions as a whole.
Try this:
jQuery(document).ready(function(){
alert("Running");
alert(jQuery(window).width());
if ((jQuery(window).width() >= 320) && (jQuery(window).width() <= 479)) {
alert('Small screen');
} else
if ((jQuery(window).width() >= 480) && (jQuery(window).width() <= 567)) {
alert('Large screen');
} else {
alert("Biggest screen");
}
});
Note the extra parentheses after if and before {
You actually don't need mediaqueries in JS to do your task the right way. First of all: how to work with media queries in JS. You can use matchMedia. Here is a brief documentation.
Here is a simple example:
var smallMatcher = matchMedia('(max-width: 480px)');
var biggerMatcher = matchMedia('(max-width: 1024px)');
var run = function(){
if(smallMatcher.matches) {
//run code for small
} else if(biggerMatcher.matches){
//run code for bigger
} else {
//run code for else
}
};
//now run it
run();
//in case you need to dynamically change on resize
//use addListener
smallMatcher.addListener(run);
biggerMatcher.addListener(run);
But as said, you don't need this. What you actually need to do is simple separation of concerns. Don't mix your behavior with your CSS. Simply add focus/blur or focusin/focusout events, the add or remove a class and do everything else in CSS.
This should result in clean and simple code, here is an example:
$('#searchbox')
.on('focus', function(){
$(this).closest('form').addClass('focused-field');
})
.on('blur', function(){
$(this).closest('form').removeClass('focused-field');
})
;
Everything else can and should be handled in CSS.
And In case you need the modify the style for the input button also if the button itself is focused and not only the search input you can see the following fiddle.

Reponsive Menu Js (clear dom?)

I want to create a responsive menu for my website, however, I have a problem : I have two devices (desktop & mpbile phone) with the same HTML but two different JS. I share my problem in few line of code.
eventDesktop = function() {
$('header').click(function() {
console.log('Desktop');
});
};
eventPhone = function() {
$('header').click(function() {
console.log('Phone');
});
};
eventWitch = function() {
if (window.innerWidth > 480) {
eventDesktop();
} else {
eventPhone();
}
};
eventWitch();
$(window).resize(function() {
eventWitch();
});
So, after loading that's ok because only one is load, but after resize there are 2 fonctions for the same element, and I want to have only witch one i need. So here, i want to see on the console only 'Desktop' or 'Phone' but not the 2 both, when i click.
Thanks for reading.
If you have question i can specify my ask.
Greet.
You are binding two events on same element on the resize of window. You could try this
$('header').click(function() {
if(window.innerWidth > 480)
console.log('Desktop');
else
console.log('Phone');
});
So, check everytime when user click on header.
It seems like you creating 2 different Event-Handlers, so he is using both in your case.
Try to .unbind() them:
$(window).resize(function() {
$( 'header' ).unbind( 'click' );
eventWitch();
});
So all Click events will be removed, keep that in mind.
There is another method I didn't tried, but maybe it helps: jQuery multiple click event
As andrea.spot wrote: "You need to make your handler function return false.. it prevents the event from bubbling."
Adding this to your code:
eventDesktop = function() {
$('header').click(function() {
console.log('Desktop');
return false;
});
};
eventPhone = function() {
$('header').click(function() {
console.log('Phone');
return false;
});
};
The last solution would be changing the way of thinking. This means do the Click-Handler and THAN check for the Windows Size. Currently you checking for the Window Size and than calling a Click-Handler, this will always lead to multible Click Handlers, but not if you create one handler and than do the statements.
My text to code:
eventWitch = function() {
$( 'header' ).click( function(){
if (window.innerWidth > 480) {
console.log( 'Desktop' );
} else {
console.log( 'Mobile' );
}
}
};
Does one of this solutions works for you?
try this
eventDesktop = function() {
$('header').unbind('click').click(function() {// here it will removes all old click events assigned to this element.
console.log('Desktop');
});
};
eventPhone = function() {
$('header').unbind('click').click(function() {// here it will removes all old click events assigned to this element.
console.log('Phone');
});
};
eventWitch = function() {
if (window.innerWidth > 480) {
eventDesktop();
} else {
eventPhone();
}
};
eventWitch();
$(window).resize(function() {
eventWitch();
});

Div still redirecting after resized window

I have this script that makes a div become a link when resizing window. Problem is that when I zoom back out the div is still redirecting.
The code:
$(window).resize(function() {
if ($(this).width() <= 1400) {
$("#settings").click(function() {
window.location = "settings.php";
});
} else {
$("#settings").click(function() {
$("#settingsDropdown").toggle();
});
}
}).triggerHandler('resize');
I tried adding window.location = "#"; but it didn't work.
Both events are registered, you need to remove the first event handler for the click check the off event
you could do:
$(window).resize(function() {
if ($(this).width() <= 1400) {
$("#settings").off( 'click' ); // <------ Add this line
$("#settings").click(function() {
window.location = "settings.php";
});
} else {
$("#settings").off( 'click' ); // <------ Add this line
$("#settings").click(function() {
$("#settingsDropdown").toggle();
});
}
}).triggerHandler('resize');
You have to unbind event handlers which you don't want anymore
See unbind
use bind and unbind
$(window).resize(function() {
$("#settings").unbind('click.redirectOrToggle');
if ($(this).width() <= 1400) {
$("#settings").bind('click.redirectOrToggle', function() {
window.location = "settings.php";
});
} else {
$("#settings").bind('click.redirectOrToggle', function() {
$("#settingsDropdown").toggle();
});
}
}).triggerHandler('resize');
Instead of binding different handlers, change the logic within the click handler itself and you can remove the window.resize
/* called outside of window resize*/
$('#settings').click(function(){
if($(window).width() < 1400){
window.location = "settings.php";
}else{
$("#settingsDropdown").toggle();
}
})

Categories

Resources