I want to make this code applies only at a resolution greater than 643px. If we use " $ (window) .resize (function () {" not working. I'm not good at JQuery syntax, please help.
$(window).resize(function() {
if($(window).width() >= 643) {
function mainmenu(){
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first')
.css({visibility: "visible", display:"none"})
.show(500);
}, function() {
$(this).find('ul:first')
.css({visibility: "hidden"});
});
}
$(document).ready(function() {
mainmenu();
});
$(" #nav a").removeAttr("title");
});
$(window).resize(function() {
if ($(window).width() > 643) {
// do something
console.log("width is now larger than 643px");
} else {
console.log("width is now smaller or equal to 643px");
}
});
You can run this code in the console of any page (such as this one), resize it, and watch the output.
It's hard to deduce your problem from the information you've provided, but here's an attempt:
$(document).ready(function() {
var initFn = function(){
if($(window).width() >= 643){
mainmenu();
$(" #nav a").removeAttr("title");
}
}
$(window).resize(initFn);
initFn();
});
function mainmenu(){
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first')
.css({visibility: "visible", display:"none"})
.show(500);
}, function() {
$(this).find('ul:first')
.css({visibility: "hidden"});
});
}
Related
All
Following code is not working with Internet Explorer. As I would like render hover event on class in document.load or document.ready event. But i could not succeed
jQuery(window).load(function () {
var maxHeight = 250;
jQuery(".dropdown").hover(
function () {
jQuery("li.firstmenu ul li").removeClass("XYZ");
jQuery("li.firstmenu ul li").removeClass("ABC");
jQuery('.dropdown-menu', this).stop(true, true).fadeIn("500");
jQuery(this).toggleClass('openDemo');
jQuery(this).addClass("active-Demo");
jQuery("div#MegaMenu").find("li.secondLI").removeClass("DEF").addClass("hideJIJO");
//jQuery('.active-global-tab > a').removeClass("default-fontcolorD").addClass("default-fontcolorB");
jQuery('ul.dropdown-menu > li.col-sm-4').each(function () {
jQuery(this).height(maxHeight);
});
},
function () {
jQuery('.dropdown-menu', this).stop(true, true).fadeOut("500");
jQuery(this).toggleClass('open');
jQuery(this).removeClass("active-tab");
//jQuery('.global-nav-item > a').removeClass("default-fontcolorB").addClass("default");
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
you can use window.onload instead.
This method automatically called when page load.
Example
window.onload = function(e){
var maxHeight = 250;
jQuery(".dropdown").hover(
function() {
jQuery("li.firstmenu ul li").removeClass("XYZ");
jQuery("li.firstmenu ul li").removeClass("ABC");
jQuery('.dropdown-menu', this).stop(true, true).fadeIn("500");
jQuery(this).toggleClass('openDemo');
jQuery(this).addClass("active-Demo");
jQuery("div#MegaMenu").find("li.secondLI").removeClass("DEF").addClass("hideJIJO");
//jQuery('.active-global-tab > a').removeClass("default-fontcolorD").addClass("default-fontcolorB");
jQuery('ul.dropdown-menu > li.col-sm-4').each(function() {
jQuery(this).height(maxHeight);
});
},
function() {
jQuery('.dropdown-menu', this).stop(true, true).fadeOut("500");
jQuery(this).toggleClass('open');
jQuery(this).removeClass("active-tab");
//jQuery('.global-nav-item > a').removeClass("default-fontcolorB").addClass("default");
}
);
}
I'm developing a horizontal menu with submenus. I need to use Javascript to show the submenu when the user hovers over the parent menu.
I wrote an example in JSFiddle, but it appears to fail in FireFox! In Chrome, IE and Safari is running!
Here's the test page:
www.andreferreira.eu5.org
Here's the code:
jsfiddle.net/R2ySL/
<script>
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function() {
$('li', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#FFF", "color":"#debe65"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"", "color":"#FFF"});
}
);
});
</script>
You can make that without changing css rules via javascript just add the following to your stylesheet
#menu li:hover > a {
color: #debe65;
background-color: #FFF;
text-decoration:none;
}
and javascript should looks like
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function () {
$('li', this).stop(true, true).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
I am using a template and it come with a jQuery function to detect the window width, but it only works if you open the window up or refresh the page, not when you adjust the window width.. From what IU have read I need to integrate the resize function into my codebase
$(window).resize(function()
but as my jQuery is limited I'm not sure how to put it in this script
var ww = $(window).width();
/* Menu */
$(document).ready(function() {
"use strict";
$('body').find("#mainmenu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$('body').find(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$('body').find("#mainmenu").toggle();
});
adjustMenu();
});
$(window).load(function () {
$('body').find("#mainmenu").css('pointer-events', 'auto');
});
var adjustMenu = function() {
"use strict";
if (ww < 900) {
$('body').find(".toggleMenu").css("display", "inline-block");
if (!$('body').find(".toggleMenu").hasClass("active")) {
$('body').find("#mainmenu").hide();
} else {
$('body').find("#mainmenu").show();
}
$('body').find("#mainmenu li").unbind('mouseenter mouseleave');
$('body').find("#mainmenu li a.parent").unbind('click').bind('click', function(e) {
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 900) {
$('body').find(".toggleMenu").css("display", "none");
$('body').find("#mainmenu").show();
$('body').find("#mainmenu li").removeClass("hover");
$('body').find("#mainmenu li a").unbind('click');
$('body').find("#mainmenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).toggleClass('activelink');
$(this).find("ul").toggleClass('animatedfast');
$(this).find("ul").toggleClass('fadeInUp');
});
$('body').find("#mainmenu ul li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).find("ul li").toggleClass('animatedfast');
$(this).find("ul li").toggleClass('fadeInLeft');
});
}
};
I can see that the logic is taking place in the adjustMenu function, so would I wrap that in the resize function?
Maybe I'm missing something obvious, but why not pull the whole thing out of
$(document).ready ()
Place it in a function
Function doAllOfThis (
//do everything
);
And then call it on document ready?
$(document).ready(function ({
doAllOfThis();
});
$(widow).resize (function ({
doAllOfThis();
});
I don't see anything that would be an issue. But you could just extract the code with "if ww =" conditions and move that to a function, then do as above with the function.
BETTER SOLUTION
Just noticed the
adjustMenu();
Function is already set for you, so add
$(window).resize(function({
var ww = $(window).width();
adjustMenu();
});
Utilize the resize event.
$(window).resize(function() {
var ww = $(window).width(); // will contain width after resize
// your adjust logic here
});
function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else if (windowSize <= 450) {
$('.menu-361').on('hover', function () {
//mousehover
} , function(){
//mouseout
} );
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
else {}
}
changeDrop();
$(window).resize(changeDrop);
After the if statment is true the bit of code is loaded in the memory i think. And when the window.width is <= 450 the code from the if statment or > 450 still runs. Any idea how to make this work?
http://tidalbania.com/tidnew/
The link in witch the demo is on the real site!
If you need a fiddle i can update the question.
As others have mentioned, you should not bind event handlers on every change. This should suffice:
$('.menu-361').hover(hoverInOut);
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
function hoverInOut(event) {
var windowSize = $(window).width();
if (windowSize > 450) {
if(event.type == "mouseenter")
$('.menu-361 ul').show();
else
$('.menu-361 ul').hide();
}
}
Well for starters, your code is essentially if A, else if not A, else which is redundant. Just if A, else is fine.
That aside, you are attaching a new event handler for every single time your code runs. That's a lot of event handlers! You are also never detaching your handlers, instead trying to re-add blank ones.
Take a moment to learn how event handlers work ^_^
function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else {
$('.menu-361').unbind('mouseenter mouseleave');
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
}
changeDrop();
$(window).resize(changeDrop);
I think i fixed the issue adding the unbind ('mouseenter mouseleave') when width is less than 450px by removing the binded hover function.
Is this the way it should be done?
I have make a script. That open my submenu in the navigation. When you go mouse out of the submenu. The submenu must be closed with a delay of 300ms. But the delay is not working. How can i fix this? This is my script:
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
$(this).find('.submenu').delay(300).hide();
$(this).removeClass("hover");
});
I haven't tested the following code but it should work ...
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var submenu = $(this).find('.submenu');
setTimeout(function() {
submenu.hide();
}, 300);
$(this).removeClass("hover");
});
You will need to create a setTimeout() method, also, you need to define an object to be used inside of your function $(this) will be null.
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var object = $(this);
setTimeout(function()
{
$(object).find('.submenu').hide();
$(object).removeClass("hover");
}, 300);
});