I have created a box to appear when the user clicks onto a button.
Once the button is clicked a box appears with an animation.
The box has a close button within.
One the close button is pressed, and the open button is pressed again the animation does not repeat.
Why would this be?
I have a link to a JS fiddle file below:
https://jsfiddle.net/harryB/va2r1pkm/
Here is the jQuery.
$('body').on('click', '.modal-button', function () {
// show box and bg on click of button
var el = $('#modal-bg').fadeIn();
$('.modal-box').animate({
top: "+=300"
}, 1000, function (event) {
event.preventDefault();
});
});
$('.modal-box .fa').on('click', function () {
// show box and bg on click of button
$('#modal-bg').fadeOut();
});
You could simply reset the animation to the top each time:
$('.modal-box').css('top',0).stop(0,0).animate({
JSFiddle
$('body').on('click', '.modal-button', function () {
// show box and bg on click of button
var el = $('#modal-bg').fadeIn();
$('.modal-box').css('top', 0).stop(0, 0).animate({ // <--- this line
top: "+=300"
}, 1000, function (event) {
event.preventDefault();
});
});
$('.modal-box .fa').on('click', function () {
// show box and bg on click of button
$('#modal-bg').fadeOut();
});
I guess this is what you looking for:
Made couple of changes, like margins, and top positions.
Working : DEMO
Snippet
// create a modal that appears once button is pressed.
// modal has a close button within.
// background is covered modal so modal stands out.
$('body').on('click', '.modal-button', function () {
// show box and bg on click of button
var el = $('#modal-bg').fadeIn();
$('.modal-box').animate({
top: "200px" // Chnaged top position value. You can define whatever you want.
}, 1000);
});
$('.modal-box .fa').on('click', function () {
// show box and bg on click of button
$('.modal-box').animate({"top":"-100vh"},800);
$('#modal-bg').fadeOut();
});
#modal-bg {
width:100%;
height:100vh;
background:rgba(234, 234, 234, 0.66);
position:absolute;
top:0px;
left:0px;
display:none;
}
.modal-box {
padding:20px;
width:300px;
margin:0px auto 50px auto; /* Changed Top Margin to 0 */
background:green;
position:relative;
text-align:center;
/* Removed Top Margin */
}
.modal-box .fa {
float:right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="modal-button">Read More</button>
<div id="modal-bg">
<div class="modal-box"> <i class="fa fa-times-circle"></i>
<h1> Modal Title </h1>
<p>Information about website!</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
That happens because you just fadeOut, without removing the previously added 300px.
Add this on close:
$('.modal-box').animate({
top: "-=300"
}, 1000, function () {
$('#modal-bg').fadeOut();
});
Check this https://jsfiddle.net/va2r1pkm/1/
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 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;
}
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>
I want to do an overlay for my post content, like a 'full-screen modal dialog'. I've stuck at hiding and showing my content and items. I want when the content is shown, the items will become invisible.
http://jsfiddle.net/vjdwLzx8/
$(function(){
$('.item').on('click',function(){
$(this).next('.content').css('display','block');
});
});
I also tried
var item= $(this).next('.content').detach();
$('body').html('').append(item.css('display','block');
but I have to reload the page to get back to the item page which is something bad.
use
DEMO FIDDLE
$('.item').on('click',function(){
$('.content').hide(); // hide
$(this).next('.content').show(); // show
});
WITH ANIMATION
DEMO FIDDLE(Animation)
$('.item').on('click', function () {
$('.content').hide("slow", function () {
// Animation complete.
}); // hide
$(this).next('.content').show("slow", function () {
// Animation complete.
}); // show
});
Create an overlay div
<div class="overlay"></div>
css:
.overlay {
display:none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
opacity: 0.5;
z-index: 100;
background: black;
}
onClick of items activate overlay and show content.
$(function () {
$('.item').on('click', function () {
$('.item, .content').hide();
$('.overlay').show();
$(this).next('.content').css('display', 'block');
});
$('.close-content').on('click', function () {
$('.content, .overlay').hide();
$('.item').show();
});
});
Also added provision for a close button.
Fiddle
I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance
This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html