Flex 3, iFrame, Scrollbars - apache-flex

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

how to embed the video in such way that the paragraph will continue on top of it after the video is moved down?

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.

hidden part video, from youtube

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>

Setting border-radius of a div containing a .swf file

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.

css: youtube positioning issue with ie7!

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>

need help with css selectors

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.

Resources