i have a swf file of width 1000 and height 700. i want to show the swf file in full screen of the browser it self (not like videos plying full screen).
i tried like the following
1) get user screen width and height using java script using the functions available (screen.availHeight and screen.availWidth) the screen size is available by using the functions but not applying to the flash object
2) tried giving 100% for both height and width in object code that also not working
can any one help me on this please.
Thanks in advance.
Use swfobject to embed your flash and configure so that it fills 100%.
Check first question on the faq here SWFobject faq
Changing the dimensions on the embed/object HTML should do the trick.
Otherwise, here's some resources:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
http://www.bezzmedia.com/swfspot/tutorials/flash8/True_Fullscreen_Flash_Mode
Use this for your html file:
<!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>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("MySwf.swf", "swf_container", "100%", "100%", "10.0.0");
</script>
</head>
<body>
<div id="swf_container">
</div>
</body>
</html>
And add that swfobject.js file to bin or bin-debug or wherever it needs to go.
All that's really required is that swfobject.embed javascript call, specifying percent sizes and the flash player version.
Hope that helps,
Lance
Related
I have recently read the following article about a DOM-based XSS:
https://www.netsparker.com/blog/web-security/dom-based-cross-site-scripting-vulnerability/
But the examples provided in the article are not working as described. I created the HTML example file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<script>
document.write("<b>Current URL</b> : " + document.baseURI);
</script>
<h1> Welcome on my Example Page </h1>
</body>
</html>
I have put the above file in an application folder of a Web-Application deployed on the JBoss server and I have called the resource from my browser ( I have tried both IE 11 and Firefox). IE 11 shows the resulting HTML content like this:
Current URL : undefined
Welcome on my Example Page
while Firefox shows the resulting HTML content like this:
Current URL : https://localhost:8443/ukvlei/example.html
Welcome on my Example Page
In both cases, I can not force any of the browsers to execute the java script function after the # sign, as described in the article. When I type
https://localhost:8443/ukvlei/example.html#<script>alert(1)</script>
in the address bar of the browser, I get the following HTML content:
under IE 11:
Current URL : undefined
Welcome on my Example Page
under Firefox:
Current URL : https://localhost:8443/ukvlei/example.html#%3Cscript%3Ealert(1)%3C/script%3E
Welcome on my Example Page
What am I doing wrong, so that I cannot execute the java script in any of the browsers?
Thank you!
You haven't run the URI through decodeURIComponent so that the URI syntax is converted back to text.
I want to thank both #scagood and #Quentin, with whose help I got my question answered. So, the answer is:
1.) Apperantly the provided example in the article is out of date, as it is around three years old, so:
2.) Use window.location.href instead of document.baseURI;
3.) To make the example run both under IE and Firefox, decode the URL using decodeURIComponent.
So, the working example HTML file now looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<script>
document.write("<b>Current URL</b> : " + decodeURIComponent(window.location.href));
</script>
<h1> Welcome on my Example Page </h1>
</body>
</html>
Today I faced some really stranger bug. For example: my site opens in the iframe(this iframe automatically fit all document space, width and height) inside this frame I need to get value of $(window).height(); and I get... Very big value(5000-10000px).
Demo link - http://bug-wheight.divshot.io/
Open this in your browser, then resize window one-two-times and look at counter. This value is not correct.
Info: bug detected in chrome, version 41.0.2272.118(mac). Safari on iOS 8.0.1 also returns very big values. Mozilla(ver. 35.0.1) returns small integers(is about 35px, what?). My screen size: 2560 x 1440.
And question: how I can get real window height value?
try add Document type definition in your html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
It will work fine.
I'm fairly new to programing, especially javascript. I have created what I am regarding as an net-art project that refreshes a browser and cycles through a series of images. I want the browser window to automatically resize to the dimensions of the images, 612x612 px. I've tried everything I can think of, everything I've come across on the web, and nothing seems to work with the code I have set up for the refresh and image load. I need assistance.
Let me say that I am normally against such unser unspecified browser resizes or any intrusive script that doesn't allow the user to make that decision on his/her own. But this is an art project and will only exist as part of a gallery on my own website and the user will be warned ahead of time, before clicking the link, that their browser will resize.
What I want is for the browser to resize to the specified dimensions when the page loads, then cycle through the images, via the automatic refresh.
So please, anyone who would be willing to offer their assistance with this I would be very very grateful. I've gotten pretty far I think and this resize is the last little bit of the puzzle. Thank you in advance.
You can see the rough project with no resize here: http://jasonirla.com/bgchange%202/
and the code I'm using:
<!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 name="title" content="Background Change" />
<meta name="description" content="Background Change" />
<title>Everyday Sky</title>
<script type="text/javascript">
// auto refresh window PT 1
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// no. of images in folder is 43
var totalCount = 43;
// change image on refresh
function ChangeIt() {
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpeg';
}
</script>
</head>
<!-- Refresh PT 2 with timer in seconds 5000=5seconds-->
<body onload="JavaScript:timedRefresh(100);">
<script type="text/javascript">
ChangeIt();
</script>
<style type="text/css">
body {
background-repeat: no-repeat;
}
</body>
</html>
It's true, you can only set the size of a browser window by creating a new window with JavaScript but many security settings will block pop-up windows. I think it's bad UI design to do what you're attempting anyway. If you really want something modern and highly functional, Lightbox (as mentioned above) is a great tool as well as the dialog box in the jQuery UI.
Since this for an exhibition, you will choose what browser to use but most new browsers dont let JavaScript resize them anymore. Worth a try, though.
<body onload="JavaScript:timedRefresh(100);resizeTo(500,500);self.moveTo(640,10);>
....
</body>
Cheers.
I copied this code from "www.hotscripts.com", http://www.advancebydesign.com/itemdetails.php?item=15. What it does it just displays a simple window in the middle of the screen.
3 very simple steps are required:
1) create a button <input type="button" onclick='Javascript:my_box.Show();' value="Show Popup Box">
2)include this into head <script language="Javascript" type="text/Javascript" src="jscpopupbox.js"></script>
3) and also this added to the head:
my_box = new jscPopupBox();
my_box.width = 400;
my_box.height = 450;
content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";
content_html+= "background-color:#CCF;clear:both;\"><input type=\"button\" ";
content_html+= "style=\"float:right;height:26px;width:26px;\" value=\"X\" ";
content_html+= "onclick='my_box.Hide();'></div>\n";
content_html+= "<iframe src=\"../license.txt\" width=\"100%\" style=\"";
content_html+= "border:none;padding:0;margin:0;\" height=\"420px\"></iframe>";
my_box.html = content_html;
What I dont get is why the windows on my website appear on the upper left corner, instead in the middle. I haven't touched the source code, and when I try it on a plain HTML page it seems to work. Is my CSS interfering?
I removed all the CSS from my website, and eventually I found out that the problem was not it, but this <!DOCTYPE HTML> on top of the page. What does this has to do with the javascript section? Isn't the declaration part that tells the browser what page it is reading? anyway, when i delete it everything work fine. (btw my page includes HTML5 Video.)
try changing this
content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";
to this
content_html = "<div style=\"padding:0;height:30px;margin:auto;border:none;";
The doctype tells the browser what version of the HTML spec to to use, you may experience differing results with different browsers with certain doctypes.
Some doctypes expect all tags to be closed, do/don't work with self closing tags etc.
Generally this will only affect your HTML, but if your JS is creating HTML then it can be affected indirectly.
This is overkil for creating a popup that is shown or hidden.
Normally just include the DIV that you want to show with a default CSS class as display:none then either add a new class with display:blockor more cleanly use Jquery to toggle the classes.
You might want to try a more sophisticated doctype definition. You'll find info from the W3C here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Also, some of my xhtml pages use an xml definition header at the very top: starting something like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
I have a web application that is dynamically loading PDF files for viewing in the browser.
Currently, it uses "innerHTML" to replace a div with the PDF Object. This works.
But, is there a better way to get the ID of the element and set the "src" or "data" parameter for the Object / Embed and have it instantly load up a new document?
I'm hoping the instance of Adobe Acrobat Reader will stay on the screen, but the new document will load into it.
Here is a JavaScript example of the object:
document.getElementById(`divPDF`).innerHTML = `<OBJECT id='objPDF' DATA="'+strFilename+'" TYPE="application/pdf" TITLE="IMAGING" WIDTH="100%" HEIGHT="100%"></object>`;
Any insight is appreciated.
I am not sure if this will work, as I have not tried this out in my projects.
(Looking at your JS, I believe you are using jQuery. If not, please correct me)
Once you have populated the divPDF with the object you might try the code below:
$("objPDF").attr({
data: "dir/to/newPDF"
});
Again, I am not sure if this will work for your particular needs but if you attach this code to an event handler you can switch out the data of the object.
You could also wrap it in a function to be used over and over again:
function pdfLoad(dirToPDF) {
$("objPDF").attr({
data: dirToPDF
});
}
If the handler for the PDF is acrobat (it doesn't have to be), it exposes a JS interface that is documented here:
http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf
See if you can call openDoc(urlToPdf) on document.getElementById('objPDF') -- even if this works, it only works when Acrobat is being used to handle 'application/pdf'
#lark
A slight correction:
$('#objPDF').attr('data','dirToPDF');
The # specifies the objPDF is an ID and not an element name. Though I still don't know if this will work.
#Tristan
Take a look at the jQuery Media plugin. It mentions support for PDF as well, though I have never used it.
Open a PDF-Link in a external window PDFN with a external PDF-Reader.EXE:
Clicking on the following button:
<FORM action="">
<INPUT type="button" value="PDF file"
onclick="window.open('http://www.Dku-betrieb.eu/Pdfn.html',
'PDFN', 'width=620, height=630')">
</FORM>
opens this frameset Pdfn.html in an external window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<meta http-equiv="refresh" content="12;url=http://www.dku-betrieb.eu/Pdfn1.html">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset>
<frame src="http://www.dku-betrieb.eu/File.pdf" frameborder=0 name="p1">
</frameset>
</HTML>
which refreshes in 12 seconds to the download of the PDF-Reader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset >
<frame src="http://www.dku-betrieb.eu/PDFReader.exe" frameborder=0 name="p2">
</frameset>
</HTML>
showing as result the PDF-file in the external window PDFN.
function pdfLoad(datasrc) {
var x = document.getElementById('objPDF');
x.data = datasrc;
}
This worked for me