Load a flash after hitting a button - javascript

I am building a website with my school work (dreamfoxgames.com).
If you click on a button called "play" a popup/Modal will come with the game in flash or unity plugin. My problem is that when a visitor loads the page they will automatic load the flash file. This means that the music will start and the page will be slow with loading (all those games).
Is there a way to only load the flash player after somebody hit the play button?
Thanks a lot!

It can also be done using an embed element (no need for external api):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var flashEmbed = null;
function startFlash() {
if(flashEmbed != null) {
document.getElementById("flashContainer").removeChild(flashEmbed);
}
flashEmbed = document.createElement("embed");
document.getElementById("flashContainer").appendChild(flashEmbed);
flashEmbed.src="Flashfile.swf";
flashEmbed.type="application/x-shockwave-flash";
}
</script>
</head>
<body>
<button onclick="startFlash()">start flash</button>
<div id="flashContainer"></div>
</body>
</html>

You can use swfobject to load swf content in div.
Suppose if you have a div in your html as below
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
</head>
<body>
<div id="myContent">
swf will be embedded here
</div>
<button onclick="playSwf()">Click to play swf</button>
</body>
</html>
To play the swf..
<script type="text/javascript">
function playSwf()
{
//Syntax
//swfobject.embedSWF(swfUrl, id, width, height, version,
// expressInstallSwfurl, flashvars, params,
// attributes, callbackFn)
//optional parameters omitted
swfobject.embedSWF("test.swf", "myContent", "400", "400","10");
}
</script>

Related

Trying to make a single button on a javascript weather radar be clicked on page load

I am trying to make this simple weather radar click the damn play button when the page loads and have tried many things. The funny thing is, this bookmarklet works on it:
javascript:document.getElementsByClassName('playerButton play').click();'
But I have tried inserting this into the HTML page with so it runs the radar on page load but can't get it to work without a bookmarklet. BTW, I am not savvy with JS or HTML by any means. Would appreciate help, thank you.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Full Screen Radar
</title>
</head>
<body>
<script type="text/javascript" src="http://widgets.wsi.com/1.1/wx.loader.min.js?cid=880798159"> </script>
<div class="radarContainer" style="width:100%; height:100%;">
<wx:map scriptId="wxMap" memberId="1167" mapId="0020" templateId="0011" persistOpacity="false" zoomLevel="9" latitude="27.3113" longitude="-82.5957" opacity="0.6" menuItems="0001,1102"/>
</div>
</body>
</html>
GOT IT!!! It was simple timing issue. All the javascript tricks of waiting the page to finish loading did not work but a 5second timer did:
<script>
setTimeout(function() {
document.getElementsByClassName('playerButton play')[0].click();
}, 5000);
</script>

Processing JS svg load - Google Appengine

i have a problem. I want to use my Processing code on the Google appengine cloud. I load the svg file asynchronously visa #psj preload tag and i have the map1.svg in the same directory as the .pde file, so I just want to display a PShape but it doesn't show up. I have the following processing code:
EDITED SEE BELOW !
I have all the files (.pde, processing lib, geoloc.js) and the map1.svg in the same folder ../static/processing/ .
Has anybody managed to get a processing file on the app engine, where the script uses loadImage() or loadShape() ? By the way the geoloc.js library is working and the processing code also works if I don't use the loadShape function, so i suspect that the path to map1.svg isn't correct ?
EDIT !!!!!!!!!
Ok so now i have stripped the files as much as possible and the map is still not shown on the appengine, the .html works if i open it in my desktop, so I still supspect that it has something to do with the loading of the map1.svg file in the processing code. I must point out that the processing .pde source is found it's just the map that is not shown !
Here is my crunched processing code:
EDITED AGAIN ! IT'S WORKING NOW...THE PATH SHOULD BE MORE SPECIFIC - relative !
/* #pjs preload="../static/processing/map1.svg"; */
PShape worldMap;
void setup ()
{
size(500, 500);
worldMap = loadShape("../static/processing/map1.svg");
}
void draw ()
{
shape(worldMap, 0, 0, 500, 500);
}
And the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>hiToYouToo : Built with Processing and Processing.js</title>
<meta name="Generator" content="Processing" />
<!--[if lt IE 9]>
<script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
<![endif]-->
<script src="../static/processing/processing.js" type="text/javascript"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'hiToYouToo'; }
</script>
</head>
<body>
<div id="content">
<div>
<canvas id="hiToYouToo" data-processing-sources="../static/processing/hiToYouToo.pde"
width="500" height="500">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
</div>
</body>
Ok so just to answer myself formally, so anyone looking for this would quickly find the answer.
Here is the processing code on app engine:
/* #pjs preload="../static/processing/map1.svg"; */
PShape worldMap;
void setup ()
{
size(500, 500);
worldMap = loadShape("../static/processing/map1.svg");
}
void draw ()
{
shape(worldMap, 0, 0, 500, 500);
}
And the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>hiToYouToo : Built with Processing and Processing.js</title>
<meta name="Generator" content="Processing" />
<!--[if lt IE 9]>
<script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
<![endif]-->
<script src="../static/processing/processing.js" type="text/javascript"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'hiToYouToo'; }
</script>
</head>
<body>
<div id="content">
<div>
<canvas id="hiToYouToo" data-processing-sources="../static/processing/hiToYouToo.pde"
width="500" height="500">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
</div>
</body>

simple javaScript code for mp3 not working

Trying to get an mp3 sound to play with a javascript class but not working. I am not familiar with javascript so I thought it would not be vary different from Java or C. however i do not know why this is not working. this is for an Android app that has built in wikitude. Wikitude uses javascript for adding any functionality to its use of the Android camera class.
trying to use the sound class and nothing i have tried seems to work.
http://www.wikitude.com/external/doc/alr/Sound.html
Here is the full code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var sound = new AR.Sound("assets/bell.mp3", {
onLoaded : function(){sound.play();},
onError : function(){
},
});
AR.sound.onFinishedPlaying = function(){alert("Playing finished");};
AR.sound.load();
AR.sound.play();
</script>
<title></title>
<script src="architect://architect.js"></script>
<script type="text/javascript" src="../ade.js"></script>
<script src="js/marker.js"></script>
<script src="../ade.js"></script>
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<script src="js/multiplepois.js"></script>
</body>
</html>
You can't use something before it's defined, which in your case, is AR. Assuming AR is defined in your architect.js file, you need to move the inline script to somewhere after the library is loaded.
<script type="text/javascript" src="architect.js"></script>
<script type="text/javascript">
var sound = new AR.Sound("assets/bell.mp3", {
onLoaded : function() {
sound.play();
},
onError : function() {}
});
AR.sound.onFinishedPlaying = function(){alert("Playing finished");};
AR.sound.load();
AR.sound.play();
</script>

detect when video finishes and redirect to web page

I've found various ideas on how to detect when a web video ends, but can't get the syntax right for the way I'm using javascript to play the video. Note that I'm using version 4 of the jwplayer.
Here is the HTML that uses swfobject.js and player.swf. It works fine, but I want to add code that detects when the video has finished at will then redirect to a web location using - window.location.href = http://www.webpage.com
Any help will be very appreciated! Here's the full page of HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='swfobject.js'></script>
</head>
<body lang=EN-US bgcolor='#000000'>
<center>
<p id='preview'></p>
<script type='text/javascript'>
var so = new SWFObject('player.swf','player1','640','381','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','&file=mymovie.m4v&bufferlength=3&autostart=true&controlbar=bottom');
so.write('preview');
</script>
</center>
</body>
</html>
You need to use our JS API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
And, use our JW Embedder (Not SwfObject) - http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player
Then, the set up will look something like this:
<h2>Redirecting on complete</h2>
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"bunny.mp4",
flashplayer:"player.swf",
height:400,
width:600,
events:{
onComplete: function() {
window.location = "http://www.google.com";
}
}
});
</script>
Hope that helps!

Running code in Javascript to make a PHP and HTML file run from an ONLOAD event

As a newbie I am trying to run a PHP file and then an HTML file automatically using an
onload="Trigger();" in the body of the HTML.
Enclosed is my code but it will not work even though the onload is accessing the Javascript code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<script src="jquery.js" language="javascript1.2" type="text/javascript"></script>
<script src="swapstyle.js" language="javascript1.2" type="text/javascript"></script>
<script src="cookie.js" language="javascript1.2" type="text/javascript"></script>
<script language="Javascript">
function Trigger() {
document.Trigger.action = "http://www.Website.com/ISP.php";
document.Trigger.target = "_top";
document.Trigger.submit();
document.Trigger.action = "http://www.Website.com/Home.html";
document.Trigger.target = "_top";
document.Trigger.submit();
return true;
}
</script>
</head>
<body onload="Trigger();"></body>
</html>
Any suggestions?
It looks like you need to submit two forms onLoad. In your HTML create two forms, but the issue is that you are targeting the same frame, so while one is submitting the other is trying to as well (you could time it so one submits, the other waits until it is submitted OR target another frame like so:
<body onload="trigger();">
<form name="php-form" action="http://www.Website.com/ISP.php" target="_top">
<form name="htm-form" action="http://www.Website.com/Home.html" target="_another">
</body>
Then:
function trigger(){
document.php-form.submit();
document.htm-form.submit();
}
OR a timed method so one submits then the other shortly after using the same target:
<body onload="trigger();">
<form name="php-form" action="http://www.Website.com/ISP.php" target="_top">
<form name="htm-form" action="http://www.Website.com/Home.html" target="_top">
</body>
function trigger(){
document.php-form.submit();
setTimeout(function(){ document.htm-form.submit(); }, 2000); // 2 seconds after
}
Hopefully this helps.

Categories

Resources