I have a script that will display a loading text while the content of the iframe is loaded.
The first time i open the page, it will work perfectly.
But on this page i have links that will be launched inside the iframe, and the loading text is not displayed for those links :(
See example here:
http://www.ndnm.co.cc/test.php
it will work the first time you load the page, but if you click on "TEST LINK" the loading text won't be displayed :(
Note: the iframe is loading an EXTERNAL domain
How can i fix that ?
Thanks a lot
You could try putting an on-click event on the link, so everything someone clicks it, the image "Page is loading.." will be shown, and the hided by the already--there "hideProgress()" function.
Something like:
TEST LINK<br>
Something like this: http://jsfiddle.net/SFjS2/ (remember, the second page is loaded VERY fast, so the "Page Loading" image will not be seen easily..try putting some more things there :P)
I am going to give you a jquery solution as you tagged it as such.
The solution code is located at http://jsfiddle.net/nPWAp/1/ however the HTML is
<body>
<div>
TEST LINK
</div>
<iframe id="frame"></iframe>
<div id="statement"></div>
</body>
and the jQuery is
$(document).ready(function() {
$("#testlink").click(function() {
// --- set statement --
$("#statement").show(); // show the div in case it was hidden.
$("#statement").text("Loading content..."); // replace the text
$("#statement").hide(5000); // hide after 5 seconds
// --- Scrape content --- //
$("#frame").attr('src', "http://www.test.com");
});
});
add a dash of CSS
#frame{
wdith: 100%
height: 50em;
border: 1px solid #ccc;
}
and it should all purr. Obviously you will want to check out jquery for some funkier options.
HTH
Related
i have a problem here
i make a page that have function for print page that contain of dynamic table. the print function method is open the page html that contain the dynamic table in the new tab then open the print dialog. the process going well but when i add the ajax call for displaying the data in the dynamic table. the data not displayed at the table in the print dialog..but when i cancel the print dialog and the page that must be printed show off the data is displaying there...
how to fix it.
this the picture of the page
i use this code for print that
<script>
function myFunction() {
window.open('SPL.html','','height=650,width=1200').print();
}
</script>
You didnt provided yet the code of your generator, so I simply explain you why its not working and what you can do.
A good reference for window Mozilla Window Open
You can read there more details about possible functions and more. Your problem is, with:
window.open('SPL.html','','height=650,width=1200').print();
Directly after opening the file you call the print function, at this moment your script and ajax request don´t have finished yet. Thats why it just shows you the current state with the predefined html and css code.
So what you have to do is simply call print after it has finished. There are tons of ways to achieve this.
The simplest way would it to open it like this:
window.open('SPL.html','','height=650,width=1200')
Inside your SPL.html you stack your js script inside:
$(document).ready() {
//Your Generator
}
This little piece keeps safe that all dependencys (external scripts and dom elements) are created before your generator runs and it gives us the possibility for the next function:
$(window).load(function(){
window.print()
});
This one is a version of the globalEventHandler window.onload. It basicly ,if you read the documentation, fires after everything is loaded, including images, frames, objects and so on. And the tricky part also after document.ready, this makes it sure that our generator is finished before we run the print command.
I hope this helps, If you really want to stick the print command inside your first page I can give you an example of this too. But it is not as bullet prove as this solution. Ah and if you want to stick with #Saurabh solution you have to use allow-modals for your Iframe, if not it wouldn´t be possible to print. Is also mentioned in the official documentation.
This issue is caused because the page is not completely loaded before calling the print function.
Update: Using jQuery
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#loaderFrame').attr('src', 'SPL.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<iframe id="loaderFrame" ></iframe>
</body>
</html>
So, I've tried to googling for it, but seems like that it is not my strongest part.
Example: I have a div with embed a video inside, but to show that video I have to click first on div which opens and shows the video. The problem is that it loads on pageload. It makes browser lags while there is more than 4-5 of those div with videos. How can I make it to not load withing pageload, but only when a div is clicked and unload its content when it is clicked again.
$('.cont').hide();
$('h4').click(function () {
var $answer = $(this).next('.cont');
if ($answer.is(':hidden')) {
$answer.show();
} else {
$answer.hide();
}
});
This is what I have, but it is not as I described it
<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
Load
Unload
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>
this loads/unloads the iframe. While your code just hides it, this completely loads/nloads it.
I have an Iframe embedded like this:
<iframe id="foo" src="http://www.something.com" style="width: 90%; height: 300px"></iframe>
Each time the page loads focus gets lost from the top of the page and switches to this Iframe that is in the footer.I was wondering how can i remove the focus from this and make the page load "normally"?
Thanks!
Update: Yes, iframe is being loaded from another source (not the same domain)
if assumed the iframe is not served from the same domain.. you can place any other focusable dom element after the iframe in the footer with autofocus set as true. And if that does not work please try the following in the parent main window:
$(window).on('load', function() {
setTimeout(function(){$("body").focus()}, 100);
};
OR going by vanilla JS
window.onload = function() {
document.getElementById("some-focusable-element-from-parent-window").focus();
};
Well there is too much things we can do, for example on window load we scroll to the top with scrollTop function, ...etc
But with such methods, where we take off the focus and move back to the top when the window is completely loaded, it will come with a glitch and no well effect.
After a while of thinking, and experiences, i come with that:
We remove the iframe with display:none, when the dom is ready. Next when the window is completely loaded, we bring it back. To do that efficienly, we write a style class like that:
.display_none{
display:none;
}
and we will add this class to our iframe, when the document is ready, and remove this class when the window is fully loaded. There is the code :
$(document).ready(function(){
$("#myFrame").addClass("display_none");
$(window).load(function(){
$("#myFrame").removeClass("display_none");
});
});
Now there is a situation where this will not work! if the iframe is created and added with another script, then the dom may be loaded but not the iframe element itself (because the script may not have create it yet)! And that was the case in my case .
SOLUTION:
put the iframe in a container, let say a div container, and apply the method above to this container. All should work nickel! On dom load the div is hidden, next when the window is fully loaded, it restore it back! and you get your iframe, which will be loaded and get displayed. No glitch, and efficient.
We can use sandbox attribute to block automatically triggered features (such as automatically playing a video or automatically focusing a form control).
<iframe src="https://muthukumaran-m.github.io/" sandbox></iframe>
Check this for more info
Assuming you have iframe in a same domain:
You can do this :
$("#foo").on('load', function() {
$("body",parent.document).focus()
};
It is already 2019 and I kept on having the same issue on some of my mobile websites. The focus kept on being stolen by the contact form near the footer.
My rushed method may not be the most elegant way of doing this, but by modifying your iframe form to be hidden on mobile devices, with an expand/collapse button to make it visible on demand, you'll stop this jump from happening.
The simplified code:
<div class="d-block d-sm-none visible-xs"><!-- show only on mobile devices -->
<a class="btn" data-toggle="collapse" href="#blockToControlID" role="button"
aria-expanded="false" aria-controls="blockToControlID">
Expand/Collapse iframe Block
</a>
<div class="collapse" id="blockToControlID">
<div class="card card-body">
<iframe src="path-to-form"></iframe>
</div>
<div>
</div>
<div class="d-none d-sm-block hidden-xs"><!-- hide on mobile devices -->
<iframe src="path-to-form"></iframe>
</div>
For bootstrap 3 you would use visible-xs and hidden-xs to hide or show the snippets of code.
For bootstrap 4 you would use the "d-block d-sm-none" to show the mobile-only code; and "d-none d-sm-block" to hide the mobile-only code.
Scripts needed on footer:
<script src="js/jquery/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
The jQuery version will depend on your bootstrap 3 or 4 setup.
popper.js must be loaded before bootstrap.js, otherwise it'll fail to work.
Prior to reaching this hack, I tried every possible thing. Sadly, none of the JS, jQuery and reCaptcha hacks posted by other members and forums worked. The page load would always default to the form.
While the solution could be nicer with some js/ajax/jquery or even php, this simple code is quick and works fine with bootstrap enabled websites. Modify as needed.
I hope this helps
One of the div headings (a text heading) on my home page is meant to fade in and fade out repeatedly to give a flashing effect, and the function is called onLoad of an image in my home.php file.
<h3 id="FlashingText" style="color:#fff;display:none;font-family:arial;font-
weight:bold;font-size:16px">Text Flashes Here</h3>
//Lots of code
<img onLoad="FlashText()" etc. etc.>
//Lots of code
//Right before closing body tag
<script type="text/javascript">
function FlashText() {
$("#FlashingText").fadeIn(500).delay(500);
$("#FlashingText").fadeOut(500).delay(500);
FlashText();
}
</script>
</body></html>
When I place this script in the code for my home page (home.php) it works in all browsers. When I place this in an external js file (external js file is inserted right before closing body tag in the code above) it works in FF but not Chrome (I am using the latest versions of each). Interestingly, taking away the display:none in the h3 tag and changing the order of the fadeIn and fadeOut (i.e., putting fadeOut first) gives the same result.
Any ideas on why this might be happening? Worst case scenario I simply leave the script in home.php.
Thanks for any help!
I use the tabber script shown on http://www.barelyfitz.com/projects/tabber/ to provide a tabbed page. Generally it works well, and my only complaint is that the tabs don't show until the content has fully loaded, and then there is a jump as the screen writes itself properly. (See www.littlehotels.co.uk/spain/noves.php for an example of what I mean.)
I thought the solution would be to hide the div containing all the tabbed content like this
<div class="tabber" id="tabber" style="display:none">
and then reveal it with a small javascript function which is called by
<body onLoad="ShowTabber()">
The javascript itself is
<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
}
</script>
My little function appears to stop the external javascript (tabber.js) from working because the page displays the content of all the tabs in line, without the the tabs themselves at the top. This is the same result as if I delete the reference to the external script from the of the page.
What am I doing wrong?
More explanation:
When the tabber.js file is missing, the page displays the content of all the tabs one after the other(as you would expect). Running the script as explained above has exactly the same effect; hence I am concluding that the script blocks the main javascript from running.
'onLoad': function(argsObj) {
/* Display an alert only after tab */
if (argsObj.tabber.id == 'tab') {
alert('Finished loading tab!');
}
}
By default select a tab.Then after completion loading that tab it will show a message.
see here
Well, I solved the problem (sort of) with jQuery, but it has now raised another problem.
In response to PSR, I looked more deeply into jQuery. It would have been too complicated to change over to .tabs(), but I did use jQuery to hide and show some divs at the appropriate moments.
I placed a simple little line in fron of the tabber div to show a "Loading" message.
<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>
Then I put this script in the head, under the jQuery line.
<script type="text/javascript">
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
}
</script>
That works fine, but a couple of the tabs have iframes for their content, and this script breaks autoResize script I use on those iframes. I'll open a new question to see if anyone has an answer to that.