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
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 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/
I want to remove and add a overlay as often as I want but I cant seem to get js to remove a by js created element, any ideas?
JS Fiddle Example
html
<div id="background"></div>
<button id="open">Open</button>
<div id="overlay">
<button id="close">Close</button>
</div>
js/jQuery
$(function() {
$('#open').click(function() {
$('body').append('<div id="overlay"><button id="Close">Close</button></div>');
});
$('#close').click(function(){
$('#overlay').remove();
});
});
css:
#overlay{
padding: 8px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.1);
}
You need to attach handler to click event of $('#close') once again after you add it to document.
$(function() {
$('#open').click(function() {
$('body').append('<div id="overlay"><button id="close">Close</button></div>');
$('#close').click(function(){
$('#overlay').remove();
});
});
$('#close').click(function(){
$('#overlay').remove();
});
});
After click on close you no longer have close button with your handler attached. It deleted by $('#overlay').remove() code. After you click open button brand new #overlay element added. It isn't contains handlers for old element.
You can archive your goal with even less code:
https://jsfiddle.net/IAfanasov/msro2hoq/6/
$(function() {
$('#open').click(function() {
$('#overlay').show();
});
$('#close').click(function(){
$('#overlay').hide();
});
});
Why not just show and hide it?
$(function() {
$('#open').click(function() {
$('#overlay').show();
});
$('#close').click(function(){
$('#overlay').hide();
});
});
Maybe I am going about this wrong, but I have a form with part of it's content temp removed ...
.form_jquery {display: none;}
and I am displaying the content when the parent div and title are hovered...
$(document).ready( function () {
$(".deliver").hover(
function () {
$(".form_jquery").css({'display':'block'});
},
function () {
$(".form_jquery").css({'display':'none'});
}
)
});
The problem is, I have a "main content" area under this form title/toggle and when we...
css({'display':'block'})
The lower block element is pushed down. I have tried a few display element options on the lower block with adverse reactions. My last resort will be to set my form as "fixed", but I did want it to simulate a menu title and scroll with that group.
http://www.testinr.com/
You should add the following items to your css
.deliverOnHover
{
position:relative;
z-index: 99;
display: block;
}
body{
position: absolute;
table-layout:fixed;
}
And Jquery will be something like this:
$(document).ready( function () {
$(".deliver").hover(function(){
$(".form_jquery").toggleClass('deliverOnHover');
});
});
and add position:absolute to the css of the div below.
I'm using a JavaScript code that it suppose to show a hidden DIV, but somehow i have to push twice in order for that DIV to appear.
JavaScript code:
function AddComp() {
HideComp();
$("#Add-Com").click(function () {
$("#hide").toggle("fast", function () {
$('#hide').css({ visibility: "visible", height: "auto" });
});
});
var a = document.getElementById("divSave");
a.onclick = InsertComp;
}
function HideComp() {
$('#hide').css({ visibility: "hidden", height: "0" });
$("#Name").val("");
$("#Address").val("");
$("#Email").val("");
}
in HTML i have this:
<div id="Add-Com" onclick="AddCom()">
<span>Add Company</span></div>
<div id="hide" style="visibility: hidden; height: 0px;"> .....the code
Can anyone help me?
The default status is hidden. I want want to toggle it by clicking once.
Thanks
if ($("#hide").is(":visible")) $("#hide").hide();
else $("#hide").toggle("slow", function ()
{ $('#hide').css({ visibility: "visible", height: "auto" });
It seems that this do the trick the way I want it