responsive jquery nav interaction - issue on resize - javascript

Requirement:
Horizontal nav in 900px or above and vertical in 900 below. but in 900 or below, the nav should hide by default and appear only when clicked on the "header"
What I have so far:
http://jsfiddle.net/0rmgpjtr/3/
$(document).ready(function(){
$('.dropdown ul:first').show();
$('.dropdown ul:first').css("display:table");
$('.dropdown li').click(function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').slideUp('fast');
e.preventDefault();
e.stopPropagation();
});
$(document).on('click', function (event) {
$('.dropdown li').children('ul').slideUp('fast');
});
});
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.ch-logo').bind('click',function(){
$('.dropdown').slideToggle('fast');
})
}else{
console.log("900+");
$('.ch-logo').unbind()
}
}).resize();
Issue:
1. binding and unbinding the header click event is not working
2. when i click on parent link to open subnav, it is flickering after i resize the browser - actually any interaction, starts flickering the menu, may be because its tied to resize function.

http://jsfiddle.net/extca38f/
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle();
});
}else{
$('.dropdown').show();
}
}).resize();

Use toggle instead of slidetoggle Demo Here
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle('slow');
});
}else{
$('.dropdown').show();
}
}).resize();
Check the differnce between toggle and slidetoggle

Related

toggle class on hover and on click

here is my fiddle
I have a click function (item) that shows 'item-overlay' but i'd like to also add a hover to preview the div 'item-overlay' by 100px I added a mouseenter and mouseleave with height to my current code but this then works on click ?! this is my click function -
}).on('click', '.item', function (e) {
(".item click");
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').slideToggle('fast');
}
and an example of what i tried to do -
}).on("mouseenter", ".item", function(e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height(100); }
}).on("mouseleave", ".item", function(e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height(0); }
The problem is that your other open/close animations use hide and show, which also alter the display style.
Try this JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/3/
}).on("mouseenter", ".item", function (e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').css({display: "block"}).height(100);
}
}).on("mouseleave", ".item", function (e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').hide().height('');
}
});
notes:
height('') will reset the height css to inherit (i.e no value).
If you want the height reset when you click again set it with the slideToggle call:
}).on('click', '.item', function (e) {
(".item click");
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height('').slideToggle('fast');
}
JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/5/

Open/hide div that is already open by clicking link

I have made a nav that opens when you click at the .products link and closes if you click anywhere on the screen. But it seems that if you click on the .product link when it is already open, it will not close. How can I do this?
$('#subnav').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('.products').length ) {
$("#subnav").show();
}else if ( ! $(e.target).closest('#subnav').length ) {
$('#subnav').hide();
}
});
Demo
js
$("#subnav").hide();
$(".products").click(function (e) { //the usual behavior on click on .prducts
$("#subnav").toggle();
e.stopPropagation();
});
$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
e.stopPropagation();
});
$(document).click(function () { //ensures the #subnav will hide on click on document
$("#subnav").hide();
});
You need a click event on the document to hide the block and a click event on the button to show the block. And in the event of the button, you need to stop the propagation of the document's event.
Like that :
$("div").hide();
$("button").bind("click",function(e){
e.stopPropagation();
$("div").toggle(200);
});
$(document).bind("click",function(){
$("div").hide(200);
});
Assuming your code looks like that :
<div></div>
<button>open</button>
See example : http://jsfiddle.net/oqgpceod/1/
Aditionnaly you may add this code to prevent the block from hiding when you click on it :
$("div").bind("click",function(e){
e.stopPropagation();
});
Fiddle: http://jsfiddle.net/r2h57jhu/
$(document).ready(function () {
$('#subnav').hide();
$(document).click(function(e) {
$('#subnav:visible').hide();
});
$('.products').click( function (e) {
$('#subnav:not(:visible)').show();
e.stopPropagation();
});
});

Navigation dropdown toggle - mouseout as well as off hover?

Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!
Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});

Close footer by clicking anywhere on the DOM

I have a question concerning collapsing/expanding a footer. I have a simple basic collapse/expand script going, where when the "Open" button is clicked, the hidden footer slides up and when you click "Close" it slides back down and hides again. Now, I want to attach an instance where I can click anywhere on teh DOM when the footer is open and it will close.
This is the script:
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Thanks
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// click anywhere on teh DOM when the footer is open and it will close.
$("body:not(#footerClose)").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
});
try this one, im using jquery not selector.
Attach a click handler to the document, and do the slideUp in there. You can use the event.target to determine whether or not to perform the slideUp:
$(document).on('click', function(e) {
// Don't slideUp if #footerOpen or #footerPanel are clicked
if ($(e.target).is('#footerOpen, #footerPanel')) {
return;
}
// Do the slideUp!
$('#footerPanel').slideUp('slow');
});
Here's a fiddle
If you have other elements within your #footerPanel, the above probably won't work as the target will likely be something other than #footerPanel, the best thing to do would be to add a click handler to #footerPanel, and prevent the event from propagating and triggering the above click handler:
$('#footerPanel').on('click', function(e) {
e.stopPropagation();
});
Here's another fiddle
Try this it worked for me...
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.is("#footerPanel")){
$("#footerPanel").slideUp('slow');
}
});

Menu stop second function from firing off upon other element using same function

I have 3 menus that use this .toggle and when I switch between menus it requires a second click for the menu to click on again.
How do I make the second function stop if another menu is shown?
$(".dd").toggle(function() {
$("ul a", this).click(function(e) {
e.stopPropagation();
});
$(".contextMenu").hide();
$("ul", this).show();
},
function() {
$("ul", this).hide();
}
);
I got this to work how I wanted it. Thanks to this thread jQuery Toggle State
$(".dd").click(function() {
$("ul", ".dd").not(this).hide();
$("ul", this).toggle();
});
$(".wrapper").click(function() {
$("ul", ".dd").hide();
});
I think instead of a .toggle() you want just a .click() here, like this:
$(".dd ul a", this).click(function(e) {
e.stopPropagation();
});
$(".dd").click(function() {
$(".contextMenu").hide();
$(this).find("ul").toggle();
//possibly to hide others: $(".dd").not(this).find("ul").hide();
});

Categories