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 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">
I'm having problems using Tumblr's custom variables functionality with externally hosted CSS.
Background
Tumblr themes are written as a single page of html with all CSS stored in <style> tags in the document <head>
Tumblr allows user-defined data to be stored in variable of your naming, wrapped in curly braces. These can then be applied in the CSS. An example might be a color hex code being attached to {color:BackgroundColour} which can then be used in place of a #value in the CSS. (More info)
When a browser renders the page the data stored in {color:BackgroundColor} is returned as the hex code and everything is ok.
Problem
To make theme development easier I am hosting my CSS externally and linking in the <head>
When the page renders, my custom variables are returned as the as they are written in the CSS, rather than pulling the attached value.
So the page renders:
#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color:{color:BackgroundColor};
}
Instead of:
#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color: #dedede;
}
This only happens when the CSS is linked from external hosting. Is their a way that I can get around this?
From my limited understanding of the tumblr templating engine I do not believe this is possible with a remotely hosted css file. All of the variables declarations are rendered server side and served up to the client with the correct syntax. No matter how you inject your externally hosted css file it will be to late as the server already rendered the content.
The only compramise I could see working would be to split up your css file to selectors that require the variables and ones that do not.
Example:
style block contained in the tumblr page.
<style type="text/css">
#header{
background-color:{color:BackgroundColor};
}
</style>
Externally hosted file:
#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
}
That way you can fulfill your requirement of an externally hosted css file but also utilize the tumblr engine.