here is my code...
var menuToggle = false;
$(document).ready(function () {
// Init Tabs
$("#ipsg-tabs").tabs();
// Init Tooltips
$(function () {
$('.ipsg-tab').tooltip();
});;
// Init Menu
accordionMenu();
// Toggle Menu
$('.ipsg-logo-menu-btn').click(function () {
if (!menuToggle) {
menuToggle = true;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$('.ipsg-container').addClass('ipsg-menu-collapse');
} else {
menuToggle = false;
$('.ipsg-container').removeClass('ipsg-menu-collapse');
}
});
});
function accordionMenu() {
var allPanels = $('.sg-accordion > .ipsg-nav-items');
var menuLeaving = false;
$('.sg-accordion > h3 > a').click(function () {
if (!menuToggle) {
if (!$(this).parent().hasClass('state-selected')) {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().slideDown('fast');
$(this).parent().addClass('state-selected');
} else {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
}
}
return false;
});
$('.sg-accordion > h3 > a').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().show();
$(this).parent().addClass('state-selected');
}
});
$('.sg-accordion > .ipsg-nav-items').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
}
});
$('.sg-accordion > h3 > a').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
$('.sg-accordion > .ipsg-nav-items').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
}
I am trying to have my toggle menu closed or open depending on the page reload. So if i am using hamburger menu, and click on a link, i want the hamburger menu to stay after reload. Same with having the menu opened up, i want it so if i click on those links, for the menu to stay open on reload.
anyone have any ideas?
This is the sort of thing I would use localStorage or cookies for. You can set an variable for either that would allow for you to dictate if the menu should be opened or closed.
Asked Previously. You can use cookies for that as it is easy to implement and maintainable.
Link is here Jquery UI Accordion menu saving menu state even after refresh
Related
I'm creating product variant accordions for my Shopify store and so far I've been able to make it so that the accordions will open but they won't collapse when you click on them again. If anyone can provide some guidance on what I'm doing wrong I'd appreciate it!
function swatchNamePlacement() {
$('.swatches .swatch-view .swatch-img-text').each(function () {
var elm = $(this);
var parent = elm.closest('.swatch-view-item');
parent.append(elm);
});
}
function isSwatchKingLoaded() {
var watch = setInterval(myTimer, 200);
function stopTimer() {
clearInterval(watch);
}
function myTimer() {
if(typeof VariantSwatchKing !== "undefined" && VariantSwatchKing !== '') {
if($('.swatches').length > 0){
$('.swatches > div').eq().addClass('open');
stopTimer();
swatchNamePlacement();
}
}
}
}
$('.product__info-wrapper').on('click','.swatches > div', function(e){
e.preventDefault();
var element = $(this);
var parent = element.parent();
// parent.toggleClass('open');
if(parent.hasClass('open')) {
element.removeClass('open')
} else {
parent.find('.swatches > div').removeClass('open');
element.addClass('open')
}
});
When I click on the toggle menu it opens properly and then it automatically closes. I don't know why it is happening. I have only a little knowledge of JS.
How can I solve this problem?
My code
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class = "icofont-navigation-menu" > < /i></button > ');
$('body').append('<div class="mobile-nav-overly"></div>'); $(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
}
else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
Now its working
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function (e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function (e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function (e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
// I removed the unnecessary code from here
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
I use id = "no-link" without problem with an image. But with a text and an anchor the result is not good. Clicking on the link has no effect.
Thank you for your help.
$(document).ready(function () {
setTimeout(function () {
$('a[href]#no-link').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.open(href, '_blank');
}
});
});
}, 500);
});
<img src="images/GB flag.jpg" width="29" height="29" alt="photo"class="myphoto2">
<p> 정의 </p
I have the following jQuery to vertically center text next to an image but it only loads after the page is re-sized.
$(window).load(function () {
$(function () {
var changeheight = function () {
$('.vertical-align').height($('.featurette-image').height());
}
$(window).on('resize', function () {
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
})
})
});
Remove window resize and should work on load
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});
Idk why OP deleted his answer but it was correct. I had to remove window resize
The following code is correct:
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});
I have a div say div1 and I want when that div1 is completely scrolled then a button to appear on the navigation bar...else the button should remain hidden. I have tried the following code:
$(function(){
$("#b1").hide();
var h=$("#d1").height();
var h1=$("#d2").height();
var eventPosition=h+h1;
$(window).scroll(function{
if(window.screenY>=eventPosition)
{
fireEvent();
}
else{
fireEvent1();
}
});
fireEvent()
{
$("#b1").show();
}
fireEvent1()
{
$("#b1").hide();
}
});
you missed the function word
$(function () {
$("#b1").hide();
var h = $("#d1").height();
var h1 = $("#d2").height();
var eventPosition = h + h1;
$(window).scroll(function{
if (window.screenY >= eventPosition) {
fireEvent();
}
else {
fireEvent1();
}
});
function fireEvent()
{
$("#b1").show();
}
function fireEvent1()
{
$("#b1").hide();
}
});
$(document).ready(function(){
$("#b1").hide();
$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height()) >=
$(document).height())
{
fireEvent();
}
else{
fireEvent1();
}
});
function fireEvent()
{
$("#b1").show();
}
function fireEvent1()
{
$("#b1").hide();
}
});
Here is your code with some changes. When it gets to the bottom a button will be shown.
Here is a jsfiddle example.
https://jsfiddle.net/okisinch/6t02bum1/1/
I hope this will help you to find the solution to your problem.