We Keep Coding

How to hide the div until the page load then show after the page completely loaded?

I want to hide the div till page load the i want show that div after the page is completely loaded, for that in my phtml file i tried this.
<div id='pilot' style="display : none">
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e6b0d049e042d5f" data- businessunit-id="54c2a000ff00057c" data-style-height="28px" data-style-width="100%" data-theme="light">
Trustpilot
</div>
</div>
<script>
$(document).ready(function() {
$("#pilot").show();
});
</script>
But its not working, any help can be appreciated.

If your jQuery library is loaded in to the DOM and you can't see any errors on the console, then this code should work for 100% sure.
If this is your content all on the page, that will be rendered during milliseconds, so your jQuery code will be executed in no time. Make delayed showing the DIV, and in that case will seem like loaded after the page rendered.

How to delay loading iframe in a jquery collapsed div until after clicking the div/button?

Basically, I have a whole lot of these collapsing divs on one page, which have iframes inside the collapsed div. (I used css to make the clickable div look like a button.)
The problem is that it's taking a very long time for the page to load, because basically it's loading every single domain in each iframe every time the page loads.
I want to delay loading any of the iframes unless the div is clicked.
Here is my code currently:
the Javascript
jQuery(document).ready(function() {
jQuery(".cont").hide();
jQuery(".title").click(function()
{
jQuery(this).next(".cont").slideToggle(500);
});
});
the HTML
<div class="layer1">
<p class="title">test</p>
<div class="cont">
<iframe src="http://example.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example2.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example3etc.com" scrolling="no"></iframe>
</div>
still need a solution.

What about only inserting it into the DOM after the button is clicked?
jQuery(document).ready(function() {
$("cont1").click(function()
{
$("cont1").html("<iframe src='http://example1.com' scrolling="no"></iframe>")
}
);
$("cont2").click(function()
{
$("cont2").html("<iframe src='http://example2.com' scrolling="no"></iframe>")
}
);
});
And so on. And you could use a "remove" button to remove the html afterwards?

Java class gets loaded even if iframe is not called by clicking the link. Why?

I came across a strange problem . I have a jsp , which is calling an iframe . The iframe gets loaded with data from java.
Now to render the iframe i am using customized control-modal.js.
Now my iframe is coded after li tag like this :
<li>
<a id="modalLink" href="#myModal">Set up my Modal</a>
</li>
<div id="myModal" >
<div class="modalsubcol">
<p class="close"><img src="/.../close-button.gif" alt="Close"/></p>
<iframe id="modal-frame"style="display:none;" height="430"
width="675" src="<%= getTheModal()%>"></iframe>
</div>
</div>
And i call the modal in the head part of my jsp like this :
<script type="text/javascript">
window.onload=function modalOverride(){
var myModal;
$('modal-frame').style.display ='block';
myModal = new Control.Modal($('modalLink'), {
afterOpen : function(){$$('.close a').invoke('observe','click',function(e){Control.Modal.close(); Event.stop(e);});},
opacity: 0.3,
width: 675,
fade: true,
fadeDuration: 0.1,
autoOpenIfLinked: false
});
}
</script>
Now the link : Set up my Modal is part of a page containing many links. When i bring that page up, the java class that renders the data fro the modal also gets called. But this must happen only when , i click on the Set up my Modal link.
Before some one tells me , this issue is not due to
window.onload
event, i have used it as otherwise the modal does not get loaded when i click the a fore mentioned link. I have tried by removing the window.onload event as well. If i do that, the java class still gets loaded and now my iframe does not get loaded . No errors come up in fire bug as well.

When you drop this on the page:
<iframe id="modal-frame"style="display:none;" height="430" width="675" src="<%= getTheModal()%>"></iframe>
The source of the iframe is loaded regardless pf whether you have the display: none css property set.
Also note, JSPs do not "call" iframes, they simply render an iframe tag in the HTTP response, the browsers than interprets the iframes and renders the iframe src
If you wish to show/hide the iframe you can do so with JQuery:
$('.modal-frame').toggle();
If you truly wish to only include the other page when you click a link, you need to use AJAX to make a request when the link is clicked or load an iframe dynamically with Javascript.

How to control Loading panel using master page and without using AJAX

I have an asp.net project and I want to show the progress image (GIF) without using AJAX and using simple java-script DIV magic.
All I want to do is to put one div (which show animation clock while page loading in progress) in master page (asp.net master page so I need not to repeat the code on every content pages) and show it when page load is in progress.
I hope your understand what I want to do.
Thanks,

You can achieve like this
<body style="background-color:#FFFFFF;" onLoad="init()">
<div id="loading" style="position:absolute; width:200px; height:163px; text-align:center;top:310px; left:487px;">
<img src="images/loading.gif" border=0 style="margin:38px"/>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>

make 2 sections in your document's body
<div id="progress">
// Code for gif image
</div
<div id="content" style="display:none;">
// Whole page content
</div>
And after that include this javascript. Not in header
<script>
document.getElementById("progress").style.display = 'none';
document.getElementById("content").style.display = 'block';
</script>
If you know jQuery you can do similarly on $(document).ready() event

How to refresh the Iframe url with Loading Image display

I want animate the I-Frame Loading its Source Page. I partially achieved my goal by using JavaScript code goes like this
function reloadIt()
{
frm=document.getElementsByName("pagers")[0]; //we get the iframe object
frm.src=frm.src; //or you can set the src to a new src
setTimeout("reloadIt()",100000); //the function will run every 60000 miliseconds, or 60 seconds
}
and my HTMl Body code goes here
<body onload="reloadIt()">
and my IFRAME Code Goes like this
<div id="divLoading">
<div style="width:100%; height:200px; align="center">
<img src="loader.gif" alt="" align="absmiddle"/>
</div>
</div>
<div id="divFrameHolder" style="display:none">
<iframe src="lead.php" height="450px;" width="100%" name="pagers" onload="hideLoading()" > </iframe>`
</div>
and this works fine when this html page loads at first Time ,we can see loading Image in Iframe till Its source page loads. but after time interval when IFrame refreshes there is no loading image and its simply reloads its source page ... Can any body help me?

You might take a look at BlockUi, a jquery plugin. (http://jquery.malsup.com/block/#element). Try something like this:
function reloadIt() {
$("#iframeholder").block({
message: '<img src="css/ajax-loader.gif"/>',
css: { width: "600px;", height: "400px;" }
});
$('#pagers').attr('src', $('#pagers').attr("src"));
$('#iframeholder').unblock()
setTimeout("reloadIt()", 5000);
}