I am having a problem in positioning the div on the flash object... the css for the div is:
background-color: red;
border: 1px solid;
height: 100px;
left: 200px;
opacity: 0.5;
position: absolute;
top: 234px;
width: 100px;
z-index: 1000;
The position is OK when the opacity is 1... BUT it creates the problem when the opacity is less than 1 then it shows itself on the back of the flash object...
Remember the WMODE of the flash object
is set to TRANSPARENT...
Any solution...?
The problem is solved... Following is the solution... BUT first i want to mention the code which produced the problem...
<object align="" width="100%" height="200" id="charts" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="transparent" name="wmode">
<embed align="" width="100%" height="200" salign="TL" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" swliveconnect="true" name="charts" style="background-color: rgb(230, 230, 230);" bgcolor="#E6E6E6" quality="high" src="/charts.swf?library_path=/charts_library&xml_source=/chart&license=">
</object>
AND now the code which removed the problem... Just add the wmode to the emebed tag also...
<object align="" width="100%" height="200" id="charts" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="transparent" name="wmode">
<embed align="" width="100%" height="200" salign="TL" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" swliveconnect="true" name="charts" style="background-color: rgb(230, 230, 230);" bgcolor="#E6E6E6" quality="high" src="/charts.swf?library_path=/charts_library&xml_source=/chart&license=" wmode="transparent">
</object>
Related
My problem is that I have an object tagged box and an iFrame, this is one example of what I want the code to do
[boz] [box] [box]
But this is what I get.
[box]
[box]
[box]
CSS:
.stream {
display: inline;
}
HTML:
<div class="stream">
<object type="application/x-shockwave-flash"
height="350"
width="390"
id="live_embed_player_flash"
data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=username"
bgcolor="#000000">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=username&auto_play=true&start_volume=25" />
</object>
<a href="http://www.twitch.tv/username"
style="padding:2px 0px 4px;
display:block; width:345px;
font-weight:normal;
font-size:10px;text-decoration:underline;
text-align:center;">Watch live video from username on www.twitch.tv
</a>
<iframe
frameborder="0"
scrolling="no"
id="chat_embed"
src="http://twitch.tv/chat/embed?channel=username&popout_chat=true"
height="350"
width="300">
</iframe>
</div>
Anyone who have a solution?
my comment was not totally understood :)
.stream a,
.stream object,
.stream iframe{
display: inline-block;
vertical-align:middle;
}
http://codepen.io/gc-nomade/pen/LHwfj
Works if you remove the display:block in inline-style of <a> tag .
edit:
to make sure they keep on one line, you may add:
.stream {white-space:nowrap;}
.stream * {white-space:normal;}
The reason why you're getting inconsistent results is because you have defined display: block; for the a element inline.
Remove it, add a class to all the children elements and then use .class {display: inline-block}.
See a sample Jsfiddle.
I am aware that Flash Player is actualy browser plugin finaly rendered on top of html page, however I hope there is a way to somehow send flash player to background or place div on top of flash.
In this sample code I would like "divPanel" to be displayed over the "flashHeader".
<object id="flashHeader" style="position: relative; top: 0px; left: 0px; z-index:3;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="820" height="255" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="my.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="my.swf"
quality="high" bgcolor="#ffffff" width="820" height="255" name="Untitled-1" align="middle"
allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="divPanel" style="width: 100px; height: 100px; background-color: red; position: relative;
top: -50; z-index:4;">
</div>
Change de param wmode to "Opaque". More info
Basically I just want to put new.gif in the top left corner of the row on my table but I want to sit over my flash object (loaditem.swf).
Here is the code I currently have:
<td>
<img src="new.gif">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
height="100" width="100">
<param name="quality" value="high" />
<param name="wmode"/><param name="movie" value="loadItem.swf" />
<embed height="100" pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="high" src="loadItem.swf" type="application/x-shockwave-flash"
menu="false" FlashVars="id=50000" wmode="transparent" width="100"></embed></object>
</td>
<td>Polar Teddy Bear</td>
Also a few images to help see what I need help with:
What I want to achieve:
td {
position: relative;
}
img {
position: absolute;
top: 0; left: 0;
}
I used the following code:
<DIV style="WIDTH: 100%; HEIGHT: 24px" id="_sizing__c_TarPro">
<DIV style="Z-INDEX: 0; POSITION: relative; BACKGROUND: none transparent scroll repeat 0% 0%; HEIGHT: 24px" id="_slot__c_TarPro">
<object id="sl__c_TarPro" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="xxxxxx.xap&xxxxIgnoreNotFound=true"></param>
<param name="onload" value="onSilverlightLoad" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="transparent" />
<param name="windowless" value="true" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="Culture" value="EN" />
<param name="UICulture" value="EN" />
<param name="initParams" value="xxxxxxxxxxxxxxxxxxxxxxx,
dimension=DIMENSION4,
defaultValue=,
dimensionDescription=,
allowMultipleSelection=TRUE,
allowLeafSelection=TRUE,
allowParentSelection=TRUE,
allowReadAccessSelection=TRUE,
attributeFilter=,
symbolSpec=DIM4SET,
targetVariable=_c_TarPro"/>
width=200,
height=24,
<a href="http://go.microsoft.com/fwlink/?LinkID=149156" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none"></img>
</a>
</object>
<input id="_c_TarPro" name="_c_TarPro" style="display:none" value=""/>
</DIV>
</DIV>
Repeat this code for several objects, sometimes these objects are displayed. But sometimes few objects are displayed and others are not displayed after refresh. It is random the number of objects are displayed.
This only happens on IE8 and IE9. (Sorry before I said on IE9 it works well because QA reports that, but I tested on IE9 and see the same issue.)
Anybody has idea?
Thanks,
I doubt this is the cause of your issue, but the width and height that you apply to <param name="initParams"> are declared outside the tag, which might prevent those attributes from being interpreted.
You've got:
<param name="initParams" value="xxxxxxxxxxxxxxxxxxxxxxx,
dimension=DIMENSION4,
defaultValue=,
dimensionDescription=,
allowMultipleSelection=TRUE,
allowLeafSelection=TRUE,
allowParentSelection=TRUE,
allowReadAccessSelection=TRUE,
attributeFilter=,
symbolSpec=DIM4SET,
targetVariable=_c_TarPro"/>
<!-- what are these guys doing outside the tag? -->
width=200,
height=24,
I am having trouble with getting two elements lined up properly.
Here is my HTML:
<input class='pretty-border' id='shareinput' value='afdsdasfdasfadsff' />
<span>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="14"
height="14"
id="clippy" >
<param name="movie" value="/clippy.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param NAME="FlashVars" value="id=clip_text">
<param name="bgcolor" value="#FFFFFF">
<embed src="/clippy.swf"
width="14"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="id=clip_text"
bgcolor="#FFFFFF"
/>
</object>
</span>
And this is my CSS:
input.pretty-border {
float:left;
font-size:1em;
width: 300px;
padding: 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 4px solid #c9deff;
}
Unfortunately, there is a line break between the objects as can be seen in the attached picture. How can I get rid of it?
try giving both elements the same class name then put the float:left for that class, not just the input element.
.sameclass {
float:left;
}
setting display:inline on the object seems to work (tested in Chrome & FF)
span object {display:inline;}