this evening I worked very hard trying to understand html positions and jquery animation a I did an HTML page as follows:
<html>
<head>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-image: url(Cartoon_Landscape2.jpg);
}
</style>
<script type="text/javascript">
function moveDIV ( obj, x, y ) {
var element = document.getElementById(obj);
element.style.left=x;
element.style.top=y;
}
var t;
function anim1()
{
moveDIV("mariposa", screen.availWidth, screen.availHeight);
$("#mariposa").animate({left: '-84', top: '-58'}, 10000);
t=setTimeout("anim1()",22000);
//moveDIV("mariposa2", '-84', screen.availHeight);
//$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);
}
function anim2()
{
moveDIV("mariposa2", '-84', screen.availHeight);
$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);
t=setTimeout("anim2()",22000);
}
function callfunctions()
{
moveDIV("mariposa2", '-84', screen.availHeight);
anim1();
var b=setTimeout("anim2()",11000);
}
</script>
</head>
<body onLoad="javascript:callfunctions();" >
<div id="mariposa" style="position:fixed; overflow: hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa" width="84" height="58" align="top">
<param name=movie value="mariposa.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<embed src="mariposa.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa">
</embed>
</object>
</div>
<div id="mariposa2" style="position:fixed; overflow: hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa2" width="-84" height="58" align="top">
<param name=movie value="mariposa2.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<embed src="mariposa2.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa2">
</embed>
</object>
</div>
</body>
</html>
So the page shows a flash animation with diagonal motion from the left and from the right of screen.
And was perfect for me, and works nice on firefox, opera, safari , chome, but not on internet explorer 8!!, what can I do to fix this problem? =(
P.S. if I use absolute position in both DIVs, the animation works on internet explorer but unnecessary scrollbars are created.
Thanks
I see few things that may lead to various problems in your example code:
1. JavaScript
First of all, you are barely using any jQuery at all. Since you are already using jQuery then you might as well use it to its full extend and save yourself a lot of headaches. For example,
instead of implementing your own moveDIV() function you can use:
$("#id").css({left: 10, top: 10});
almost exactly how you use .animate() in your code. You can also use offset() for that depending what is better for you:
$("#id").offset({left: 10, top: 10});
Read about .offset(), .css() and
.animate() in the jQuery API docs.
By the way, instead of using:
setTimeout("anim1()",22000);
it's better to use:
setTimeout(anim1, 22000);
It does the same thing but is more efficient.
2. CSS
You may try to experiment with position: absolute or position: relative where you have position: fixed.
3. HTML
You have no doctype and the IE may try to render your page in quirks mode. To use standards mode add a doctype at the very beginning of your HTML: <!doctype html>
In fact IE8 it may even use the IE7 rendering engine if it thinks it would be better for your website. If you want to make sure that you are always rendered by the best rendering engine in IE you should also add: <meta http-equiv="X-UA-Compatible" content="IE=Edge">
Also, when you make sure that your website works on IE8 then you can also make it use the Google Chrome Frame plugin if it is available: <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
All in all, the beginning of your HTML should look something like this
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
... and the rest of your HTML
Those are just the main things I see in your code that you may consider changing. I don't know if doing it solves your problem but even if it doesn't it may free you from having to deal with other problems later.
Related
My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.
There are several ways to embed PDF in HTML.
One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="myfile.pdf">click here to
download the PDF file.</a></p>
</object>
Or you could use the google drive viewer to display any PDF (and quite a few more file types):
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Using the drive viewer your visitors don't need any additional software/plugin to view the files.
You can then adjust the height of the PDF container with css. i.e
#yourcontainer { height: 100vh; }
None of the above answers worked for me.
The following worked across every platform I needed it to (ie, I didn't test IE).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
</body>
</html>
You must to set width\height a container
<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>
Look example
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Make sure you use <object> - EMBED vs. OBJECT
<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>
I like the functionality that comes with the html objects for PDFs as opposed to some libraries like PDF.js for light projects. This is definitely not the best answer but I'm currently using JQuery with Bootstrap in an Angular 6 app so I modify height after the the view loads.
I set
<object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>
then in my component I adjust the height based on the ratio of the width to height.
For example, an 8 x 11.5 document would give the height 1.4375 x the width.
ngAfterViewInit(): void {
var width = $("#pdf").width();
$("#pdf").prop("height", width * 1.4375 + "px");
}
Saw this post and figured I would post. Hope this helps and please correct me if you think this is bad coding practices.
Have a problem that's been bugging me now for the past two days :(
I have set up an HTML web page that contains an iFrame that loads a frameset document. Yes I know, frames are ancient tech and should not be used, but that is the output produced from Adobe's RoboHelp tool so I need to deal with it.
I have attempted to add variations of JavaScript code that will resize the iFrame's height to fit the remaining height of the browser window. It works fine in Chrome, Safari, Firefox, etc. , but like most organizations the client has standardized to ancient IE (Internet Explorer 8) and it does not look like they will move forward anytime soon.
An image of the current problem is conveyed here:
Simply put, I cannot get the iFrame to occupy the space remaining between the banner and the footer in Internet Explorer (8). I have used both CSS styling and variations of JavaScript code to "read" (I guess) the height of the "frameset(?)" document in order to pass the height to the innerframe for resizing it. Most of the scripts I have seen rely on the height of the document inside the iFrame, but what happens when you have a frameset?
Here is the code of the main page containing the iFrame:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
width:100%;
height:100%
}
</style>
<script language="javascript" type="text/javascript">
function autoHeight(e)
{
alert(e);
if ( e.contentDocument ) {
e.height = e.contentDocument.body.offsetHeight + 35;
}
else {
e.height = e.contentWindow.document.body.scrollHeight + 35;
alert("e.contentWindow = "+ e.contentWindow);
}
}
this.onload = function(e) {
// or add it to the onload attribute of the body tag...
var ifr = document.getElementById('helpFrame');
autoHeight(ifr);
}
</script>
</head>
<body>
<!--banner code here, not too important -->
<iframe frameborder="0" id="helpFrame" align="bottom" src="/RCMP/prod/index.htm" width="100%" height="100%" scrolling="no" style="height:100%;">
Your browser does not support iframes.
</iframe>
<!-- added some paragraphs to actually "push" the footer down for now. -->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!--footer code here-->
</body>
</html>
And this is the code for the frameset (contained in the iFrame, from Adobe's RoboHelp published output). A lot of the javascript can be ignored, I believe the focus is on the frameset)
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<title>Orientation Guide To E-Division Headquarters</title>
<meta name="generator" content="Adobe RoboHelp 9" />
<meta name="description" content="WebHelp 5.50" />
</head>
<frameset cols="100%,*" frameborder=no border=0>
<frame src="whnjs.htm">
<frame src="whskin_blank.htm" noresize>
</frameset><noframes></noframes>
</html>
So the challenge is to get that iFrame to go full height (down to the footer) in IE! Any suggestions / solutions would be appreciated. I don't really want to use jQuery if I don't have to - JavaScript and CSS would be nice.
thanks!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flash video refresh</title>
</head>
<body>
<div id="PlayerZone"><embed height="496" width="580" flashvars="flvid=19742822&createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div>
<a onclick="return test();" id="test">click me popup a div,and hide the scrollbar</a>
</body>
the code upon：
for example,when I click the a#test button,popup a div,it's no problem,but I want to hide the scrollbar while the div popup.
I used $('html').css('overflow','hidden') in test() function,in most browsers can perform it except FF(I used FF3.6) it will refresh the flash.
https://bugzilla.mozilla.org/show_bug.cgi?id=90268
(overflow/display/position cause this bug)
how to fix it?thank you
Hi thanks for asking these kind of question.
Better you use in a updated firefox version and try. if not
please refer this link this will help u i think. use local shared objects.
http://www.actionscript.org/forums/showthread.php3?t=79009
http://flash.bigresource.com/How-to-protect-Flash-Videos-from-Being-Downloaded-KV9j8rfkn.html
http://whatisgon.wordpress.com/2010/03/17/poking-around-in-the-firefox-cache-and-protecting-your-privacy-from-flash/
Like most people I use SWFObject to embed Flash (swf) files to my Web projects.
As you know SWFObject offers 2 ways to embed Flash: Static publishing and Dynamic publishing.
Static publishing uses regular markup to embed the file to the document and also do checks with JavaScript that you can't make with regular markup alone. This is good as if you have customers that can't have JavaScript turned on (search engines, some portable devices...), the file will still show up (if they have the correct Flash plug-in installed). But if you have people on legacy/unpatched Internet Explorer (between April 2006 and April 2008) they will have the dreaded "click to activate" to interact with the Flash.
Dynamic publishing uses JavaScript to embed the Flash. This will get rid of the "click to activate" feature on old IE but if JavaScript is off the Flash will not be there at all.
Both methods have its advantages and inconvenients. In an utopic world we would all use the dynamic publishing method, but we (or at least some of us like me) are stuck with customers using really old systems with IE 6 (they would like to upgrade but they can't because of badly designed software that would cost 10K+$ to upgrade). I need to support legacy IE and want to get rid of the "click to activate" feature while supporting people with JavaScript off.
What about combining static and dynamic publishing methods? What about something like:
<!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>SWFObject 2 static+dynamic publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div id="myContent">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<param name="movie" value="test.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
I showed that to an integrator and he told me I should use <object> and <embed> tags...
What would be the ultimate way to embed Flash to Web projects? A solution that:
Will work with JavaScript off (Flash embedded in alternate content)
Will pass the W3C validator
Will remove the "click to activate" on legacy/unpatched IE
Will use the Flash detection/auto-install of SWFObject
EDIT: Added bounty. Please, I don't want to see answers like "don't bother no one have JavaScript off nowdays" or "if javascript is off most likely Flash will be off too".
EDIT 2: The answer I'm looking for is the best way to embed Flash statically (with regular HTML tags). Over that, I will add dynamic publishing. Something like this that will work in all major browsers since IE 6 and that will pass W3C validation.
<head>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
var flashVars = {};
var params = {};
params.allowScriptAccess = "always";
params.allowFullScreen = false;
params.bgcolor = "#1a1a1a";
params.wmode = "opaque";
var atts = {};
atts.id = "my-swf";
swfobject.embedSWF("my.swf", "my-swfobject", "100%", "100%", "10.1.0", "playerProductInstall.swf", flashVars, params, atts);
</script>
</head>
<body>
<div id="my-swfobject">
<!-- Any <object></object>, <embed></embed>, and everything else here will be rendered for users without JavaScript. If JavaScript is on, SWFObject will destroy div#my-swfobject and replace it with object#my-swf. -->
</div>
</body>
Let me know if this is what you're looking for. I can elaborate more if needed. You might also consider suggesting that your IE6 slaves install Google Chrome Frame: http://code.google.com/chrome/chromeframe/
Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="swfobject.js"> </script>
<script type="text/javascript">
swfobject.embedSWF('test.swf', 'myFlash', '320', '240', '9.0.0', '/swfobject/expressInstall.swf', 0, 0, 0);
</script>
</head>
<body>
<div>
<object id="myFlash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
<param name="movie" value="test.swf">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="320" height="240">
<!--<![endif]-->
<p>Version ???</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
I combine the static and dynamic methods of SWFObject
The static part is using the nested-objects method
What I've done in the past is statically put my flash content in a div (using both object and embed tags), and then have SWFObject overwrite the contents of that div when it loads. This will be as close to what you want to do as you can get.
Go with dynamic publishing. If the user has javascript turned off, give up. They won't want Flash to run either.
Is there a way to get your clients to install another browser (like Firefox) alongside their legacy one, and use IE6 for the legacy app and FF for yours?
I would take a cue from sites such as YouTube that allow embedding of Flash. Not sure if this will work for non "movie" types.
From YouTube:
<object width="[width]" height="[height]">
<param name="movie" value="[Path to SWF]"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="[Path to SWF]" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="[width]" height="[height]"></embed>
</object>
the only way i see, is doing something like this:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>test</title>
</head>
<body>
<p>
<object width="160" height="112" data="movie.swf" type="application/x-shockwave-flash">
<param name="movie" value="movie.swf" />
</object>
</p>
</body>
</html>
there is no better option i think. this will work in IE , Mozilla and Webkit browsers and is xhtml valid. but there is no flash installer and no replacement.
We have a series of eLearning courses that were developed with Lectora and published for web. Unfortunately, the Lectora source files are lost. All we have are the index file, attendant .js files, and supporting documentation files.
The courses load ready when the index.html files are executed over the network, but not when they are copied to a local machine. There is no error. The window simply says "Loading , please wait".
Is there something I can change in the .html or .js files to enable local loading?
CODE FOR INDEX.HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--GENERATED BY: Lectora Professional Publishing Suite v.9.3(6345) (http://www.trivantis.com) -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
<script language = "JavaScript" src="trivantis.js"></script>
<script language = "JavaScript" src="trivantis-cookie.js"></script>
<script language = "JavaScript">
<!--
if( is.ieMac )
document.write( '<font size=4>(Note: Internet Explorer for the Macintosh does not support JavaScript access to applets/AJAX. This is a browser limitation, not a shortcoming of the course material. For this reason, Macintosh IE 5 users cannot access course materials incorporating JavaScript/AJAX functions. Please try accessing this course material from a non-Macintosh machine or a non-IE browser on the Macintosh.</font><br /><br />' )
else if( !is.min )
document.write( 'Your browser does not support dynamic html. Please download a current version of either Microsoft Internet Explorer or Mozilla Firefox and try visiting our site again. Thank You.<br /><br />' )
var winW = screen.width
var winH = screen.height
function findWH() {
winW = (is.ns)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight
}
function ReFlow() {
}
onload = init
function init() {
findWH()
}
// -->
</script>
</head>
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame name="titlemgrframe" src="titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame name="contentframe" src="content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>
CODE FOR JS FILE
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
<script language = "JavaScript" src="trivantis.js"></script>
<script language = "JavaScript" src="trivantis-cookie.js"></script>
<script language = "JavaScript">
<!--
if( is.ieMac )
document.write( '<font size=4>(Note: Internet Explorer for the Macintosh does not support JavaScript access to applets/AJAX. This is a browser limitation, not a shortcoming of the course material. For this reason, Macintosh IE 5 users cannot access course materials incorporating JavaScript/AJAX functions. Please try accessing this course material from a non-Macintosh machine or a non-IE browser on the Macintosh.</font><br /><br />' )
else if( !is.min )
document.write( 'Your browser does not support dynamic html. Please download a current version of either Microsoft Internet Explorer or Mozilla Firefox and try visiting our site again. Thank You.<br /><br />' )
var winW = screen.width
var winH = screen.height
function findWH() {
winW = (is.ns)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight
}
function ReFlow() {
}
onload = init
function init() {
findWH()
}
// -->
</script>
</head>
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame name="titlemgrframe" src="titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame name="contentframe" src="content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>
This is a hard one to fully answer since it could be a lot of things. It's very common for browsers to refuse to load local content as it can be malicious.
For a start I would point out that the two code samples you have posted are practically identical and are a mix of HTML and JavaScript, they're also incomplete. The HTML references two other libraries which you have not posted called trivantis.js and trivantis-cookie.js.
Assuming that you really do have all of the right files in absolutely the correct structure saved locally...
...I'll take a punt on using The Mark of the Web to tell IE to forget it's security concerns and load local content anyway.
So your HTML would look like this (notice the second line):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0016)http://localhost -->
<html>
<!--GENERATED BY: Lectora Professional Publishing Suite v.9.3(6345) (http://www.trivantis.com) -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
Failing this there are a few other things that might help:
IE > Tools > Internet Options > Advanced > Security > place a check in Allow active content to run in files on My Computer
Add localhost to your Trusted Sites
Disable any addons your have for IE
Hopefully one of these works. Good luck!