I'm trying to embed kennydude's JavaScript Photo Sphere viewer (https://github.com/kennydude/photosphere) into a Contao CMS 2.11-based web site. I'm basically using the following code from his test.html which I adapted for the specific site:
Berechnen
<div id="sphere" style="width: 100%; height: 300px;"></div>
<script src="http://www.***.tld/tl_files/labor/scripts/three.min.js"></script>
<script type="text/javascript" src="http://www.***.tld/tl_files/labor/scripts/sphere.js"></script>
<script type="text/javascript">
document.getElementById("goForIt").onclick = function(){
sphere = new Photosphere(this.getAttribute("href"));
sphere.loadPhotosphere(document.getElementById("sphere"));
return false;
};
</script>
I pasted that code into a .tpl file which has been uploaded to my templates folder and I'm embedding it via {{file:code.tpl} in a "custom HTML" content element.
However, it doesn't work - the link is visible in the frontend page, but it doesn't make the Photo Sphere load - however, it just redirects me to the sphere's JPG file.
How can I properly embed the sphere in my Contao frontend page?
Thanks in advance!
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).
I have inserted Shadow box into a website on the page load using the unchanged usage code from the shaowboax website, but all it seems to load is the dimmed black background that usually sits behind the pop-up.
This is the JS and references I'm using:
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true
});
window.onload = function() {
// open a welcome message as soon as the window loads
Shadowbox.open({
content: '<div id="welcome-msg">Test</div>',
player: "html",
title: "Welcome",
height: 552,
width: 514
});
};
</script>
I've already tried using different players, chaging the content in the popup, loading an older version of Showbox and changing the location of the script and stylesheet. I'm using the Jquery download version of Shadowbox and the script tags are placed inside <body> tags. Does any one have any idea of what I could be doing wrong?
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>
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>