I am trying to embed .swf file into html page.
Width and Height of swf is 1024*768.
I specify 'width' and 'height' as 100%.
<div style="width:100%;height:100%;">
<object style="width:100%;height:100%;">
<embed src="frontend/flash.swf" width="100%" height="100%" >
</object>
</div>
It embeds swf with 1350px*150px for some reason, not 100% of the height of the file.
If I specify dimensions in pixels for tag embed, it will work.
But I am very curious, why it does not work with %.
Thank, any help will be appreciated.
You can try swfobject: https://github.com/swfobject/swfobject.
It`s very simple to add Flash and Flashvars.
Here with 100%:
http://learnswfobject.com/advanced-topics/100-width-and-height-in-browser/
swfobject.embedSWF("test.swf", "flashContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
You should lookup the tag in the html docs on the Mozilla Developer Network. It specifies that the embed tag has attribute height that is the displayed height in CSS pixels. Since 100% is not a valid pixel value it will not recognize that value.
Related
I have a PDF file embed inside my web page. My HTML is:
<embed src="http://znaci.net/zb/4_1_19.pdf">
My CSS is:
embed {
width:500px;
height:600px;
}
Now I have a situation like this:
But I need this:
Is there a way to center embed PDF content?
You can control the height and width via CSS like such:
<style>
embed {
width: 100%;
height: 500px;
}
</style>
You also control it via attributes in the embed tag like such:
<embed src="http://znaci.net/zb/4_1_19.pdf" width="640" height="480">
As for the zoom, you can achieve this by doing the following (note the #zoom=75):
<embed src="http://znaci.net/zb/4_1_19.pdf#zoom=75">
This syntax worked in IE11 and FF32, but not in Chrome 38.
Edit: Answer to the centering part of the question:
Centering the PDF only fails in Chrome. A work around for this can be to replace the embed tag with an iFrame like such (though I don't think this is the best practice).
<iframe src="http://znaci.net/zb/4_1_19.pdf"></iframe>
Alternatively, you can look at some thing like pdf.js.
This code in the header class for sizing the banner.
I want to resize it according to the browser that the viewer is using. How can this be done?
<div class="header">
<object type="application/x-shockwave-flash"
id="ac25c2188119648f18d4e7df823b71eac"
data="http://imstore.bet365affiliates.com/365_178348-618-214-2-149-1-57326.aspx"
width="1000"
height="200"
style="padding:0px 0px 0px 173px">
There is no way to know the browsers size in PHP as the size is determined client side and PHP is run server side.
You could use javascript to change the site once its fully loaded, or you could just enter the width and height as 100% so that it automatically streched.
If you want to use javascript you could use plain old javascript, but a lot of different browsers use different methods and have different results on the browser window size.
if you are using jQuery it is as simple as:
<script>
$(function() {
//this make sure it starts when its loaded
$('div.header > object').width($('body').width());
$('div.header > object').height($('body').height());
})
</script>
Atlast there is the fullscreen option for flash, but thats a topic on its own. Check Exploring full-screen mode in Flash Player
My page has some swf object on html.
DespiteI'd like to swf go to the bottom layer
the swf go to the top layer
Any solutions?
Can I swap the priolities a swf with a html element using z-index?
want to solve a variety of environments(IE6,Firefox,Chrome...)
You should use both z-index and wmode:
<param name="wmode" value="transparent"> and in the embed tag style="z-index: -1"
you should set window mode to transparent. Have a look here: http://kb2.adobe.com/cps/142/tn_14201.html
I am having issues embedding SVG into a webpage. I have found the simplest method to just use an image tag. For example:
<img src="my_graphic.svg" height="100"/>
Works in web-kit. I do not need to explicitly set the width and the browser will maintain the aspect ratio. Very nice!
This doesn't work in Firefox though - it's not cross browser. So how about embedding as an object?
<object type="image/svg+xml"
height="100"
width="554"
data="my_graphic.svgz">
<span/></object>
This time I'm using svgz and the mime type has been added and voila! It works in both firefox and webkit. However, in webkit I need to explicitly state the width or we get some nasty containing element scrollbars. But what's worse is the background is no longer transparent. It's rendered with a white background.
So one method works perfectly in webkit. The other works perfectly in mozilla. What can I do to get it working reliably in both?
Interested in a demonstration of this? See my link for reference:
http://sumocreations.com/demo/svg/new_dttg.html
I don't believe it's currently possible for the <object> to have a transparent background in WebKit. There's a bug filed for this problem. I don't know of a workaround.
The only work around I found was by detecting whether an img utilizing an SVG source is rendered properly. I do this by only specifying one dimension. Either the height or the width but not both. I can then test if the alternate dimension is greater than zero. If it is I hide the the object. If not I hide the image. Here is how to do it with jQuery:
<script type="text/javascript">
$(document).ready( function() {
if($('img.logo').width() < 1) {
$('img.logo').hide(); $('object.logo').show();
} else {
$('img.logo').show(); $('object.logo').hide();
}
});
</script>
See the demonstration: http://sumocreations.com/demo/svg/new_dttg.html
Place an <img> tag inside your object.
The object will render in firefox, and webkit should show the <img> tag.
Edit:
Also, what's up with the self closed span tag? <span> does not support self closing.
I have an .swf file (a flash animation) that is too big and unfortunately we do not have the source code (the .fla file) anymore. I need to display it in a div, and want to hide part of it.
Any idea?
Thank you.
<div style="width:100px; height:100px; overflow:hidden">
<embed src="http://www.metacafe.com/fplayer/4133817/world_breakdancing.swf" width="400" height="345" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_4133817"></embed>
</div>
Please note that wmode="transparent" is really important!
If the movie was compiled in wmode=transparent, it should be possible to give the div a fixed width and/or height, and apply overflow: hidden.
According to this, it will work in all current major browsers. In unsupported browsers, the full movie will be above all other page elements.
If the movie was not built transparent, I think there is no way to do this.