We Keep Coding

Open dialogbox or popup or messagebox after entire page loads using javascript or bootstrap

I have jsp/javascript page which shows some of the content based on some business logic. This page loads some data that being pulled from database. Sometimes Page Load can take more time. So there is no specific time.
Things to do:
Show a popup/messagebox/dialogbox in the middle of screen after the entire page is loaded. should have close or "X" button to close.
Popup/messagebox/dialogbox is sequence of 4-5 screens/content messages. Meaning as soon as popup comes it shows 1st content, then there should be "next" or ">" sort of icon within that popup screen. clicking on that it should proceed to next screen or content. When you arrive at last content or screen, you should be able to scroll back to first message.
I have tried using https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
and https://www.w3schools.com/w3css/w3css_modal.asp.
With that I am having difficulty showing modal or carousel inside messagebox/popup/dialogbox at the middle of screen after entire page is loaded
I followed some of the questions here on stackoverflow. They cover all basic things, but not exactly this specific scenario.

If you use the W3.CSS modal, there's a little hint in their first example on this page. In the onclick attribute on the button, there's a little Javascript snippet:
document.getElementById('id01').style.display='block'
To get that behavior when the page is finished loading, you can put it into an event listener on the window object that waits for the load event MDN doc.
Here's a small example using the boilerplate from the W3.CSS modal page:
<!-- In your HTML -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">
×
</span>
<p>Where your carousel goes</p>
</div>
</div>
</div>
/*
In a <script/> tag below the rest of your imported scripts
or in a separate, linked .js file.
*/
window.addEventListener('load', function() {
document.getElementById('id01').style.display = 'block';
});
As far as the carousel, you can just replace the <p /> element inside the modal with the relevant code. I'd start by just copy/pasting the W3Schools slideshow example. Make sure you include the <link /> and <script /> required to use Bootstrap and don't forget to replace their images with yours.
If you need any more help, please include some of your code as so folks have better insight into your problem.
Take care!

Inserting HTML and Scripts onto page with Javascript

<div data-video="gPXSs-6qRFc"
data-autoplay="1"
data-loop="1"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
If I stick this in the HTML, the div becomes populated with a play button, and the corresponding Youtube video (audio) will start to play. However, if I use Javascript to stick it on the page some time after the page has loaded, the div fails to become populated (I assume this is because the scripts we've added don't run).
Using Javascript (triggered by a user action), how can I put this content onto the page and make these scripts run?

Show the page only after all the javascript is executed

I am using Jquery tabs in my project, and it all works fine.
However when the user opens the page, the page displays all the material in all the tabs for a second first, then it executes the javascript and the screen comes back to normal.
It's an ugly sight, how can I prevent this? Is there a way to show the page after all the loading is done only?

You could try hiding your content when the page loads and using JQuery to reveal it.
HTML:
<div id="contentDiv" style="display: none;">....</div>
JavaScript:
jQuery(document).ready(function ($) {$('#orderContentsInfoBox').css('display','block');});
This jQuery function fires when the document is fully loaded. If you are still seeing a flicker of content before it is hidden in tabs, then I would recommend finding the function that sets up the tabs and inserting the code to reveal the content div there. That way the content will only appear after all tabs are setup.

Delay the page rendering until an iframe is loaded

We have the following situation:
We have a webpage (let's call it Page A) that gives us only the header of a website.
We have another webpage (let's call it Page B) that gives us the content with no header and includes the Page A in a hidden iframe.
When Page A is loaded it will get its own HTML and add it in an empty div in Page B.
All of this is working as expected.
My question:
Can I delay the page rendering of Page B when it reaches the iframe, wait for the iframe to load and when the HTML is populated in Page A to continue the rendering. The behaviour should be as if I'm calling the contents from a synchronous AJAX call. The idea is NOT to show the content of the Page below the main menu until the menu HTML is populated.
The business logics behind this:
We're using an external service as a forum and we need to add our website header above. They can give as a free-html slot where we can put our own HTML. The header is dynamic so we need to load it each time from an URL. Since their site may response faster we don't want the content to load and several moments later the menu to pop out of nowhere. We need to have the menu HTML populated before we continue showing the content. The Menu HTML is populated from an iFrame by the iFrame so we need to wait for it to load.
Any help will be appreciated.

Maybe you can hide the contents of Page B via style="display:none;" and then show the contents when iframe's load event fires.

Insert the markup for the <iframe> dynamically in a content loaded event handler. Since you've tagged the question jquery
$(window).on("load", function() {
var iframe = $("iframe").attr("src",url).whatever();
$("whatever selector").append(iframe);
})

Refreshing dynamic listviews in JQM when navigating between pages

I'm creating a mobile app using jquery mobile and cordova. I've successfully loaded a dynamic listview from a json ajax call. My issue is that when I navigate to another page, then press the back button, the original page's listview does not load and there is nothing where it should be. If I refresh the page, the listview appears. Rather than refresh the whole page every time I navigate to this page, how would I refresh just the listview?
I've tried refreshing the listview both when the DOM and the window have loaded, and before both, and using $(document).on("pagebeforeshow", "#pagenamehere", function() {}); to no avail.
To be more specific, I have two pages with listviews. The navigational steps go as follows:
1. load page 1: listview shows
2. navigate to page 2: its listview does not show
3. press back: page 1 listview shows
4. navigate to page 2: its listview still does not show
5. refresh page 2: its listview DOES show
6. press back: page 1's listview does NOT show
This process should make it clear that the listview only loads when the url is directly input or reloaded; for some reason navigation between pages (different html files) breaks this.

If you have script inside the head tag of the second page and this page is loaded through Ajax, then the script won't execute.
Try to move your script from the head tag inside the second page's div (<div data-role="page" id="mySecondPage">) or create a JS file and load it on the first page's load. Relevant example here
jQuery Mobile uses Ajax to perform pages transitions so during the transition jQuery Mobile will only inject the contents of the response's body element (or more specifically the data-role="page" element). Nothing in the head of the page will be used (except the page title).
In conclusion, any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax. They will execute if the page is requested via HTTP and that's why your listview is loaded after a full page refresh.