I have a little function that makes my headerbar class fixed after i click on the menu button.
It works but when i click on the button again the headerbar stays fixed.
Here is my javascript:
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
This code makes the headerbar class fixed:
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
So basically I want it to change back to normal when I click the button again.
Try this:
JavaScript
$(function () {
$('.menuBtn').click(function (e) {
e.preventDefault();
$(this).toggleClass('is-active').toggleClass('fixed-position');
$('.headerBarm').toggleClass('fixed-position');
$('nav').slideToggle();
});
});
CSS
.fixed-position {
position: fixed;
}
Related
I've created a navigation bar with sub menus, using Bootstrap v4.2.1. Hovering OnClick are implemented through Javascript. Problem is whenever I load the page and hover over a submenu item, the menu opens up but appears right below the item. When I click the menu, it disappears and reappears on the right side of the submenu. Ideally, I'd want to have the submenu appear at the right side of the dropdown menu, not appear at the bottom upon initial hover. I'm suspecting that there might be something I might've missed in my Javascript but I could be wrong. Any help/advice would be greatly appreciated.
Here's my fiddle: https://jsfiddle.net/fzev07tb/
//Script to toggle navbar dropdown
$(document).ready(function() {
$('.navbar .dropdown-item').on('click', function(e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({
"top": -999,
"left": -999
});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function() {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
//Script for OnHover OnClick NavBar Item -->
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
});
I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?
Heres my code:
<script>
// function that hides text on click
(function($) {
$('#start').click(function() {
$('.lead').hide());
});
});
// my original function that stopped working after i added new one
(function($) {
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
</script>
I think the problem is in the closing tag of the function you're adding.
Try like this:
(function ($){
$('#start').click(function(){
$('.lead').hide();
});
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {
$(document).ready(function(){
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
$(".masthead").css("background-color","inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
At least, closing bracket is wrong here. $('.lead').hide());
Tip: always check developer console first. Have fun coding.
Edit : Note that you have an extra closing bracket in the first function $('.lead').hide());.
You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();
<script>
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$('#start').click(function() {
$('.lead').hide();
});
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if ($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
</script>
here is my fiddle
why when a div is clicked from another div does the arrow not appear back when the other div has collapsed? i have it set up so when the div does not have the class 'clicked' it then removes the class 'arrowhide' but it when you do the above it doesn't seem to remove the 'arrowhide' even though the div no longer has the class 'clicked' here is my code...
$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if ($('.selected').children().hasClass("clicked")) {
$('.details').addClass('show');
}
if ($('.timelineTile').hasClass("clicked")) {
$(this).children('.arrow').addClass('arrowhide');
} else {
$('.arrow').removeClass('arrowhide');
}
if ($('.selected').children().hasClass("clicked")) {
$(this).children('.header').height(430);
} else {
$('.header').height(80);
}
});
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
$('.arrow').removeClass('arrowhide');
});
Your line 4 also needs to remove the arrowhide class, like this:
$('.selected').children().not(this).removeClass('clicked')
.children('.arrow').removeClass('arrowhide');
Updated fiddle: http://jsfiddle.net/mcx0t0fh/2/
Alternatively, you could do away with the arrowhide business, and change your .arrow.arrowhide CSS rule to .clicked .arrow
Alternative fiddle: http://jsfiddle.net/mcx0t0fh/4/
To further clarify this problem, here's the current situation: http://jsfiddle.net/Laqqw/1/
I need to hide the bottom element, when ANY of the navs are opened. And when all the navs are closed, the bottom element would show up again.
toggle() doesn't work, because it sometimes ends up not showing the bottom element when all the navs are closed.
I tried using if else with no sensible results. Am I missing something here?
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("footer").hide(300);
} else {
$("footer").show(300);
}
});
});
});
Try this,
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300, function(){
if($("p:visible").length == 0)
$("footer").show(300);
else
$("footer").hide(300);
});
});
});
Check jsfiddle
try like this:
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("#footer").hide(300);
} else {
$("#footer").show(300);
}
});
});
});
I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});