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
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>
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.
i'm wrapping a youtube video inside of a div.vidwrapper.
I don't want the video to be visible but just the controls. This works fine in all Browsers but not in IE7. I have no clue what i have to do to position the video inside ov my .vidwrapper div in IE7.
html
<div class="vidwrapper">
<object class="video" width="308" height="100">
<embed src="http://www.youtube.com/watch?v=1QP-SIW6iKY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="308" height="100" wmode="opaque"></embed>
</object>
</div>
css
/*VIDEO*/
.vidwrapper {
width:308px;
height:25px;
overflow:hidden;
position:relative;
}
.video {
bottom:0px;
position:absolute;
}
Here is an example http://jsfiddle.net/3n3C7/ Check this out in any modern browser and then check it out in IE7. I want only the controls to be visible in IE7.
Any idea how i could make that happen?
Try to use _height:21px; this should work.As i am not on Windows so this is probably my guess, but it works most of the time.
What about this?
<iframe title="YouTube video player" width="480" height="25" src="http://www.youtube.com/embed/riW4W66ptqI" frameborder="0" allowfullscreen></iframe>
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.