How can I make a div area on the Google map iframe. Part of my code is ready here (http://thewebcookies.home.pl/test.html). That image (http://i.stack.imgur.com/92gkt.png) is an example what I want to get.
Add this div below the map iframe
<div class="modal">
<!-- text and input box go here -->
</div>
and add the following CSS
.modal {
width: 500px;
height: 160px;
background: #FFF;
position: absolute;
top: 100px;
left: 250px;
}
Related
I need to put a google maps into a div and this one must be a circular div, but I've two problem
at load time I see standard rectangular div and after half second this div became circular
when use this map in draggable way I see always a standard div and only after mouse leave I see circle again
I think that the main idea is the order of loading files in your site: html, css, js.
Take a look at this: http://jsfiddle.net/nfng1sm4/
. You only have to change the background color in to the color of your container div.
.circle-text, #googleMap {
width: 500px;
height: 380px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;}
adding css position: relative;, z-index: and border-radius to the parent div of the map holder, it will mask the child div(#mapCanvas)
Fiddle demo
css
.mapCover {
position: relative;
width: 300px;
height: 300px;
border: 5px solid #000000;
border-radius: 400px;
overflow: hidden;
z-index: 1000;
}
#mapCanvas {
width: 300px;
height: 300px;
}
html
<div class="mapCover">
<div id="mapCanvas"></div>
</div>
I'm not sure what this is called, but how do developers accomplish being able to have, say a hollow image of a Nexus phone, and then scroll content inside of it? It's an ingenious way to simulate how a product will work in real life, so how does one pull this off?
Here's an example, about halfway down the page.
http://grupoweb.upf.edu/innova/q_kly/#step-6
#silversunhunter
I am able to get both images displayed, but the content seems to be completely obscuring the parent div. I measured the images and the dimensions are correct afaik.
css:
.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;
}
.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}
HTML:
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>
</div>
</div>
</div>
You need to set the image as a background image in the parent div. Then a properly measured div inside that is absolutely positioned can be your scrollable content.
<div id="main">
<div id="content"></div>
</div>
the phone image is 345px × 661px
#main {
background: url(/filelocation) no-repeat;
height: 661px;
width: 345px;
position: relative;
}
the screen is 305x601 (hypothetically)
#content {
overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
height: 601px;
width: 305px;
position: absolute;
left: 20px;
top: 30px;
}
I want to build an mobile app interface which basically shows two different things, a list and a map. But instead of having a plain tap-bar at the bottom with two entries, I want to show the two things with as layers (for example like the Google Maps App (on iOS), where you can drag a drawer from the bottom to the top and interact with it, but you can also interact with the underneath map when the drawer is at the bottom again).
A good picture is that one (the map should be fullscreen underneath the list-view, and you should be able to drag the list to the top, and slide through the list, but also when the map is visible to interact with the map (pinch to zoom, etc.)).
I thought of building a map-div with a lower z-index than the list-div, giving the list-div a top-padding of 200px (so that the map is always visible a little bit, and the list is not on top) and giving the list-div a transparent .png background. But then the area on top of the list-div is not clickable, so I can't interact with the underneath map-div (because of the padding and the transparent background of the list-div).
Is this possible with plain CSS?
EDIT: I think I got the solution, which looks like:
<html>
<style>
html {
width: 100%;
height: 100%;
}
.map {
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.list {
height: 1000px;
width: 100%;
background-color: blue;
position: relative;
margin-top: 200px;
z-index: 1;
}
.layer {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<body>
<div class="map">
<h1>Map</h1>
</div>
<div class="layer">
<div class="list">
<h1>List</h1>
</div>
</div>
</body>
</html>
I have some problem
I try to write a image editor plugin, in this code I have 2 divs as you can see
this child div can drag and re size very well,after user re size it and click on upload bottom ,the information about child div place and exact size send to server perfectly.
but when child div drag and come out of parent div it dosent crop the extra part of image which come out of parent div.
This is my html code
<div id="output">
<div class="wifix" width="100%">
<div class="dadycool">
<div class="child" align="center"></div>
</div>
</div>
</div>
css codes
div.wifix {
height: 300px;
width: 600px;
}
div.dadycool {
width: 250px;
height: 300px;
overflow: hidden;
outline: 1px dashed red;
margin-top: 50px;
position: relative;
z-index: 100;
}
div.child {
height: 400px;
width: 500px;
background: coral;
left: -100px;
right: 0;
top: -50px;
position: absolute;
z-index: -1;
}
You can use containment in your code,
This will restrict your child element to move out of the parent element.
Eg:
$( ".child" ).draggable({ containment: ".dadycool" });
See datails here
i want to create a pop up window in phonegap jquery. Please help me out. i need click a button then it shows a popup that i have atached.
I don't think you can overlay above the status bar (time, battery info).
But if that isn't the problem... just add a div with an absolute position.
#myDiv {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.6);
z-index: 10;
display: none;
}
<body>
<div id='myDiv'>
<!-- add the fields/buttons here -->
</div>
</body>
<script>
//jQuery script
$('#myDiv').show();
</script>