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..
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'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
This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.
This only works once then I refresh the page.
Any help in this regard will be appreciated
jQuery code
$(document).ready(function()
{
$(document).on('click', function()
{
if($('body').hasClass('animate'))
{
$('body.animate').on('click', function()
{
$(this).removeClass('animate');
});
}
else
{
$('.fa-bars').on('click', function()
{
$('body').addClass('animate');
});
}
});
});
I think he want to close menu when click on body only. This code may help:
$(document).ready(function () {
$('.fa-bars').on('click', function (evt) {
$('body').addClass('animate');
evt.stopPropagation();
});
$('body').on('click', function () {
if ($('body').hasClass('animate')) {
$('body').removeClass('animate');
}
});
});
Click on fb-bars to open menu
Click on body to close menu if already opened
I'm trying to remember which tabs were open in my menu after reload. Here's my js:
$(document).ready(function () {
$(".sidebar div").hide();
$(".sidebar li a").click(function () {
// alert($(this).attr("class"));
var myClass=$(this).attr("class");
if ($("#div"+myClass).attr("class")!='active') {
$("#div"+myClass).slideToggle(); //open tab
$("#div"+myClass).addClass('active');
}
else {
$("#div"+myClass).slideToggle(); //close tab
$("#div"+myClass).removeClass('active');
}
});
});
It's constantly adding and taking away the class "active" each time I click on it. I also have this right below it:
$(window).load(function () {
$(".active").slideToggle();
});
Whenever I reload my page, even when a couple of tabs have an active class, they do not appear to be slideToggling. Am I doing this wrong? Is there an easy way around this?
I'm trying to make a menu that can collapse:
If you click on a button div the menu shows and stays even if you hover the button div.
If you click again on the button div the menu hides.
When the menu is hiding onmouseenter or mouseover it shows onmouseleave or mouseout
it's hiding.
I can't make this happen, this is my code:
$(function() {
$('#arrow').bind('mouseenter', function(){
if($('#hoofdmenu').attr("class") == "show"){
$('#hoofdmenu').addClass("class", "mousehide");
$('#hoofdmenu').hide();
}
else
{
$('#hoofdmenu').removeClass("class", "mousehide");
$('#hoofdmenu').addClass("class", "mouseshow");
$('#hoofdmenu').show();
}
});
$('#arrow').bind('click',function(){
if ($('#hoofdmenu').attr("class") == "show"){
$('#hoofdmenu').attr("class", "hide");
$('#hoofdmenu').hide();
}
else
{
$('#hoofdmenu').attr("class", "show");
$('#hoofdmenu').show();
}
});
});
Someone can help me with this problem?
Kind regards,
Frank
Why do you want to add special classes for this? You can use the hide() and show() function for clicks and the mouseOver() and mouseOut() functions for the mouse hover.
Check this out for more
Edit: For some reason I cannot load jquery.com to point out the right pages
Using attr() and classes a lot is pretty slow, since a DOM reflow is issued each time. Also, make sure to cache elements. We can speed things up a bit doing this:
$(function(){
var menu = $('#menu'),
arrow = $('#arrow'),
isOpen = false;
arrow.hover(function(){
if(isOpen) return;
if(menu.is(':visible'))
menu.hide();
else
menu.show();
});
arrow.click(function(){
if(isOpen)
menu.hide();
else
menu.show();
isOpen = !isOpen; // shift bool
});
});