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');
}
Related
I'm triggering Fancybox popup automatically when the page is loaded.
Inside that popup there's a HTML content with link to other page.
That link doesn't work when it's loaded with Fancybox.
Here's my code:
<div class="popup">
<div class="container">
<h4>Description text...</h4>
<a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
</div>
</div>
<script>
$(document).ready(function() {
$('.popup').fancybox({
transitionEffect : "zoom-in-out",
}).trigger('click');
});
</script>
How can I set that link to work?
I'm using Fancybox v3.1.28
First, links, buttons, etc are working perfectly fine in fancybox.
The problem in your example is caused by the fact that you have used .popup selector to initialize fancybox, but that matches element containing your link. So, your code can be translated to 'start fancybox when user clicks on element having class ".popup"'. But, your link is inside element with class name ".popup", therefore it starts fancybox.
Finally, your code does not make any sense. If you wish to immediately start fancybox, then use $.fancybox.open() method, see https://fancyapps.com/fancybox/3/docs/#api for samples
I have an accordion with 10 section. I also have some JS that has some code to get images from flickr. I want to be able to click the accordion and populate a div within the accordion section that got clicked with an image pertaining to the accordion section.
Example
SUVs
Cars
Trucks
when the user clicks the cars accordion section, I want to populate a div within the cars section accordion with cars. I already have the accordion and image working. I need to add the piece to make the on click of the accordion section add the appropriate image.
If I understand you, you have some HTML like this one:
<div id="SUVs" class="accordionElement"></div>
<div id="Cars" class="accordionElement"></div>
<div id="Trucks" class="accordionElement"></div>
And you need the Javascript necessary to append certain images to each of them. First you have to change your HTML to this (for example):
<div id="SUVs" class="accordionElement" onclick="appendImage(this);"></div>
<div id="Cars" class="accordionElement" onclick="appendImage(this);"></div>
<div id="Trucks" class="accordionElement" onclick="appendImage(this);"></div>
Then a Javascript code as follows:
function appendImage(element){
$(element).append('<img src="pathFromImage/' + $(element).attr('id') + '.jpg" />');
}
I have a generic piece of html code with form fields which I reuse in several places. When opened inside a bootstrap modal I would like the content to fill the entire modal, but when used elsewhere I don't want it to be as wide. I wanted to do this using ng-class, using code like this:
<div ng-class="modal ? 'col-sm-9' : ['col-sm-9 col-lg-5']">
content...
</div>
The problem is: how do I check if the code is inside a modal or not? Is there some function I can call or some variable to read? I would like to avoid populating all modal-controllers with some isModal() function.
I would recommend using CSS for this. The browser would then identify if the snip-it appears within an element defined as the modal and the correctly apply the style.
Assuming you are using LESS with your bootstrap implementation an example is below. But it should give you a general idea either way.
LESS CSS markup:
div.content {
.col-lg-5
}
modal {
div.content {
.col-sm-9;
}
}
HTML:
<div class="modal">
<h1>Heading</h1>
<div class="content">
content...
</div>
</div>
Give id= "mymodal" to the div.
Then in script create a click function and call this div by id :
$("#mymodal").show();
The modal shows with its content.
i try to use This code.
It works good with 1 window, but i need 2 popup window.
i try to modified it like this
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$("#popup2").show();
}
function PopUpHide(){
$("#popup1").hide();
$("#popup2").hide();
}
And HTML
<div class="b-container">
Sample Text
Show popup
</div>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
Text in Popup
Hide popup
</div>
</div>
<div class="b-container">
Sample Text
Show popup
</div>
<div class="b-popup" id="popup2">
<div class="b-popup-content">
Text in Popup
Hide popup
</div>
</div>
Where i make mistake?
You're most probably showing two popups above each others, give one of them different position and class and use different Javascript function to show each, or send a variable to the function to decide which one to view.
Would be something like that:
function popupshow(whichOne)
{
if(whichOne == 'first'){
$("#popup1").show();
$("#popup2").hide();
}
else{
$("#popup1").hide();
$("#popup2").show();
}
}
UPDATE: here's the fiddle code as you requested. http://jsfiddle.net/jBf2y/2/
Your code above is working. You just need to set a margin to #popup2 div.
They bot appear together, but as they are in the same position, you only see one of them.
$(document).ready(function(){
PopUpHide();
});
function PopUpShow1(){
$("#popup1").show();
function PopUpShow2(){
$("#popup2").show();
}
function PopUpHide(){
$("#popup1").hide();
$("#popup2").hide();
}
In the end i make like this
I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.
this works by matching the value after the # in a link (e.g. <a href="#foo"> when <div id="foo"> scrolls into view). pretty basic, here's the doco: http://twitter.github.com/bootstrap/javascript.html#scrollspy
my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:
<ul class="nav">
<li>a link</li>
<li>modal</li>
<li>a different link</li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-header">my header</div>
<div class="modal-body">some content</div>
<div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>
the div that represents my modal overlay also uses the #id-of-target format for its href, but since it's included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system's highlighting.
I can see that scrollspy should be modified to only link to items that are visible (and therefore not activate when "demo" scrolls into view) but can't work out how to modify the plugin to only fire if the element is visible, or override the event some other way.
can anyone give me some pointers?
funny how typing out a question sometimes makes you think in the right way to solve it, where just thinking about it does not.
to make this work, I modified the scrollspy component of bootstrap so that it tests the target is hidden and bails out of the activate routine (also doesn't raise the activated event, since it's not active)
here it is: around line 1432 for me (+if ..
, activate: function (target) {
var active
, selector
if (target.is(":hidden")) return
this.activeTarget = target