I have a menu that has submenus that drop down on a hover, however I am making it responsive and I need it the submenus to drop on a click. I have accomplished this by targeting screensize.
What i need to do is stop the anchor tag with the class of stopLink from executing on a click and just have the submenu drop instead of a page redirect
NOTE: * you may ask why do you even need a hyperlink for the first element anyways, it is non-negotiable with my client
HTML
<ul class="mainMenu">
<li>
Home
</li>
<li>
Products
<ul class="subMenu>
<li>P1</li>
<li>P2</li>
<li>P3</li>
</ul>
</ul>
jquery - works but blocks ALL LINKS
$('.mainMenu > li').unbind().click(function (e) {
e.preventDefault();
location.href = "javascript:void(0);";
$(this).find('.subMenu').stop().slideToggle(400);
return;
});
jquery - what i think needs to happen*
$('.mainMenu > li').unbind().click(function (e) {
$('.stopLink').each(function(e)
e.preventDefault();
location.href = "javascript:void(0);";
});
$(this).find('.subMenu').stop().slideToggle(400);
});
Update
Also tried to target it specifically based on browser size
var $w = window.innerWidth || document.documentElement.clientWidth;
if ($w < 1025) {
$('.stopLink').each(function (e) {
e.preventDefault();
location.href = "javascript:void(0);";
});
} else {
$('.stopLink').each(function (e) {
e.preventDefault();
location.href = "/products.html";
});
}
if ($w > 1025) {
$('.mainMenu > li').unbind().hover(function () {
$(this).find('.subMenu').stop().slideToggle(400);
});
} else {
$('.mainMenu > li').unbind().click(function (e) {
$(this).find('.subMenu').stop().slideToggle(400);
});
}
thought the above code would work for sure but no dice :(
Have you tried this?
$('.mainMenu > li.stopLink').unbind().click(function (e) {
e.preventDefault();
location.href = "javascript:void(0);";
$(this).find('.subMenu').stop().slideToggle(400);
return;
});
If you just use .click() and e.preventDefault() along with the check for the width of the screen you get this fiddle.
if(w < 1025) {
$('a.stopLink').click(function (e) {
e.preventDefault();
$('ul.subMenu').slideToggle(400);
return;
});
}
Related
I managed to remove the attribute element of a list item but I am struggling to do the following: When I click on a list item,it should add a class called important,otherwise, the class must not exist.
I tried this using jQuery:
$(document).ready(function (){
var origHref = $('ul#primary-menu > li.menu-item-has-children > a').attr('href');
//alert(origHref);
var clicks = 0;
$('ul#primary-menu > li.menu-item-has-children > a').removeAttr("href").data("origHref",origHref);
$('ul#primary-menu > li.menu-item-has-children').click(function(){
clicks++;
if(clicks === 1){
$('ul#primary-menu > li.menu-item-has-children').addClass('important');
}
else if(clicks > 1){
alert("you clicked twice");
}
});
});
Problem: When I inspect the element and click on the list for the first time,nothing happens.Only when I click for the second time that the class is added.
NOTE: I wanna do that for mobile devices only,so no need to worry about screens wider than 800 pixels.
Please help.
Do a if based on the class not a global variable, prevent the default click event :
$('ul#primary-menu > li.menu-item-has-children').click(function(e) {
if ($(window).width() < 800) {
if (!$(e.target).closest('ul').is('.sub-menu')) {
e.preventDefault();
if (!$(this).hasClass('important')) {
$(this).addClass('important')
//toggle the menu
} else {
//redirect if second click
window.location = $(this).find('a').attr('href');
}
}
}
});
I am trying to delete a jquery event when the window gets >490. However, the unblind() or off() elements do not deactivate the action activated when the window gets smaller than 490px. Why is this? Does anyone knows any method to make a selection return to its original state?
$(document).ready(function(){
$(window).resize(function(){
if ($(window).width()<490) {
$("#shown").unbind().click(function(){
event.preventDefault();
$("body div hidden").toggle('slow');
});
}
else if ($(window).widht()>=490) {
$("#shown").unbind();
$("body div hidden").unbind();
}
});
});
</script>
Here is how you can achieve your desired, the below code will unbind the hide event based on the screen size.
$(document).ready(function()
{
var eventPresent = false;
$(window).resize(function()
{
console.log("current width : ", $(window).width());
if ($(window).width()<490 && eventPresent == false)
{
$("#shown").unbind().click(function(event)
{
event.preventDefault();
$("#divText").toggle('hide');
});
eventPresent = true;
}
else if ($(window).width()>=490 && eventPresent == true)
{
$("#shown").unbind();
$("#divText").show()
eventPresent = false;
}
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<a id="shown">click me to hide text</a>
<div id="divText">
You can not toggle me if screen is more than 490 px wide
</div>
P.S Run the snippet in full page mode.
I've made a function which selects an item when you click on it. And made it so when I've selected more than 10, it stops adding to selectedItems.
But when 10 items is selected, I can still toggle the class d-items-selected by clicking. How do I disable that? I've tried to use stop() but that canceled the hole thing, so I couldn't 'de-select' the items again.
$(document).ready(function(){
$('.d-items').on('click', function(e){
e.preventDefault();
$(this).toggleClass('d-items-selected');
var selectedItems = $('.d-items-selected').length;
if(selectedItems > 10) {
$('.d-items').finish();
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
You can disable controls which are not selected. Something like this.
$(document).ready(function(){
$('.d-items').on('click', function(e){
e.preventDefault();
$(this).toggleClass('d-items-selected');
var selectedItems = $('.d-items-selected').length;
if(selectedItems > 10) {
//do not allow to select
$(this).removeClass('d-items-selected');
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
Would unbinding the click event work for you?
e.g.
if(selectedItems > 10) {
$('.d-items').unbind("click");
}
Otherwise you can rebind it to a different function after selectedItems > 10, or anything really.
edit: It would help if you clarified what exactly you want to happen on click after selectedItems > 10
Maybe try
e.stopPropagation() or
e.stopImmediatePropagation()
I tried to figured out a solution:
$(function () {
$('.d-items').on('click', function(e) {
e.preventDefault();
var selectedItems = $('.d-items-selected').length;
//if selected items are less then 10
// or the current item is already selected you can deselect
if (selectedItems<10 || (selectedItems>=10 && $(this).is('.d-items-selected'))) {
$(this).toggleClass('d-items-selected');
}
if (selectedItems > 10) {
$('.d-items').finish();
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
$(document).ready(function(){
var i=0;
$('.d-items').on('click', function(e){
e.preventDefault();
if($(this).hasClass('d-items-selected')) {
$(this).removeClass('d-items-selected');
i--;
console.log("deleted"+i);
}
else {
if(i<10) {
$(this).addClass('d-items-selected');
i++;
console.log("added"+i);
}
}
})
});
I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});
Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle
I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?
jsFiddle: http://jsfiddle.net/PPcfN/
$('.quicklinks-rollover').click(function () {
$('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The mouseup function has to take care of the click on the button (quicklinks-rollover).
If fixed the whole thing here:
http://jsfiddle.net/8VUnq/1/
$(document).mouseup(function (e) {
var popup = $('#quickLinksPopup'),
button = $('#quickLinksToggle');
if (popup.is(':visible')
&& !popup.is(e.target)
&& !button.is(e.target)
&& popup.has(e.target).length === 0
&& button.has(e.target).length === 0) {
popup.toggle();
}
});
Keep in mind those two things:
Use IDs to refer to the items quicker and prevent multiple popup conflicts
Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.
You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').
Try :
var $quicklinks = $('.quicklinks');
var msOverLinks = false;
$('.quicklinks-rollover').click(function () {
$quicklinks.toggle();
});
$quicklinks.mouseenter(function() {
msOverLinks = true;
}).mouseleave(function() {
msOverLinks = false;
});
$(document).mouseup(function (e) {
if( ! msOverLinks ) {
$quicklinks.toggle();
}
});
You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...
put your HTML button with attribute p="closed" by default:
<button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>
Change Your Jquery:
$('.quicklinks-rollover').click(function () {
var a = $(this).attr("p");
var container = $(".quicklinks");
if(a=="closed"){
container.show();
$(this).attr("p","open");
}else{
container.hide();
$(this).attr("p","closed");
}
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.
So instead try like below.
$('.quicklinks-rollover').on('click', function (e) {
$('.quicklinks').toggle();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
var container = $(".quicklinks");
console.log(container.has(e.target).length);
if (container.has(e.target).length === 0) {
container.hide();
}
});
Working Fiddle