I'm working on a project where I need to make a Flex application that fills the entire browser window (note that I mean that the toolbars should be visible and all that even if I say fullscreen).
To develop the SWF I'm using FlashDevelop (for the first time) and I'm stuck. When I build the project it displays no error and a file website.swf is generated. When I browse to this file with Firefox, it displays what I want and in fullscreen. However when I go to the generated index.html I get a white horizontal bar at the top of my screen (again the browser window).
I've looked around a bit on the internet and found several people suggesting that the CSS should include stuff like:
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
But that didn't cut it for me, I still have the white bar. I've tried margin, top, width, height and border so far, nothing seems to work.
Other tutorials show how to make an SWF fullscreen as in the Firefox F11 equivalent, which is not what I want (and it still displays the annoying white bar when I press F11 :().
EDIT: Additionally when I place an extra line above the "altContent" div that says "Blub", this line will be displayed in the white bar.
For completeness, the HTML, since I expect this to be the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"Website"
};
swfobject.embedSWF("Website.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
</head>
<body>
<div id="altContent">
<h1>Website</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
The HTML and CSS look fine. I've just tested it with Firefox 3.6 and Flash Player 10.1 as well as the latest version (2.2) of swfobject. The displayed SWF fills the browser window completly. There's no white bar on top of the SWF.
Try upgrading to the latest version of swfobject in case you are still using an older version.
BTW: You can remove the second line of your CSS. That's redundant.
Related
Given this extremely simple mark-up, how do I position a div, so that it is ALWAYS located on top of the full browser canvas BUT in the lower right of the browser window when the browser is full screen. I only need to target Chrome on Windows.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="webgl-canvas"></canvas>
</body>
</html>
This should work for you. It works in all browsers, even really old ones
#yourSelector {
position:absolute;
bottom:0; right:0;
z-index:1;
}
Demo jsFiddle
I have a styling issue on our company's intranet that I can't figure out. It only happens with IE8 or lower. IE 9/10, FF, Chrome, Safari and Opera are all OK.
The issue is a border and paddings are appearing even though I've used border:none;, margin:0!important; and padding:0!important; and it's pushing the content inside over to the right and causing a horizontal scroll bar to appear.
This is where it gets confusing...
Our intranet (asp) has the "panels" that you can see in the screenshot above. There is a "Custom HTML" panel that will allow me to insert HTML into the SQL database cell for that panel, but to view a complex html, it's best to store a file.html page and pull it into the panel using an iframe. I can supply the iframe reference and the css using in my file.html... which one is the most likely culprit?
iframe reference in SQL database:
{top|Members,Forum,HTML($$Summit 2013 Information$$<iframe src="http://www.myexternalsource/WORKING_FOLDER/Summit2013/Summit2013.html" width="768" height="1926" style="border:none!important; margin:0px!important; padding:0px!important;"><p>Your browser does not support iframes.<br /><br />Click here to open in a new window</p></iframe>)}{middleLeft|}{middleRight|}{bottom|}{hidden|Announcements,Items,Tasks,Collections,WhatsOn,Activity,RSS,QuoteOfDay,Absentee}
Summit2013.html with irrelevant styles and html removed
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#iframe-wrapper {
display: block;
width:760px;
padding:0px;
margin:0 auto;
}
...
</style>
</head>
<body style="margin:5px 0 0 7px !important;">
...
<iframe frameborder="0" ...></iframe>
Margins IIRC you can define in the inner page.
I am trying to scroll an iframe on iOS, and I succeeded, it's scrolling well, reference:
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
BUT, all solutions have an issue: the iframe page is not completely displayed...
I tested on my iphone and ipad, the iframe page displays choppy.
any idea?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
<title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
This solution is a bit of a hack, but is tested and works fine on iOS:
<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
<object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
</object>
</div>
Basically, since scrolling works fine in a DIV, you embed your page code using the object tag. The problem is, due to the same origin policy, you can't determine your target page's dimensions. I found that setting a huge page size is perfectly workable (no delay or choppyness noticed...just blank space)
You can easily determine the client OS and only add this code to iOS devices.
I found a combination of div with "absolute" style and nicescroll do fix choppines.
You have to load nicescroll on the page loaded by iframe.
In the same page wrap all you content with a div (with style absolute)
#content { position:absolute; }
Load nicescroll using wrapped div content.
$(document).ready(function() {
$("html").niceScroll("#content");
});
Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html
Automatically, with iOS native scroll has used, in other platform you got nicescroll active.
I have test on iPad with iOS 5.1.
Try adding -webkit-transform:translate3d(0,0,0) to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.
In main page style:
iframe { -webkit-transform:translate3d(0,0,0); }
and in iframe style:
p { -webkit-transform:translate3d(0,0,0); }
I found this to be a problem with relatively positioned content inside the frame.
Get rid of this behavior when removing position: relative;
I want to put an icon image before a text. Any HTML tag such as <img> should be avoided because any changes of HTML structure may affect our javascript code.
I write the following code and it works on screen with IE8/Firefox.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
But, when visitors try to print the web page with IE8, the image disappears. How can I show the image even when printing with IE8, or must I add HTML tag for the image?
IE8 supports before but not in compatibility mode.
i think you should look at this guide as to what properties and stuff are supported on some browsers especially IE 6 and up.
http://www.quirksmode.org/css/contents.html
by the way, the url in url() - quotes are optional. better to have none to avoid unnecessary escaping issues
http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
<style type="text/css">
div.before-test:before {
content: url(sample.png);
}
</style>
The only way i could find is from in stackoverflow. I know, it is not a good approach but , i guess there is no solution about this bug
HTML:
<div class="PrintOnly">
<img id="PrintLogo" src="sample.png"/>
</div>
CSS:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}
I've created a mobile version of a website - simple Table HTML and scarce CSS. Renders great in iOS and Android, I've even used a Meta Width Set to take the width across devices. So, it even renders great in Black Berry width wise-
But, I came across a huge problem - The site, for some odd reason on Blackberry - requires a Zoom (Though not needed) before being able to access a link or read the text. I understand Blackberry res is about 480px - and iOS 900 something, right? Any suggestions on keeping the width to take across iOS, Android, and Blackberry - while not forcing the user to Zoom (With that Magnifying Zoom Icon) on Blackberry? Is this a Javascript thing, a (Hopefully not) PHP/Server side thing?
Ultimately, how do I create a Mobile version of a site - that maintains rendering well in iOS, Android, but also in BB without making the user 'Zoom > Click > Content' but just to browse it normally, 'Click > Content'. But also doesn't require me reducing the size it'll display in iOS/Android?
The way this website is setup is the ultimate goal; http://lisaunger.mobi/ It renders everywhere and exactly like I'm trying to render mine - not sure how, though.
Please throw me any suggestions as I'll be testing them all tomorrow.
Blackberry is: Curve 8520 v4.6.1.259 2009
Here's the code I have at the moment:
Markup:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="all" href="mobilesub.css" />
</head>
<body>
<div style="width: 480px;margin: auto;">
<div>
<img src="img/logo.png" border="0"/>
<br />
</div>
<div>
<img src="mobile buttons/books_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/news_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/app_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/about_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/videos_off.png" border=0 />
</div>
<div>
About
<br />
The New York Times bestseller
Contact
</div>
<div>
</div>
</div>
</body>
<script type="text/javascript" src="http://m.link.me/tracker.js"></script>
</html>
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
CSS
body {
padding: 0px;
margin: 0px;
background-color:#000;
width: 100%;
text-align: center;
color: #fff;
}
.center-display {
margin-left: auto;
margin-right: auto;
}
#content {
}
#h6 {
font-size: 26px;
}
div {
margin: 0px;
padding: 0px;
}
Update: Setting the site to 320px in width, and adding the meta-initial scale allows the zoom to go away and renders the way it should in Blackberry - but ends up taking a way from iOS and Android a little - as now the site zooms passed the browser width in those devices causing a little bit of a horizontal scroll - so close!
Have you tried to define the website by devices - so if i will go on the web with my bb it will be smaller in that case so the user wont need to do zoom
this might help