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
}
});
});
Related
I am super new to Javascript/JQuery, and I'm having trouble figuring out how to do this. I want to add it to a responsive site that I am working on in class.
I have a hamburger menu set up that hides/shows my menu, which works great. The thing is I only want the Javascript to run on a screen width of 414px or less. My menu is to be hidden until I click the hamburger.
For screens 415px, and above I don't want it to hide my menu, or show the hamburger and "X". I can hide the "X" and the hamburger easily enough with media queries if needed, but I still need my menu to display.
I tried to add an event loader, but must have done something wrong, as everything turned on (X, hamburger, & menu), and clicking did nothing. Please help me figure out how to make this work. I am super green at this, so any pointer would be greatly appreciated. Thanks ahead of time
// Hamburger menu
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
You can use Jquery width() to get the current page width, and use it as a condition.
$(document).ready(function() {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
But remember that people often resize their screens so you need to handle that as well.
$(window).resize(function () {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
Based on #m4dm0nk3y
I usually extract the common code in a function and call it on ready, and then on resize.
function alignStuff() {
WindowWidth = $(window).width();
if (WindowWidth < 415) {
console.log('small');
} else {
console.log('large');
}
}
$(document).ready(function() {
alignStuff();
})
$(window).resize(function() {
alignStuff();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've built a dropdown with jQuery and some css / scss. It works at first glance, but there are always errors that I think are due to jQuery code or unnecessary CSS rules. I'm just not sure which of them ..
You can see the current status here. The said dropdown menu is the item "Leistungen" in the Navbar:
https://www.s-wat.de
Especially in the mobile viewport errors appear. If I open the dropdown here and in the opened state click on another point (for example "Kontakt") and then on "Leistungen" again, there is an unwanted fadeIn fadeOut effect. The dropdown will open and close first, before I can open it normally.
Here is my jQuery code:
(function($) {
"use strict"; // Start of use strict
// Closes responsive menu when a scroll trigger link is clicked
$('.first .js-scroll-trigger, .last .js-scroll-trigger, .dropdown-menu .js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeOut('slow');
}
$('.dropdown-menu').removeClass('show');
$('.dropdown').removeClass('show');
});
var navbarBehave = function(){
if ($(window).width() < 992){
$('.dropdown-toggle').click(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn('slow');
}else{
$('.dropdown-menu').fadeOut('slow');
}
});
}else{
$('.dropdown-toggle').hover(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn(300);
}else{
$('.dropdown-menu').fadeOut(300);
}
});
}
}
navbarBehave();
$(window).resize(function(){
navbarBehave();
});
})(jQuery); // End of use strict
I am new to stackoverflow.com, looking for a bit help of a code hope you can help me out.
Here is website http://newwebdemo.com/builf/
If you open this website in mobile or resize your windows to smaller, you will see a mobileMenuToggle will appear instead of normal desktop menu of website!
What i want is currently the menu slidedown when i click on it and close once i click on it again, i need it to be default opened with website is load, and i can close it when i click on it,
Here is the code if this section, your help will solve my problem
if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
$('#header-wrapper').addClass('is_tablet');
$('#header-inner .mobile-nav').css('display','block');
$('#header-inner ul.navigation, #header-inner ul.mobile-navigation').css('display','none');
$('#header-inner .mobileMenuToggle').css('display','block');
$('.menu').not('.mobile-nav .menu').css({display:'none'});
}
$('.mobileMenuToggle a').on('click', function() {
if($(this).hasClass('open')) {
$('ul.mobile-navigation').slideUp(400,'easeInOutQuint');
$(this).removeClass('open');
} else {
$('ul.mobile-navigation').slideDown(400,'easeInOutQuint');
$(this).addClass('open');
}
return false;
});
What it is doing currenty is adding class name "open" to
<div class="mobileMenuToggle"></div>
when you click it change in code like that and menu slidedown and open
<div class="mobileMenuToggle"></div>
you can see once i click on menu while i am on mobile or in smaller size of browser, it open menu on click, i want it to be default opened with website!
Can please someone help ?
Just add a trigger after attaching the click event, something like:
if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
$('#header-wrapper').addClass('is_tablet');
$('#header-inner .mobile-nav').css('display','block');
$('#header-inner ul.navigation, #header-inner ul.mobile-navigation').css('display','none');
$('#header-inner .mobileMenuToggle').css('display','block');
$('.menu').not('.mobile-nav .menu').css({display:'none'});
}
$('.mobileMenuToggle a').on('click', function() {
if($(this).hasClass('open')) {
$('ul.mobile-navigation').slideUp(400,'easeInOutQuint');
$(this).removeClass('open');
} else {
$('ul.mobile-navigation').slideDown(400,'easeInOutQuint');
$(this).addClass('open');
}
return false;
});
$(function() {
$( window ).resize(function() {
if (jQuery('.mobileMenuToggle').is(':visible')) { jQuery('.mobileMenuToggle a').click() }
}).trigger('resize');
});
If you want to update the page upon resize, then you should attach resize event and track the visibility in there..
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
}
}
My code is:
$(document).ready(function() {
$(".more").click(function(e) {
$(this).toggleClass("open");
if (!$(".more").hasClass(".icon-arrow-down")) {
// alert('Yep has class');
$(this).toggleClass("icon-arrow-down");
$(this).toggleClass('icon-arrow-up');
}
else {
// alert('all ok');
}
});
});
A little messy as i was testing some things out. Basically i have a menu, with a .more class added for dropdowns. People on mobile click the more, which adds a class of .open to the menu so people can see it. Now my problem is, this code doesn't seem to work 100% of the time.
Sometimes the classes get confused and i end up with a menu open, but a class of icon-arrow-down still.
And also, how would i add something in so that the open class gets removed if another more button is clicked?
Help appreciated as always.
In menus I always use something like this:
$(document).ready(function() {
$(".more").click(function(e) {
if($(this).hasClass("open")) {
// if it's open then just close it
$(this).removeClass("open");
} else {
// if it's closed, then close everything else and open it
$(".more").removeClass("open");
$(this).addClass("open");
}
/* TODO: now do something similar with icon-arrow */
});
});
Shouldn't you just be checking if the current element has the .icon-arrow-down class. So rather than
if (!$(".more").hasClass(".icon-arrow-down"))
this
if (!$(this).hasClass(".icon-arrow-down"))
Maybe consider using
$(".more").click(function(e) {
if( $(this).hasClass("open") ) {
$(this).removeClass("open").addClass("closed");
} else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("open").addClass("closed");
$(this).removeClass("closed").addClass("open");
}
});
Then use the .open and .closed class to set your arrow styles
Fiddle here.
Simple but shows you what you can do.
You could remove the class .open from all and then add it to the clicked one:
$(document).ready(function() {
var $more = $(".more");
$more.click(function(e) {
var $this = $(this);
if ($this.hasClass("open") {
$more.removeClass("open");
} else {
$more.removeClass("open");
$this.addClass("open");
}
});
});