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.
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
My website uses a vertical menu structure, which operates by Mouseover. Move the mouse over a menu item, the sub-menu shows. Move the mouse away from the menu item, the sub-menu hides.
Due to the fact that there are too many menu items to use the hover function properly without everything going all over the place, I need to change the menu to a click function instead. Similar to this, with a slide function also if possible: http://jsfiddle.net/ZCrk4/17/
I've tried changing the ".hover" to ".click" but that just messes the site up for some reason. Here's the code below:
jQuery(document).ready(function(){
"use strict";
jQuery('#main_menu li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
jQuery('#menu_wrapper .nav ul li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
...
Any help is always appreciated.
Thank you.
Take a look at this, and try it:
jQuery('#main_menu li').click(function(){
var jQuerysublist = jQuery(this).find('ul:first');
if (jQuerysublist.is('.visible')) {
jQuerysublist.removeClass('visible');
} else {
jQuerysublist.addClass('visible');
}
});
I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.
$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});
Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});
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");
}
});
});