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
Related
I have the following code:
<script type="text/discourse-plugin" version="0.8.13">
$(document).ready(function() {
if ($('#daily-check-in').length) {
$('#daily-check-in').attr("href", settings.daily_check_in_url);
$('#daily-check-in').text(settings.daily_check_in_text);
}
if ($('#current-user').length) {
var image_bell = 'https://cdn.ramseysolutions.net/church/fpu/images/icon-bell.svg';
$('#current-user').find('img')[0].setAttribute('src', image_bell);
}
setTimeout(function() {
$('#js_fpu_global_nav > ul').css('transition', 'margin 0.4s').delay(1000);
}, 2000);
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is("#js_fpu_global_nav > ul") === false) {
$('#js_fpu_global_nav > ul').removeClass('open-top-nav');
}
});
});
</script>
The important part is:
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
For now, when I move between pages in dynamic way, it keeps the menu open. I would like to close it every time user clicked on some other place of the page (not in the menu box) or if he moved to a different page (even if its from one of the links from this menu page).
I'm familiar with Vanilla JS addEventListener but I'm not sure how to use it here or if its the right approach. The desired output is to close the menu every time user clicks on something else. Other code could be found on Github (link).
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 am currently using Wordpress Shortcode Ultimate's Accordion. The plugin already have the option to open the accordion on page load and I'm using that option now but I also want them to be closed on mobile.
How do I remove that option on mobile using jquery?
Here is their code:
$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-spoiler-title', function (e) {
var $title = $(this),
$spoiler = $title.parent(),
bar = ($('#wpadminbar').length > 0) ? 28 : 0;
// Open/close spoiler
$spoiler.toggleClass('su-spoiler-closed');
// Close other spoilers in accordion
$spoiler.parent('.su-accordion').children('.su-spoiler').not($spoiler).addClass('su-spoiler-closed');
// Scroll in spoiler in accordion
if ($(window).scrollTop() > $title.offset().top) $(window).scrollTop($title.offset().top - $title.height() - bar);
e.preventDefault();
});
$('.su-spoiler-content').removeAttr('style');
Thank you very much!
Detect device,
BY PHP:
you can check your website is loading on mobile device or desktop device by word press default functionality and apply condition for loading sort code
wp_is_mobile()
By jquery:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
I applied this code in my PHP footer of my theme and it is working!
$(function(){
$(window).resize(function() { // Optional: if you want to detect when the window is resized;
processBodies($(window).width());
});
function processBodies(width) {
if(width < 768) {
$('.su-spoiler').addClass('su-spoiler-closed');
}
else {
$('.su-spoiler').addClass('default');
}
}
processBodies($(window).width());
});
I have created a menu which uses jQuery slideDown/slideUp to show/hide menu items. Jquery code looks like
$(".menu-reveal a").click(function() {
if ($(".menu").is(":visible")) {
$(".menu").slideUp(300);
$(".menu-reveal").removeClass("revealed");
} else {
$(".menu").slideDown(300);
$(".menu-reveal").addClass("revealed");
}
});
Site is loading by default with "hidden" menu items, then visitor needs to click it to see menu items.
My question is how I can "keep" menu statement if was expanded or not on page change? For an example I want to have it shown on next page when it was expanded on a previous page.
Here is working code:
$(".menu-reveal a").click(function() {
if ($(".menu").is(":visible")) {
$.removeCookie("top-menu", { path: '/' });
$(".menu").slideUp(300);
$(".menu-reveal").removeClass("revealed");
} else {
$(".menu").slideDown(300);
$(".menu-reveal").addClass("revealed");
$.cookie("top-menu", 1, { path: '/' });
}
});
// Permanent top menu
var cookieTopMenu = $.cookie("top-menu");
if (cookieTopMenu == 1){
$(".menu").slideDown(1);
$(".menu-reveal").addClass("revealed"); }
else {
$(".menu").slideUp(1);
$(".menu-reveal").removeClass("revealed");
}
I have used jQuery cookie plugin to achieve desired results.
Hope it will helps somebody else.
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
}
});
});