I have multiple reveal modals on the page and I trying to display the dynamic custom post type content on each modal when clicked, but the modal keeps repeating the same content on all the modals.
I am trying to initiate new modal on every click so the content doesn't repeat but for some reason it's just not working. If I remove Reveal Modal, then can view the dynamic content. Am I initiating the reveal modal properly? I am not seeing any errors on the console.
Here's my code:
<a class="modal" data-open="exampleModal">Reveal Button</a>
<div class="reveal large" id="exampleModal" data-reveal>
<!-- content -->
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
jQuery(function($) {
var modal = $('#exampleModal');
$('a.modal').click(function() {
var reveal = new Foundation.Reveal(modal);
});
});
</script>
Can someone help please. Thanks in advance.
Related
I am using a w3Schools tutorial for a modal. I would like to run an animation after the user clicks the close button. I am using a blind animation and have it working on open but would like the reverse on close.
Should I be using Javascript to change the classes inline? I've experimented with that but the animation doesn't have time to run because I'm closing the modal with display:hidden right after the animation call, so it's being executed before the animation has time to complete.
Here is my html. I have the animation class inline and the only thing I can think of is to switch the out animation with javascript:
<div id="modal-one" class="modal">
<div class="modal-content modal-parent blind-content in origin-middle">
<div class="modal-header">
<h2>header</h2>
<span class="modal-close"></span>
</div>
content here
</div>
</div>
How can I get the blind effect to run on open and close?
Next time please provide a link to the tutorial (or some such).
You could use javascript.
change your html to...
<div id="modal-one" class="modal">
<div class="modal-content modal-parent blind-content in origin-middle">
<div class="modal-header">
<h2>header</h2>
<span class="modal-close d-none"></span>
<span class="model-close-dummy"></span>
</div>
content here
</div>
</div>
then add javascript
let modal = document.querySelector("#modal-one");
let modal_close_dummy = modal.querySelector(".modal-close-dummy")
let modal_close = modal.querySelector(".modal-close")
modal_close_dummy.addEventListener("click", function () {
runClosingAnimation();//run animation - do what you need to do
setTimeout(function(){
modal_close.click(); //programatically click the actual close button after 500ms
}, 500) //500 time in miliseconds to wait, before the stuff inside setTimeout runs
});
Hope this helps.
Obligatory 'I have googled but am stuck'. I have a number of documents on a page with associated collapsible 'More Info' accordions. I want to be able to report on when people click to open one of these accordions and what the corresponding document name is.
Implementing tracking in GTM to show opens on the accordions are not a problem, but how do I associate the document name (h4) with the click event?
Div containing document, document heading and associated 'More Info':
enter image description here
Div that the document heading and the more info button are in:
<div class="employee-comms-results-documents">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-12 no-padding-right no-padding-left">
<div>
<div class="primary-document-meta"><div class="doc-type-pill" id="doc-type-pill-Flyers">Flyers
</div>
</div>
<h4>Helping you save for retirement</h4>
<div class="secondary-document-meta">More info <span class="caret"></span>
</div>
</div>
</div>
Thanks in anticipation!
I think I would need to see the whole site structure to be sure, but for your example I created a JavaScript variable in GTM that returns the corresponding h4-text on click.
This code has worked for me:
function(){
var clickElement = jQuery({{Click Element}}).parent(".secondary-document-meta").parent("div").find("h4").text();
return clickElement;
}
I am using WP Fullcalendar Plugin (https://wordpress.org/plugins/wp-fullcalendar/) on my website. It works fine as a shortcode placed on a normal page template. However I want it to work in a Bootstrap Modal Dialog box which is opened on clicking a link.
Here is my code of modal Dialog with Fullcalendar shortcode in it.
<!-- Modal -->
<div class="modal fade" id="myCalendarModal" tabindex="-1" role="dialog" aria-labelledby="myCalendarModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myCalendarModalLabel">Modal title</h4>
</div>
<div class="modal-body"><?php echo do_shortcode( ' [fullcalendar] ' ); ?></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And here is the link to open this dialog box
<a class="open-cal" href="#" data-toggle="modal" data-target="#myCalendarModal">Open Calendar</a>
Now when I open the modal dialog box it does not load the calendar and only shows the loader spinning and spinning.
As suggested in answers like this one, Full calendar not showing inside bootstrap modal, the solution like
$('#myCalendarModal').on('shown.bs.modal', function () {
$(".wpfc-calendar").fullCalendar('render');
});
is not feasible here because the fullCalendar function needs to be passed the "fullcalendar_args" which is set in a footer hook and the related javascript file is located within the plugin files.
Any suggestion to make it work without hacking core plugin files?
Yes I have had to hack the core plugin inline.js file, as there is no other option right now.
1.You have to declare the "fullcalendar_args" variable as global
In line 4 of /includes/js/inline.js, Change
var fullcalendar_args = {
to
fullcalendar_args = {
2.Comment out 90 and 91 lines in the same file
/*
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
$('.wpfc-calendar').first().fullCalendar(fullcalendar_args);
*/
And then
3.Call these two lines in the page template where you have modal to be called, such as:
$('#myCalendarModal').on('shown.bs.modal', function () {
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
});
After this has been done, if wanted to show normal calendar on any other page, you may have to call the following two lines where ever you want calendar to appear, such as in footer or something, based on a condition etc.
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
It would be good if further updates to WP Fullcalendar Plugin incorporate these changes based on a shortcode argument or something similar approach.
Hello i am developing my own functionality plugin on wordpress and i am stuck on trying to pass a variable from a page to a modal that opens after a link is clicked displaying a delete confirm dialog
The link opening the modal is
<a href="<?php echo $passing_var?>" data-reveal-id="deleteModal" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
The Modal window code
<div id="deleteModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2>Are you sure you want to DELETE? <?php echo get_the_title( $passing_var ); ?> </h2>
<p class="lead">This cannot be undone</p>
<a class="deleteButton button" href="#">delete</a>
<a class="close-reveal-modal">×</a>
</div>
How can pass $passing_var from the main page to the modal window?
Set Data Attibute
<a data-id="<?php echo $passing_var?>" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
Read data attribute to use in modal
$(document).on("click", ".deleteLink", function () {
var dataId = $(this).data('id');
$('#deleteModal').modal('show');
});
Finally got it working after a lot of trial and error and google research... nothing unexpected here... :(
So if anybody in the future needs to pass a variable from a page to a modal must follow three steps...
1.Create the modal button
<button data-reveal-id="myModal" data-my-number="1">First One</button>
2.Add the Modal Dialog
<div id="myModal" class="reveal-modal"><h2>Awesome. I have it.</h2><p class="lead">The <span class="buttonText"></span>. It is mine.</p><a class="close-reveal-modal">×</a></div>
3.Add the Javascript
$(document).foundation();$('[data-reveal-id]').on('click', function() {var targetModal = $('#' + $(this).data('revealId'));var newText = $(this).text() +' (' + $(this).data('myNumber') + ')';targetModal.find('.buttonText').text(newText);});
Please visit this link if you want to see a working example... thank you all
I have 4 JQuery Tabs in an ASP.Net MVC 3 appication. All tabs display correct content when tabs are clicked. However, I want to display Login/Registration content when a user clicks the Login/Registration link at the top of the UI page. The login/reg should display underneath the 4 tabs with none of the tab content. So the tabs need to remain visible. Although, none of them would be selected.
The problem is, both the tab content and the login/registration content shows at the same time. I need only the login/reg content that is unrelated to the tabs to display. I also need all tabs to be unselected. Any help is appreciated!
<script type="text/javascript">
$(function () {
$('#tabs').tabs();
});
</script>
<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">
<!-- Must have class= info to prevent flash of just content on refresh -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;" >
<ul class="ui-tabs-nav">
<li><a href="#tabs-1" >Home</a></li>
<li><a href="#tabs-2" >Statistics</a></li>
<li><a href="#tabs-3" >Topo Maps</a></li>
<li><a href="#tabs-4" >FAQs</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/Home") </div>
<div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Statistics/Statistics")</div>
<div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Maps/Maps")</div>
<div id="tabs-4" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/FAQs")</div>
</div>
</div>
Here you have an example http://jsfiddle.net/YnZRa/1/
Steps
Add a new tab with <li
style="display:none;">Tab 4</li>
Add the content in a new div
Edit the script with this
//Edit the script this way to show the content with a click in a link
$(document).ready(function(){
var $tabs = $( "#tabs" ).tabs();
$('.goto').click(function() { // bind click event to link
$tabs.tabs('select', 3); // switch to fourth tab
return false;
});
});
Hope it works!! :)
If I understand your question correctly, you'd like to collapse your tab content when a user is trying to login/register.
First things first, you must set the tabs options to be collapsable. So, edit your tabs calls to reflect this
$('#tabs').tabs({ collapsible: true });
From here, you can attach an event handler to your login/registration click event. You'll want to do two things, 1) get the currently selected tab index and 2) fire the tab select event to collapse your tabs. It might look something like this:
$('.login').click(function () {
var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
$("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab
// continue with your login/registration click event
});