We Keep Coding

Open and close modal dialog in same function

I have a site that populates data into a table when it loads. Each column header is clickable resulting in the table sorting based on that column's data. This works fine, but it is slow so i was hoping to have a modal window popup advising the end user to wait while it sorts. I have the code for the modal window already made as well as the javascript line to call it and close it, but I cannot get it to appear and then disappear when the sort is done.
Modal Code:
<div id="SortingBox" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-header2">
<h2>Loading</h2>
</div>
<div class="modal-body2">
<pre><strong style="color: black;">Please Wait...</strong></pre>
</div>
</div>
</div>
I call the modal with this line:
document.getElementById('SortingBox').style.display='block';
And close it with this:
document.getElementById('SortingBox').style.display='none';
Now I already have this working on page load and the line to close it is at the end of the sorting script in a separate js file. So all I want it to be able to have it appear when a column header is clicked and close again after the sort is complete.
Thanks.

Why not just use classList's toggle method?
Create a class that called is-modal-hidden, with display: none.
// style.css
.is-modal-hidden {
display: none;
}
Create a js function to toggle modal, by toggling the class.
Something like that:
function toggleModal() {
document.getElementById('SortingBox').classList.toggle('is-modal-hidden');
}

Open jquery dialog in parent iframe within second iframe within second dialog

I tried to search in StackOverflow and I found similar solutions for my problem but I just can't make this work.
HTML EXAMPLE:
<iframe id="iframeA">
<!-- Here i open a dialog "**divOffirstDialog**"-->
<div id="divOffirstDialog">
<iframe id="iframeB">
...(contents)...
<button onclick="openSecondDialog('divOfsecondDialog')">
<div id="divOfsecondDialog"></div>
</iframe>
</div>
</iframe>
WORKFLOW:
Open dialog divOffirstDialog in iframeA -> inside dialog open divOfsecondDialog to open the second dialog.
PROBLEM:
The second dialog opens inside the first one.
QUESTION:
How can i open the second dialog above/outside the first dialog. How can i open ouside iframeB in iframeA?
NOTE:
Both iframes are in same domain.

Change fancybox close button within html for one page scroll site

I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.

Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">

Want to place a button to close the iFrame, but button click is not working

In my meteor based application i am using an I frame to show some contents to the user. It is working properly. But i want to place a close button which unloads the Iframe from the template when clicked.
I tried it as in the code given below by placing a button, but I am unable to get click event on it. means button click is not working. I am working with iframes for the first time.
Is this the right way to unload an iframe?
If not then how can i unload it, or what is the best way to unload an Iframe?
<template name="preview">
<div style='display:none'>
<div id='preview' style='padding:10px; background:#fff;'>
<button id="close_content_file">Close</button>
<iframe frameborder="1" src="{{preview_url}}" align="left" width="100%" height="500px" >
</iframe>
</div>
</div>
Template.preview.events({
'click #close_content_file':function(){
console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
},
});
I placed a <button></button> in the div to close or unload the Iframe. but click is not working on that button.If I place the button in the div which is hidden. The button is working there. Iframe is opening on the complete screen. means it over lays the omplete screen as bootstrap modal dialogbox.can i place a button in the Iframe itself? . help will be appreciable

There is an issue with the binding of event with the button. Use this way.
$("#close_content_file").bind("click", function() {
//console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
});

I don't know which JS lib you are using, and also I'm a little confused about the
<div style='display:none'>
but I make a little modification so it works fine with jQuery ,
here is the link http://jsfiddle.net/QHxac/

How to animate a div at the same time as slideToggle hide/show

I'm working on a new website, where I have a contact 'tab' coming from the top of the browser window. Here's the link: http://www.stefanhagen.nl/testlab/. If you click the tab, a contact form will appear (using slideToggle). But while the contact form appears, I want the tab to slide down with the contact form, as if the user 'pulls' the form inside the browser window. I now use slideToggle to show the contact form on clicking the tab. Where do I put the code to animate the tab itself? By the way: I have a liquid layout, so the tab isn't 'pushed down' like normal, because I use absolute positioning for every div. Thanx in advance, and here's my JQuery so far:
$('div.contacttab').click(function(){
$('div.contactform').slideToggle('slow', function(){
});

I would suggest placing the contact tab into the same container div as the form then positioning it off page (with only the contact tab showing) then sliding it into view when clicked so that they move together like this:
<div class="contactformulier" style="top: -350px;">
<div id="inputarea" style="height: 350px;">
<form action="php/contactengine.php" method="post">
....
</form>
</div><!--closes the #contact-area div -->
<div class="contacttab" style="position: relative"><p>Contact</p></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.contacttab').click(function(e){
e.preventDefault();
// Show Contact Form //
if (parseFloat$('.contactformulier').css('top') < 0)
$('.contactformulier').animate({'top' : '0px' }, 'fast');
}
// Hide Contact Form //
else {
$('.contactformulier').animate({'top' : '-350px' }, 'fast');
}
});
});
</script>
I hope this helps!

I'd put the contact tab and the contact form div inside of a wrapper, and slide the wrapper down when the tab is clicked. That way, the tab moves with the form div.