Hi I would like to know if it is possible to hide html content when a popup is shown. (I am using Magnific-popup). I have a button that calls this popup to be shown. And of course, when popup is closed nav content will be displayed again.
Nav code to hide and display
<nav class="top-nav">
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</nav>
button that calls popup
Call popup</span>
Popup code
<div id="register-popup" class="white-popup mfp-hide">
<div class="container">
<p>some content</p>
</div>
</div>
Thank you very very much for your help :)
Solution
You can hide the top-nav via the open callback of the Magnific plugin. You can also use the close callback to show it again.
$('#register-popup').magnificPopup({
callbacks: {
open: function() {
$('.top-nav').hide();
}
close: function() {
$('.top-nav').show();
}
}
});
Magnific-popup accepts callback on open and close events.
$('.selector').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
$('.top-nav').hide();
},
close: function() {
// Will fire when popup is closed
$('.top-nav').show();
}
// e.t.c.
}
});
For more information en Magnific-popup, checkout there API documentation:
http://dimsemenov.com/plugins/magnific-popup/documentation.html
you can use those API methodes :
$('#register-popup').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
},
close: function() {
// Will fire when popup is closed
}
// e.t.c.
}
});
When the Magnific Popup is active, the class .mfp-zoom-out-cur is added to the body. If you want to hide anything use that class to target whatever you want to hide in the layout. No additional JavaScript necessary.
.mfp-zoom-out-cur .top-nav {
display:none;
visibility:hidden;
}
Related
I'm having some trouble figuring out how to close a div by clicking anywhere on the screen.
I'm currently toggling an 'active' class in order to display a drop down div, then attempting to remove that class by clicking on the body:
$(document).ready(function () {
$('.navbar a').click(function () {
$(this).next('.navbar-dropdown').toggleClass('active');
});
$(body).click(function() {
if($('.navbar-dropdown').hasClass('active')){
$('.navbar-dropdown').removeClass('active');
}
});
});
<ul class="navbar">
<li>
Link
<div class="navbar-dropdown">
Dropdown Content
</div>
</li>
</ul>
However they are conflicting with each other, so as soon as the class is toggled on, the 'body' click toggles it off at the same time. Have spent some time looking on here and came across this method a few times:
$(document.body).click( function() {
closeMenu();
});
$(".dialog").click( function(e) {
e.stopPropagation();
});
However any attempts to configure this to work correctly seemed to fall on deaf ears!
The click event from the navbar is bubbling up to the body, so both events fire. stopPropagation() is one way to prevent that, but you need to do it in the navbar link's event handler, so it stops that particular event; not in a separate event handler as you had it.
Another change you might consider making is to only assign the body click handler when you need it, instead of firing all the time -- create that handler inside the navbar's click handler, and deactivate it again when it's used:
$(document).ready(function() {
$('.navbar a').click(function(e) {
var myDropdown = $(this).next('.navbar-dropdown');
$('.navbar-dropdown.active').not(myDropdown).removeClass('active'); // close any other open dropdowns
myDropdown.toggleClass('active'); // open this one
$('body').click(function() {
// no need for an if statement here, just use a selector that matches the active elements:
$('.navbar-dropdown.active').removeClass('active');
$('body').off('click'); // cancel the body's click handler when it's used
});
e.stopPropagation(); // prevent the navbar event from bubbling up to the body
});
});
.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar">
<li>
Link
<div class="navbar-dropdown">
Dropdown Content
</div>
</li>
<li>
Link 2
<div class="navbar-dropdown">
Dropdown Content 2
</div>
</li>
<li>
Link 3
<div class="navbar-dropdown">
Dropdown Content 3
</div>
</li>
</ul>
(If there's a chance you might need more than one separate click event handler on the body, you can namespace the event so you can control which one you're turning off:
$('body').on("click.myNamespace", function() {
// do other stuff
$('body').off("click.myNamespace")
})
I did the exact thing as you and it works for me. Are you sure you don't have any other event listeners attached? Or maybe a z-index on the menu bringing it underneath other elements?
$(document).click(function(e) {
$(".dialog").text('closed')
});
$(".dialog").click(function(e) {
e.target.innerText = 'open';
e.stopPropagation();
});
.dialog {
width: 200px;
height: 200px;
background: antiquewhite;
text-align: center;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="dialog">open</div>
</body>
</html>
How do I open an accordion panel by using an external anchor link?
I've tried using an anchor link and it just loads the page, without opening the panel.
What I'm trying to achieve is that when the anchor link is clicked, the page loads, scroll to the panel and then open the accordion.
This link is the one that will anchor to the other page and should open the accordion:
<a class="linkTo" href="/project#<?php the_sub_field('area_link'); ?>">
This is the code I am using to open the accordion on click:
$(document).ready(function() {
$(".accordion .accord-header").click(function() {
// for active header definition
$('.accord-header').removeClass('on');
$(this).addClass('on');
// accordion actions
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp(600);
$(this).removeClass('on');
} else {
$(".accordion .accord-content").slideUp(600);
$(this).next("div").slideToggle(600);
}
});
});
This is the accordion structure:
<div class="accordion">
<div class="accord-header" id="<?php the_sub_field('area_link'); ?>">Accordion 1</div>
<div class="accord-content">
<!-- Content -->
</div>
</div>
</div>
You can use window.location.hash on document ready to initialize your accordion.
$(function () {
var $accordionSecion = $(window.location.hash);
if ($accordionSecion.length) {
$(window).scrollTop($accordionSecion.offset().top);
$accordionSecion.addClass('on');
}
});
You can probably use same handler with onhashschange listener to handle click on accordion titles.
Good luck. :)
$(document).ready(function(){
var hash = window.location.hash;
if (hash) {
var element = $(hash);
if (element.length) {
element.trigger('click');
}
}
});
try above code on the page where you want to open the accordion.
Opening a jQuery Mobile popup programmatically results in a javascript runtime error.
0x800a138f - JavaScript runtime error: Unable to get property 'nodeName' of undefined or null reference
I've tested with both IE and Chrome, which have similar results.
<div data-role="popup" id="myPopup" data-overlay-theme="b" data-theme="c" data-dissmissible="false" class="ui-corner-all">
<div data-role="header"><h1></h1></div>
<div data-role="content" data-theme="a" class="ui-corner-all ui-content">
<p id="myPopupText">test test</p>
</div>
</div>
<script type="text/javascript">
$("#main").on("pageinit", function () {
$("#myPopup").popup("open", { transition: "slideup" });
});
</script>
I've also tried with .popup() before .popup("open"). Debugging in VS2015 I see that the popup is displayed, but while running it disappears again when the exception is fired.
What's causing this exception, and how may I fix it?
Do you want to open the popup just the first time the page is loaded? if so use $(document).on(... and try a slight delay:
$(document).on("pageinit","#main", function(){
setTimeout(function(){
$("#myPopup").popup("open", { transition: "slideup" });
}, 10);
});
Do you want it to popup each time the page is visited.? Use the pagecontainer widget transition event:
$(document).on( "pagecontainertransition", function( event, ui ) {
if (ui.toPage.prop("id") == "main"){
setTimeout(function(){
$("#myPopup").popup("open", { transition: "flip" });
}, 10);
}
});
Do you want to launch the popup after the page has loaded in response to a user action?
$(document).on("pagecreate","#main", function(){
$("#btnPop").on("click", function(){
$("#myPopup").popup("open", { transition: "flip" });
});
});
DEMO
in web page, is it possible to open 'popup' frame as:
div or iframe or even window, so :
1. the user can see both , the pop window and the 'main' page ?
on change link in specific domain, the popped frame will remain always on top
( with additional code if needed)
the user can see both the frame and the main a
and get focus with mouse click on the popped and main
possibility to access objects/events from popped and main.
(in iframe even on different origin)
in standard desktop application, we can achieve it, as MDI forms, for example.
code sample or link will help.
Example:
$("#simple").dialog(
{
autoOpen: false,
open: function()
{
$("#withIframe").dialog( "moveToTop" );
},
focus: function( event, ui ) {
$("#withIframe").dialog( "moveToTop" );
}
});
$("#withIframe").dialog(
{
autoOpen: false,
open: function(ev, ui){
$('#if').attr('src','http://www.jQuery.com');
$(this).dialog( "moveToTop" );
}
});
$(".link").click(function() {
$("#simple").dialog('option','modal',$('#isModal').prop('checked')).dialog( "open" );
});
$(".link_iframe").click(function() {
$("#withIframe").dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<label><input type='checkbox' id='isModal' /> Is Modal? </label>
<a href='#' class='link'>link</a>
<a href='#' class='link_iframe'>link (iframe)</a>
<div id='simple'>
<h2>
Simple dialog
</h2>
</div>
<div id='withIframe'>
<iframe id='if' src=''></iframe>
</div>
I am trying to create a page with different news articles(each article page directs to a different page that was created). Using modal can I create an environment where the page pop's up in the same window rather than opening in another window? If yes, can someone please help me with the code and example?
Yes, use jQuery modal dialogs. You can have a link or button for each article and when it gets clicked, open a modal dialog with the article's text.
See this JSFiddle for a working example.
<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>
<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>
And the javascript:
$(document).ready(function(){
$(".article").dialog({
autoOpen : false,
resizable : false,
width : 400,
height: 400,
modal : true,
buttons: {
"Close" : function(){
$( this ).dialog( "close" );
}
},
close : function(ev, ui) {
return true;
}
});
$('#article1Button').click(function(){
$("#article1").dialog("open");
})
$('#article2Button').click(function(){
$("#article2").dialog("open");
})
});