My page has a resolution of 800x480. It has been designed as such. Now in Firefox (I have control over the viewers machine), I want to zoom the whole screen to 800x600. I know that there is a zoom option, but that does it proportionally (e.g. 150%). Is it possible to somehow to only stretch the 480 to 600 (a sort of a zoom).
I have a valid reason to do this and am aware of the aspect ratio issues that could arise.
Thank you for your time.
You can do this in Firefox 3.5 (Gecko 1.9.1) using CSS3 2d transforms.
Here's an example with two DIVs where the second is stretched from 800x480 to 800x600.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
background-color: #000;
color: #fff;
}
.viewport
{
width: 800px;
height: 480px;
background-color: gold;
color: #000;
position: absolute;
left: 0px;
top: 0px;
}
.stretched
{
background-color: rgba(255, 0, 0, 0.5);
-moz-transform: scaleY(1.25);
-moz-transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="viewport"><button>Normal</button></div>
<div class="viewport stretched"><br><br><button>Stretched</button></div>
</body>
</html>
See also:
Using CSS transforms
You can use:
self.resizeTo(width, height);
Although I think Firefox has a default setting in the preferences which prevents this from working.
Related
Problem:
Need to execute an action when an element enters the middle third area of the viewport:
Constraints:
I am using Alpine JS.
According to the Alpine intersect docs, I can control the rootMargin property of the underlying IntersectionObserver using .margin, in order to change the limit where the observer will trigger. I'm doing it as follows:
h1 {
margin-top: 95vh;
position: relative;
background-color: blue;
color: white;
z-index: 2;
}
body {
height: 200vh;
}
body::before,
body::after {
content: '';
position: fixed;
left: 0;
right: 0;
height: 33%;
background-color: grey;
z-index: 1;
}
body::before{
top: 0;
}
body::after{
bottom: 0;
}
<html>
<head>
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/#alpinejs/intersect#3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ message: 'Alpine Is Working' }"
x-intersect:enter.margin.-33%.0.-33%.0="message = 'ENTERED'"
x-intersect:leave.margin.-33%.0.-33%.0="message = 'LEFT'"
x-text="message"></h1>
</body>
</html>
In the above example, you can see it's not respecting the 33% top/bottom margin with the viewport. I marked those in grey using pseudoelements.
What should happen:
In the example above, it should say "Entered" or "Left" when the element scrolls into and out of the white area.
Any idea on what I may be doing wrong?
Thanks!
Your code wouldn't work for me in the code snippet, but did as soon as I copied it out to a local html file and ran it there.
The iframe is messing with the intersection observer's root.
Your code is useful to me, I hadn't been able to find an example combining the :enter and :leave modifiers.
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
I have had to put all of the code here so you can see my question in context with this code for a basic website. The part of this code I'm referring to is the media query coded below as:
# media (max-width: 700px)
body { background-color: #fff; }
I've done some research on media queries as required and know that in this code that when the page is at width 700px or less it will become the color of #fff which I think is a white color. But what would be the purpose of putting the code here besides a teaching exercise? Is it so that it will fit a mobile phone if the web page where to be opened on such a device? I thought that instead of using a media query that the width of the webpage to fit a device like a mobile phone was established in the meta tags viewport description. Please bear in mind I'm a newbie and just starting to learn about coding about a month ago.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px)
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in
documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information... </p>
</div>
It looks like your code is missing a bracket for the media query. I believe it should look like this. When the window is less than 700px the background is white. When greater than 700px it's a gray. Try re-sizing the window to see what I mean.
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
Snippet
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
<p>More information...
</p>
</div>
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/ (Btw. there was a missing { after the Media Query that I inserted here)
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
If you increase the width of the box, you will see a grey background and in the middle will be a Box with rounded edges. If you decrease the width of the box, you will see that the grey background disappers and the box disappears too, but the white Background stays. The real need is because the box has a height, so only the box part would be white and the rest (top and bottom area) would still be grey.
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/1/ (I removed the background-color: #fff)
You will see that the bottom part is still grey. If you put in the background-color part it will be white.
To your other question: The media query looks for device width, so mostly devices have a smaller width than your PC would have. The meta-tag part says something like if the zoom should kick in or if it's even allowed.
So if you saying that your page should be 1024px wide, the phone would fit the page into a 1024px viewport and you don't have to zoom in/out as an user.
At this point I am not sure if it's smart to go so deep into it, maybe first learn the basics more and then go deeper. But I like the effort you putting in, also google and read read read read as much blogs and stackoverflow threads as you can, this is a must do and will improve you alot!
I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.
Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?
An outline of the code I'm working on:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>
This issue is so curious.
Try using Request Animation Frame instead of setInterval (without the magic div, =])
function getRequestAnimFrame() {
var game = this;
// requestAnim shim layer by Paul Irish
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / fps);
};
}
Maybe this help to increase the perform.
After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.
I tried the same site in 3.6.2 and 6.0 and it is working fine. As soon so the machine updates to 7.0 or 8.0 beta it now longer renders so the problem is related to firefox.
I made a sample html page that shows the problem.
In the upper div i would expect the image to display in the button us it does in the lower div but it is replaced with .... It seems to be the text-overflow: ellipsis; css but why would this change on updating?
Does anyone have a suggestion?
<!DOCTYPE html>
<html>
<head>
<title>Infor DataGrid Sample </title>
<style>
.slick-headerrow-column {
background: #d5d5d5;
border-bottom: 0 none;
height: 100%;
margin-left: 2px;
padding-top: 2px;
}
.slick-headerrow-column, .slick-cell {
cursor: default;
float: left;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 1;
}
.inforFilterButton {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAB0ElEQVQ4T62USWoCQRiF+wQeQZKt4MKVG68RSFAkS/EG3sBlFCdUslNxIYgLiVEQZwWHheKwMA444EIFPcCLr0gbDWgrpOFRXV1VX/31/r9Lkv770Wg0OofDMXa73fB6vfD7/QgEAkLBYPAm/cyf6A6PdICNfD4f4vE4stksCoUCyuUyKpXKzcpkMohGowiFQiPJ5XIhFoshn8+j0Wig0+mg1+thMBjcpVqthkQiAcnj8YA71Ot19Pt9jMdjLBYLoeVyeZM4dzqdCo7E4+ZyObTbbQFbrVbYbDZCFotFjMl9pZZ2SUxCsVhEt9vFfD7Her3GbrfDfr/HoQBgt9vFu5K4hr4LYKlUEr4xdEbBxZFIBFarFVqtVhEmb1atVn+B9O8UaDQakUwmoVarMZvNboJeBRLEnQmmz0pH5vhFIC0g0GazwWAwCOg14JvTJcYvAgmifzwypVKpLgIJe3oxnQOZTXrIlklhIhilHBWjJFjOvNzKMAKZ5WOErJ+/WVbyzB98F5FRzyazKLcjMJVK3QX8SH2ewUzmV/GnyMBhOBwWHX48LWylKDm+3W4xmUzQbDbRarWGkl6vfzzcEl+8bdLptLhtWPHc4B4R5nQ6H74BwAUeSLCHS8oAAAAASUVORK5CYII=");
border: medium none;
height: 16px;
left: -3px;
position: relative;
top: 4px;
width: 20px;
z-index: 10;
}
</style>
</head>
<body style="margin:10px;padding:10px">
<div class="ui-state-default slick-headerrow-column c2">
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"> </button>
</div>
<br>
<br>
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"></button>
</body></html>
Firefox 7 is the first Firefox release to implement text-overflow: ellipsis. It also implements what the spec said when Firefox 7 shipped, which was that if only one value is provided then it applies to both start and end sides of the overflowing container. In your case your buttons are positioned so they overflow the left edge of the container, so they're overflowing and get converted to ellipses.
Based on feedback from the experience with Firefox 7, the spec has since been changed to a behavior that's more compatible with the way IE originally implemented text-overflow: ellipsis, but there may be more changes happening there. The wonders of unstable specs that are written to not match deployed browser behavior...