I have a subscription form that drops down on top of the navigation when the user clicks a button (#sub-header). this button is below the navigation. my navigation is fixed, so this button has a top of 60px, to keep it below the nav. however when the button is clicked and the subscription form drops down, then there is a space of 60px between the button and the navigation. i need to change the top of the button from 60px to 0px only when the subscription form is open. This is my code:
if ($('.subscription-signup').css('display') == 'none') {
$('#sub-header').css("top", "60px");
} else if ($('.subscription-signup').css('display') == 'block') {
$('#sub-header').css("top", "0px");
};
Here is my html code:
<div class="subscription-signup">
<div class="subscription-close" id="subscription-close"> </div>
<div class="email-signup">
<form></form>
</div>
</div>
And here is the code to open the form (which works):
var $subscribeContent = $('.subscription-signup');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
For some reason, when the subscription form is open and is set to display: block, the top does not change to 0px. Is there something wrong with my code? Can anyone figure out how to do this?
use
$('.subscription-signup').is(':hidden')
instead
Why not just add a class to the element?
$subscribe.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').addClass('subOpen');
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').removeClass('subOpen');
$subscribeContent.slideToggle();
});
.subscription-signup {
top: 0px;
}
.subOpen {
top: 60px;
}
Related
I have two questions.
Q.1
I have a WordPress website and I want the mobile menu to be closed if someone clicks outside the menu anywhere on the page.
Currently, it works on the hamburger menu.
Q.2
This is a single-page website. If someone clicks on the menu it scrolls.
I want to add the behaviour if someone clicks on the mobile menu then it scrolls(it is working right now) and hide the menu (not working).
You can check the website link where I have the problem.
https://www.dezigneronline.net/361apps/
Given below is the code:
$(document).ready(function () {
/* =================
Menu Mobile
=================== */
$('.ct-main-navigation li.menu-item-has-children').append('<span class="ct-menu-toggle far fac-angle-right"></span>');
$('.ct-menu-toggle').on('click', function () {
$(this).toggleClass('toggle-open');
$(this).parent().find('> .sub-menu, > .children').toggleClass('submenu-open');
$(this).parent().find('> .sub-menu, > .children').slideToggle();
});
/* =================
Menu Popup
=================== */
$('.ct-main-menu-popup li.menu-item-has-children > a').after('<span class="ct-menu-toggle"></span>');
$('.ct-main-menu-popup .ct-menu-toggle').on('click', function () {
$(this).toggleClass('toggle-open');
$(this).parent().find('> .sub-menu, > .children').toggleClass('submenu-open');
$(this).parent().find('> .sub-menu, > .children').slideToggle();
});
$('.ct-menu-popup').on('click', function () {
$('body').addClass('ov-hidden');
$(this).parents('body').find('.ct-header-popup-wrap').toggleClass('open');
});
$('.ct-menu-close').on('click', function () {
$('body').removeClass('ov-hidden');
$(this).parents('body').find('.ct-header-popup-wrap').toggleClass('open');
});
$("#ct-menu-mobile .open-menu").on('click', function () {
$(this).toggleClass('opened');
$('.ct-header-navigation').toggleClass('navigation-open');
});
$(".ct-menu-close").on('click', function () {
$(this).parents('.header-navigation').removeClass('navigation-open');
$('.ct-menu-overlay').removeClass('active');
$('#ct-menu-mobile .open-menu').removeClass('opened');
$('body').removeClass('ov-hidden');
});
$(".ct-menu-overlay").on('click', function () {
$(this).parents('#header-main').find('.header-navigation').removeClass('navigation-open');
$(this).removeClass('active');
$('#ct-menu-mobile .open-menu').removeClass('opened');
$('.header-navigation').removeClass('navigation-open');
$('body').removeClass('ov-hidden');
});
});
As mentioned in my comment, you need to handle a click on a parent that spans over the whole page to close the menu, that could be e.g.the body element. The problem: your menu is a child of the body and therefore will trigger the event too. To prevent that you would need to stopPropagation(); on the menu element, so that the click event does not bubble up the DOM and reaches your body.
Consider this simpliefied version to demonstrate the mechanic:
$('body').not('.menu').on('click', function(){
$('.menu').hide();
});
$('.menu').on('click', function(e){
e.stopPropagation();
});
body , html{
height: 100%;
padding: 0;
margin:0;
}
.menu{
width: 20%;
height: 100%;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="menu"></div>
</body>
I'm struggling to make a replica of the effect seen here: https://tu-dresden.de/if you click on Language, Search, Internal and the navigation in the blue header.
I have managed to create this: https://jsfiddle.net/06tfufo6/2/
I would like to keep the slideToggle effect upon clicking and somehow slideToggle each element inside.
Upon clicking the same/active button it should all close. I can't seem to wrap my head around how this can be done.
Thank you
jQuery('.container-box, .slideout-container').hide();
jQuery('.btn-group a').on('click', function() {
var target = "#" + jQuery(this).data("target");
jQuery('.slideout-container').slideToggle();
jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
jQuery(target).show().attr('aria-expanded', 'true');
});
.btn-group {
background-color: #002557;
}
a {
color: #fff;
padding: 10px 20px;
}
.slideout-container {
padding: 25px 0;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
Show language
Show search
Search navigation
</div>
<div class="slideout-container">
<section id="top_search" class="container-box" aria-expanded="false">
Section search
</section>
<section id="language" class="container-box" aria-expanded="false">
Section language
</section>
<section id="navigation" class="main-navigation container-box" role="navigation" aria-expanded="false">
Navigation
</section>
</div>
Store the current content in a variable and compare each time is clicked to slide down and up the content, would be something like this:
jQuery('.container-box, .slideout-container').hide();
var current_page,
target = '';
jQuery('.btn-group a').on('click', function () {
var target = "#" + jQuery(this).data("target");
if(current_page === target){
jQuery('.slideout-container').slideUp();
current_page = '';
}else{
jQuery('.slideout-container').slideDown();
current_page = target;
}
jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
jQuery(target).show().attr('aria-expanded', 'true');
});
here is working: https://jsfiddle.net/06tfufo6/8/
For the functionality you described, you need to be able to keep track of the initiating element, and then only call your toggle code when the instigating element is clicked (assuming I understood what you were going for). The code below does just that.
You're going to need to tweak the aria-expanded true/false portion of your code, but this should get you going.
jQuery('.container-box, .slideout-container').hide();
jQuery('.btn-group a').on('click', function() {
var target = "#" + jQuery(this).data("target");
let $target = jQuery(this);
// If no other elements have instigator class, add to target
if (!jQuery(".btn-group a.instigator").length) {
$target.addClass("instigator");
}
if ($target.hasClass("instigator")) {
jQuery('.slideout-container').slideToggle();
jQuery(target).show().attr('aria-expanded', 'true');
} else {
jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
jQuery(target).show().attr('aria-expanded', 'true');
}
});
Here's a working fiddle.
I have an a in a div and want to change the window location on click of div.
<div class="div-class">
</div>
$(document).on("click", ".div-class:not(.a-class, .a-class-2)", function() {
window.location = "/somewhere-else";
}
When clicking on either a, a new tab opens and the current window changes location. I want it to be that if you click on any a it will open a new tab, if you click on the containing div it will change window location.
To achieve this you can hook to the a elements directly and call stopPropagation() on the event passed to the handler. This will stop the event bubbling to the div and will ensure only the new tab is opened.
Similarly, you can hook to the click event of the div element to call window.location.assign() to change the page URL. Try this:
$(document).on("click", ".a-class, .a-class-2", function(e) {
e.stopPropagation();
console.log('a clicked');
}).on('click', '.div-class', function() {
console.log('div clicked');
// location.assign("/somewhere-else"); // commented out to stop breaking the snippet
});
/* this is only to make the hit areas more obvious in the snippet */
a { border: 1px solid #C00; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
a-class
a-class-2
</div>
Rory's answer works, but I don't think it needs two handlers or to call stopPropagation (which can be harmful). You can filter on the event target using jQuery.is
$(document).on("click", ".div-class", function(event) {
if (!$(event.target).is(".a-class, .a-class-2")) {
console.log("going /somewhere-else");
}
// You could also do
if( $(event.target).is(".div-class") ) {
console.log("going /somewhere-else v2");
}
});
a { background-color: #eee; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
link 1
link 2
</div>
I have this code which makes a div to display as none when anywhere outside the div is clicked. But my problem is I also want the link which makes the div to display block to also close the div if the div is displayed as block so I ran this code:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
window.addEventListener('mouseup', function(event){
if(event.target != box && event.target.parentNode != box){
box.style.display='none';
}
});
}
}
But the link does not close the div. if I run it like this:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
}
}
The link opens and closes the div, But I also want a click anywhere outside the div to close the div also. Please do anyone have a better Idea on how I can achieve this? Here is my HTML:
<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>
As Portal_Zii said, you'll probably need a wrapper/container for your div to hide it, but this example should give you a basic idea.
$(document).ready(function() {
var $div = $("#divd");
$("a").on("click", function() {
$div.toggle(); // this is to toggle div visibilty
});
$div.on("click", function(e) {
// prevent div from closing when clicking inside
e.preventDefault();
return false;
});
$div.parent().on("click", function() {
// hide div when user clicks inside div's parent element
$div.hide();
});
});
.container {
background: red;
height: 100px;
padding: 20px;
}
#divd {
background: blue;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
click
<div class="container">
<div id="divd">this is the div</div>
</div>
Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button
http://jsfiddle.net/VqDKS/
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
}
See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.
http://jsfiddle.net/VqDKS/3/
CSS:
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
position: absolute;
top: 0px;
z-index: 99;
display: none;
}
Jquery code:
function js()
{
alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$(".overlay").fadeIn()
return false;
}
$(document).ready(function(){
$(".close").click(function(){
$(".overlay").fadeOut();
$('#contact_form3 input[type="text"]').val('');
});
});
Make following change in HTML:
<input type="button" value="close" class="close">
You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form.
It can be as :
function js()
{ alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$("#form-div").hide();
$(".overlay").show();
return false;
}
function closeOverlay(){
$("div.overlay").hide();
$("div#form-div").show();
}
please have a look here :
http://jsfiddle.net/injulkarnilesh/VqDKS/7/
Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:
.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }
This way you will be sure that your overlay will be absolute positioned on the top of your contact form.
When page is loaded, we don't need the overlay, so you can add the following property:
.overlay { display: none; }
In your code, when you submit the form you are using onclick event to execute your handler.
Here you need to make overlay visible again, you can use .show() of jQuery:
$('.overlay').show();
And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.
$('.closeBtn').click( function() {
$('.overlay').hide();
});
By the way, you can read about .submit() and .ajax() methods in jQuery.
Here is a working jsFiddle.
I updated your fiddle a bit: http://jsfiddle.net/nweevers/VqDKS/8/
This is a way to do this. But then your form isn't still submitted.
The best way is to show the overlay after the post. And then you can hide the overlay with the button.
$overlay.on('click', 'input[type=button]', function() {
$overlay.hide();
});