I have a simple HTML page that has a large image as a full screen background; I called this page index2.html.
I want to create another page called index.html which will preload index2.html fully, and then direct the user to it. However, all the preloader solutions that I've found on internet are based on a single HTML page.
How can I accomplish this? Any help would be appreciated.
You can cause the browser to cache the image by loading it on index.html as a 1 pixel image
<img src="/index2-background-image.jpg" alt="" width="1" height="1" />
Alternatively you could load the content from index2.html using jQuery like so:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
$.get('index2.html', function(data) {
jQuery("#index2content").html(data);
});
});
</script>
<div id="index2content"></div>
Related
I'm trying to create a screenshot using javascript of a div element which contains a embed swf. This screenshot should be saved to my FTP server.
The html does look like the following:
<div class="thumbnail" id="thumbnail">
<div style="background: #FFF url('assets/images/canvas.png') repeat;" id="builder" class="thumb">
<object>
<embed width="100%" height="350" src="http://assets.zwinky.com/assets3/avatar/avatar10.8.swf?u=dane" wmode="transparent"></embed>
<param name="wmode" value="transparent">
</object>
</div>
</div>
And my current Javascript does look like the following:
<script type="text/javascript" src="assets/js/FileSaver.js"></script>
<script type="text/javascript" src="assets/js/html2canvas.js"></script>
<script type="text/javascript">
$(function() {
$("#submit_form").click(function() {
html2canvas($("#thumbnail"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
canvas.toBlob(function(blob) {
saveAs(blob, "test.png");
});
}
});
});
});
</script>
But sadly nothing will save or happen once I'm clicking the button.
Example of working code: http://jsfiddle.net/6FZkk/1/
Screenshot of the HTML element containing the embed: https://gyazo.com/37683328b5a785e6b17f78eca5e1c2de
Does anyone have a idea what im doing wrong?
Due to security restrictions the browser won't allow you to do this on a webpage. Otherwise you could do stuff like checking which links a user had visited which would allow to detect the browser history of a user.
On the other hand if your coding a chrome extension you can check tabCapture https://developer.chrome.com/extensions/tabs#method-captureVisibleTab
And flash should allow you to do this as well, but I am not familiar.
If you want to do this for testing purposes, check Phantom CSS https://github.com/Huddle/PhantomCSS
You should not do this only with js, because in this case your ftp credential will be open to public.
To do this, let you create a page like upload_to_ftp.ext, etc on the server which will accept your file and will upload to your ftp. And after getting the screenshot on the browser, send that file(screenshot) to your server(upload_to_ftp.ext).
Exactly that. Can it be done? I.e. can I use javascript to load in a frame a pdf from an external website?
Of course you can...
<iframe id="someFrame" />
<script type="text/javascript">
document.getElementById('someFrame').src = 'http://somesite.com/somefile.pdf';
</script>
I have:
controller/reports_controller.rb
views/reports/index.html.erb
assets/reports.js
I have an image in index.html.erb:
<div class="main_mark">
<img src="/assets/welcome_main.png" alt="main" class="main_mark_image" />
</div>
I want to print an message to the screen (alert message) when the user presses the image. so I want to write a function in reports.js that print the message.
reports.js:
$(document).ready(function() {
$(".main_mark_image").click(function () {
alert("alon");
});
});
but I think I have to relate between the java script the the html.
any help appreciated!
When using an external script you need to tell your HTML file:
<script src="assets/reports.js"></script>
The above assumes that your 'assets' folder is in the same folder as your index. You also need to include the jQuery library. It's available for download or you can use Google's:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Or, for jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
Hope this helps.
Try:
<img src="/assets/welcome_main.png" onclick="alert('alon');" alt="main" class="main_mark_image" />
Hey all I am having a huge problem here evenafter following every step of the tutorial given here to put in a video on a popup greybox ..
The tutorial
now, the only change i have made is i have a folder inside the folder graybox called graybox which holds the JS and css files.
so my script code reads like this ..
<script>var GB_ROOT_DIR = "/greybox/";</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
there is a folder called video which has a video called video.flv.
now I have linked a text to open as shown in the tutorial .. the code is
<a title="Noodle Demo" href="player.html?filename=videos/noodle.flv">Demo</a>
when i click on the link on the web page the window opens up right but the window reads page not found .. I have the required player.html too and that is a copy paste from the tutorial, i;ve changed all the required version numbers of flowplayer etc. Please help me.
Use the rel tag. :)
<a rel="gb_page_center[560, 450]" href="player.html?filename=videos/noodle.flv">
God bless tutorials. For better centering you can get the middle of the site by jQuery for example.
<a rel="gb_page_center[560, 450]" id="player" href="player.html?filename=videos/noodle.flv">
<script type="text=javascript">
$(document).ready(function(){
cenx = $(window).width();
ceny = $(window).height();
$("#player").attr("rel", "gb_page_center["+cenx/2+", "+ceny/2+"]");
});
</script>
But it requires jquery from jquery website.
My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?
Little more info:
The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...
a sample:
$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50);
$ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);
The values returned are stored in an array and used for google visualization api.
Each of this is stored in seperate files and i am calling them using include ();
Use jQuery...
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
Right below body start tag put...
<img id="loading" alt="" src="ajax.gif"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/
Add this CSS...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update
Replace with this JS code, leave the googlecode line.
<script type="text/javascript">
$(document).ready(function()
{
$("#info").load("info.php");
$("#linechart").load("linechart.php");
$("#piechart").load("piechart.php");
$("#loading").hide();
});
</script>
HTML:
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps.
Use the following function:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").hide();
});
</script>
Well, there are few issues on this path.
First of all, you output html to show loading screen, and run flush() command.
Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.
Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.
This is not actually php.
But you can do as follows:
Add the following to the head section:
<script type="text/javascript" language="javascript">
function wait()
{
if(document.getElementById)
{
document.getElementById('waitpage').style.visibility='hidden';
}
else
{
if(document.layers)
{
document.waitpage.visibility = 'hidden';
}
else
{
document.all.waitpage.style.visibility = 'hidden';
}
}
}
</script>
Change the <body> to <body onLoad="wait();">
and add the following in the beginning of body section:
<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;">
<table width="100%" height="100%">
<tr>
<td><img src="path-to-image"/></td>
</tr>
</table>
</div>