When we set border-radius of a div, and then set the code background: url(image.png) for the div, then even if the image is greater than the div, the div gets a curved corner. This is because the image is set as background.
But now I face a problem when I want to contain a .swf file inside the div.
Here's the code of the div along with the .swf file contained as object within itself:
<div id="video_container_1" style="height:300px; border: thick; -moz-border-radius: 5px; border-color:#000000">
<object classid="vid:1" codebase="FlashVideos/bride.swf" width="250px" height="300px" style="-moz-border-radius: 5px; border-color:#000000">
<param name="FlashVideos/bride.swf" />
<param name="quality" value="high" />
<embed src="FlashVideos/bride.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="250" height="300" wmode="transparent">
</embed>
</object>
</div>
Here, I have already set the border-radius as 5 px. I am testing it on Mozilla, that's why I have used -moz-border-radius. But the div isn't getting the curved corner. However if I remove the whole code under <object> tag which contains the .swf filecoding, then the div is having curved corner.
Maybe there is a silly thing I'm not getting. How to get the curved corners?
Try removing the height attribute and adding padding and see what results that gives.
Example:
<div id="video_container_1" style="padding: 3px; border: thick; -moz-border-radius: 5px; border-color:#000000">
<object classid="vid:1" codebase="FlashVideos/bride.swf" width="250px" height="300px" style="-moz-border-radius: 5px; border-color:#000000">
<param name="FlashVideos/bride.swf" />
<param name="quality" value="high" />
<embed src="FlashVideos/bride.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="250" height="300" wmode="transparent">
</embed>
</object>
</div>
Try adding/modding this into your style attribute for the container div:
overflow: hidden; height: 300px; width: 250px; border: 5px solid #000;
Grant the container with a padding corresponds to the border-radius, like so:
<div id="video_container_1" style="-moz-border-radius: 5px; padding: 3px;">
<!-- ... -->
</div>
It worked for me with jw5 player just by putting border-radius specifications on the container div, adjusting height and width as necessary, and specifying overflow:hidden;
I did not need to use any padding.
Related
Does anyone know how to embed a video (which is floated to the right of the screen) in a such way, that the paragraph will continue on top of it after it is moved down? 1
.video {
border-image:url(box.png) 20 20 round;
border-width: 20px;
float:right;
margin-top: 100px;
margin-bottom: 0 px;
<span class="video"><object type="application/x-shockwave-flash" style="width:420px; height:240px;" data="http://www.youtube.com/v/zOETaUx3c4o?color2=FBE9EC&version=3">
<param name="movie" value="http://www.youtube.com/v/zOETaUx3c4o?color2=FBE9EC&version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object><br/><div style="text-align: center; font-size: 12px; font-family: Lucida Sans Unicode; ">Flag Alphabet<br/>by LearnFree2007</div></div>
</span>
Have you tried setting wmode="transparent" or wmode="opaque" as an attribute in the object tag? Videos such as those from Youtube end up always on top because they default to wmode="window" when the attribute is not set.
I have video from youtube, i want hidden some place from this video, this is my code
<div style="width: 200px; height: 315px; overflow: hidden">
<iframe width="560" height="315" src="http://www.youtube.com/embed/AMoLwrarElA" frameborder="0" allowfullscreen></iframe>
</div>
this works good in all browsers, except safari, in safari is visible all video, someone know why?
Try adding a semi-colon at the end of hidden:
overflow:hidden;
Also try adding:
clear:both;
To your div style.
As the image shows, the way to do this is:
body
div (position = absolute, top = iframe.top, right = iframe.right, width = 350px)
iframe (position = absolute or relative, width = 750px)
here absolute positioned div is the red striped area
You can use jquery to get iframes left top right bottom:
<body>
<div class="cover"></div>
<iframe/>
<script>
$(function(){
var top = iframe.top
var right = iframe.right
$("cover")[0].top = top;
$("cover")[0].right = right;
//..
});
</script>
</body>
Sorry I have less time, cannot explain more, if this does not work I will try again
this code decided this problem
<div style="width: 200px; height: 315px; overflow: hidden;">
<object width="560" height="315" style="float:left; overflow: hidden;">
<param name="movie" value="http://www.youtube.com/v/AMoLwrarElA&hl=ru_RU&fs=1&rel=0&border=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="opaque"/>
<embed src="http://www.youtube.com/v/AMoLwrarElA&hl=ru_RU&fs=1&rel=0&border=0" wmode="opaque" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="315"/>
</object>
</div>
I'm using an iFrame in a Flex 3 project. The problem is that if the user opens my site in a small browser window, they don't get scrollbars. How can I solve this problem? Is there a way to force the browser to put up scrollbars?
If I set the main app to horizontalScrollPolicy="on" verticalScrollPolicy="on" or to "auto", then as you scroll down, the iFrame is stuck to the top of the browser window and obscures the content.
In the main app:
In the Application tag, I've got:
horizontalScrollPolicy="off" verticalScrollPolicy="off"
My iFrame looks like:
<flexiframe:IFrame id="myiFrame" source="http://www.mysite.com/myStuff.html" x="315" y="20" width="498" height="65" scrollPolicy="off" />
In the HTML Template, I've put a div around the swf and added css:
<style type="text/css">
#blockwrapper{
display: block;
margin:0;
padding:0;
width: 980px;
height: 800px;
}
</style>
<div id="blockwrapper">
<noscript>
<object classid="clsid:D26CDA6E-AE6D-11cf-96B8-444553540000"
id="${application}" width="${width}" height="${height}"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="${swf}.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
width="${width}" height="${height}" name="${application}" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</noscript>
</div>
Any suggestions?
Thank you.
I've got it working. Below is what I had to do:
A)
<style>
body { margin: 0px; overflow:scroll }
</style>
<style type="text/css">
#blockwrapper{
display: block;
margin:0;
padding:0;
width: 960px;
height: 800px;
}
</style>
B) I set the flex app's width and height in the Application tag to the same as that in the div.
Thank you.
-Laxmidi
Does anyone know if it is possible to display a group of inline images horizontally in a row (or any element at that), allowing the group to extend beyond the right edge of the screen, without triggering the horizontal scrollbar?
A quick example:
<div class="page_container" style="width:900px; position:relative">
<div class="image_set">
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
...etc
</div>
</div>
The catch is that the image_set div that I would like to extend to, or beyond the right edge of the browser, is contained in a 900px div. The image_set needs to extend outside of its container, and to, or past the edge of the browser window.. without triggering a scrollbar.
The 900px wide page_container element needs to interact normally with the browser window (triggering scrollbars), and the element must contain the images. However, the images must be allowed to flow off the right edge of the browser window (visually)
So I'm wondering if there is a way to accomplish this with css only, without javascript?
Just make the container div have a fixed width and then give it the overflow: hidden proprty. So something like:
<div class="image_set" style="width:100%; overflow: hidden;">
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
</div>
By default overflow is auto which will apply scroll bars when needed thus setting it to hidden will mean that anything which does break the container will just disappear without needing scrollbars, and since for you that is the edge of the window, the effect will be complete.
In order to have the containing div cover the width of the entire page, you must first alter its layout model from block (which determines its width via its parent div) to absolute or fixed.
With the property position: absolute a div is positioned relative to its first parent with a relative position, this is usually the window itself, thus you can make the container div for the filmstrip use this property:
<div class="image_set" style="position: absolute; width:100%; overflow: hidden;">
</div>
So basically what you want to prevent is a double scroll bar?
try:
<div class="image_set" style="width:100%;position: relative;">
Here ya go: http://jsfiddle.net/Vppxp/
CSS
#filmstrip {
border-bottom: solid 5px rgb(220,220,220);
border-top: solid 5px rgb(220,220,220);
overflow-x: auto;
padding: 5px 0;
white-space: nowrap;
}
#filmstrip .cell {
background: rgb(220,220,220);
display: inline-block;
height: 100px;
width: 100px;
}
#filmstrip .cell + .cell {
margin-left: 1px;
}
HTML
<div id="filmstrip">
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>
I have a menu like so:
<div class="header">
<ul class="nav">
<li><a class="home" href="four80eastfan_home.php"><img src="Images/home_button.png"></a></li>
<li><a class="albums"><img src="Images/albums_button.png"></a>
<ul>
<li><a class="Album" href="four80eastfan_thealbum.php"><img src="Images/the_album.png"></a></li>
<li><a class="Nocturnal" href="#"><img src="Images/nocturnal.png"></a></li>
<li><a class="Round3" href="four80eastfan_round3.php"><img src="Images/round3.png"></a></li>
<li><a class="EnRoute" href="#"><img src="Images/en_route.png"></a></li>
<li><a class="RollOn" href="#"><img src="Images/roll_on.png"></a></li>
</ul>
</li>
<li><a class="band"><img src="Images/band_button.png"></a></li>
<li><a class="members"><img src="Images/members_button.png"></a></li>
</ul>
And when I hover over the "Albums" part, the drop-down menu is covered by the content beneath it, which is this:
<div class="content_text">
<object width="100%" height="100%">
<param name="movie" value="web/simpleviewer.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="bgcolor" value="ffffff"></param>
<embed src="web/simpleviewer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" bgcolor="ffffff"></embed>
</object>
</div>
relevant CSS:
.content_text{
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
margin-top: 5%;
background-color: #fff;
border: solid 5px;
z-index: -1;
position: relative;
}
.header{
background-color: #000;
position: relative;
z-index: 1;
}
I've been trying different things with the z-index property to make the drop-down appear above this content, to no avail. Could it be the flash app that's causing the problem? Please help a noob out.
Cheers,
Matt
There's no way you can place html elements over flash... sorry :)
Had that problem, I've tried all scripts and code snippets or "custom made" solutions, I finally, I've read the flash specs # Adobe, where there techs specifically say that can't be done :)
EDITED:
Well, seems like sdolan and AJ where "more or less" right, using the:
code.google.com/p/swfobject code to embed flash, there is a parameter for it:
so.addParam("wmode", "opaque");
that makes what Matt want possible... (specific code, for specific problem) :)
I assume you're using MSIE as your target browser? By default, embedded items will appear above all other items (this is a pretty common annoyance). One option is to hide the offending elements - or just don't use them!
I believe this is a problem with Flash's window mode always being on top of everything. No amount of z-indexing is going to fix this. If I remember correctly, adding the following code should fix it (though it's been a long time since I dealt with this.)
<div class="content_text">
<object width="100%" height="100%">
<param name="movie" value="web/simpleviewer.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="bgcolor" value="ffffff"></param>
<param name="wmode" value="transparent"></param>
<embed src="web/simpleviewer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" bgcolor="ffffff" wmode="transparent"></embed>
</object>
</div>
Mostly a shot in the dark, so I apologize if it doesn't work.