Browser scrollbars problem with silverlight application.(Html) - html

I have a simple silverlight application and i need to add the web browser scroll bars for it. (scroll bars not inside my silverlight app)
So I have html:
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
min-height:600px;
min-width:800px;
text-align:center;
}
</style><body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/Infopulse.MobileOptimizer.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="culture" value="ru-ru" />
<param name="uiculture" value="ru-ru" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
And i faced with next problem:
vertical scroll bar works not properly when scroll bar is enabled silverlight application not fits content of page. (Red arrow on screen shows the area without silverlight application) I dont now how to solve this problem.
Width fits normally. Inside silverlight application content set to stretch
Image:
I will be grateful for any information

We had the same problem in IE and Chrome and solved it using Javascript:
Add the following Javascript to your Silverlight test page.
window.onload = resizeObject;
window.onresize = resizeObject;
function resizeObject() {
var height = document.getElementById('silverlightControlHost').offsetHeight;
document.getElementById('silverlightObject').height = height;
}
Give your OBJECT tag the ID 'silverlightObject'.
<object id="silverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
</object>
Test it.

Have you tried putting a overflow:auto; in div #silverlightControlHost style?
and remove the property from html,body

The min-height and min-width values in your #silverlightControlHost css look a suspiciously large when compared to your screen shot.
Have you tried changing their values (or removing them altogether) as a test to see if it affects the display?
If your div is larger than your browser window (which from your comment it appears to be) then that would explain the scroll bars. Make the minimum dimensions of the div smaller (if you can).

I managed to solve it using CSS only, by adding only these CSS line to my site:
body
{
padding:0px;
margin:0px;
overflow:hidden;
}
.silverlightControlHost
{
height:100%;
}
html, body
{
height: 100%
}
And of course assuming that the div holding the silverlight html object has the class assigned 'silverlightControlHost'

Related

How to embed PDF file with responsive width

I'm embedding pdf files using something like this:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.
How do I fix this? I'm supporting IE8 and up.
Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
Simply do this:
<object data="resume.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="resume.pdf">click here to
download the PDF file.</a></p>
</object>
If you're using Bootstrap 3, you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars. For example, to display an 8.5 by 11 PDF, use 130% (11/8.5) plus a little extra (20%).
<div class='embed-responsive' style='padding-bottom:150%'>
<object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>
Here's the Bootstrap CSS:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
I did that mistake once - embedding PDF files in HTML pages. I will suggest that you use a JavaScript library for displaying the content of the PDF. Like https://github.com/mozilla/pdf.js/
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>
Check this link for all PDF Parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
Chrome has its own PDF reader & all parameter don't work on chrome.
Mozilla is worst for handling PDFs.
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>
Seen from a non-PHP guru perspective, this should do exactly what us desired to:
<style>
[name$='pdf'] { width:100%; height: auto;}
</style>

HTML How to change an object's position relative to another Image

For my website I have an image showing a screen. Inside that screen I have moved an embeded youtube video inside that screen. So the embed is on top of the image. I can get the embeded video into the correct place using this:
<div style="position:relative">
<img src="screen.png" />
<div style="position:absolute; left:0px;top:0px;">
<embed src="http://www.youtube.com/embed/qoSEzTpbxP4" width="310" height="210" allowfullscreen=true"></embed>
</div>
</div>
I want the entire thing to be centered, however if I surround this with tags then obviously nothing centers because of the position; the embed stays 544 from the left of the window, not from the left of the image. Is there a way of making the embed move to match the images centered postion?
(NB: I'm aware that I should be using a seperate CSS doc for all styles, but I'm not interested in that right now, I just want to get it working then I might encapsulate styles into a seperate place later)
try this
<div style="margin: 0px auto; text-align: center; width: 500px; position: relative;">
<img src="screen.png">
<div style="position: absolute; z-index: 1; margin: 0px auto; text-align: center;">
<embed width="425" height="349" allowfullscreen="true"" src="http://www.youtube.com/embed/qoSEzTpbxP4">
</div>
</div>
try this... good looking video frame !!!
<object height="360" width="580" id="video_MT6UDIruUkU" type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
<param value="always" name="allowScriptAccess">
<param value="transparent" name="wmode">
<param value="video_id=MT6UDIruUkU&playerapiid=MT6UDIruUkU"
name="flashvars">
<param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
name="movie">
</object>
<div class="controlDiv play"></div>

scrolling a div with youtube video under another div

I have my HTML as below
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Top div (d1) is fixed. while scrolling bottom div(d2) goes behind top div. But youtube video
stay on top.
I want to put it behind top div. Is there a way??
The problem could be that the iframe is holding the flash youtube video on top. It has to do with the z-index of a Flash object.
I've used this solution before with success...
http://manisheriar.com/blog/flash_objects_and_z_index
Put your Flash content into a wrapper div called flash
Add to your object tag
Add wmode="transparent" into the embed tag
Use CSS to set the position and z-index for your div (don't set negative z-index values as it will hide your Flash)
Use this css:
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
Edit: you would have to remove the Iframe. Wich would of bin a good idea in the first place, since iframes suck :p
That's because ActiveX objects tend to sit on top of ALL html elements. You'll have to have to add a "windowless" mode to your
<object>
<param name="wmode" value="window" />
</object>
Here is how I solved it.
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Note ?wmode=transparent" in src of iframe
What I tried when I came across similar situation:
#bridgeDIV
{
position:relative;
}
#riverDIV
{
position:fixed;
overflow-y:scroll;
}
Imagine river flowing under the bridge.

Flash inside an IFRAME, on Safari, breaks position:fixed elements

Updated this as I found it is not necessarily nested IFRAMEs, but merely the presence of Flash within the IFRAMEd document that will break position:fixed (also within the IFRAME).
This is unreal. On Safari (Mac):
Flash
...within an IFRAME (e.g., a modal window, Fancybox, etc.)
...will "break" any "position:fixed" elements also within that IFRAME.
Here's a perfect example: http://jsfiddle.net/6GP2A/ Note that we have:
An IFRAME that contains Flash (YouTube video).
within another IFRAMEd doc (jsfiddle IFRAMEs the result)
Please note that the fact that the video is itself IFRAMEd is a red herring. If the Flash were merely an OBJECT tag sans IFRAME you would run into the same issue.
If you open this in Chrome, it will work as expected. The grey "hello I am fixed" DIV (which is postion:fixed) will stay fixed to the bottom.
In Safari, the grey DIV will slide as you scroll the page.
Arrrrgh! Any advice? Countless searches have been fruitless. Thank you!
I encountered the same problem, but we cannot refuse to frames.
So I investigate this problem and I found some solution (I guess):
When there is a div with nested flash in necessary frame and the style of the div with "position: relative; z-index: -1;" then elements with "position: fixed" in the frame looks fine.
For example
<html>
<head>
<style>
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.footer {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<frameset rows="20,*">
<frame>...</frame>
<frame>
<div class="menu">Header</div>
<!-- Some content here -->
<object width="440px" height="220px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/you_flash.swf" name="movie">
<embed width="440px" height="220px" type="application/x-shockwave-flash" src="http://youdomain.com/you_flash.swf">
</object>
<!-- Some content here -->
<div style="position: relative; z-index:-1;">
<object width="10px" height="10px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/fake_flash.swf" name="movie">
<embed width="10px" height="10px" type="application/x-shockwave-flash" src="http://youdomain.com/fake_flash.swf">
</object>
</div>
<div class="menu">Footer</div>
</frame>
</frameset>
</body>
</html>
One div with a flash is enough. All the other may be as is.
One remark - you wouldn't be able to click on the flash in this div. I wrote a script which will dynamically add the div with empty flash to Safari on Mac.
Hope this is helpful.
May the Force be with you.

Position an absolute element inside absolute. IE

I don't know if this exact question has been asked, if so I am sorry. I can say in my defense that i've checked up about 10 question with a familiar title.
The problem is this:
<div id= "">
<object>
<embed>
<img src="" />
</embed>
</object>
</div>
One of the containers object or embed are positioned absolutely in the body tag. Depending on which browser. For IE 6 7 8 embed is potioned absolutely. For others the object.
Trial and error brought me to this solution and it works very good in all browsers thank god.
Now i am adding a button, which is represented by IMG tag, and i also want to position it absolutely (that is relativly of my movie). In all browsers (except IE 6 7 8 ) this works with the following CSS:
#closeButton
{
position:absolute;
right: 10px;
top: 10px;
z-index:400;
/*background: none;*/
/*display:none;*/
}
Since my object is hidden until some point, the button is also hidden in it/ with it.
Not in IE as you may guess. There, not only the button is visible, but relative of the WINDOW!
Meaning miles away from the movie.
I added a sort of a hack an use JS to hide/show the button the CSS now is:
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
display:none;
}
And it took the right place and hides and shows with the movie. Guess what BUT, it gets tricky to click it=) Because whenever i put the mouse over the button, movie triggers an event onRollOut and they both dissapear =) hilarious
QUESTION: Why does my button position relative of the window? Or maybe the problem is hiding some place else?
PS I am using relative/absolute positioning to emulate crossbrowser fixed positioning so i can't give it up. But the button's behabiour is unacceptable=) And it will be tricky to place it directly inside the movie, i hope it could be done without it. Although it's an easier way. but more work for every movie.
I'll repeat the problem is IE-only, in all other browser the button behaves.
The whole code
http://pastebin.com/fZvWyVsF
http://pastebin.com/zJBhNeVB
Update:
I tried following advice about positioning the wrapper, with some modification. Now I have this code
<div id="bigBanner">
<OBJECT width="100%" height="90">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="opaque" >
<PARAM name="AllowScriptAccess" VALUE="always" >
<EMBED src="big.swf" width="100%" height="90" wmode="opaque" quality="high" AllowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
<noembed></noembed>
</OBJECT>
<div id="closeButton"><img src="close-box.jpg" onClick = "HideAll();" title="Закрыть"/></div>
</div>
Having those styles:
http://pastebin.com/dCULjHva
It shows the button really well. But again it (button) keeps "running away in IE".
Instead of absolutely positioning the object/embed, place it in a wrapper and absolutely position said wrapper. I'd also place the button in the wrapper so you can position it relatively, but still benefit from the absolute positioning of the outer container.
<div id= "wrapper">
<object>
<embed>
<img src="" />
</embed>
</object>
<div id="button">foo</a>
</div>
#wrapper{position: absolute;}
I believe you have to wrap your movie and button (that are being absolutly positioned) in a div that has position:relative; and a width and height (just to be sure)
<div id= "wrap">
<object>
<embed id="movie">
</embed>
</object>
<img src="" id="closeButton" />
</div>
So the CSS then would be
#wrap
{
position:relative;
width:640px;
height:360px;
}
#movie
{
position:absolute;
width:640px;
height:360px;
z-index:100;
top:0;
left:0;
}
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
}
Most positioning problems I find to be because I didn't wrap it in something that is positioned:relative. I hope this helps.
DEMO: http://jsfiddle.net/derno/C8FHR/