I'm building a Chrome extension that slides from right side of browser's window after clicking a yellow bar fixed to browser's right side. When I click on yellow bar, green and yellow bars will slide. The yellow one is correctly "on the top" of page- it covers page's content. Unfortunately green one after sliding is under some page's elements. For example on stackoverflow site, a green bar is under search window, ask question button and similar questions section. How can I fix it ?
manifest.json
{
"manifest_version": 2,
"content_scripts": [ {
"js": [ "injection.js", "jquery.js", "jquery-ui.min.js"],
"matches": [ "http://stackoverflow.com/questions/*"
]
} ],
"description": "Inject a complete, premade web page",
"name": "Inject whole web page",
"version": "1",
"web_accessible_resources": ["test.css", "jquery-ui.min.css"]
}
test.css
#intro_button {
background-color: yellow;
height : 100%;
width : 100px;
top: 0;
right: 0;
position : fixed;
cursor: pointer;
}
#extension {
height: 100%;
width: 200px;
position: fixed;
right: -200px;
background-color: green;
}
injection.js
// Injecting button (div)
var divElement = document.createElement("DIV");
divElement.id = "intro_button";
divElement.style.right = "0px";
divElement.onclick = function () {
if (this.style.right === "0px") {
$(this).animate({ "right": "+=200" }, 800);
$("#extension").animate({ "right": "+=200" }, 800);
}
else if (this.style.right === "200px") {
$(this).animate({ "right": "-=200" }, 800);
$("#extension").animate({ "right": "-=200" }, 800);
}
}
var textnode = document.createTextNode("zzz");
divElement.appendChild(textnode);
document.body.appendChild(divElement, document.body.firstChild);
// Injecting extenion (div)
var divExtension = document.createElement("DIV");
divExtension.id = "extension";
var textnode = document.createTextNode("yyy");
divExtension.appendChild(textnode);
document.body.insertBefore(divExtension, document.body.firstChild);
// Injecting CSS files
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('test.css');
head.appendChild(link);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('jquery-ui.min.css');
head.appendChild(link);
// Injecting Jqueries
var s = document.createElement('script');
s.src = "jquery.js";
document.getElementsByTagName("head")[0].appendChild(s);
var s = document.createElement('script');
s.src = "jquery-ui.min.js";
document.getElementsByTagName("head")[0].appendChild(s);
Why is this happening?
The element which is incorrectly layered is inserted before the body with .insertBefore:
document.body.insertBefore(divExtension, document.body.firstChild);
This is placing the element outside the <body> (before it) and is causing z-index issues with other position: absolute / fixed elements.
The element which is correctly layered is appended inside the body with .appendChild:
document.body.appendChild(divElement, document.body.firstChild);
This is placing the element inside <body> (where it should be) and after all its other children.
With natural z-layering, absolute / fixed elements will be overlapped by similar elements which follow them:
div {
position: absolute;
width: 100px;
height: 100px;
}
.red {
background: red;
left: 20px;
top: 10px;
}
.green {
background: green;
left: 30px;
top: 20px;
}
.blue {
background: blue;
left: 40px;
top: 30px;
}
.purple {
background: purple;
left: 50px;
top: 40px;
}
<div class="red">Red is underneath all its siblings</div>
<div class="green">Green overlaps red</div>
<div class="blue">Blue overlaps green</div>
<div class="purple">Purple overlaps blue</div>
The problem recreated
Note how the .incorrect div is placed before the body tag. It behaves the same way as the incorrectly inserted element in your example and is overlapped by the content div inside the <body>
// Injecting button (div)
var divElement = document.createElement("DIV");
divElement.id = "intro_button";
var textnode = document.createTextNode("zzz");
divElement.appendChild(textnode);
document.body.appendChild(divElement, document.body.firstChild);
// Injecting extenion (div)
var divExtension = document.createElement("DIV");
divExtension.id = "extension";
var textnode = document.createTextNode("yyy");
divExtension.appendChild(textnode);
document.body.appendChild(divExtension, document.body.firstChild);
// Injecting CSS files
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('test.css');
head.appendChild(link);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('jquery-ui.min.css');
head.appendChild(link);
// Injecting Jqueries
var s = document.createElement('script');
s.src = "jquery.js";
document.getElementsByTagName("head")[0].appendChild(s);
var s = document.createElement('script');
s.src = "jquery-ui.min.js";
document.getElementsByTagName("head")[0].appendChild(s);
.content {
height: 500px;
width: 500px;
margin: 100px;
background: #F00;
position: absolute;
}
#intro_button {
background-color: yellow;
height: 100%;
width: 100px;
top: 0;
right: 0;
position: fixed;
cursor: pointer;
}
#extension {
height: 100%;
width: 100px;
position: fixed;
background-color: green;
}
.incorrect {
position: fixed;
height: 200px;
width: 500px;
background: orange;
}
<div class="incorrect"></div>
<body>
<div class="content">Content</div>
</body>
How can we fix this?
You should use a large z-index value on the injected elements to absolutely ensure that they are always on top and...
Make sure both of the elements are inserted inside the body with .appendChild:
// Injecting button (div)
var divElement = document.createElement("DIV");
divElement.id = "intro_button";
divElement.style.right = "0px";
divElement.onclick = function () {
if (this.style.right === "0px") {
$(this).animate({ "right": "+=200" }, 800);
$("#extension").animate({ "right": "+=200" }, 800);
}
else if (this.style.right === "200px") {
$(this).animate({ "right": "-=200" }, 800);
$("#extension").animate({ "right": "-=200" }, 800);
}
}
var textnode = document.createTextNode("zzz");
divElement.appendChild(textnode);
document.body.appendChild(divElement, document.body.firstChild);
// Injecting extenion (div)
var divExtension = document.createElement("DIV");
divExtension.id = "extension";
var textnode = document.createTextNode("yyy");
divExtension.appendChild(textnode);
document.body.appendChild(divExtension, document.body.firstChild);
// ## Changed to appendChild here ##
// Injecting CSS files
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('test.css');
head.appendChild(link);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('jquery-ui.min.css');
head.appendChild(link);
// Injecting Jqueries
var s = document.createElement('script');
s.src = "jquery.js";
document.getElementsByTagName("head")[0].appendChild(s);
var s = document.createElement('script');
s.src = "jquery-ui.min.js";
document.getElementsByTagName("head")[0].appendChild(s);
Usually this is fixed by adding z-index: 9999999 CSS property to the positioned element (or a more reasonable number if you can control other element's z-order).
Related
Using the canvas, the image changes when scrolling.
I wrote the code for animation.
If css gives you the same value as positio:absolute top:4000px,
Even if I scroll, the animation doesn't work.
It works if you lower the top value. I have to operate at the top 4000px position.
I'm curious about the solution
var canvas = document.getElementById('macbook');
var ctx = canvas.getContext('2d');
var scrollYPos = 1000;
var img = new Image();
img.src = "img/AirPods Max/large0.jpg";
window.addEventListener('scroll', function(e) {
scrollYPos = Math.round (window.scrollY/5);
console.log(scrollYPos);
if (scrollYPos> 52) {
scrollYPos = 52;
}
player(scrollYPos);
});
function player(num) {
img.src = `img/AirPods Max/large${num}.jpg`;
}
img.addEventListener('load', function(e) {
ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0,0);
})
canvas {
position: absolute;
top: 4000px;
}
<div id="img-sequence">
<canvas width="1004" height="1214" id="macbook"></canvas>
</div>
I got the canvas working, I'm having issues trying to position it.
Specifically I want to implement them to the same effect as:
html {
background: url(back.jpg) no-repeat center center fixed;
background-size: cover;
}
for static images. Basically no interaction with other elements, and positioned as low as possible with regards to the stacking context. Additionally, I'd like to have the canvas background as compartmentalized / as segmented as possible from the rest of the code.
By segmented, I mean something like this:
<body>
<div id="backgroundContainer">
<canvas id="myCanvas"></canvas>
</div>
<div id="everythingElseContainer">
....
</div>
<script src="canvasAnimation.js"></script>
</body>
or this:
<body>
<div id="container">
<canvas id="myCanvas"></canvas>
<div id="everythingElse">
....
</div>
</div>
<script src="canvasAnimation.js"></script>
</body>
to minimize the possibility of css conflicts.
var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = new Array();
var rint = 60;
$(document).ready(function(){
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
canvas = document.getElementById('canvas');
$(canvas).attr('width', WIDTH).attr('height',HEIGHT);
con = canvas.getContext('2d');
for(var i = 0; i < 100; i++) {
pxs[i] = new Circle();
pxs[i].reset();
}
setInterval(draw,rint);
});
function draw() {
con.clearRect(0,0,WIDTH,HEIGHT);
for(var i = 0; i < pxs.length; i++) {
pxs[i].fade();
pxs[i].move();
pxs[i].draw();
}
}
function Circle() {
this.s = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};
this.reset = function() {
this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
this.r = ((this.s.rmax-1)*Math.random()) + 1;
this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
this.rt = Math.random()*this.hl;
this.s.rt = Math.random()+1;
this.stop = Math.random()*.2+.4;
this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
}
this.fade = function() {
this.rt += this.s.rt;
}
this.draw = function() {
if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt*-1;
else if(this.rt >= this.hl) this.reset();
var newo = 1-(this.rt/this.hl);
con.beginPath();
con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
con.closePath();
var cr = this.r*newo;
g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
g.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
g.addColorStop(this.stop, 'rgba(77,101,181,'+(newo*.6)+')');
g.addColorStop(1.0, 'rgba(77,101,181,0)');
con.fillStyle = g;
con.fill();
}
this.move = function() {
this.x += (this.rt/this.hl)*this.dx;
this.y += (this.rt/this.hl)*this.dy;
if(this.x > WIDTH || this.x < 0) this.dx *= -1;
if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
}
this.getX = function() { return this.x; }
this.getY = function() { return this.y; }
}
html, body, div, button, canvas, .containr {
padding: 0;
border: none;
margin: 0;
}
html, body, .containr{
height: 100%;
width: 100%;
background: none;
}
html, body {
font-size: 13px;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif !important;
}
button {
transition: all 0.24s ease;
}
h1 {
font-size: 4rem;
}
button {
font-size: 5.6rem;
}
#pixie {
position:fixed;
z-index: 0;
background: black;
}
.containr>div {
background: blue;
}
.containr {
overflow:hidden;
color: #ffffff;
z-index: 9;
font-size: 256%;
white-space: nowrap;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
align-content: center;
}
.btnz {
margin-left: 2.4%;
margin-right: 2.4%;
background: #ffffff;
background: rgba(0, 0, 0, .36);
text-shadow: 1px 1px 3px #000;
padding: 2rem;
}
.btnz:hover {
background: #3cb0fd;
text-shadow: none;
text-decoration: none;
}
/* Outline Out */
.hvr {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr:before {
content: '';
position: absolute;
border: #e1e1e1 solid 5px;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.hvr:hover:before, .hvr:focus:before, .hvr:active:before {
top: -18px;
right: -18px;
bottom: -18px;
left: -18px;
border: #ffffff solid 8px;
}
<!doctype html>
<html lang="en">
<head datetime="2015-10-31">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="containr">
<canvas id="canvas"></canvas>
<div>
<h1>Main Title</h1>
</div>
<div>
<button class="btnz hvr">
Button Butt
</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>
To move objects down in the visual order use the CSS styling z-index smaller numbers move the element down under other elements, higher numbers bring it up.See MDN z-index for more info.
To set the background of an element to a canvas use
element.style.background= "url(" + canvas.toDataURL() + ")";
To isolate of compartmentalize some code the easiest way is to wrap it in a anonymous function and call it. Everything inside it is isolated. Use 'use strict' directive to ensure you do not accidentally create global scoped variables.
A normal anonymous function does nothing and can not be used.
function(){ console.log(42); }; // does nothing
But if you wrap it in () and then add the function call tokens to the end ( ) you can call it like any function.
(function(){ console.log(42); })(); // send the meaning of life,
// the universe, and everything
// to the console.
The function below wraps up a and nothing can get access to a outside the anonymous function.
(function(){
var a = 1;
})();
But you can easily forget to put var in front of a variable making the variable visible to the entire page.
(function(){
var a = 1;
outThere = 2; // Oh no this is has been placed in
// global scope because it is missing
// the var token.
})();
To stop this use the 'use strict' directive.
(function(){
"use strict"; // this must be the very first line of the function
var a = 1;
outThere = 2; // this will cause the javascript to throw a
// ReferenceError: outThere is not defined
})();
It throws an error and stop the function from running but at least you will know that you have a leak.
Everything inside the anonymous function will manage itself. Deleting itself when not needed any more. Or remaining in memory if the Javascript engine holds an internal reference.
The next function starts up and calls its own function doSomething then exits and is deleted completely including the big array.
(function(){
var bigArray = new Array(100000000);
function doSomething(){
console.log("Whats up?");
}
doSomething();
})();
The next one will create a big array and hold that array in memory for 10 seconds (lifeTime). This is because the setTimeout has given the javascript engine an internal reference to doSomething. As long as that reference exists the bigArray will remain (because of closure). After the timeout the reference his no longer need and thus disposed causing all associated referances to go as well and thus disappear. All done via the magic of garbage collection.
Info on Clouser
Info on Garbage collection MDN is out of date but I am sure a quick search on StackOverflow will help.
(function(){
var bigArray = new Array(100000000);
function doSomething(){
console.log("Big Array has had its time.");
}
setTimeout(doSomething,10000);
})();
Attaching an object to items outside the anonymous function scope will expose data in that object to the global scope.
The next function adds a property to a DOM element. This is visible to the global scope and also means that the lifetime of the function will be as long as that element exists.
(function(){
function Info(){
... create info ..
}
var element = document.getElementById("thisOutsideWorld");
var importantPrivateInfo = new Info();
element.keepThis = importantPrivateInfo;
})();
But this does not apply to primitive types as they are copied not referenced. These are Numbers, Strings, Booleans , Undefined, Null...
So to set the background to a canvas via a compartmentalized function see the following function
(function(){
'use strict';
var myCanvas = document.createElement("canvas");
myCanvas .width = 1024;
myCanvas .height =1024;
var ctx = canvas.getContext("2d");
// toDo
// draw the stuff you want.
var el = document.getElementById("myElement");
if(el !== null){
el.style.background = "url("+canvas.toDataURL()+")";
}
// all done
})(); // once run it will delete the canvas and ctx and leave only the copied dataURL
You may think that this exposes the canvas. But it is safe as the canvas is converted to a string and strings are copied not referenced.
If you need to keep the canvas for some period then use a timer to create an internal reference to the anonymous function
The following function will create a canvas and update it every second for 100 seconds. After that it will be deleted and completely gone.
(function(){
'use strict';
var myCanvas = document.createElement("canvas");
myCanvas .width = 1024;
myCanvas .height =1024;
var lifeCounter = 0;
var ctx = canvas.getContext("2d");
// toDo
// draw the stuff you want.
var el = document.getElementById("myElement");
function update(){
// draw stuff on the canvas
if(el !== null){
el.style.background = "url("+canvas.toDataURL()+")";
}
lifeCounter += 1;
if(lifeCounter < 100){
setTimeout(update,1000);
}
}
update(); //start the updates
// all done
})();
Hope this helps.
Three.js is an awesome library. Its well documented and its working great.
I am trying to render a plane along with trackball control inside a div. The div resizes as the window or the browser is resized. Following is the issue i am facing
When the browser finishes loading, the plane is displayed in the browser, However, it is not refreshing or responding to the trackball control. But when i minimize the browser or switch tabs the scene becomes active and it works as designed. I am sure the trackball and the scene is working upon load as i am able to see the changes when i refresh it by minimizing the browser or switching tabs. I believe it has to do with rendering or refreshing on load.
Similarly, when i resize the browser the div changes its size but the scene goes back to the frozen state. Once again, if i minimize or switch tabs the scene is resized and works as intended.
I am not able to figure out where the issue is.
Thanks a lot
Sam
<!DOCTYPE html>
<html
lang="en">
<head>
<title>three.js
canvas
-
geometry
-
cube
</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#Cont3D {
min-width: 200px;
min-height: 400px;
float: none;
margin-left: 20%;
margin-right: 20%;
border-width: thick;
border-style: solid;
margin-top: 100px;
}
</style>
</head>
<body>
<script
src="build/three.js"></script>
<script
src="js/loaders/STLLoader.js"></script>
<script
src="js/renderers/SoftwareRenderer.js"></script>
<script
src="js/controls/TrackballControls_Persp.js"></script>
<script
src="js/modifiers/SubdivisionModifier.js"></script>
<script
src="js/controls/OrbitControls.js"></script>
<script
src="js/libs/stats.min.js"></script>
<script
src="js/Detector.js"></script>
<script>
function startmusic() {
var container, stats;
var camera, scene, renderer;
var plane;
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;
var Width, Height;
init();
animate();
function init() {
container = document.getElementById("Cont3D");
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
Width = container.clientWidth;
Height = container.clientHeight;
camera = new THREE.PerspectiveCamera(50, Width / Height, 1, 2000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Plane
var geometry = new THREE.PlaneGeometry(200, 200);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var material = new THREE.MeshBasicMaterial({
color: 0xe0e0e0
});
plane = new THREE.Mesh(geometry, material);
scene.add(plane);
//LIGHTS
hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.color.setHSL(0.6, 1, 0.6);
hemiLight.groundColor.setHSL(0.095, 1, 0.75);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);
scene.fog = new THREE.Fog(0xffffff, 3000, 10000);
scene.fog.color.setHSL(0.6, 0.87, 0.96);
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 1800, 0);
spotLight.target.position.set(0, 0, 0);
spotLight.castShadow = true;
scene.add(spotLight);
// RENDERER
// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position = camera.position; // .set(1, 1, 1).normalize();
scene.add(directionalLight);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(scene.fog.color, 1);
document.getElementById("logBox").innerHTML = container.style.width + "," + Width;
renderer.setSize(Width, Height);
container.appendChild(renderer.domElement);
controls = new THREE.TrackballControls(camera, renderer.domElement)
controls.rotateSpeed = .8;
controls.zoomSpeed = .7;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.6;
controls.maxDistance = 1000;
controls.minDistance = 150;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
controls.addEventListener('change', render);
container.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
Width = container.clientWidth;
Height = container.clientHeight;
document.getElementById("logBox").innerHTML = Width + "," + Height;
camera.aspect = Width / Height;
camera.updateProjectionMatrix();
renderer.setSize(Width, Height);
controls.handleResize();
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
controls.update();
stats.update();
}
function render() {
renderer.render(scene, camera);
}
window.onresize = onWindowResize;
}
window.onload = startmusic;
</script>
<div
id="logBox"
style="position: absolute; top: 50px; width: 100%; text-align: center;">Blue</div>
<div
id="Cont3D">
</div>
</body>
</html>
function onWindowResize(event) {
Width = container.clientWidth;
Height = container.clientHeight;
document.getElementById("logBox").innerHTML = Width + "," + Height;
renderer.setSize(width, height);
camera.aspect = Width / Height;
camera.updateProjectionMatrix();
controls.handleResize();
}
You don't need
renderer.render(scene, camera);
In your resize handler.
i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page...
initial state when i load the page
when i resize the browser, map is still sized at initial state size.
[Code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var point;
var mrktx;
function mshow()
{
$("#search_content").css("display","");
}
function mhide()
{
$("#search_content").css("display","none");
}
function load() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(ShowPosition)
}
else
{
alert("Browser does not support");
setTimeout( function(){ window.location = "../" },500);
}
function ShowPosition(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var cwidth = document.getElementsByTagName("body")[0].clientWidth;
var cheight = document.getElementsByTagName("body")[0].clientHeight;
//alert(cwidth + ',' + cheight);
$("#body").css("overflow","hidden");
$("#map_canvas").css("position","absolute");
$("#map_canvas").css("overflow","auto");
$("#map_canvas").css("height",cheight);
$("#map_canvas").css("width",cwidth);
$("#map_canvas").css("z-index","99")
$("#map_canvas").css("top","0");
$("#map_canvas").css("left","0em");
$("#top_nav").css("width",cwidth);
$("#top_nav").css("height","8%");
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$('document').resize(function(){
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
var myMrkrTxt = "";
var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });
var myMrkr = new google.maps.Marker({position:latlng,map:map});
google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); });
google.maps.event.trigger(map, "resize");
}
}
</script>
<style>
#top_nav
{
position: absolute; z-index: 200; top: 0px; background-color: black;
}
#top_nav h2
{
color: white;
}
body, html {
height: 100%;
width: 100%;
}
</style>
</head>
<body onload='load()'>
<div id="map_canvas"></div>
</body>
</html>
i guess you have to resize your map_canvas as well.
so just add this to your resize()
//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
$('#map_canvas').css("height",$(window).height());
$('#map_canvas').css("width",$(window).width());
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
so you have track of the resizing of your browserwindow :)
Same things can be done using only CSS too. I'll put an example below, use this if you like.
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe>
</div>
I'm trying to replicate something similar to the following map, where the polygonal area is transparent and the surrounding area is semi-transparent:
Can anyone help with this?
Here's the original:
https://energyeasy.ue.com.au/outages/powerOutages
Using some CSS and a large 512 x 512px png I have managed to emulate what I wanted to achieve.
I'm sure there would be more accurate methods but this has worked for me.
http://www.syn-rg.com.au/Development/United-Energy/mg_map/MG_Area_map_02.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas {
background-color: #EAEAEA;
border: 1px solid #CCCCCC;
height: 400px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 532px;
}
#map_canvas div div div div div img{ border:1000px solid black;margin:-1000px -1000px;}
/*#map_canvas div div div div div div div{ background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.5);}*/
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7UaoyrY4KyoW1iEU0KFo0ZOxH5w30oZ8&sensor=true"></script>
<script type="text/javascript">
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var myLatLng = new google.maps.LatLng(-37.815676, 145.449005);
var myOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var swBound = new google.maps.LatLng(-38.269876, 144.842405); // Latitude, Longitude = 182.749 or 107.183 or 108.4443 or 107.77615
var neBound = new google.maps.LatLng(-37.161476, 146.249005); // -0.5542, +0.7033 = 256px
//var swBound = new google.maps.LatLng(-37.783, 144.966);
//var neBound = new google.maps.LatLng(-37.225, 145.66930);
//var swBound = new google.maps.LatLng(62.281819, -150.287132);
//var neBound = new google.maps.LatLng(62.400471, -150.005608);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
// Photograph courtesy of the U.S. Geological Survey
var srcImage = 'images/mg_map_full.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
function USGSOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function () {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = "none";
div.style.borderWidth = "0";
div.style.borderColor = "red";
div.style.position = "absolute";
div.style.opacity = "0.3";
// Create an IMG element and attach it to the DIV.
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = 'absolute';
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
USGSOverlay.prototype.draw = function () {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
USGSOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</body>
</html>