Does anuyone know if it is possible to embed a bing map in fullscreen??
So that the map can always fill the background and simply overlay a few elements on top.
I cannot seem to achieve that with 100% iframe and bing's help is not that helpful.
Thank you
If I understand you correctly, you want to achieve the effect of having the map fill up the entire screen, sort of like using the map as a background, and then have other elements overlaid on top? If so, you should be able to accomplish this easily via the position:fixed CSS Property.
<div id='yourMapDiv' style="position: fixed; top: 0px;
left: 0px; right:0px; bottom:0px; z-index: 100">
</div>
This is saying yourMapDiv will have a fixed position that is 0 pixel away from all four edges of the screen. In effect, you are spanning yourMapDiv across the entire browser screen, without having to specify explicit length or width, and re-sizing will not causing scroll bars to appear:
Here is what going full screen in Chrome looks like:
In the example above I assigned a z-index of 100 to yourMapDiv, to illustrate that if you want other elements to appear above the map, you will have to assign a higher z-index to them.
The answers above did not work for me.
To get a map fill out the browser window without any borders or scrollbars, I had to use the following minimal html file:
<!DOCTYPE html>
<html>
<head>
<title>Bing Map</title>
<meta charset="utf-8" />
<style>
#myMap {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script type='text/javascript'>
function GetMap() {
new Microsoft.Maps.Map('#myMap', {
credentials: 'your_bing_key'
});
}
</script>
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer>
</script>
</body>
</html>
You can't "embed a Bing Map in fullscreen", but it's certainly possible to use CSS to set the height and width of the div containing the map to be 100% of the browser, and then maximise (or set to fullscreen) the browser window - is that what you mean?
Related
I want to have a page that takes the full height and width of the client window. I want to be able to position divs within the page using position=absolute, with a specified transform. They will be playing cards on a table, so they'll have an x, y, and rotation. This all works great, but on mobile, when one of the absolutely positioned elements goes beyond the boundaries of the parent, the browser adds a scrollbar and lets you scroll to the out-of-bounds elements. I've found that I can clip the rendering of the absolutely positioned elements by using clip-path: inset(0) on the parent, but the mobile page still lets you scroll over to the white part beyond the application. Is there some other way to restrict the viewport to just the body so I can keep my full-page, non-scrolling experience in tact? I don't think overflow:hidden works here because of the absolute positioning.
here's an example. https://ddeklotz-static-page.s3.amazonaws.com/example.html
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app">
<div class="square"/>
</div>
</body>
</html>
body {
margin: 0;
overflow: hidden;
}
.app {
background-color: red;
min-height: 100vh;
clip-path:inset(0);
}
.square {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
transform: translate(330px, 50px) rotate(20deg);
}
I think I found something that works: I needed to add "user-scalable=0" to my viewport meta tag's content. It looks like before the viewport was zoomed out to show the full extent of the clipped div's bounding region, which isn't what I wanted. Disabling user scaling means we just keep the layout viewport in view, I think.
It looks like I also could have use position:fixed (instead of absolute) to address this, but that would have made the positioning of the divs more difficult (as their parent isn't likely to have the same origin as the viewport).
I have a little issue positioning an element outside the canvas to star an animation from the outside. An example bellow.
.square {
height: 50px;
width: 50px;
background-color: #555;
position: absolute;
right: -10px;
}
<html>
<head>
</head>
<body>
<div class="square"></div>
</body>
</html>
This is a reference image about the expected start position of the element (red dotted box).
Anyone know how to configure the css related to the object to position it outside the canvas without increases their (canvas) size?
Hopefully without deactivate the scroll bar (for example to increase the left side of the canvas) and not over the canvas (to keeping it scrollable and not relative)
I thought this is the simplest question ever, but i couldn't find on the web, hope to be helpful to someone, thanks!
In simple terms I am trying to scale a large box (used when the browser is in full screen) down to a smaller box using the CSS transform property. The box is scaling properly but the browser is still showing the scroll bars as if it is not scaled. I do not want to turn off overflow, I am hoping I am missing something.
A fiddle of my issue. Notice the vertical scroll bar:
http://jsfiddle.net/adamlj/uvfhr8nw/4/
<html>
<head>
<style>
.scaleme {
background: red;
height: 2000px;
width: 4000px;
}
.scaler {
transform-origin: top left;
transform: scale(0.16666667);
}
</style>
</head>
<body>
<div class="scaler">
<div class="scaleme"></div>
</div>
</body>
</html>
transform leaves the original element untouched. It only affects how the element is rendered.
But the original element remains the same, hence occupying the same space in document flow. So the scrollbars will not go away unless you resize the element.
If you're looking for a solution to resize both the element and the space it occupies in document flow, have a look at this answer.
"use strict";var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var zoomFactor=function(){function e(t){_classCallCheck(this,e),this.el=this.q(t,document),this.b(),this.u()}return _createClass(e,[{key:"q",value:function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.el).querySelector(e)}},{key:"b",value:function(){var e=this.el.innerHTML,t=document.createElement("z-1"),n=document.createElement("z-2"),i=document.createElement("z-3"),l=document.createElement("style");this.el.innerHTML="",this.el.appendChild(t),t.appendChild(n),n.appendChild(i),i.innerHTML=e,l.appendChild(document.createTextNode("z-1,z-2,z-3,zoom-factor{display:block}z-1,zoom-factor{position:relative;overflow:hidden}z-1,z-2{width:100%}z-1,z-2,z-3{color:#fff}z-1{float:left;overflow:hidden}z-2{position:absolute}z-3{transform-origin:left top;width:0}")),document.getElementsByTagName("head")[0].appendChild(l)}},{key:"v",value:function(){return this.q("input")?this.q("input").value:parseFloat(this.el.dataset.scale)||1}},{key:"u",value:function(){var e=this.v(),n=this.q("z-1"),i=this.q("z-2"),l=this.q("z-3");n.style=i.style=l.style="",i.style.width=n.clientWidth*e+"px",l.style.transform="scale("+e+")",n.style.height=l.clientHeight*e+"px"}}]),e}();new zoomFactor("zoom-factor");
.scaleme {
background: red;
height: 2000px;
width: 4000px;
}
<zoom-factor data-scale="0.16666667">
<div class="scaleme"></div>
</zoom-factor>
Placed the CSS inside the JS, ran it through babel to make it es2015 compatible and minified it. Once you place that js in your page, it will automatically parse the <zoom-factor> element according to its data-scale.
so i have a canvas element just doing some background animations for an app.
my question is, whats the best way to make sure it looks the same on different devices?
am i best making different size canvas elements and using CSS media quires?
or is there a way to make the canvas flexible and responsive to fill 100% of the viewport using JS or html?
any help would be great!
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
You need to explicitly set the width and height of the canvas. Don't use CSS to set canvas size as this affects only the element but not its bitmap (your canvas bitmap/image will be stretched).
Here is one way:
/// assuming canvas variable exists in global scope
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas(); /// call the first time page is loaded
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
You can then add CSS rules to the canvas element:
#myCanvas {
position:fixed; /* or absolute (or not..) depending on your goal */
left:0;
top:0;
}
Your document html and body must also be setup properly with CSS:
html, body {
width:100%;
height:100%;
margin:0;
}
If you want to cover the whole window also add overflow: hidden to the last CSS rule to avoid any scroll-bars.
Hope this helps.
Use the CSS 100% variable.
canvas {
width: 100%;
height: 100%;
border: solid black 1px;
}
<canvas id="canvas"></canvas>
I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>