What is the optimal way to position the fixed point of view (not to the point on the map). Using for showing middle of the view, while watching GPS positioning and moving center of the map according to current coordinates.
You can do this with pure html and css. Inside your map div, place another div:
<div id="map" class="map">
<div id="center"></div>
</div>
Then add some css to position it in the center of the map viewport:
#center {
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -20px;
margin-left: -20px;
padding-top: 10px;
padding-left: 10px;
border: 2px solid red;
z-index: 10000;
position: relative;
}
I created a JSFiddle so you can play with it: http://jsfiddle.net/wce6zqor/.
Use an overlay with positioning center-center
var pos = map.getView().getCenter();
pin = new ol.Overlay({
position: pos,
element: 'test',
positioning: 'center-center'
});
map.addOverlay(pin);
Related
I have drawer animated mobile menu with scrollable navigation and fixed footer.
Since fixed element inside transformed element is impossible according to an old issue I applied absolute position to the footer and apply scroll to the navigation container.
The problem is that on IOS 12.1 footer randomly disappears.
HTML
<div class="menu">
<nav class="nav">...</nav>
<footer class="footer">Some footer</footer>
</div>
CSS
.menu {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
min-height: 100%;
transition: transform .3s ease-out;
transform: translate(-100%, 0);
-webkit-overflow-scrolling: touch;
&.menu-open {
transform: translate(0, 0);
}
}
nav {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
overflow: auto;
}
footer {
position: absolute;
bottom: 0;
width: 300px;
height: 65px;
}
UPD
I knew two working fixes:
1. change transform animation property to left, but thats less performant
2. set nav bottom to 65px to not overlap with footer but that's not answers why it's happening
Fiddle
I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.
i want to drag items around inside a div that is rotatable, but it doesnt work correctly
anyone knows how to fix that? Here is the code
<div class="wrap">
<div class="inner"></div>
</div>
CSS:
.wrap{
position: absolute;
top: 20px;
left:20px;
width:200px;
height:200px;
background-color:red;
-moz-transform: rotate(80deg);
transform: rotate(80deg);
}
.inner{
position: relative;
top: 20px;
left:20px;
width:20px;
height:20px;
background-color:blue;
}
https://jsfiddle.net/27ey90xw/
I'm using a speech bubble style tooltip based on the jquery ui tooltip widget 'Custom Styling' demo, but I'm having trouble properly displaying the arrow when I need it on the left side of the tooltip instead of on the top or bottom.
Can someone help me fix this code (it cuts off the tip and displays too large a section of the arrow)?
<style type="text/css">
.ui-tooltip.menu_info {
max-width: 200px;
}
* html .ui-tooltip {
background-image: none;
}
body .ui-tooltip { border-width: 1px; }
.ui-tooltip, .arrow:after, .arrow_left_side:after {
background: white;
border: 1px solid #999;
}
.ui-tooltip {
padding: 10px 12px;
color: Black;
font: 8pt "Helvetica Neue", Sans-Serif;
max-width: 150px;
border: 1px solid #999;
position: absolute;
}
.arrow_left_side {
height: 70px;
width: 8px;
overflow: hidden;
position: absolute;
top: 0px;
margin-top: 5px;
left: -8px;
}
.arrow_left_side:after {
content: "";
position: absolute;
width: 25px; height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
</style>
<script>
$(function() {
$('.menu_info').tooltip({
position: {
my: "left+20 center",
at: "right center",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow_left_side")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
Problem Description
The problem is caused by a combination of the CSS transformation and the overflow:hidden. The arrow is actually a square with width and height that is rotated 45o. The default origin point for the rotation is 50% 50% or center center which results in the "arrow" square being rotated around the middle which results in the edges being clipped by the overflow property.
It's best shown as an image or a demo (Webkit only), but the code used to demonstrate the problem is also below.
The 1st box shows the starting position of the "arrow" square, the 2nd box shows a small rotation around the center point. You can see that the edge is clipped already by the containing block's overflow:hidden. The 3rd shows a 45o rotation which demonstrates the problem you have. The 4th adds CSS to move the origin point to 0 25px, that is x=0, y=25px which is the bottom left corner, so you can see a small rotation around this point is looking better. The 5th pane shows a full 45o rotation around the modified origin. This looks much better and all that is left to do is reduce the width of the container to clip off the right hand side which leaves a left facing arrow. Then some simple CSS positioning to move it into place next to the tooltip content.
Solution
The modification needed to your CSS are small positioning changes on the container and the addition of an origin point for the rotation. I realise in the above description that I said an origin of 0 25px but in practice the arrow was still being clipped on the left side so I moved the origin out to 5px 25px instead.
.arrow_left_side {
margin-top: -5px;
left: -10px;
}
.arrow_left_side:after {
-webkit-transform-origin: 5px 25px;
/* for brevity, I have not added all the different browser prefix versions of transform-origin. If you need cross browser support, you will need to add these here */
}
See demo of the above changes
Demo Code
For completeness, here is the code to generate the above image. It's useful to interact with the demo by changing the rotation in the Chrome DevTools to see the square rotating in real time.
HTML
<div class="original"></div>
<div class="original-rotated-a-little"></div>
<div class="original-rotated-forty-five"></div>
<div class="original-with-transform-origin-rotated-a-little"></div>
<div class="original-with-transform-origin-rotated-forty-five"></div>
CSS
body {
margin-left:50px
}
div {
position:relative;
height: 50px;
width: 35px;
overflow: hidden;
top: 0px;
margin-top: 5px;
left: -8px;
border:1px dashed red;
}
div:after {
content: "";
position: absolute;
border: 1px solid #999;
width: 25px;
height: 25px;
}
div.original-rotated-a-little:after {
-webkit-transform: rotate(15deg);
}
div.original-rotated-forty-five:after {
-webkit-transform: rotate(45deg);
}
div.original-with-transform-origin-rotated-a-little:after {
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(15deg);
}
div.original-with-transform-origin-rotated-forty-five:after {
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
}
Hope this helps :-)
I want the area overlapped to be of the same opacity of the rest. This is my code in CSS that creates an overlapped area that is darker than the rest:
.title {
width: 497px;
height: 252px;
font-family:'Bebas';
text-align:right;
}
.title span {
line-height:54px;
font-size: 40px;
position: relative;
top: 72px;
background:rgba(193,193,193,.3);
color: white;
padding:3px;
text-align:right;
}
And the HTML:
<div class="title">
<span>This is where</span><br>
<span>the content goes</span>
</div>
So, how do I go about making the overlapped area the same opacity without using an image?