I've added a flash game to my site that for some reason requires a left mouse click anywhere on the page after it loads. The click then enables the arrow keys to work.
I've tried a js based mouse trigger in my html and added an id to my flash object, but it's still not working. Any advice?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Donkey Kong</title>
<script type="text/javascript">
function swfLoadEvent(fn){
//Ensure fn is a valid function
if(typeof fn !== "function"){ return false; }
//This timeout ensures we don't try to access PercentLoaded too soon
var initialTimeout = setTimeout(function (){
//Ensure Flash Player's PercentLoaded method is available and returns a value
if(typeof e.ref.PercentLoaded !== "undefined" && e.ref.PercentLoaded()){
//Set up a timer to periodically check value of PercentLoaded
var loadCheckInterval = setInterval(function (){
//Once value == 100 (fully loaded) we can do whatever we want
if(e.ref.PercentLoaded() === 100){
//Execute function
fn();
//Clear timer
clearInterval(loadCheckInterval);
}
}, 1500);
}
}, 200);
}
</script>
<script type="text/javascript">
$("document").ready(function() {
setTimeout(function() {
$("#swf").trigger('click');
},5000);
});
</script>
</head>
<style type="text/css">
body, html{
height: 100%;
min-height: 100%;
}
body
{
border: 0px;
padding: 0px;
overflow: hidden;
margin: 0px;
}
object {
border: none;
outline: none;
}
</style>
<body style="background-color: #000000">
<table class="flash-container" style="height: 94%; width:100%">
<tr style="height: 100%; width:100%">
<td style="height: 100%; width:100%">
<script type="text/javascript">
//This function is invoked by SWFObject once the <object> has been created
var callback = function (e){
//Only execute if SWFObject embed was successful
if(!e.success || !e.ref){ return false; }
swfLoadEvent(function(){
alert("The SWF has finished loading!");
});
};
swfobject.embedSWF("donkey_kong.swf", "flashcontent", "550", "400", "9", false, false, false, false, callback);
</script>
</td>
</tr>
</table>
</body>
</html>
You need to poll for 100 percent loaded flash object. Check the solution here:
http://learnswfobject.com/advanced-topics/executing-javascript-when-the-swf-has-finished-loading/
EDIT:
Your current function has HTML in it. Remove the HTML so it looks like this:
swfLoadEvent(function(){
alert("The SWF has finished loading!");
});
Related
I'm having a page with some inline css & javascript, the javascript on the original page contains some click and scroll logic which looks like this
$('#abc').on('click', function() {
$('html, body').scrollTop($('#xyz').offset().top)
});
it works fine on the original page;
Now I'm having a new page, which imports the original page as an iframe on the new page, but because it is iframe, the scope of the javascript code on original page inside this iframe is now bind to the iframe itself, and because it's bind to iframe itself, the $('html, body').scrollTop no longer works...
Is there anyway I can modify the original page to make it work through iframe?
for obvious security reasons, iframes are isolated in their own sandbox.
however, if you are in control of the code of the parent page and the iframe page, then you can use the message mechanism and pass your information through the event.data part.
here the example only passes text, for more extensive data, use JSON.stringify () / JSON.parse ()
file z1.html (parent)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z1</title>
<style>
#iFrameZ2 { width: 400px; height: 150px; border: 1px solid red; }
#receiveTxt { margin: .5em; border: 1px solid blue; padding: .2em; width: 15em; }
</style>
</head>
<body>
<h4>main page (z1.html)</h4>
<input type="text" id="messageTxt" placeholder="a message...">
<button id="btSender">send to iframe</button>
<div id="receiveTxt">.</div>
<br> <br> iframe:<br>
<iframe id="iFrameZ2" src="z2.html" frameborder="0"></iframe>
<script>
window.onmessage = e =>
{
receiveTxt.textContent = e.data
/* ----------------------
if (e.data==='scroll')
{
document.querySelector('#xyz').scrollTop
}
------------------ */
}
btSender.onclick = _ =>
{
let info = messageTxt.value.trim()
if (info!='')
iFrameZ2.contentWindow.postMessage( info,'*')
}
</script>
</body>
</html>
file z2.html (iframe)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h6>z2.html</h6>
<input id="msgTxt" type="text" placeholder="send a message">
<button id="btSender">send msg</button>
<p id="getMsg">...</p>
<script>
btSender.onclick=_=>
{
let info = msgTxt.value.trim()
if (info!='')
window.parent.postMessage(info,'*')
}
window.onmessage = e =>
{
getMsg.textContent = e.data
}
</script>
</body>
</html>
I'm trying to use javascript to toggle the size of a div. In order to understand the basic idea of how to do this I tried replicating this example: Toggling Div (JSFiddle)
But for some reason it is not working, despite me having copied it from the working JSFiddle. Why is that? Here is my replicate:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">#topbar {
background: orange;
color: white;
height: 10px;
text-align:center;
}</style>
<script type="text/javascript">
$("#topbar").click((function() {
var i = 0;
return function() {
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
}
})());
</script>
</head>
<body>
<div id='topbar'>toggle me</div>
</body>
</html>
Wow! You haven't added jQuery at all! Add this in your <head> before you call the script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You must have got this error in the console:
Reference Error: $ not defined.
You are using this not in context. When you put it inside a function, then it gets screwed up. Do it this way:
$(function () {
$("#topbar").click(function () {
var i = 0;
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
return false;
});
});
The this you used, will be taking your inner function as its context. And since your <div> comes after the <script>, please enclose it inside the $(function () {}).
Is there a way to make a preloader in Javascript or JQuery so that all the elements in a webpage like the swfs and images load fully before they play and show. I have a preloader in the flash of the swfs, but some times it plays choppy. My code works properly but is it a way to preload the whole page using Javascript or JQuery before the webpage plays or shows the element with the website?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>???</title>
<script type="text/javascript" src="swfobject-1.5.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
if(readCookie("flashPlayed") == "true"){
Jvid()&&Bg()
}
});
function launchFlash(){
if(readCookie("flashPlayed") != "true"){
var homeflash = new SWFObject("???.swf", "BG", "100%", "100%", "8");
homeflash.addParam("wmode","transparent");
homeflash.write("videoBg");
var homeflash = "Bg";
setTimeout("Bg()");
setTimeout("Jvid()",5000);
setTimeout("removeFlash()",5000);
}
}
function readCookie(cookieName){
var searchName = cookieName + "="
var cookies = document.cookie
var start = cookies.indexOf(cookieName)
if (start == -1){ // cookie not found
return ""
}
start += searchName.length //start of the cookie data
var end = cookies.indexOf(";", start)
if (end == -1){
end = cookies.length
}
return cookies.substring(start, end)
}
function Jvid(){
$("#videos").hide();
}
function Bg(){
$("#test").css({"background":'url("???.jpg")',"background-position":'top center'});
}
function removeFlash(){
$("#videoBg").empty();
$("#videoBg").animate( { top:"-9999px"}, 1 );
window.location.assign("http://???.com")
}
</script>
<style>
#test {
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
width: 100%;
position:relative;
background:url(???.jpg) top center repeat #000;
}
#videoBg{
position:fixed;
top:-5px;
left:0px;
height:100%;
width:100%;
}
#videos{margin:0 auto 0;
padding:0;
height:301px;
width:205px;
position:absolute;
/*border-style:solid;
border-color:red;*/
top:134px;
left:800px;
*left:645px;
left:645px\0/;
}
</style>
</head>
<body id="test">
<div id="videos">
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
swfobject.embedSWF("???.swf", "videos", "205", "301", "8.0.0", '', flashvars, params);
</script>
</div>
<div id="videoBg"></div>
<script type="text/javascript">
setTimeout("launchFlash()", 7000);
</script>
</body>
It could be done if the flash parts would be yours. This means to make use of External Interface from AS and call JavaScript functions to tell how much is loaded, and ask when to start to play, but it is a non religious way of doing it.
the following code works perfectly in FireFox 7, but when pulling up the same page in IE 9, the jQuery functions (hide and show) don't work. However if you open debugger in IE and refresh, everything works fine. It's like the jQuery code won't work unless debugger is running and you refresh the page (or start IE with debugger on), which makes it difficult to debug obviously.
all the CSS and scripting are included for this sample. If I need to include any other information please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--<link href="_css/main.css" rel="stylesheet" type="text/css" />-->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#wrapper {
width:1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#sidebar {
width: 100px;
height:100%;
float: left;
background-color: #FF0;
}
#maincontent {
float: left;
width: 400px;
height:100%;
;
background: #c1d8b9;
}
#right {
width: 500px;
background-color: #0F3;
float: right;
height: 100%;
}
body {
background-color: white;
}
ul
{
list-style-type: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper">
<div id="sidebar"> Sidebar
<ul >
</ul>
</div>
<div id="maincontent"> Main content
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<ul id="listMiddle">
<li id="li1">TEST1</li>
<li id="li2">TEST2</li>
<li id="li3">TEST3</li>
<li id="li4">TEST4</li>
</ul>
</div>
<div id="right"> Right
<ul id="listRight">
</ul>
</div>
</div>
<script>
var arryLIs = document.getElementsByTagName('li');
var middleUL = document.getElementById('listMiddle');
var rightUL = document.getElementById('listRight');
var arrymiddleLIs = middleUL.getElementsByTagName('li');
var arryrightLIs = rightUL.getElementsByTagName('li');
for (var i=0; i<arryLIs.length; i++){
arryLIs[i].onclick = moveright;
//console.log(arryLIs[i].innerHTML);
}
console.log(arrymiddleLIs);
console.log(middleUL);
var goBefore=null;
function moveright() {
var goBefore=null;
goBefore=findSortRight(this);
document.getElementById('listRight').insertBefore(this,goBefore);
this.onclick = moveleft;
//console.log(arrymiddleLIs);
//console.log(arryrightLIs);
}
function moveleft() {
document.getElementById('listMiddle').appendChild(this);
this.onclick = moveright;
console.log(arrymiddleLIs);
console.log(arryrightLIs);
}
function findSortRight(newElement){
var goBefore=null;
for (var r=0; r<arryrightLIs.length; r++){
//console.log(newElement.innerHTML<=arryrightLIs[r].innerHTML);
if (newElement.innerHTML<=arryrightLIs[r].innerHTML) {
//console.log(arryrightLIs[r]);
goBefore=arryrightLIs[r];
break;
}
}
// console.log(goBefore.innerHTML);
return goBefore;
}
$("#hidr").click(function () {
$("li").hide();
});
$("#showr").click(function () {
$("li").show();
});
</script>
</body>
</html>
console.log is a problem. Remove it or define it like this in case of absence before calling:
console = console || {};
console.log = console.log || function(){};
Your problem seems to be coming from the console log events. Basically IE doesn't know what to do with them and crashes the JS script before it ever gets to it.
You could go with something like:
if( window.console != undefined) {
//your console logs goe here
}
None of these solutions worked for me. Here is what I found that actually worked:
if (typeof(console) === 'undefined') {
console = { log : function(){ /*alert(arguments[0]);*/ } };
}
You want the console to work if it is actually defined.
Try this:
if (typeof console !== 'undefined') {
console = {};
console.log = function() {};
}
I have this code below. It works fine in safari however in IE the background just revolves once and stops on pink.
What am I missing?
Hope someone can help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Iridescent Ideas</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
<center>
<img src="logo.png" alt="Coming Soon" width="557" height="430" border="0" usemap="#Map" style="margin-top:100px;">
<map name="Map">
<area shape="rect" coords="106,377,454,406" href="mailto:gareth#iridescentideas.com" alt="Email">
</map>
</center>
<script type="text/javascript">
var colors = Array('#66ccff', '#ff99ff'); //List the hex codes you want to loop through here.
var color_index = 0;
var interval = 5000; //How long the color blend transition lasts. (in milliseconds, 1000 = 1 second)
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
else { color_index++; } //Lets move to the next color in the colors array.s
bg_color_tween();
});
}
$(document).ready(function() {
if( $(window).width() > 1024 ) {
//Kicks off the background color tweening.
bg_color_tween();
}
});
</script>
</body>
</html>
You could try setTimeout to delay the execution of the animation ever so slightly
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == (colors.length-1)) { //If we are at the end of the colors array go back to the beginning.
color_index = 0;
} else { //Lets move to the next color in the colors array.s
color_index++;
}
setTimeout('bg_color_tween', 5);
});
}
In IE9 its working normally. There should be no problem. Are you testing in local or server environment?