This question already has answers here:
When creating a dialog with jquery, how do I hide the dialog div?
(2 answers)
Closed 8 years ago.
Imagine a fairly standard web app page using jQuery and Knockout which uses mostly modal dialogs for editing data. The modal dialogs are created via jQuery UI and everything works. As the page loads, the JS runs, the dialogs open when the button is clicked, do their job, all is fine, great, and peachy.
However, as the page is loading, the elements in the divs containing the HTML for the modal controls will flash just for a second before the script to turn them into dialogs completes, after which they're once again hidden until the dialog is opened. And yes, this will happen even when the script has been wrapped in the $(document).ready() call since all that does is prevent manipulation until the DOM has been loaded.
One method which seems to make this go away is to add visibility: hidden; to the CSS of the class which I assign to my modal divs which stops the elements form appearing on page load but it also then turns those elements inside the modal control invisible and I have to add the following line to the function which opens it...
$modal.css('visibility', 'visible');
Again, all this seems to work, but I'm wondering if anyone knows a better way to effectively hide all of the inputs and dropdowns, and text inside what will become a modal control on page load than by playing with the CSS when the dialog opens.
Add a class called hidden to your css file.
.hidden{
display: none;
}
This will allow you to reuse this class on other elements. If your using twitter bootstrap this class should be available: http://getbootstrap.com/css/#helper-classes-show-hide
Related
for multiple websites, with unique styles I need to write a JavaScript. This script needs to create some popovers and a modal window. The popovers and modal should look an all pages the same. For the popovers I set
data-container="#myContainerID"
Then I am append to the body
<div class="my-bootstrap-iso" id="myContainerID"></div>
The class "my-bootstrap-iso" contains all bootstrap css, but processed with http://lesscss.org/. And so far it works well.
Now I wanted to do something similar with the modal. So I appended with js the class "my-bootstrap-iso" to the body when the modal opens and remove it when it closes. For some websites this works. But other websites are not adding the class "modal-open" to the body. And even if I append this class to the body when the modal opens, it doesn't work. But I don't want to write for every website a specific code for the modal.
Is it possible to make the modal window look independent from the website style? If yes, how?
Hope someone can help.
I'm using the jQuery EasyTabs plugin. I have a web page with two tabs working pretty well. However, when the page containing the tab code loads, for a brief moment both tabs' panel contents (not the tabs themselves) are visible. It's only for a moment, then the second tab's panel content is hidden, and things work as they should. Super annoying.
Any attempts I've made to hide or delay these content from being shown using jQuery or DOM calls have not been successful. Here's the call I make, whose code is loaded just above the HTML of the tabs and panels.
$(document).ready( function() {
$('#tab-container').easytabs();
});
Any suggestions would be great. Thanks.
My suggestion, as a workaround and without being able to actually see the problem, is to initially hide the offending elements with CSS then show them after easytabs() has been called. The problem is likely because there is a tiny delay between the elements loading and the jQuery call.
So #tab-container { display: hidden }; then:
$(document).ready( function() {
$('#tab-container').easytabs();
$('#tab-container').show();
});
I have a website with some bootstrap modal windows. On server rendering these modal windows everything is as should be, but after loading (appending) new items and theirs modal windows, somehow attached modals don't have bootstrap css.
Steps:
opening web page in gridview it shows 30 items blocks
clicking on any block shows modal with correct css
clicking on 'Load more' I am using ajax call for getting more
items on a page and server generated html for these Items then
append to specific div.
items appended correctly but clicking on appended item modal
window missing css.
Probably I need to recall bootstrap css or js after appending new items to page?
Here you are identifying element by id. That's why JQuery selector is taking only first matching element and ignoring others.
To fix this issue, use class to identify element in JQuery selector.
I found the answer here: bootstrap toggle doesn't work after ajax load
And my actual fix was reloading attributes after ajax success:
setTimeout(function(){
// add an element dynamically,
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
$('.tags-list').tagsinput('refresh');
}, 1000)
I'm developing forms with LiveCycle Designer and my colleague at work asked me this question.
I only could think of making a page visible in the prePrint - Event and hide it in the postPrint - Event. But I don't know how to multiply it during runtime.
Does anyone know of cool ways to do this with Javascript (Adobe JS)?
It depend on how you print- by using a button build in the PDF and print call in the onClick event or "normal" print.
If you use normal print you can affect the PDF by prePrint and postPrint events, like changing presence of the hidden objects. The easiest way would be here to duplicate the hidden page and make both pages visible in the prePrint event and hide them in the postPrint event.
Second way:
Set you hidden page text flow.
Select every object on hidden page and enclose with a subform.
In the binding option of the subform "Min count" under "Repeat Subform for Each Data Item" set to 1.
In the rpePrint after you set visibility of the page to true add "PageName.SubformName.instanceManager.addInstance(1)"
In the postPrint event remove add "PageName.SubformName.instanceManager.removeInstance(0)" and set visibility of the page to false.
But if you have a button inside the PDF-Document then you have could call print function. You will have to call the function 2 times with different page-range depending on where the hidden page is
I'm working with Foundation 3.
And I'm having a problem with custom forms and javascript. I use reveal plugin for login and signup forms. if I load forms statically into HTML everything works fine. But if I load them dynamically (lets say ajax), check boxes and radio buttons don't work. Even after reviel I call "$.foundation.customForms.appendCustomMarkup". What should I do? I really like those custom checkboxes and radio buttons. How could I use them with dynamically loaded HTML?
I know this was asked a long time ago -- but incase anyone else comes across it, here's how you do it:
Let's say the container that your ajax is loaded in is <div id="myModal"></div>
After, your content is loaded, you've got to fire $('#myModal).foundation('forms');