I'm having a problem with border-radius on iPhone and iPad. I'm trying to generate a round googlemap, which is working fine in every browser and on every system except ios.
What I've done so far is, I've got a map-canvas
<div class="col-sm-4"><div id="map_canvas"></div></div>
and my css
#map_canvas {
height:474px;
width:474px;
border-radius:237px;
margin-bottom:73px;
display: block;
overflow:hidden !important;
position: relative !important;
}
after this wasn't working, i tried to add more border-radius:
.gm-style {
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
}
#map_canvas .gm-style > div {
border-radius:237px;
}
but still no success. Here's a live example:
http://kristinwalzer.at/website/kontakt.php
Anyone knows this problem? And a solution perhaps?
Add one more div for round box and add properties to that round box
<div class="col-sm-4">
<div class="roundBox">
<div id="map_canvas"></div>
</div>
</div>
.roundBox{
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
position: relative !important;
z-index: 999;
}
#map_canvas {
height:474px;
width:474px;
display: block;
border-radius:237px;
}
I've found this In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
All fiddles in this post won't work on safari (windows and ios).
But even if they said in that question that it is solved, it is not. Looks like a Googlemap V3 Bug.
Related
So I have a range input with the css rules shown below. The goal is to have only the thumb of the range respond to pointer events. Works fine in Chrome and Safari. But in ie-11 and Edge, the entire input stops working. I know that pointer-events is experimental, but I also know it is supported in both of those browsers, but maybe not for pseudo-elements?
input[type="range"] {
pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: auto;
}
input[type="range"]::-ms-thumb {
pointer-events: auto;
}
First, please refer to the following sample:
<style>
.bottom {
background: yellow;
width: 600px;
height: 200px;
}
.top {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*pointer-events: none;*/
}
.test{
/*pointer-events: none;*/
}
div{
display:block;
}
</style>
<div>
<!-- bottom div -->
<div class="bottom">
<br>
<input type="range"/>
<br>
<input type="range" class="test"/>(pointer-events: none)
<br>
</div>
<!-- top div -->
<div class="top">
</div>
</div>
In this sample, because the top div is on the top of the range element, so we can't select range (using IE, Microsoft Edge and Microsoft Edge(Chromium)).
After adding the pointer-events: none; in the top class, they are able to select.
Then, if we add the pointer-events: none; for the second range element, in IE browser and Microsoft Edge (chromium), the second range input can't be selected. But in Microsoft Edge (Microsoft Edge 41.16299.1480.0), it is still can be selected. It seems that this is the Edge browser default behavior or issue, I will feedback this issue. So, you could consider to use this method to add top div.
Second, since the new Microsoft Edge is chromium based, you could try to install the new Microsoft Edge and use it.
Besides, I think there have another choice, you could use JQuery script to find the range input elements and use the disabled property to enable/disable it.
$("input[type='range']")[1].disabled = true; //disable
I have a div contains following CSS.
HTML
<div class="fixed-bottom pull-right" id="supdiv" onClick="myfunction()">Support</div>
CSS
#supdiv
{
left: unset !Important;
z-index: 999999999;
display:none
}
In Chrome
In IE
Its working fine on Chrome but expand div width in IE.
So is there any solution to this problem.
Thanks All of you guys.
I found a simple solution to my problem.
Its very simple infect. I just change the following code.
OLD CODE:
left: unset !Important;
NEW CODE:
left: auto;
I am trying to make a box appear when the user hovers over a separate box. I am having trouble getting it to work.
Here is the html
<div class="division_left" id="account">
<div class="container"></div>
<span>Account</span>
</div>
and here is the css
#account:hover + .container {
visibility: visible;
}
.container {
position: absolute;
visibility: hidden;
height: 300px;
width: 500px;
bottom: 40px;
left: 40px;
background-color: #fff;
border: 1px solid #000;
}
again I am trying to get the container to show when #account is hovered over. It just is not showing up. Thanks in advance!
The element #account is a parent of .container rather than its sibling - you need the 'direct descendant' selector, >, rather than the 'adjacent sibling' selector, +, i.e.
#account:hover > .container {
visibility: visible;
}
Instead of
#account:hover + .container {
visibility: visible;
}
Support for the 'direct descendant' selector is as follows:
IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf
5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60
Live example
This is what you're after DEMO http://jsfiddle.net/kevinPHPkevin/wNdBw/
div {
display: none;
}
a:hover + div {
display: block;
}
.container isn't a sibling of #account its a child so you need to instead use the direct child combinator >
#account:hover > .container
jsFiddle
Why not use JQuery Hover function instead? Much better and stable than anything else. you can play with effects as well.
HTML :
<div class="division_left" id="account">
<div class="container" style="display:none"></div>
<span id="showAccount">Account</span>
</div>
JQuery :
$('#showAccount').hover(function(){
$('.container').toggle('fade');
});
This will give you much better effect than regular CSS.
Try it and let me know..
Or I will add JSFiddle if you need.
Update : http://jsfiddle.net/V8QbY/ - Here it is
Regards,
Rahul.
Here is the fiddle i worked on http://jsfiddle.net/fyDkD/14/
My HTML is here
<div id="map-holder">
<div id="map_canvas" class="bigmap"></div>
<div id="map_stv" class="minimap" style="display:none"></div>
</div>
My CSS is here
#map-holder {
height: 1200px ;
position: relative;
}
.bigmap{
width:100%;
height:100%;
}
.minimap{
width:50%;
height:100%;
}
#map_stv {
position: absolute;
top: 0;
right: 0;
}
#map_stv img {
border: none !important;
max-width: none !important;
}
In this i see that when we drag and drop the pegman anywhere on the google map then we get the streetview. The street view is not proper only in Firefox browser. Also i have seen that if the difference between width and height is considerably large then we can see the issue very easily. The img of street view is not showing properly. Please suggest on this.
This can be fixed by adding
mode: 'html5'
to the panoramaOptions. I tested it and it works.
See Google's answer to this this bug report I sent them:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=7246
I am writing a jquery mobile app which needs a map.
For the map I am planning to use Google maps service.
To account for orientation changes, I tried to use something like:
<script>
$('#page-map').live('pagecreate', function(event) {
var map = $('#map_canvas').gmap({
...
});
...
$(window).resize(function() {
$('#map_canvas').width($(window).width());
$('#map_canvas').height($(window).height());
});
)};
</script>
The problem: this code correctly resizes the map canvas when the device is rotated, but it looks like jquery mobile resize() is skipped (the url bar is visible, for example...).
Not even adding to the "resize(function() {" code something like this:
google.maps.event.trigger(map, 'resize');
is of any help.
UPDATE:
The issue only happens on the only mobile device I'm testing my pages - a Samsung Galaxy Mini (GT-S5570), Android 2.3.4 (Gingerbread). It does not happen when resizing window on a desktop PC (i.e: on a desktop browser map_canvas is correctly filled when browser's window is enlarged, even without the resize() binding, only due to width/height at 100% on map_canvas...)
I assign a size through css to my map in jquery mobile
I add the map_canvas inside div with dimencion deuin want in this case 100%
CSS
#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;}
#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;}
HTML
<div data-role="content" id="map_content" data-theme="a">
<div id="map_content">
<div id="map_canvas"></div>
</div>
</div>
I've tried the above answer (plus many others) and nothing worked for me. Actually, the above code was working for me, but just until I started using jQuery Mobile. Somehow, when I load jQuery Mobile (funnily enough, I noticed that it's the JS, no the CSS) the map_canvas has no height (a trick to check the height of the element is adding a border to it like border: 1px solid red;).
Eventually, I managed to solve the auto-resize when the orientation changes by using the following code/css:
<div data-role="page" id="pageID">
<div role="main" class="ui-content">
<div id="map_canvas">
</div>
</div>
</div>
And in the css:
html,
body,
#pageID {
height: 100%;
margin: 0;
padding: 0;
}
.ui-content {
padding: 0;
}
.ui-content,
.ui-content #map_canvas {
height: inherit; /* the trick */
}
So, basically the: height: inherit; solved the problem for me.
Credits: https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250
I hope it helps!