I have a simple html file which is meant to display embedded flash where I can write straight from the start, withouth clicking on it earlier.
To my dissapointment, I can't do it in my favorite browser! Problem happen to occur only on Opera. On FF and Chrome works fine.
Here's the code:
(...)
<script type="text/javascript">
function setFocus()
{
<!-- document.getElementById("clock-countdown").tabIndex = -1; -->
document.getElementById("clock-countdown").focus();
}
</script>
</head>
<body onLoad="setFocus();">
<object name="clock-countdown" tabIndex="0" >
<embed id="clock-countdown" wmode="opaque" src="clock-countdown.swf"> </embed>
</object>
</body>
It might help to have an external script insert the object/embed into the DOM, to avoid the click-to-activate state. (Sorry about that.. :-/)
Related
I'm attempting to write a simple html doc to automatically refresh every 5 seconds. However, I want to embed a web page into this. I've tried embed tags, object tags, and iframe tags. However, each time the page refreshes I am automatically redirected to the page that I am trying to embed. My current code version is here:
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 30000);
function reloadIFrame()
{
document.frames["meetframe"].location.reload();
}
</script>
</head>
<body>
<iframe src="http://www.meetme.com/apps/home" name="meetframe"></iframe>
</body>
</html>
Am I using incorrect tags or is there something obvious that I'm missing here?
I have been on about 10 sites similar to W3Schools, however to no avail. Could it be an issue localized to Chrome? I remember doing something similar to this back in school, though using Internet Explorer. Any help or input is much appreciated!
Try this. Using sandbox attribute of an iframe. Source and more information here.
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame()
{
var fr=document.getElementById('meetframe');
if(fr!=null) document.getElementById("container").removeChild(fr);
var iframehtml="<iframe sandbox='allow-same-origin allow-scripts allow-popups allow-forms' src='http://www.meetme.com/apps/home' id='meetframe'></iframe>";
document.getElementById("container").innerHTML=iframehtml;
}
</script>
</head>
<body>
<div id = "container">
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.meetme.com/apps/home" name = "meetframe" id="meetframe"></iframe>
</div>
</body>
</html>
I have page with flash object on it.
something like this:
<html>
<head>
<title>MyFlash</title>
</head>
<body onLoad="onLoadFunc()">
<script type="text/javascript">
function onLoadFunc(){
//
}
</script>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="MyFlash" width="100%" height="100%"
allowScriptAccess="always" >
<param name="movie" value="MyFlash.swf"/>
<EMBED src="MyFlash.swf" style="WIDTH:620;HEIGHT:460" NAME="MyFlash" allowScriptAccess="always" />
</object >
</div>
</body>
When this page shown on tablet browser (samsung galaxy tab and every browser in android market), flash object "blinks" for half seconds, when getting focus. On desktop computer (win7, every browser) it doesn't happens.
I tried listen to events from family "onTouch", but didn't succeed prevent this blinking. Only idea is set focus onLoad on this object, but it doesn't prevent blinking if object lose focus and get it back.
Thank you.
I want to change the value "href" in my html page if someone opens it using IE.
At first I tried with the button, but the final goal is without it.
This is what I have:
<script type="text/javascript">
function myFunction()
{
var oldHTML = document.getElementById('troca').href="http://player.vimeo.com/video/39640718?title=0&byline=0&portrait=0"
var newHTML = document.getElementById('troca').href="http://www.youtube.com/embed/VwjI7ICgcJ0?rel=0";
if (navigator.appName!='Microsoft Internet Explorer')
{
**//what action i have to put in here?**
}
document.getElementById("troca").innerHTML=x;
}
</script>
</head>
<body>
<p>clique, se for internet explorer nao vai trocar nada!</p>
<button onclick="myFunction()">Troca</button>
<br/><br/>
<iframe id="troca" src="http://player.vimeo.com/video/39640718?title=0&byline=0&portrait=0" width="910" height="512" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</body>
Does someone know what I have to put in there for my code changes?
You can use conditional comments if you don't want to use JS:
<!--[if IE]> hello ie user! <![endif]-->
<![if !IE]>
hello non-ie user!
<![endif]>
Here's a fiddle and another link about IE conditional comment syntax.
Simply call document.getElementById('troca').src= again with the new value. Just know that browsers can and do lie about their appName. IE tends to be Microsoft Internet Explorer, but just about everything else identifies as Netscape.
iframes do not have a href, only a src.
I have nav menu html that I would like to be able to open over top of objects underneath it. Fx. An applet or an embedded pdf file. However, floating a div over an embeded element or applet doesnt work in all browsers (need safari, ie8+, firefox, chrome). By doesnt work i mean it does not appear on top.
Looking at various posts i came to the following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
<style>
div:hover {
background-color:red !important;
}
</style>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me to toggle elem (ie)</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" style="z-index:1" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
This works on all browsers now except Safari, is there anyway to make it work on Safari (I'm using 5.1.4 Windows) as well?
I see no mention of Safari on previous posts...
Thanks
I'm still looking for a solution to this myself. So far I have found nothing that works with Safari. I have tried wrapping the embedded PDF in an iframe, in a div, setting it to visibility:hidden, display:none, and/or both on a click event (so the pop-up modal dialog show up on top of the PDF area), etc. Nothing works with Safari. Here's what's really weird though. At work I'm on a Windows 7 PC and when one mouses over the icons of open apps on the taskbar, a preview window comes up with a miniature version of the app in it. When I mouse over my open Safari, the image that comes up displays my fixes working properly! And when I click on the image to get the actual Safari window to come to the forefront ... everything is "broken" again. Now THAT is BIZARRE.
Please contact me if you find a working solution for Safari, and I will do likewise.
Please save my skin.
http://clubentertainment.ie/c/art-perf/embed_example.html
The above link should load in Firefox, doesn't load in anything. Doesn't appear to throw any errors. It even validates.
It is using swfobject, all of the links appear to work.. it just isn't actually working. I would like to blame the flash object but as it is working in Firefox the error must be somewhere else.
Any ideas? Is there an alternative way to embed and still have it working?
Furthermore wmode transparency isn't allowing the html dropdown to appear on top of the flash..
Not sure what happens to the bounty - I discovered the problem. The error was definitely with the server. Moved website, changed nothing else. Works just fine. I would just like to thank every one for their help.
I think it is problem with cross domain policy. Try to use relative path url instead of absolute path. You have absolute path now.
When putting the direct link to your swf it works on ie.
http://clubentertainment.ie/c/art-perf/CU3ER.swf
It can be a cross-site problem.
here the code used in CU3ER for demo http://getcu3er.com/features/
<script type="text/javascript">
var vars = { xml_location : '/inc/cu3er/config_features_overview.xml?v=2'};
var params = { wmode:'transparent' };
var attributes = { id:'CU3ER', name:'CU3ER' }; // give an id to the flash object
swfobject.embedSWF("/CU3ER.swf", "cu3er-container", "300", "390", "9.0.45", "/js/expressInstall.swf", vars, params, attributes );
</script>
EDIT:
by just putting your code in the body not the header I got the swf working in ie
<body >
<script type="text/javascript">
// add your FlashVars
var vars = { xml_location : 'http://clubentertainment.ie/c/art-perf/CU3ER-config.xml' };
// add Flash embedding parameters, etc. wmode, bgcolor...
var params = { bgcolor : '#ffffff' };
// Flash object attributes id and name
var attributes = { id:'CU3ER', name:'CU3ER' };
// dynamic embed of Flash, set the location of expressInstall if needed
swfobject.embedSWF('http://clubentertainment.ie/c/art-perf/CU3ER.swf', "CU3ER", 500, 250, "9.0.45", "http://clubentertainment.ie/c/art-perf/js/expressInstall.swf", vars, params, attributes );
// initialize CU3ER class containing Javascript controls and events for CU3ER
// var CU3ER = new CU3ER("CU3ER");
</script>
<!-- CU3ER content HTML part starts here -->
<div id="CU3ER">
<noscript>
<!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
<p>Click to get Flash Player<br /><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
<p>or try to enable JavaScript and reload the page
</p>
</noscript>
</div>
<!-- CU3ER content HTML part ends here -->
</body>
I see it not working in Safari 5, but working in Firefox 4. Please try to embed using the SWFObject static publishing method so that you can rule out JavaScript as a potential issue:
<!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" lang="en" xml:lang="en">
<head>
<title>CU3ER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/c/art-perf/js/swfobject.js"></script>
<script type="text/javascript" src="/c/art-perf/js/CU3ER.js"></script>
<script type="text/javascript">
swfobject.registerObject("cu3er-container", "9.0.45", "/c/art-perf/js/expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="390" id="cu3er-container" class="CU3ER">
<param name="movie" value="/c/art-perf/CU3ER.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="xml_location=/inc/cu3er/config_features_overview.xml?v=2" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/c/art-perf/CU3ER.swf" width="300" height="390" class="CU3ER">
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="xml_location=/inc/cu3er/config_features_overview.xml?v=2" />
<!--<![endif]-->
<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>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
You may need to adjust your JavaScript to deal with either the 'cu3er-container' ID or the 'CU3ER' class. In this example, SWFObject is only called in if the version of Flash is insufficient so that it can provide the express installer for rapid upgrade, otherwise this does not require JavaScript.
You can always try to embed flash using valid techniques in XHTML. You can find more about this here: http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
As for swfobject, it seems it has some browser dependant issues. I'll try to figure this out later. I'll keep you posted if I come to any conclusions.
EDIT
Try to use relative paths to your swf file. It worked for me.
The SWF is loading just fine for me in Chrome 5.0.375.125, but the slideshow isn't loading. I suspect this may have to do with differences among how different web browsers are handling Javascript errors.
I enabled script debugging for Internet Explorer (I highly recommend doing this) and opened your page, and I immediately got a Javascript error in what appears to be Flash ExternalInterface calls to Javascript functions defined in CU3ER.js. Sometimes browsers decide to stop running scripts altogether when encountering an error, and some just continue. Firefox is in the "just continue" camp. When clicking "ignore" for errors in IE, IE was able to load images but continued to cause Javascript errors.
The Javascript errors appear to be occurring because CU3ER can't find itself in the DOM. This is based on the fact that this Javascript function call is emitted:
__flash__addCallback(document.getElementById(""), "playCU3ER");
That emitted function is defined like this:
function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
}
}
The fact that document.getElementById was called with an empty string may mean that there's some missing flash variable that CU3ER requires. Check the documentation for the SWF and make sure you have what's required when embedding. Or it could be a relative vs. absolute URL issue as the others have mentioned.