Im making a store in shopify, and have set up the navbar as a dropdown.
Clicking the nav links will only make it display or hide the drop down, but what i need is for it to, on the first click, display, then clicking the parent will follow the link.(for instance,my home item drops down, but i can't actually get home, and need it as a drop down item.)
HeaderView.prototype.events = {
"click .main-nav .dropdown > a": "toggleMenu",
};
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
e.preventDefault();
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
};
Obviously the e.preventDefault is stopping the link from working, but I'm not sure how to make it give an active class on the first click, then allow the link to be followed when the drop down is visible. It works with hover, but then won't work on touch devices.
Any help/suggestions would be appreciated, thanks.
You only need to call e.preventDefault() when you are doing the first click. Otherwise it is, like you said, preventing it from working.
Try this instead:
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
e.preventDefault();
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");
}
};
Thanks for the response, I was going along the same line of thought and wound up with a simple, "if the class is active prevent default" type statement.
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
So basically, if the drop down shows, allow the link, if isn't showing, prevent it;
thus keeping the top level as a link if it's drop down is 'open'.
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
}
};
Related
What I want to do is to return to the previous menu when the return button is clicked, can you help? I'm leaving a link on how to write the code here
const submenutitle = document.querySelector('.submenutitle');
https://codepen.io/tolgagnydnn/pen/abWmMpp
The problem was you had two listeners and the second (the back button) was being overwritten by the first (because the back button is part of the group of listeners from the first set). Essentially, the back button had 2 event listeners on it. I consolidated them. I had to change some of the code, so that it would find the right element to add/remove classes from:
for (const mobilemainmenuitem of mobilemainmenuitems) {
mobilemainmenuitem.addEventListener("click", (e) => {
const submenu = e.target;
if (submenu.classList.contains("btn"))
submenu
.closest(".mobilesubmenu")
.classList.remove("showleft", "showvisibility");
else
submenu
.closest("li")
.querySelector(".mobilesubmenu")
.classList.add("showleft", "showvisibility");
});
}
https://codepen.io/kinglish/pen/OJmRevq?editors=1111
recently I'm trying to make a hoverable login menu and what I want is that when the user clicks one of the inputs(id or password inputs) then make hoverable menu appear until the user clicks outside of the element.
So, it might be a little complicated to understand so here is an example here:
https://www.superonline.net
As ye can see, if you hover "Giriş" in the header, login box appears and when you unhover it disapears. What's more, when you click one of the inputs in the box then you can only disappear login box by clicking outside of the box, wonder how to do that.
You should be able to solve it with JQuery, when you hover the element to show, you're gonna have to fake a hover/focus with Jquery. Here's a code I had found to prevent this for a search bar. It's EXACTLY the same logic.
$('.top-search-bar').blur(function() {
if(mousedownHappened){
$('.top-search-bar').focus();
mousedownHappened = false;
}
else{
$('.top-search-bar').removeClass('top-sb-nb');
$('.input-results').removeClass('r-displayed');
}
});
var mousedownHappened = false;
$('.input-results').mousedown(function() {
mousedownHappened = true;
});
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
I have a group of divs that form a selection list inside of vert. scrolling div.
It is impossible to click on any of the items beyond those that are initially visible in the list.
When it works, the variable will be displayed in the input box & the selection will collapse.
Currently, it doesn't work, it just goes back the start of the list and nothing else happens.
Demo: http://www.partiproductions.com/searchertest2/index.html
I've tried a helper function, but it doesn't seem to be registering the click.
What do I need to change in my code to fix this?
$(function() {
$('#SearcherBar_stacks_in_1_page0 .ac_results div').click(function() {
var clterm = $(this).children("span").attr("class");
console.log('Clicked: ' + clterm);
$('input#select_searcher_stacks_in_1_page0.ac_input').val(clterm).trigger('keyup');
});
});
Thanks.
I got a question to ask on building firefox plugin, basically my aim is to do following things,
1) In my plugin I want to show right click context menu item for only links[anchor tags] and hide the menu item for rest of the page
2) How to add dynamic list to my menu, i.e., adding the number of menu list items dynamically depending upon user's choice.
Can someOne point me to a right direction
Thanks !!
Bind an event listener for the contextmenu event and check whether the clicked element is a link, e.g.:
window.addEventListener("contextmenu", function(e) {
var menu = document.getElementById('your-menu-id');
if(e.target.nodeName == 'A') {
menu.hidden = false;
}
else {
menu.hidden = true;
}
}, false);
Read more about event properties and the menu element properties.
Have a look at the menu element's appendItem method.