I have created popup with an overlay. In the pop-up, I'm having one text field in which i am getting location from google API. But, the location suggestion is going behind the overlay. How to make it visible in front? Can anyone help in this? It looks like
Image of the Location suggestion:
My code is as follows.
<html>
<head>
<style>
body.no-scroll{
overflow-y: hidden;
}
.overlay{
position: fixed;
left: 0;
top: 0;
margin: auto;
z-index: 100000;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
text-align: center;
}
.overlay-image{
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: auto;
max-width: 90%;
width: auto;
height: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if(window.location.href.indexOf("&utm_source=facebook") > -1) {
$('body').addClass('no-scroll');
$('.overlay').show();
}
$(document).on('click', 'body.no-scroll', function (e) {
$('.overlay').hide();
$('body').removeClass('no-scroll');
});
});
</script>
</head>
<body>
<div class="overlay">
<div class="overlay-image">
<form action="" method="post">
<input type="text" name="city" id="txtPlaces">
<button type="submit">Search</button>
</form>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=xxxxxxxx"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.A;
var longitude = place.geometry.location.F;
var mesg = "Address: " + address;
});
});
</script>
</div>
</body>
</html>
What I need to add or change to bring the location suggestions to be visible in front?
Related
I'm learning ag-grid to display data into a grid. I've just started with a simple example to display simple data to cell using cellRenderer. You can exam on the code here:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = '';
</script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
</style>
<script src="https://unpkg.com/ag-grid-community#20.2.0/dist/ag-grid-community.min.js">
</script>
</head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
<script src="main.js">
</script>
</body>
</html>
main.js:
var columnDefs = [
{
field: 'gold',
cellRenderer: params => {
return '<span class="cell1">' + params.data.gold + '</span>';
},
editable: true,
},
];
var gridOptions = {
rowHeight: 60,
columnDefs: columnDefs,
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid
.simpleHttpRequest({
url:
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
})
.then(function(data) {
gridOptions.api.setRowData(data);
});
});
Please note the css I used:
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
I want to display the data in the middle of the cell (css: top: 50%;) so I tried with above css. But after edited, the cell didn't show as expected. Please help!
Render at start:
Render at editting:
Render after editted:
You need to update your CSS. Give height and line-height properties for span.cell1 the same number which you provide to your rowHeight.
span.cell1 {
height: 60px;
line-height: 60px;
text-align: center;
}
Have a look at the updated plunk: https://next.plnkr.co/edit/4HHSANMjCpRkTdmm
I am a beginner in CSS and would like to know how I can put the background of this modal always occupying 100% of the page and even if the page is zoomed in, the background will still occupy 100% of the page.
$(document).ready(function(){
$("a[rel=modal]").click( function(ev){
ev.preventDefault();
var id = $(this).attr("href");
var alturaTela = $(document).height();
var larguraTela = $(window).width();
//colocando o fundo preto
$('#mascara').css({'width':larguraTela,'height':alturaTela});
$('#mascara').fadeIn(1000);
$('#mascara').fadeTo("slow",0.8);
var left = ($(window).width() /2) - ( $(id).width() / 2 );
var top = ($(window).height() / 2) - ( $(id).height() / 2 );
$(id).css({'top':top,'left':left});
$(id).show();
});
$("#mascara").click( function(){
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev){
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
.window {
display: none;
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: #FFF;
z-index: 9900;
padding: 10px;
border-radius: 10px;
}
#mascara {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}
.fechar {
display: block;
text-align: right;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Janela 2 modal
<div class="window" id="modalAdocao">
<button class="fechar">Fechar</button>
<h4>Formulario</h4>
<form action="#" method="post">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
<br />
<label for="nome">Senha:</label>
<input type="text" name="senha" id="senha">
<br />
<input type="submit" value="enviar">
</form>
</div>
<!-- mascara para cobrir o site -->
<div id="mascara"></div>
This will helps.
<html>
<head>
<title>Janela modal</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel=modal]").click( function(ev){
ev.preventDefault();
var id = $(this).attr("href");
$('#mascara').fadeIn(1000);
$('#mascara').fadeTo("slow",0.8);
$(id).show();
});
$("#mascara").click( function(){
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev){
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
</script>
<style type="text/css">
.window{
display:none;
width:300px;
height:300px;
position:absolute;
left:0;
top:50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: auto;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
}
#mascara{
position:absolute;
left:0;
top:0;
right: 0;
bottom: 0;
z-index:9000;
background-color:#000;
display:none;
}
.fechar{display:block; text-align:right;}
</style>
</head>
<body>
Janela 2 modal
<div class="window" id="modalAdocao">
<button class="fechar">Fechar</button>
<h4>Formulario</h4>
<form action="#" method="post">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
<br />
<label for="nome">Senha:</label>
<input type="text" name="senha" id="senha">
<br />
<input type="submit" value="enviar">
</form>
</div>
<!-- mascara para cobrir o site -->
<div id="mascara"></div>
</body>
My code is currently responsive, but I am wondering how do I get the map to automatically rotate? Thanks.
Example: http://virali.se/photo/spin/embed/00c79439f35e4833d4b3c350f6af0043.html#embed
<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sca!4v1417361836017!6m8!1m7!1sD80WPU9LQ3oAAAALCpZfjw!2m2!1d45.71770335915593!2d11.47028447620278!3f17!4f0!5f1.4199149422479231" width="1700" height="550" frameborder="0" style="border:0"></iframe>
</div>
This can't be done when you embed the panorama via an iframe.
You'll need to create the panorama via the javascript-API and start an interval which increases the heading of the panorama:
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
{pano:'D80WPU9LQ3oAAAALCpZfjw',
pov:{heading:0,pitch:0},
disableDefaultUI:true}
);
panorama.setZoom(0);
setInterval(function(){
var pov=panorama.getPov();
pov.heading=(pov.heading+.1)%360;
panorama.setPov(pov);
},10);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
<div id="map-canvas"></div>
After reading http://www.polymer-project.org/docs/elements/core-elements.html#core-transition I am trying the following but I am doing something wrong or did not understand it. When I click on my red test square nothing happens except for my console log message?
<link href="components/core-transition/core-transition-css.html" rel="import">
<polymer-element name="story-1">
<template>
<style>
:host {
position:absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
font-family: 'RobotoDraft', sans-serif;
}
#container {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.card {
position: relative;
height: 150px;
width: 150px;
font-size: 50px;
margin: 8px;
background-color: tomato;
border-radius: 4px;
cursor: default;
}
</style>
<div id="container" flex horizontal wrap around-justified layout>
<div class="card" id="animate-me" vertical center center-justified layout on-tap="{{ani}}">
test
</div>
</div>
</template>
<script>
Polymer('story-1', {
ani: function() {
console.log('???')
var target = document.getElementById('animate-me');
var meta = document.createElement('core-meta');
meta.type = 'transition';
transition = meta.byId('core-transition-fade');
transition.go(target, true);
}
});
</script>
</polymer-element>
This is the part I got wrong
<script>
Polymer('story-1', {
ani: function() {
var target = this.$.animate_me;
var meta = document.createElement('core-meta');
meta.type = 'transition';
transition = meta.byId('core-transition-fade');
transition.setup(target);
transition.go(target, true);
}
});
</script>
As far as I can tell from the documentation transition.setup(target, true); is not mentioned in the example. I had to figure that out from the demo source code.
(see https://github.com/Polymer/core-transition/issues/4)
I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>