pertrai1
asked on
IE "x" showing before Flash loads
Hi, I was wondering if there is any reason why on IE there is an "X" that appears for a second before a flash presentation I am doing loads? This does not happen on other browsers. Is this something with IE or is this something that I might be doing with my flash? If this is IE, is there a solution so it does not show?
Thank you in advance for any help.
Rob
Thank you in advance for any help.
Rob
ASKER
The site, www.horseshowworld.com uses a JQuery swfobject plugin and this is not helping. No problems on any other browsers with this box showing. Is this because of the time it could be taken for the page to load the presentation? It is a large file. Attached is a screenshot.
HSW-Flash-IE-Error.jpg
HSW-Flash-IE-Error.jpg
Could you post the html of your page? There are several ways to use swfobject ... perhaps the one you are using has this glitch.
ASKER
Here is the code
<!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" />
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />-->
<title>Horse Show World</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/profile.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="styles/ie6.css" />
<script src="js/dropdown.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body{behavior:url(style/csshover.htc);}
</style>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.login_btn'); // argument is a CSS selector
</script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="main_wrapper">
<div id="top_bar">
<div class="login_form">
<form action="">
<input type="text" class="top_field" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Username':this.value;" value="Username" />
<input type="text" class="top_field" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Password':this.value;" value="Password" />
<input type="submit" class="login_btn" title="Login" value="Login" />
</form>
</div>
<a href="/signup" class="signup_btn_top" title="Sign Up">Sign-Up</a>
</div> <!-- /top_bar -->
<div id="home_flash_piece">
here comes the content that sais there is no flash installed.
</div>
<!-- NAVIGATION -->
<ul id="nav">
<li class="online"><a href="/online-horse-shows" title="Online Horse Shows"><span>Online Horse Shows</span></a></li>
<li class="fantasy"><a href="/fantasy-stables" title="Fantasy Stables"><span>Fantasy Stables</span></a></li>
<li class="awards"><a href="/awards" title="Awards"><span>Awards</span></a></li>
<li class="community"><a href="/community" title="Community"><span>Community</span></a></li>
<li class="directory"><a href="/directory" title="Directory"><span>Directory</span></a></li>
<li class="registry"><a href="/hsw-registry" title="HSW Registry"><span>HSW Registry</span></a></li>
<li class="assoc"><a href="/hsw-association" title="HSW Association"><span>HSW Association</span></a></li>
</ul>
<div id="content_wrapper" class="home">
<h1>Welcome to Horse Show World!</h1>
<div id="home_columns">
<div class="home_content">
<h2>"The World’s Premier Online Horse Competition Site"</h2>
<p>Welcome to Horse Show World…the premier online horse show site for all breeds and disciplines. Entering a competition online is simple, fun, and educational. Simply videotape your performance according to class specifications, upload your video, and compete against exhibitors from around the world. Don't yet own a horse of your own, compete virtually by opening a Horse Show World fantasy stable. New shows and classes are offered every week…and winning a Horse Show World class will fast become one of the most prized and prestigious awards in the horse world today. Horse Show World is the revolution in the horse industry - join today and be part of the excitement!</p>
<h3>Enter an online horse show in three easy steps:</h3>
<ul class="steps">
<li>
<h4 class="two_line red">See what all the excitement is about!</h4>
<p>First, See what the excitement is all about. Get started with a limited time offer FREE membership today!</p>
</li>
<li>
<h4 class="yellow">Be a part of the action!</h4>
<p>Next, be a part of the action! Browse the shows and classes, check out the fantasy stables, and pick a class to enter.</p>
</li>
<li class="no_pad">
<h4 class="blue">Experience the magic!</h4>
<p>And then, experience the magic! Enter a class by uploading your video and win Horse Show World awards and prizes!</p>
</li>
</ul>
</div> <!-- /home_content -->
<div class="home_sidebar">
<a href="/signup" class="btn_signup" title="Sign up today for your free member account."><span>Sign-Up Today For Your Free Member Account</span></a>
<a href="/online-horse-shows" class="btn_signup" title="Sign up today for your free member account."><img src="images/HSW_Home_Bottom_HorseShowButton.jpg" width="246" height="211" alt="Demo Image" /></a>
</div> <!-- /home_sidebar -->
</div> <!-- /home_columns -->
</div> <!-- /content_wrapper -->
<!-- FOOTER -->
<div id="footer">
<div class="foot_text">
<p class="foot_copy">Copyright 2010 Horse Show World. All Rights Reserved. Created by <a href="http://www.mediaG.com" title="Web Site Created by Media Genesis" target="_blank">Media Genesis</a>.</p>
<p class="foot_links">
<a href="online-horse-shows" title="Online Horse Shows">Online Horse Shows</a> |
<a href="fantasy-stables" title="Fantasy Stables">Fantasy Stables</a> |
<a href="awards" title="Awards">Awards</a> |
<a href="community" title="Community">Community</a> |
<a href="directory" title="Directory">Directory</a> |
<a href="hsw-registry" title="HSW Registry">HSW Registry</a> |
<a href="hsw-association" title="HSW Association">HSW Association</a> |
<a href="about" title="About HSW">About HSW</a> |
<a href="contact" title="Contact">Contact</a>
</p>
</div>
<p class="foot_net">
<!--<a href="#" title="Like us on Facebook"><img src="images/g-icon-fb.jpg" width="23" height="23" alt="Facebook icon" /> Facebook</a>
<a href="#" title="Follow us on Twitter"><img src="images/g-icon-twitter.jpg" width="23" height="23" alt="Twitter icon" /> Twitter</a>
<a href="#" title="Watch us on You Tube"><img src="images/g-icon-yt.jpg" width="23" height="23" alt="You Tube icon" /> You Tube</a>-->
</p>
</div> <!-- /footer -->
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.forms.js" type="text/javascript"></script>
<script src="js/jquery.swfobject.1-1-1.min.js" type="text/javascript"></script>
<script src="js/hsw.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(
function() {
$('#home_flash_piece').flash({
swf: 'Horse.swf',
width: 1020,
height: 470,
});
}
);
function goToSign() {
window.location = '/signup';
}
</script>
</div> <!-- /main_wrapper -->
</body>
</html>
Well this looks completely different from the approach we are using ... in our setup we explicitly call embedSWF to embed the movie into the application.
swfobject.embedSWF("applic
Here comes the entire html.
swfobject.embedSWF("applic
Here comes the entire html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Cool Tool</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
<style type="text/css">
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow: hidden;
background-color: #001058;
}
.container {
height:100%;
width:100%;
}
</style>
<script type="text/javascript">
var iFrameArr = new Array();
function moveIFrame(x,y,w,h) {
var frameRef=document.getElementById("divFrame");
var loadingRef=document.getElementById("divLoading");
frameRef.style.left = x + "px";
frameRef.style.top = y + "px";
loadingRef.style.left = x + "px";
loadingRef.style.top = y + "px";
var iFrameRef=document.getElementById("myIFrame");
iFrameRef.width=w;
iFrameRef.height=h;
loadingRef.style.width=w + "px";
loadingRef.style.height=h + "px";
loadingRef.style.textAlign= "center";
}
function hideIFrame(){
document.getElementById("divFrame").style.visibility="hidden";
}
function showIFrame(){
document.getElementById("divFrame").style.visibility="visible";
}
function loadIFrame(id, url, loadingStr) {
document.getElementById("divLoading").innerHTML=loadingStr;
document.getElementById("divLoading").style.visibility="visible";
document.getElementById("divFrame").innerHTML = "<iframe id='myIFrame' "
+ "onload='readyIFrame()' src='" + url + "'frameborder='0'></iframe>";
}
function readyIFrame() {
document.getElementById("divLoading").style.visibility="hidden";
}
function doFocus(e) {
e.ref.focus();
}
function getUserAgent() {
return navigator.appName + " " + navigator.appVersion;
}
swfobject.embedSWF("application-1.0.0.swf", "myApp", "100%", "100%", "10.0.0", false, false, {wmode:"opaque"}, false, doFocus);
</script>
</head>
<body onload="document.getElementById('myApp').focus();">
<div class="container" id="myApp">
<div>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player"/></a></p>
</div>
</div>
<div id="divLoading" style="text-align:center; font-family:sans-serif; position:absolute;width:100px; height:100px; left:10px;top:10px;background-color:transparent;z-index:50; visibility:hidden;">
</div>
<div id="divFrame" style="position:absolute;left:10px;top:10px;background-color:transparent;border:0px;visibility:hidden;">
</div>
</body>
</html>
Arg ... don't be confused by the IFrame stuff ... we need this to display an Iframe for some pseudo-embedded Birt Reports ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>UPW Compliance Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
<style type="text/css">
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow: hidden;
background-color: #001058;
}
.container {
height:100%;
width:100%;
}
</style>
<script type="text/javascript">
swfobject.embedSWF("application-${ucg.version}.swf", "myApp", "100%", "100%", "10.0.0", false, false, {wmode:"opaque"}, false, doFocus);
</script>
</head>
<body onload="document.getElementById('myApp').focus();">
<div class="container" id="myApp">
<div>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player"/></a></p>
</div>
</div>
</body>
</html>ASKER
So do you think it could be a problem with the swfobject plugin?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Ebed and Object: http://kb2.adobe.com/cps/127/tn_12701.html
JavaScript: http://code.google.com/p/swfobject/
I would suggest to try swfobject ... we use it and we don't have any problems with it.