I am trying to remove certain functionality when the screen is at certain widths. I was wondering if you could tell me why this doesn't work?
http://jsbin.com/ALAYOru/1/edit
I remove the 'has-sub-menu' class when the screen goes below 700px but it still executes the mouseover event.
Thanks!
Or this.
function isWindowSmall()
{
if(window.innerWidth < 700px) return true;
else return false;
}
$(".some-btn").on('click',function()
{
if(isWindowSmall()){
//do something for small windows
}
else{
//do something else for big windows
}
});
That is becauase what this is doing is.
$(".has-sub-menu").mouseenter(function(){
$(this).css('background-color','red');
}).mouseleave(function(){
$(this).css('background-color','transparent');
});
This goes and finds all of the elements with the class of .has-sub-menu and then it attaches the event listener, so this listener will be applied forever, what you could do is something like this.
$("body").on({
mouseenter: function(){
$(this).css('background-color','red');
},
mouseleave: function(){
$(this).css('background-color','transparent');
}
}, '.has-sub-menu');
This will check to see if the element has the class every time it is clicked
Demo: http://jsbin.com/ALAYOru/6/edit
Note: in the demo, you might have to make the output window bigger than 720px and then refresh to see the proper effect.
You can add a function to check the screen size and remove the onmouseover event listener.
function check_screen() {
if(window.innerWidth < 700px)
{
whateveryourelementiscalled.removeEventListner('onmouseover', //whatever your mouseover function was);
}
}
try this.
window.onresize = function () {
if(window.innerWidth < 700) {
// your code here
}
}
Related
I need to slightly rebuild this project. I would like to below 991px width, the menu would grow when clicked. The funny thing is that the desktop menu behaves the way I want it for mobile.
When elements have a class .nomobiledropdownhover, they behave as expected
The most important is this fragment, for mobile:
$("#navbarSupportedContent li").hover(
function(){
if (!$(this).hasClass('nomobiledropdownhover')) {
return;
}else{
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
$(this).addClass('open ');
}
if(opmenu == 0){
menu_height($(this),'in');
opmenu = 1;
}
},
function () {
if (!$(this).hasClass('nomobiledropdownhover')) {
return;
}else{
$('ul', this).slideUp('fast');
$(this).removeClass('open ');
}
menu_height($(this),'out');
opmenu = 0;
});
}
and this for desktop:
$('.dropdown-toggle').on('click', function(e) {
if ($(this).closest('.dropdown').hasClass('nomobiledropdownhover')) {
$(this).closest('.dropdown').removeClass('open ');
return 0;
}else{
$('.dropdown').find('.dropdown-menu').attr('style', '');
var menuopen = $(this).closest('.dropdown');
// menuopen.find('.dropdown-menu').attr('style', '');
menuopen.find('.dropdown-menu').css('display', 'block');
menuopen.find('.dropdown-menu').css('top', '0');
setTimeout(function(){
$("html, body").stop().animate({scrollTop:menuopen.offset().top}, 300, 'swing', function() {
});
},120);
}
});
I glue it all because it is quite confusing
https://github.com/Mikelinsky/hover-on-mibile/blob/master/assets/js/script.js
Below the width of 991px the menu opens after clicking and closes after clicking somewhere else
I think the main problem is that you are relying on the hover() method, that catch the mouse-enter and mouse-leave event, which are never fired on a touch screen like there is on most mobile devices.
You should likely rely on touch events rather than on click or hover, as suggested in this answer: https://stackoverflow.com/a/11398089/6949810
Basically what code should do - if website size is greater than 750 px then dropdown slides down with hover effect, but if its less than 750 px dropdown works on click toggle.
I check if media query has changed with (greater than 750px float == left) and if (less than 750 px float == none)
It works onclick toggle if i start with 650 px web width, but when i resize it to full screen and then go back to 650 px, it shows as hover and as onclick toggle not only on click toggle.
Anyone can explain what i am doing wrong? I am quite new to jquery.
Thanks in advance!
$(document).ready(function() {
checkSize();
$(window).resize(checkSize);
});
//Function to the css rule
function checkSize() {
if ($("#drop > li").css("float") == "none") {
$('#dropdown-btn').click(function() {
$('.dropdown').slideToggle(200);
});
} else if ($("#drop > li").css("float") == "left") {
$('#dropdown-btn').hover(
function() {
$('.dropdown').slideDown(200);
},
function() {
$('.dropdown').slideUp(200);
}
);
}
};
I think your problem is the fact, that your checkSize function binds an event every single time it triggers, which is quite a lot on resize. A better way is to get rid of your resize function and use the if statement right in your event like so:
$(document).ready(function() {
$('#dropdown-btn').on('click',function() {
if($("#drop > li").css("float") == "none"))
$('.dropdown').slideToggle(200);
});
$('#dropdown-btn').on({
mouseenter: function () {
//stuff to do on mouse enter
if ($("#drop > li").css("float") == "left")
$('.dropdown').slideDown(200);
},
mouseleave: function () {
//stuff to do on mouse leave
if ($("#drop > li").css("float") == "left")
$('.dropdown').slideUp(200);
}
});
You should also use jQuerys on() function instead of hover() or click().
Reference: http://api.jquery.com/on/
I am using skroller.js. But after using this jquery, Touch is not working on the mobile version of my site.
You want something like this?
Check this DEMO : http://jsfiddle.net/aq5vb/4/
Try to resize the result frame see what happens when the window's size reaches 960px.
JQUERY
$(document).ready(function(){
doThisScript();
});
$(window).on('resize', function () {
doThisScript();
});
function doThisScript() {
$('.content').html('Your current width is '+$(window).width());
if($(window).width() >= '960'){
// add your scripts here
$('.content').css({'background':'green'});
}
else{
$('.content').css({'background':'white'});
}
}
I have a small piece of Javascript that checks what the browser's width is on load and, depending on the result, runs a piece of jQuery. This to display a different menu on mobile devices
However, it CAN happen a user starts with a very small browser on his desktop, running the jQuery (and therefore the mobile menu). If he then resizes to full-screen, the menu doesn't change, because the check on the browser's width doesn't run again.
The question: How do I adapt the Javascript so it checks every time the browser is resized?
My code:
if (window.innerWidth <= 992) {
jQuery(document).ready(function($) {
$(".main-menu").hide();
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
});
}
else {
jQuery(document).ready(function($) {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
});
}
You can use a resize function wrapper like this:
function resize(){
// do all your stuff here
}
And then call it once on page load, and recall it on every resize event:
$(document).ready(function(){
resize();
$(window).resize(resize);
});
Instead of the wrapper you could also use an anonymous function ($(window).resize(function(){/*Do stuff here*/})), but then you can't call your function on page load and you'd have to repeat yourself.
Your specific case
In your specific case you'd have to take out the document readys. Heres how it should look:
function resize(){
// First we need to show all, then we will selectively hide based on page width
$(".main-menu, .mobile-nav-button, .mobile-cart-button").show();
if (window.innerWidth <= 992) {
$(".main-menu").hide();
// also, because you bind a click event here, you'll need to unbind it every time
// otherwise it will be executed multiple times after a couple of resizes
// (you could also do what #david does and move this into the document.ready below)
$(".mobile-nav-button").off("click").click(function() {
// slideToggle will toggle display of an element, but because its wrapped in click()
// it only gets executed onclick, not resize. Also, you don't want animation on resize.
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
A snippet
Below is a snippet with the code working. I reduced the width to 700 pixels so I could see the effects at a smaller screen difference (because that how the snippet editor looks) but it all works.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mobile-nav-button">Mobile Nav Button</div>
<div class="mobile-cart-button">Mobile CART Button</div>
<div class="main-menu">MAIN MENU</dov>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function resize(){
$(".mobile-nav-button, .mobile-cart-button, .main-menu").show();
if (window.innerWidth <= 700) {
$(".main-menu").hide();
$(".mobile-nav-button").off("click").click(function() {
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
</script>
</body>
</html>
you can use
jQuery(document).ready(function($) {
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
$(window).resize(function()
{
if (window.innerWidth <= 992) {
$(".main-menu").hide();
}
else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
));
$(window).resize();
));
Just call resize function on pageLoad
$(document).ready(function($) {
$(window).resize(YourFunctionName);
$(window).resize();
});
function YourFunctionName() {
// Here is your code which you want to run automatically on page resize.
}
I am trying to toggle a menu/submenu for smaller screens. (max-width: 991px) When you click the "product" link, the .dropdown menu should show, and when the "accessories" link is selected, the .subdropdown class should show. It would be nice to tap anywhere off of the menus to release them at any depth.
Note: On screens min-width: 991px (desktop), the :hover will come into play.
Notice how my JavaScript code will not fire the sub "accessories" menu. You will have to refresh if you resize your window to test.
Here is the live example: Click Here
Here is my js code
$(function() {
if ($(window).width() < 991) {
$('#product-link').click(function() {
$('.dropdown').toggle();
});
if ('.dropdown' === true) {
$('#accessories-link').click(function() {
$('.subdropdown').show();
});
} else {
$('.dropdown').hide();
}
}
});
Edit:
Although not perfect, it works. I am still wanting to use .click and not .hover but this gets the job done.
$(document).ready(function() {
$('.top-menu').hover(
function(){
$(this).children('.sub-menu').fadeIn(200);
},
function(){
$(this).children('.sub-menu').fadeOut(200);
}
);
})
Your if statement is going to always evaluate to false.
Line 9: if ('.dropdown' === true)
In JQuery you are setting up event listeners on specific elements however your current setup is not taking advantage of the on method for your product-link. Try switching your code up to something like
$(function() {
$('#product-link').on('click mouseover', function(){
$('.dropdown').toggle();
if($('#product-link').hasClass('.dropdown')){
//something else here
}
});
});