In my web application I am showing infoWindows in a google map.
The default design is very primitive and I would like to have something nicer.
Is there a css-stylesheet available that I can include, which provides nice styles for the infoWindows?
I haven't found anything useful so far.
Thanks!
Write Css for Info Window
<style type="text/css">
.info-win {
padding: 5px;
width: 350px;
overflow: hidden;
line-height: 1.8;
font-weight: bold;
margin: 0;
}
</style>
Create a string Which contain HTML elements and then set it as a content of info window.
var htmlcontent = '<div class="info-win"><span><p style="background:#CCDF31;padding:3px 5px;color:#000;">Info Win Design</p></span></div>';
var infowindow = new google.maps.InfoWindow({
content: htmlcontent
});
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
So I am a bit stumped on this ... I'm using a WebView in a portion of our app, the reason for the WebView is because we are pulling from an API endpoint that returns to us an HTML string. The font size and other things in this HTML string aren't styled for the purpose of using in a mobile app so we are trying to add some stylistic changes to it for better viewability. I've seen people add Style Tags at the top of the html file to add specific html styles to the element, and everything is generally working except the font size in the HTML of WebView renders differently every time I click into the screen that has the WebView contained in it.
Here is the current code (style + html + script):
let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript
I have also console logged this string out in the debugger to make sure it's stitched well, and have even created and index.html and pasted in there the exact string, to make sure it's just showing up properly there.
Here is the style string:
let htmlStyle = `<style>
#height-calculator {
margin: 0;
padding: 0;
}
#height-calculator {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
body {
width:100%;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
h3 {
font-size: 32px
}
img {
width:98%;
}
td {
display: block !important;
width: 95% !important;
}
img {
width:98%;
}
hr {
width: 98%;
}
ol li ol li ol li {
position: relative; right: 85px;
}
ul {
width: 98%,
margin-left: -25px;
}
li {
width: 98%;
}
.tabs {
display: none;
}
.tabs > li {
display: none;
}
.tabs-content {
padding: 0;
list-style-type: none;
}
tr {
display: flex;
flex-direction: column;
}
</style>`
And finally here is the WebView:
<WebView
javaScriptEnabled={true}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
scrollEnabled={false}
source={{html: rawHTML}}
style={{height: Number(this.state.height)}}
domStorageEnabled={true}
scalesPageToFit={true}
decelerationRate="normal"
javaScriptEnabledAndroid={true} />
Also, as I mentioned all the other styles applied are working, it's mainly just the font size that is super unpredictable.
Here is the view when I click it one time:
And then I don't change or exit the app, I just go back, and then click the same button to enter that same display and I get this sometimes (it sometimes takes multiple clicks ... it's very unpredictable):
I have a video of this as well, if you feel that would help this explanation. I'm trying to retell it the best I can haha.
Edit:
I think this might be a simulator only related issue? If anyone could speak some wisdom into that, that would be awesome still. I can't seem to reproduce this error on production build.
I recently experienced the same issue. It was only occurring for me on iOS, not Android.
The weirdest part is the inconsistency in replication. I couldn't find any pattern to when the WebView content would be sized differently. Identical HTML would result in font size that was sometimes normal, but other times very tiny.
My solution came from a (RN 0.47) WebView prop:
scalesPageToFit?: bool
Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is true.
I tried setting scalesPageToFit to false, and voilà, the page stopped scaling down:
<WebView
source={{ html: myHtml }}
scalesPageToFit={false}
/>
The only problem is that this caused my content to be scaled larger than the WebView's container on Android. To fix this, I simply set the scalesPageToFit prop conditionally, based on platform:
<WebView
source={{ html: myHtml }}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
Worked like a charm for me!
I used react-native-render-html. The reason I choose this solution over the accepted answer is because I can style html tags using react native styles instead of injecting style declaration string before the actual content.
const htmlStyles = { p: {fontFamily: 'Lato'} }
const htmlContent = <H1>My Html</H1>;
<HTML containerStyle={ {margin: 16} }
html={ htmlContent }
tagsStyles={ htmlStyles } />
I am learning html/css and one thing that baffles me is the idea of image mapping, how am i suppose to get the coordinates of a section of an image and plug it into my area tag without using image mapping software like gimp. Using gimp's image map tool is really useful but I am concerned that i will need to know how to do this without gimp in the future for some special situation i can't think of, is there a way to get coordinates without image mapping software? Should i be concerned about relying on image mapping software?
thanks in advance!
You can get the coordinates of an image with javascript.
HTML
<div class='clickable'>
<span class='display'></span>
</div>
CSS
.clickable {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Googleplex-Patio-Aug-2014.JPG/300px-Googleplex-Patio-Aug-2014.JPG");
height: 150px; width: 150px;
margin: 15px;
position: absolute;
}
.display {
display: block;
height: 16px;
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
top: 50%; margin-top: -8px;
color:white;
}
And Javascript to get coordinates
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var $display = $div.find('.display');
var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;
$display.text('x: ' + x + ', y: ' + y);
});
Demo: http://jsfiddle.net/LQqGS/223/
Hi I am trying to build a angular single page app for mobile that uses a map on one page. It also should include a sticky footer, and is based on bootstrap. The sticky footer css interferes with the css needed to get the map to take up all of the remaining screen space, so I add a class='map' to the html element to override certain css elements (see below).
Everything works nicely until I go to the map page, leave it and then return to the map page. In this instance the map is not working correctly at all. It is hard to describe, so please try the plnkr.
I have found CSS that works for the map reloading, but then that breaks something else in the site. It is driving me crazy trying to combine the two models, hence my appeal for help.
Update: I have now found that resizing the screen rectifies the rendering issues, until you leave and return to the map. Of course a mobile use cannot change their screen size, but this may help find a solution.
html {
position: relative;
min-height: 100%;
}
html.map {
height: 100%
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.map body {
/* For Google map */
height: 100%;
margin-bottom: 0;
padding-bottom: 60px;
padding-top: 60px
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
header {
width: 100%;
background-color: #ccc;
height: 60px;
top: 0;
}
.map header {
position: absolute;
}
UPDATE
I implemented a solution similar to yours, which I found in this blog article. Essentially, you have to trigger a resize event in order to have the map repainted correctly when it goes from hidden to visible.
But I put my code into a directive instead of a controller (doesn't bloat controller and decorates the element it affects), instead of adding a watcher it runs only after the directive/element is linked (more performant), and it doesn't require you to re-enter your coordinates in order to refresh:
.directive('autoRefresh', function($timeout){
return {
restrict: 'A',
link: function(scope, elem, attrs){
$timeout(function(){
var center = scope.map.getCenter();
google.maps.event.trigger(scope.map, "resize");
scope.map.setCenter(center);
});
}
}
})
Updated Plunker
OK, so what I was missing was to trigger the resize event. This now works perfectly in my plunker but not yet in my more complex actual code. Nearly there!
restosApp.controller('mapCtrl', function($scope) {
$scope.$watch('map', function() {
google.maps.event.trigger($scope.map, 'resize');
var ll = new google.maps.LatLng(52.374, 4.899);
$scope.map.setCenter(ll);
});
});
I have created a search engine for my website using Google Webmaster Tools. Now I'd like to customise the format of results given by the CSE. Google offers me to download the CSS file in whole, but when I attach it to my PHP document inside the head section, nothing happens – the custom style doesn't work.
When I put the Google's style inside the body tag, everything worked normally, but the problem is that this way isn't according to the rules of the World Wide Web Consortium, plus my code gets very 'dirty' and untidy if I insert such a long block of CSS code inside the body of my page.
How can I make my external style sheet change the default appearance of the search engine?
Were you able to figure out if an external CSS stylesheet can be used for a Custom Google Search box?
This is what I've done today, and it validates in W3C validator:
Check out this link: a homepage with Google Custom Search and external stylesheet.
If you view source, you can see that I downloaded Google Custom Search's "Source CSS" from the link on their "Get Code" page. Then I uploaded it to my website's server (after changing the CSS to my liking).
Then I took the script portions of the code from the "Get Code" page and pasted them in the HTML of the homepage, and I changed the phrase:
google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
to this:
google.load('search', '1', {language : 'en', style : src="http://hoodexc.com/css/google-search.css"});
If anyone who knows java script can tell me a better way (just because this is working doesn't mean it's the best way) please let me know.
Simply provide additional parameter "nocss: true" when loading Google Custom Search, to prevent Google from loading any css for search, so you can define all gcse-, gs- etc. css classes yourself without interference.
nocss: A boolean that tells the API whether to load any style sheets
typically associated with its controls. If you don't intend to use the
default CSS, you can reduce the load time by setting this to true. The
default setting is false.
https://developers.google.com/loader/#DetailedDocumentation
Code:
google.load('search', '1', {
callback: OnGoogleSearchLoad,
language : 'en',
nocss: true,
style : src="http://example.com/assets/css/gcse.css"
});
Result (no css, except site default rules) :
Example css file for GCS:
.gsc-tabsAreaInvisible,
.gsc-resultsHeader,
.gsc-branding,
.gcsc-branding,
.gsc-url-top,
.gs-watermark,
.gsc-thumbnail-inside,
.gsc-url-bottom {
display: none;
}
.gsc-result {
padding: 20px 0;
border-bottom: 1px solid #E1E1E1;
}
.gs-image-box {
width: 140px;
height: 80px;
overflow: hidden;
}
img.gs-image {
min-height: 80px;
}
td.gsc-table-cell-thumbnail {
vertical-align: top;
padding: 0;
width: 140px;
display: block!important;
}
td.gsc-table-cell-snippet-close {
vertical-align: top;
padding: 0;
padding-left: 20px;
}
.gsc-wrapper {
font-size: 16px;
line-height: 20px;
}
.gsc-control-cse a {
color: #202020;
font-family: HelveticaNeueLTPro-Cn, Helvetica, Arial, sans-serif;
}
.gs-snippet {
color: #777;
margin-top: 10px;
}
b {
font-weight: normal;
}
.gsc-cursor {
width: 100%;
height: 20px;
text-align: center;
}
.gsc-cursor-page {
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
margin: 20px 0;
}
form.gsc-search-box {
background: #d9dadd;
border: 20px solid #d9dadd;
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
table.gsc-search-box {
width: 100%;
}
td.gsc-search-button {
vertical-align: middle;
padding-left: 20px;
}
td.gsc-input {
vertical-align: top;
width: 100%;
}
input.gsc-input {
margin:0;
width: 99%;
}
Result (with custom styles):
I would like to say thanks to Gniewomir and Kris.
I am installing the two-page layout google custom search on my wordpress blog using the V1 code. For the search box, I pasted <div id="cse-search-form">Loading</div> in a text widget and the rest of the script in my header.
I changed this portion
google.load('search', '1', {language: 'en', style: google.loader.themes.GREENSKY});
to
google.load('search', '1', {language: 'en', nocss:true, style:"http://www.domain-name/wp-content/themes/theme-name/css/gcse.css"});
At the same time, I downloaded GREENSKY.css and saved it as 'gcse.css' which I uploaded to my server.
Ran this through GTMETRIX and the warnings on HTTP Redirects are gone.