I am working on an HTML5 facebook game (inside facebook canvas iframe) in which I use jquery in addition to some other js files, css files (image files, in the css files), font files, sound files and screens (html divs in seperate files).
I want to have a loading script as the size of the resources is around 1 MB. There are two options;
first one is writing a resource loader and load everything in correct order which really is painful.
second one is first having a simple loading screen at startup, which will be quicly loaded, upon loading this page, starting to load the actual html (with js, css and everyting) and handing over the loading process to the browser client.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function iframeIsLoaded()
{
...
}
</script>
</head>
<body>
<div id="loadingScreen" class="..."> <!-- iframe will be under this div -->
...
</div>
<iframe ...>
</iframe>
...
obviously second option is much better but I don't have a clue how to do it. As shown above, I may use an iframe under the loading screen div but is there a way to send a message to the upper div from the iframe?
I am also open to other solutions!
You can do this using the iframe.load event.
What you will want to do is hide the iframe on page load and show the loading screen, then you want to wait until the content is loaded then Show the frame and hide the Loading screen.
(This example assumes you are using the src attribute of the IFrame to load the content)
Pure Javascript : Example JSFiddle
var frame = document.getElementById('iframeID');
var loading = document.getElementById('loadingScreen');
frame.style.display = 'none';//Originally hide the frame
loading.style.display = 'block';//Originally show the Loading Screen
frame.src = 'http://www.bing.com';//Set the src attribute
frame.onload = function() {
frame.style.display = 'block';//Show the frame after it is loaded
loading.style.display = 'none';//Hide the loading screen
}
EDIT : (Removed jQuery Example and Added a new Example based on Comment)
Here is a new example that checks the child page for the variable done to check if it is set to true.
Warning this example has the potential to not work due to Cross-Domain Scripting Security, this should only be used if you are 100% that both pages are on the same Domain
Child Page :
var done = false;
setTimeout(function () {
done = true;
}, 10000);
Parent Page : (Script needs placing after the HTML / Before the end of the Body Tag ())
<div>
<div id="loading">
Loading...
</div>
<iframe id="iframeID"></iframe>
</div>
<script type="text/javascript">
var frame = document.getElementById('iframeID');
var loading = document.getElementById('loading');
frame.style.display = 'none'; //Originally hide the frame
loading.style.display = 'block'; //Originally show the Loading Screen
frame.src = 'Test2.aspx'; //Set the src attribute
frame.onload = function () {
console.log('Loaded Frame');
}
var $interval = setInterval(CheckFrameDone, 500);
function CheckFrameDone() {
var done = frame.contentWindow.done;
console.log(done);
if (done) {
console.log('Frame is Finished Loading');
frame.style.display = 'block';
loading.style.display = 'none';
clearInterval($interval);
} else {
console.log('Still Waiting...');
}
}
</script>
With the second example you will notice that every 500 Milliseconds the parent page will check the child page for the done value, if it is true it will show the frame and clear the interval. Otherwise it will just continue to check.
Related
I want to display a web page in kiosk mode on a 1080p monitor showing "what's on". The data can be scraped from an existing web page (which I don't control). It must then be displayed with some new formatting (background image, no scroll bars, new header and footer).
The original web page is updated at infrequent intervals. I am happy for my page to update every 15 minutes or so. My page should maximise the fonts to display as large as possible (and reduce the font on any overflow).
This is all being done on a Raspberry Pi Zero so horsepower is limited.
I am currently scraping the original web page using a perl program scheduled with cron. This program extracts the relevant table of data and adds new header and footer. To try to make the change seamless, my web page includes this new page as an iframe - actually two iframes that it swaps between so the rendering is invisible:
<body onload="load(); update();">
<h1>What's on this week</h1>
<div id="floating-div">
<iframe src="iframe.html" allowtransparency="true" frameborder="0" style="width:100%;height:100%;" id="if1"></iframe>
<iframe src="iframe.html" allowtransparency="true" frameborder="0" style="width:100%;height:100%;" id="if2"></iframe>
</div>
</body>
function update() {
if1 = document.getElementById("if1");
if2 = document.getElementById("if2");
if (if1.style.display == "none") {
if1.style.display = "block";
if2.style.display = "none";
if2.src = "iframe.html";
} else {
if2.style.display = "block";
if1.style.display = "none";
if1.src = "iframe.html";
}
}
function load() {
setInterval(update, 15000);
}
The iframe.html page (created by perl) is:
<body onload="set_size();">
<div class="cdiv">
<table id="calendar" class="weekly">
...
</table>
</div>
</body>
I am struggling on how to adjust the font size dynamically in the set_size() function. I can adjust the size on the visible iframe but this doesn't work on the one loading while invisible. The function I am using to detect overflow is:
function check(el) {
var curOverf = el.style.overflow;
if (!curOverf || curOverf === "visible")
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth ||
el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
How can I do this seamless display update with dynamic font sizing?
Apologies for the long post but I wanted to explain the whole problem I am trying to solve.
Ok, so I gave up on my original approach. I have now re-written the perl program to implement a Web Socket server which scrapes the web site every 15 minutes. If there is a change in the scraped data, it sends it to any connections.
The javascript in the local web page receives this data via a web socket and replaces the table that it had with the new table. The font resize routine then runs as before. Since the page is visible, it works as intended.
The downside is that this update will be visible. However, updates for the current week are infrequent so this is acceptable.
I'm building a portfolio site; it's a one pager with a lightbox functionality. So, basically I am showing HTML5 ads I have built, which I am embedding in an iFrame. These ads have audio, so when I close out of the lightbox the audio continues to play. Now I have tried different methods but have been unsuccessful. I have tested one method which worked, where I removed the src of the iFrame (ONE iFrame which I assigned an ID). Like so:
**HTML:**
<iframe id="test" class="iframe-src" src="media/rogue-nation/300x250-progressive-post/index.html" width="300" height="250" style="border:none"></iframe>
**JavaScript:**
var test;
var lightbox;
test = document.getElementById('test');
lightbox = document.getElementById('lightbox');
lightbox.addEventListener("click", closeLightbox, false);
function closeLightbox() {
...
test.src = "none";
}
So...my questions are:
What is the "best" way to apply this method to each iFrame depending on which one was interacted with (tried, getElementsByClassName but was unsuccessful)
Is there a way to disable the scripts within an iFrame so I don't have to use this method, as I am not so crazy about it
Also, please don't post jQuery solutions or advise me to use jQuery, as it will not be helpful because I am writing plain JavaScript
Thanks in advance!
If your iframe content lives on the same domain it is easy. You could do something like this when your lightbox closes:
function closeLightbox() {
// get the iframe which is playing audio
var iframe = document.getElementById('iframe');
// make sure you can reference the audio element on the iframe
// e.g. with an id.
var sound = iframe.contentWindow.document.getElementById('sound');
sound.pause();
sound.currentTime = 0;
// then close the lightbox with some other code
// ...
}
JSBin Demo
I'm using this JavaScript to preload few images on my website.
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"img/1.png",
"img/hover.png",
"img/image.png",
"img/work1.png"
)
This code is linked in HEAD of the site.
But when someone is visiting my website he waits for few second's while images are loaded and in that time he sees blank (white) website until JS files are loaded. I want to make that when someone visit my website he see a "Loading progess bar" or message that say "Wati until page is loaded" etc. Without a blank index page where JavaScript is linked
Unless an accurate progress bar is actually helpful to your users you are probably better off simply use an animated gif that gets hidden after your loading functions finish. Something like this:
Put the gif on the top of your index.html file. Something like
<div id="loading-gif"><img src="/path/to/gif"></div>
Then when your content loads, simply execute something like
document.getElementById("loading-gif").style.display = 'none';
Note, license information for the above image is located here.
Recently implented this javascript code in order to make all my video embeds the same size as my images. bhyphen.com
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
// change the dimension variable below to be the column size you want
var newwidth= 660;
// this identifies the post-body div element, finds each image in it, and resizes it
$('.post-body').find('iframe').each(function(n, iframe){
var iframe = $(iframe);
var height = iframe.attr('height');
var width = iframe.attr('width');
var newHeight = (height/width * newwidth).toFixed(0);
iframe.attr('width',newwidth).attr('height',newHeight);
});
});
//]]></script>
This code as also affected my Soundcloud embeds as well. Is there a piece of code I can add so that the iframes from my SC embeds will be ignored?
Instead of $('.post-body').find('iframe) try classing your Soundcloud and Videos separately:
$('post-body').find('#iframe-videos')
With your iframe changed to <iframe class='iframe-videos'>
That way your script will only affect your videos, not all iframes.
I create a web page and put an img tag on this page. the img.src is the url of the image from the network IP camera. It works but the stream I get have delays. I understand this delay is because I load the image and loading image takes some time. my question is how can I minize these delay. I do the following;
<script language="Javascript">
x = document.getElementById("stream");
intervalID = setInterval(LoadImage, 0);
function LoadImage()
{
x = document.getElementById("stream");
x.src = "http://IP:PORT/jpg/image.jpg";
}
</script>
<img id="stream"
width="640" height="480"
alt="Press reload if no video displays"
border="0" style="cursor:crosshair; border:medium; border:thick" />
<button type="button" id="btnStartLive" onclick="onStartLiveBtnClick()">Start Live</button>
I've just found your question in the unanswered section and decided to give it a go. The following script creates an internal <img> tag (with new Image()), assigns the necessary attributes, then sets an onload "event handler" attribute, which checks when the image loaded. When that function is called, the #stream is replaced by the new internal image tag.
In case the #stream is not directly inside the body tag (i.e. inside another element like a <div>), edit streamParentElement to point to the image's parent element.
I added a ?nocache query parameter to the string, because while I was testing the code, I found out that the image tag was changing but the visible image stayed the same. I also added a loadDelay, because the images on my client were loading too fast, and it got to the point where it crashed my browser. I advise you to not lower that value below 50. Live demonstration of this code here
<script language="Javascript">
var streamParentElement = document.body, loadDelay = 200;
setTimeout(MakeImage,1);
function MakeImage(){
var img = new Image();
img.src = "http://IP:PORT/jpg/image.jpg?nocahce="+new Date().getTime()+Math.random();
img.width = 640;
img.height = 480;
img.style.border = 0;
img.style.cursor = 'crosshair';
img.id = 'stream';
img.onload = function(){
var stream = document.getElementById("stream");
streamParentElement.insertBefore(img,stream);
stream.outerHTML = '';
setTimeout(MakeImage, loadDelay);
};
}
</script>
<img id="stream" alt="Press reload if no video displays" />
create your html page. eg:
<html>
<head>
<title>
Some Page
</title>
</link rel="stylesheet" href="path to your css file"/>
<script type="text/javascript" src="path to you javasctipt file"></script>
</head>
<body>
<h1 onClick="javascript:someFunction()">
Click here
</h1>
</body>
</html>
you can then create many other "someFunction" functions. They all just reference the AJAX function.this is just to make typing a little less...
The easiest ajax way:
var path;
var div;
var xmlhttp = new XMLHttpRequest();
function someFunction()
{
path = "path to another html file";
div = "the name of the div tag's content you want to change eg. content";
AJAX(path, div);
}
function AJAX(path, div)
{
xmlhttp.open("GET", path, false);
xmlhttp.send();
if (xmlhttp.readyState == 4)
{
document.getElementById(div).innerHTML = xmlhttp.responseText;
}
}
now just include the image in the html file.
ajax allows you to change just the content of the div you gave it, without reloading the whole page.
I would try putting your images into photoshop and making the resolution 72 or less. Also if you save the images as a GIFs they should be much smaller.
maybe handle the image loading in an outside script that runs faster than a web page refreshes, then embed it? like a "videoloader.js" so that it can load separately and not have to wait on the html page to load.
<script src="videoloader.js"></script>
you could also convert the images shown on the fly into lesser quality jpgs using javascript
see if this helps:
Load lower quality image if higher one inst available