Hi all I already have it looking centered and responsive but I am not sure if there is anything else I can do to make it even better
I have this structure:
div
div
svg
the first div has
width 100%
second has
display flex
align items center
then for the svg I have it's size:
svg[Attributes Style] {
width: 85;
height: 21;
}
What else can I do? I am testing it in various screens but I haven't found issues yet.
Try this
div div { ## this is the second <div> tag
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
and
svg {text-align: center;}
The problem I'm facing is that when I click on a button to show this element, on IE 10 it doesn't show up. I'm adding the display: block property via JavaScript, that's why it's not in the CSS. It works on all other browsers except IE.
If I remove the transition it shows up.
section {
display: none;
position: relative;
top: 50%;
margin: 0 auto;
width: 400px;
transition: all 0.5s linear;
transform: translate(0,-300%);
}
section.visible {
transform: translate(0,-50%);
}
I solved the issue by showing the section when adding display: block on the visible class rather than using jQuery show(). Guess IE10+ has issues with that.
I've got a problem with Chrome.
I'm trying to vertically-align some divelements using display: inline-block;
instead of floating them. The problem occurs when I put some text into them: for a strange reason, Chrome displays differently filled divs onto different lines.
Firefox and IE are working correctly.
For better understanding check this example
How can I avoid this?
You need to add for global wrapper font-size: 0; and set regular font size for your inline blocks, you can also add: letter-spacing: 0; and word-spacing: 0;, something like this:
.wrapper {
font-size: 0;
letter-spacing: 0;
word-spacing: 0;
}
.wrapper .inline_block {
display: inline-block;
font-size: 12px;
letter-spacing: 1px;
word-spacing: .1em;
vertical-align: top;
}
and example fiddle: http://jsfiddle.net/3ab22/
and updated fiddle: http://jsfiddle.net/3ab22/3/
How can I get an image button with hover effect? I have two button images one is simple and the other one is for the hover?
You can easily do it in CSS.
input[type='button']:hover
{
color: #00a;
//or background-image: url("url");
}
You can do it easily with css by using a sprite image and moving the background image depending if its hovered or not.
css:
a { display:block; width: 80px; height: 40px; background: url(bgImage.png) top;
a:hover { background: url(bgImage.png) bottom; }
You have to combine your "simple" and "hover" image into a single image for this to work.
How can I change the default graphic for the Infowindow close button?
You can do it with CSS, like this:
img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]
{ content:url("/img/own_close_button.png"); }
Works on:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Most mobile devices (default browser)
Does not work on:
FireFox 27.0
IE 11.0
If you're using google maps API V3, then you might want to use the official add on infobox.
Google Maps Utility - Infobox
First you need to hide the default close icon:
.gm-style-iw button.gm-ui-hover-effect img {
display: none !important;
}
Second, force the default button (that holds the image) to have full opacity:
.gm-style-iw button.gm-ui-hover-effect {
opacity: 1 !important;
}
Third, set your own image and position it:
.gm-style-iw button.gm-ui-hover-effect:before {
display: block;
content: "";
background: url('assets/close-red.svg') center center no-repeat;
background-size: cover;
width: 8px;
height: 8px;
right: -19px;
position: relative;
}
Result:
With jQuery you can change the image file location. If I have an image button_close.png that is 16px in size:
jQuery('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').livequery(function() {
jQuery(this).attr('width', 16).attr('height', 16).css({
width: '16px',
height: '16px'
}).attr('src', 'button_close.png');
});
Of course this only works as long as Google uses this file location.
button.gm-ui-hover-effect {
background: url(your-img.png) !important;
background-size: contain !important;
}
button.gm-ui-hover-effect img {
display: none !important;
}
Using what Dimitrije Djekanovic and Grant suggested, here is a working version for the current API version 3.49 (Mid-May of 2022):
/* hides the x image */
button.gm-ui-hover-effect > span {
display: none !important;
}
/* inserts the customized and clickable image instead */
button.gm-ui-hover-effect {
opacity: 1 !important;
background: url('close.svg') center center !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
/* above is a good size or uncomment the next line */
/* background-size: contain !important; */
}
To test this, go to the StackBlitz demo provided by the official documentation and paste the style.css file while having background changed to:
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/414px-Mr._Smiley_Face.svg.png')
center center !important;
There isn't really a way to do this. Your best bet would probably be to use a third-party or custom Infowindow.
There's a list of some third-party solutions here.
To replace with (or whatever image you might like), after
infowindow.open(map, marker);
you can try to add these lines
$('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').each(function() {
$(this).attr('width', 14);
$(this).attr('height', 13);
$(this).css({width: '14px',height: '13px'});
$(this).attr('src','http://www.google.com/intl/en_us/mapfiles/close.gif');
});