I have an application which uses the Google Maps API and fusion tables which stopped working as of today (the code and Fusion tables databases weren't changed and were working yesterday.) I have checked the error log and didn't see anything.
The page can be found at http://www2.ece.ohio-state.edu/~garryj/PassiveRadar/Passive%20Radar%20Coverage%20Tool.html
I was hoping someone with a better Javascript background and more experienced debugging skills than I could spot the error quickly, although the code is rather long.
All help is greatly appreciated.
it seems that google has updated the default.css, the prevoius version sets the height of #map_canvas and #map-canvas, the current only for #map-canvas.
Add this style to your page:
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
and remove the redundant
<link type="text/css" rel="stylesheet" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css">
Related
I am developing a simple website using the Hugo static website generator and the Docsy theme. The website includes a simple information Cookie Banner so I have added the same to my static website by referencing the approach mentioned on: Cookie consent | Hugo Codex
Ideally, I would like the banner to be visible like this:
But currently its looking something like this:
[
I have added all styles and partials but still it didn't look as expected. Maybe some styles are messing up the child cookie consent styles but unable to figure out the same. Can someone please let me know what am I doing wrong here?
I have added my complete code to the following GitHub project:
https://github.com/Aravinda93/hugo-docsy-learn
I am quite new to Hugo and Docsy, so I am getting a bit confused about the folder and file structure, hence am unable to figure out which parent style is messing up my Cookie consent modal. Can someone please help me with some suggestions?
I think this was solved here: https://discourse.gohugo.io/t/cookie-banner-is-not-displaying-as-intended-when-using-hugo-with-docsy-theme/40332/7.
This should be removed:
font-size: s;
transform: translateY(100vh);
color: var(--color-warning);
background-color: var(--color-warning-bg);
width: 100%;
This should be added:
background: white;
border-color: white;
margin-left: -15px;
width: calc(100% + 30px);
I am currently learning to use videos as a background on the websites I am developing. The issue that I am having is that I can't get the videos to actually appear. I believe it has to do with the way I have them stored in a folder, but after trying multiple different methods of accessing the files, I still can't get them to display. The goal is to have the video stored in the "videos" folder to be displayed as my page background. My question is, what elements am I missing for this to work? I have tried moving the files into the main folder as well as adjusting the CSS a few times. Both yielded no results.
My current setup is as followed:
My files are stored like this (I apologize for the link, I can't embed images yet):
File Hierarchy
backgroundVideo {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: URL(images/resBackground.jpg);
background-size: cover;
}
<body>
<video autoplay loop class="backgroundVideo">
<source src="videos/resVideoBackground.mp4" type="videos/mp4"/>Your browser does not support the video tag! Please upgrade your broswer!
<source src="videos/resVideoBackground.webm" type="videos/webm"/>Your browser does not support the video tag! Please upgrade your broswer!
<source src="videos/resVideoBackground.ogv" type="videos/ogv"/>Your browser does not support the video tag! Please upgrade your broswer!
</video>
</body>
Any guidance on how to get the video running is greatly appreciated!
Your file hierarchy and the way you are referencing your files from your CSS and HTML looks fine to me.
I notice a couple things right off the bat. The first is that, in your source elements, the proper type is a singular video/mp4, video/webm, and video/ogv.
Another common tactic when implementing background videos into websites is to add a little JavaScript that "kicks" them on browsers that don't like the autoplay attribute. For example (you'll need to add an id="backgroundVideo" to your video element for this to work):
<script type="text/javascript">
// Play the background video on Android devices that support the
// "canplay" event listener
var backgroundVideo= document.getElementById('backgroundVideo');
backgroundVideo.addEventListener('canplay', function() {
backgroundVideo.play();
});
</script>
I would add this script element, either externally or inline, at the very end of the body.
I am trying to integrate Google CSE in a page with BS3. Looks like BS3 is messing up the search box and button.
http://jsfiddle.net/DTcHh/509/
This is how the code looks in IE and Chrome http://i.imgur.com/vungb7v.png
The search icon is missing in the button and the bottom bar is missing in Chrome.
I tried playing around with
input.gsc-search-button
.reset-box-sizing *
but since I have only basic CSS skills I cannot figure out how to fix this. Can someone please tell me how should I fix this so that the box and button looks fine in IE and Non IE browsers.
All what you have to do is to replace the CSS values that are making problems and to know what you must replace and what are the values that you must change to is to take advantage from Google Chrome's "Inspect Element" feature.
You can see the effect on my own server on :
http://link-sa.ga/gcse/
Download the source code:
https://www.dropbox.com/s/bo01xp2agvp7w4e/index.html
JSfiddle:
http://jsfiddle.net/rsm23/GPLyM/
Read the comments under the GCSE call for the css code is should be like this :
<gcse:search></gcse:search>
<style type="text/css">
body {
margin: 10px;
}
#gsc-iw-id1{
height: 30px;
border-color: #898989;
}
input.gsc-search-button-v2{
width: 71px;
height: 29px;
}
</style>
I'm using Google Maps API v3 in my application. Maps Pan control isn't displaying properly on IE 10 and IE 11.
.
It's working fine on Chrome, Mozilla and IE8, IE9. I can't figure out the way to resolve it.
on Stackoverflow, a nearly similar question is posted here: Google Maps zoom control
but not solution is not application. Definitely, it's the CSS issue, but I couldn't resolve it. I've checked in IE developer tool for any css class overriding, but no luck.
Have anyone faced the similar problem or anyone had any solution for this?
EDIT: The basic map is also disordered in my IE 11 version.![enter image description here]
-- Anil
Well, as #geocodezip suggested, it's a bug till today in Google map API and best solution for it is to use css.
use below css on the page :
.gmnoprint div[title^="Pan"]
{
filter:alpha(opacity=0)!important;
}
hope it would help others and save time.
-Anil
I just added the styling to my CSS , and fix
.gmnoprint div[title^="Pan"] {
opacity: 0 !important;
}
An important addition to non-English localizations:
You must use in style not "Pan", but the text specific to your locale. For example, for Russian localization - "Пан".
Hover your mouse on a button of pan Control and look pop-up hint. In style the first 3 letters from it are used.
FWIW - I've found that the above CSS isn't enough because we next get "+" for zoom in/out for street view. I made a slight modification...turn off all title items except the one we don't want hidden.
.gmnoprint div[title]
{
opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
opacity: inherit !important;
}
Late to the party I know, but when I came across this issue I implemented the following fix for my applications using Google Maps V3 which I know is similar to what has already been posted here, but just in case it helps as I know how damn frustrating these sorts of issues can be!
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
{
opacity: 0 !important;
}
html[data-useragent*='Trident/7.0'] div[title^="Pan"]
{
opacity: 0 !important;
}
</style>
I have an application which uses the Google Maps API and fusion tables which stopped working as of today (the code and Fusion tables databases weren't changed and were working yesterday.) I have checked the error log and didn't see anything.
The page can be found at http://www2.ece.ohio-state.edu/~garryj/PassiveRadar/Passive%20Radar%20Coverage%20Tool.html
I was hoping someone with a better Javascript background and more experienced debugging skills than I could spot the error quickly, although the code is rather long.
All help is greatly appreciated.
it seems that google has updated the default.css, the prevoius version sets the height of #map_canvas and #map-canvas, the current only for #map-canvas.
Add this style to your page:
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
and remove the redundant
<link type="text/css" rel="stylesheet" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css">