I have built a responsive website with media queries to target different mobile devices but would like to have an "override all" link available on smaller devices. When clicked, the link would remove all media query styles and reset the page to default styles, exposing the site as it would at 1024px wide. Is there a way to achieve this?
The only way you can do this is with Javascript. I came up with two solutions:
id/class on <html> element:
Apply an id or class to the html element: <html class="media-queries">.
In your media-queries, every selector will start with .media-queries:
CSS
#media (max-width: 300px) {
.media-queries #nav li {
display: block;
}
.media-queries #main, .media-queries #aside {
float: none;
}
}
Then, you get JS to remove class="media-queries".
HTML
<a id="del-mq" href="#">Default style</a>
JavaScript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('html')[0].removeAttribute('class');
}
jQuery
$('#del-mq').click(function() {
$('.media-queries').removeClass();
});
Pros: no extra http requests.
Cons: lots of css selectors(.media-queries), which shouldn't be a problem if using Sass:
#media (max-width: 300px) {
.media-queries {
#nav...
#main...
}
}
External media-queries.css
All the media queries go in a separate css file. Include it with <link rel="stylesheet" href="media-queries.css">.
Then you get an ID for the <link> and remove the element.
HTML
<head>
<link rel="stylesheet" href="default.css">
<link id="media-queries" rel="stylesheet" href="media-queries.css">
</head>
<body>
...
<a id="del-mq" href="#">Default style</a>
...
</body>
Javascript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('head')[0].removeChild(document.getElementById('media-queries'));
}
jQuery
$('#del-mq').click(function() {
$('#media-queries').remove();
});
Pros: no need for lots of css selectors.
Cons: extra http request.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selection control - Azure Maps Web SDK Samples</title>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link
rel="stylesheet"
href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
type="text/css"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link
rel="stylesheet"
href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css"
type="text/css"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
<!-- Add references to the Azure Maps Selection Control module JavaScript and CSS files. -->
<link rel="stylesheet" href="./selectionControl.min.css" type="text/css" />
<script src="./selectionControl.min.js"></script>
<script type="text/javascript">
var map, datasource;
//GeoJSON feed that contains the data we want to map.
var geojsonFeed =
"https://azuremapscodesamples.azurewebsites.net/Common/data/geojson/SamplePoiDataSet.json";
function GetMap() {
//Initialize a map instance.
map = new atlas.Map("myMap", {
center: [-73.929, 40.7406],
zoom: 10,
style: "grayscale_light",
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "",
},
});
//Wait until the map resources are ready.
map.events.add("ready", function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
datasource.importDataFromUrl(geojsonFeed);
//Create a layer to render the points.
map.layers.add(
new atlas.layer.BubbleLayer(datasource, null, {
color: [
"case",
//If there is a color property, use it.
["has", "color"],
["get", "color"],
//default to blue.
"#3399ff",
],
})
);
var control = new atlas.control.SelectionControl({
style: "auto",
// selectionModes: ['circle', 'time']
source: datasource,
});
map.events.add("dataselected", control, function (selectedShapes) {
console.log(selectedShapes); // printing the selectedShapes
alert(selectedShapes.length + " shapes selected");
});
//Add controls to the map.
map.controls.add(
[
//Optional. Add the map style control so we can see how the custom control reacts.
new atlas.control.StyleControl({
style: "auto",
persistSearchArea: true,
}),
//Add the selection control to the map.
control,
],
{
position: "top-left",
}
);
});
}
</script>
</head>
<body onload="GetMap()">
<div
id="myMap"
style="position: relative; width: 100%; min-width: 290px; height: 600px"
></div>
<fieldset
style="width: calc(100% - 30px); min-width: 290px; margin-top: 10px"
>
<legend><h1 style="font-size: 16px">Selection control</h1></legend>
This sample shows how to use the selection control. This control connects
to a data source and lets you draw polygon areas on the map and retrieve
all the point shapes in the data source that are within that area. Press
the pointer button in the top right corner of the map to choose a
selection mode, then draw on the map. This samples uses the open source
<a
href="https://github.com/Azure-Samples/azure-maps-selection-control/"
target="_blank"
>Azure Maps Selection Control module</a
>
</fieldset>
</body>
</html>
I'm using the azure maps selection module to filter out a data points based on selection. But console.log (selectedShapes) on "dataselected" event returns a array with undefined values. However the alert shows the number of elements in the array. But they are all undefined. Is there anything that I'm missing ? Thanks.
I'd like to know where I should add the <script></script> provided by Google Adsense.
They say to add it into the <head></head>, but in Gatsby you have Helmet as <head>.
I tried also to add the script inside an html.js file where it's located a <head> tag with {``} to escape the <script> tag, but it outputs at the top of the website the script content.
TL;DR: What is the optimal way to add Adsense to a website built with GatsbyJS?
I've tried to use the react adsense package but I do not understand how to use it with Gatsby.
I have tried to add the <script> tag to html.js and it doesn't compile.
If you escape it with {``} you get the script as is, on top of the website.
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{this.props.headComponents}
{`<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>`}
{` <script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1540853335472527",
enable_page_level_ads: true
});
</script>
`}
</head>
source: html.js
The website should get detected by the Google crawlers.
Thanks to an answer given on Github, finally the problem is solved:
If you want to add Adsense:
cp .cache/default-html.js src/html.js
Add the script but everything inside should be escaped -> {<some-js-code-here>}
In my situation and as an example:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
{`
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1540853335472527",
enable_page_level_ads: true
});
`}
</script>
if you are using services like Netlify to deploy your website, you can use snippet injection functionality to make this work without touching your source code.
settings -> build & deploy -> post processing -> snippet injection -> add snippet
then you can select where you want to add the snippet (script tag). For the Adsense this should be before the </head>. hope it helps. :)
You can find here a nice tutorial on how to add Google AdSense in Gatsby.
Basically, the suggested way is to implement a Google AdSense Banner using React and including the Google AdSense code in the gatsby-ssr.js file.
gatsby-ssr.js file:
const React = require('react')
const HeadComponents = [
<script
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
crossOrigin="anonymous"
async
/>,
]
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
setHeadComponents(HeadComponents)
}
AdSense Banner component:
const Banner: React.FC<BannerProps> = ({
className,
style,
layout,
format,
client = 'ca-pub-XXXX',
slot,
responsive,
layoutKey,
}) => {
useEffect(() => {
try {
const adsbygoogle = window.adsbygoogle || []
adsbygoogle.push({})
} catch (e) {
console.error(e)
}
}, [])
return (
<div className={clx(container, className)}>
<ins
className="adsbygoogle"
style={style}
data-ad-layout={layout}
data-ad-format={format}
data-ad-client={client}
data-ad-slot={slot}
data-ad-layout-key={layoutKey}
data-full-width-responsive={responsive}
/>
</div>
)
}
Don't use the gatsby-adsense plugin, it's deprecated.
Full article here.
To set up Adsense, place the <script> tag (without template literals {``} just before your closing </body> tag in your html.js, like this:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>
Then, to place an ad unit, you can either use a pre-built component like react-adsense on npm, as you mentioned, or build it yourself.
This is a useful article that covers both the setup and the placing of ad units with a component.
Let me know if this works for you or if something isn't clear!
To add Google Adsence in Gatsby you need these three packages
react-adsense rehype-react gatsby-transformer-remark
and if you want to know how to implement these packages in your site then checkout this tutorial
Using the polymer paper-swatch-picker, I'm trying to change an icon but it is not getting updated.
In the below there is the CSS code which I have used to change icon. Is it correct?
HTML:
<paper-swatch-picker class="fancy"></paper-swatch-picker>
CSS:
paper-swatch-picker.fancy {
--paper-swatch-picker-color-size: 10px; -- works
--paper-swatch-picker-icon-size: 40px; -- works
--paper-swatch-picker-icon: {
'icon':'menu' -- not works(icon not getting changed)
}
}
You can use the attributes icon to change it instead of CSS. But you need to import the iron-icons/iron-icons.html first, according to the set you use. In this case, you are using menu icon, which belongs to the default set iron-icons.html. For example, maps:...something will belong to iron-icons/maps-icons.html
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-swatch-picker/v2.2.0/paper-swatch-picker/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-swatch-picker.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
paper-swatch-picker {
margin: 0 10px;
}
</style>
<!-- Customized color swatch -->
<paper-swatch-picker icon="menu" color="#E91E63"></paper-swatch-picker>
I have also written an article featuring the top color picker web components, including paper-swatch-picker as well. Here's the link if you want to read.
Basically I have an angular project that is based on bootstrap 3 for media queries resize.
What I intend to do is allow user to change between desktop mode (laptop full screen width) or mobile mode (media width < 667px).
I have see a lot of theme preview sites have this feature. As it is quite a common feature, I expect that it can be done this way but not sure how it could be implemented exactly.
Note: I am not expecting to change any part of existing CSS.
My opinion on how to implement this.
<html ng-viewport="deviceWidth">
<button ng-click="changeDeviceWidth()">
</html>
// initial
$scope.deviceWidth = getDeviceWidthFunction();
$scope.changeDeviceWidth = function (deviceWidth) {
$scope.deviceWidth = deviceWidth;
}
First: Give id to you viewport meta
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
Second: Create selector buttons
<div id="selecter">
<button onclick="toDesktop()"> Desktop</button>
<button onclick="toTablet()"> Tablet</button>
<button onclick="toMobile()"> Mobile</button>
</div>
Third: Add iframe as content viewer
<iframe id="mycontent" src="http://www.majali.net"></iframe>
Fourth: Add JS functions to set viewport,content width and height
<script>
function toDesktop() {
document.getElementById("viewport").setAttribute("content", "width=1200");
document.getElementById("mycontent").style.width='100%';
document.getElementById("mycontent").style.height='600px';
}
function toMobile() {
document.getElementById("viewport").setAttribute("content", "width=340");
document.getElementById("mycontent").style.width='320px';
document.getElementById("mycontent").style.height='480px';
}
function toTablet() {
document.getElementById("viewport").setAttribute("content", "width=767");
document.getElementById("mycontent").style.width='767px';
document.getElementById("mycontent").style.height='600px';
}
</script>
I created a web page using on angular. My page is loading very slow. Taking 5 to 10 sec.
In meanwhile, I want to show some loading image or spinning gif.
In below js fiddle achive the above problem in javascript. I want to use this functionality in the angular js
html
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
js
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},10000);
}
}
css
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
`http://jsfiddle.net/d9ngT/
You need to use ngCloack.
https://docs.angularjs.org/api/ng/directive/ngCloak
And if you need to define a fullscreen loader while your angular app is starting, than create din element on your page and assign to it classes full-screen-loader and ng-cloack
Your css
.ng-cloack {
z-index: 9999;
}
.full-screen-loader {
position: fixed;
width: 100%;
height: 100%;
z-index: -9999;
}
Your html
<div class="full-screen-loader ng-cloak">
<img class="additional-styling" src="some-loader.gif">
</div>
While your angular app is being loaded, ng-clock class will set z-index of your loader container to be on top of every other content on the page. And when angular will be loaded, your loader container will be brought to the bottom of everyything on the page. Also i want to mention, that you may need to add some styling to body and html tags, so your loader will take all the browser's window space.