I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.
How to make blur effect (on mouse over) in styled-components?
My code
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
backdrop-filter: blur(2px); // This line doesn't work
-webkit-backdrop-filter: blur(2px); // This line doesn't work
cursor: pointer;
border: 1px solid red;
}
`
But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 300px;
height: 60px;
position: absolute;
top: 150px;
left: 50px;
}
#aaa:hover {
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<div id="aaa">bbbbbbb</div>
</body>
</html>
Edited
I want to get this effect like above image.
I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.
Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?
It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.
Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
webkit-filter: blur(2px);
filter: blur(2px);
cursor: pointer;
border: 1px solid red;
}
`
The results looks like this.
Related
I have designed a tooltip using only html and css.I cannot use bootstarp.Below is my code for tooltip.
<div class="box">
<h3>Tooltip</h3>
</div>
h3 {
text-align:center;
line-height:33px;
}
div.box {
height:100px;
width:200px;
background-color:#eee;
border:1px solid #aaa;
position:relative;
top:50px;
left:50px;
border-radius:7px;
}
.box:before {
position:absolute;
right:-20px;
top:5px;
content:'';
height:0;
width:0;
border:10px solid transparent;
z-index:1;
}
.box:after{
position:absolute;
right:-17px;
top:25px;
content:'';
height:0;
width:0;
border-top: 8px solid transparent;
border-left: 8px solid #aaa;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
z-index:1;
}
The tooltip is working.But i want this tooltip to come on button click that is on ng-click as i am using Angular1.
Can anyone please help me how to do this.I am very new to Angular1.
first add a ng-show to your tooltip
<div class="box" ng-show="displayTooltip">
<h3>Tooltip</h3>
</div>
and add ng-click to your button to make displayTooltip true
ng-click="displayTooltip = true"
if you want to make tooltip invisible on button click use
ng-click="displayTooltip = !displayTooltip"
or if you want to make it invisible on mouseleavevent use
ng-mouseleave="displayTooltip = false"
I am devolping app using angular js and ionic framework. I want to show border right only for odd numbers.
Here is my code:
<div class="media-body" style="padding-bottom:25px;">
<h2 class="align_center">{{services.name}}</h2>
<a href="#job/{{services.id}}">
<h2 class="align_center_des">{{services.description}}</h2>
</div>
</div></div>
Here is the Css
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
border-right: 1px solid #E4E4E4;
margin-bottom: 31px;
height: 144px;
}
Here is fiddle:
https://jsfiddle.net/asetkL0n/
CSS also allows you to target specific odd or even elements. An example to that could be:
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
margin-bottom: 31px;
height: 144px;
}
.col-32-custom:nth-child(odd) {
border-right: 1px solid #E4E4E4;
}
wherein, inside that nth-child, you can pass, "odd","even","2n","2n+1", or any expression in n.
I think the best solution is to use ng-class, so you have to create a class that will only add the border right.
I presume you are in an ng-repeat loop so the code will look like
<div data-ng-class="{border-right: ($index%2)===0}" class="col-32-custom">
Here you have the condition for the even number ($index%2)===0 so the div will have border-right class on event number.
you can use ng-class-odd / ng-class-even within ng-repeat to add specific classes to this items.
example here : ng-class-odd
I started a question about a bootstrap leaflet map not displaying on mobile devices How can I fix bootstrap leaflet map mobile display?
Since then I have used a simple mapbox template for a map and with invalidateSize() as outlined here https://www.mapbox.com/help/why-map-cropped-hidden-shown/
But still no luck getting the map to display on a mobile phone.
Can anyone assist me with the proper implementation of invalidateSize()?
Thanks
Barry
There is a single div element:
<div id='map' class='blue'></div>
and this is the script:
<script>
L.mapbox.accessToken = 'mytoken';
var map = L.map('map').setView([10.5063,-61.4079], 10);
map.attributionControl.setPrefix('© Copyright 2015. hellO!');
L.control.locate().addTo(map);
L.control.layers(
{'Streets': L.mapbox.tileLayer('url').addTo(map)},
{
'Drive Times': L.mapbox.tileLayer('url'),
'Outlets': L.mapbox.tileLayer('url')
}
).addTo(map);
//attempt to force resize on mobile devices
$('map').show();
map.invalidateSize();
this is all the css:
<style>
.menu-ui {background:#fff; position:absolute; bottom:10px;right:10px; left:10px; z-index:1; border-radius:3px; width:auto; height:inherit; border:1px solid rgba(0,0,0,0.4);}
.menu-ui a { font-size:11px; color:#404040; display: inline-block; margin:0;padding:0; padding:10px; text-decoration:none; border-right: 2pt inset; border-right-color:0.5px solid rgba(0,0,0,0.25); text-align: left;}
.menu-ui a:first-child { border-radius:3px 3px 0 0; }
.menu-ui a:last-child { border:none; border-radius:0 0 3px 3px; }
.menu-ui a:hover { background:#f8f8f8; color:#404040; }
.menu-ui a.active { background:#3887BE; color:#FFF; }
.menu-ui a.active:hover { background:#3074a4; }
.menu-ui a.inactive { background:#FFF; color:#3887BE; }
.leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
.leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
.leaflet-control-locate.active a {background-position: -33px -2px;}
.leaflet-popup-content { margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;}
.leaflet-popup-content-wrapper {border-radius: 2px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
.leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
</style>
What does the styling look like on $('map')? I see your inline CSS, but is there anything else on it? Try giving it a size to be sure everything else is working first.
Also, if you are using any kind of CSS animation to resize the map container, you need to wait until after the animation is done, e.g.:
window.setTimeout(function() {
map.invalidateSize();
}, 1000);
Why not start out with the most basic map you can get and go from there. First check if the code posted below works, then change it to your token en mapid, test again, add the layercontrol, test again etc. Add one feature at a time and keep testing, you'll find out where it goes wrong then easily. That's at the moment hard to guess without your full code and a proper testcase on Plunker or JSfiddle or somewhere else where we could test it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -74.50], 9);
</script>
</body>
</html>
Taken from: https://www.mapbox.com/mapbox.js/example/v1.0.0/
the maps now work.
the issue was http/https. two things had to be changed.
1) the method of calling the tiles and associated php script initially, i used tileserver.php to call
'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'
now i'm using mbtiles-server.php to call
'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")
note: php script had to be in the same folder/directory as the mbtiles file. also, replace text in [] with your own
2) leaflet css/js was used only, no mapbox as the api uses a secure key
much thanks again #iH8 for the excellent work!
Better than few words, here is the code which doesn't work on IE.
<div ng-repeat="favcolor in favcolors" class="favorite" alt="{{favcolor.name}}" title="{{favcolor.name}}" style="background:#{{favcolor.hexa}}">{{favcolor.hexa}}</div>
The css :
.favorite{
width: 50px;
height: 20px;
display: inline-block;
border: 1px solid black;
}
Everything is ok on other browsers, but on IE my boxes doesn't have any background color. When I replace {{favcolor.hexa}} with some hexa, it works fine...
Thx.
Try to use ng-style.
<div ng-style="{ 'background' : '#' + favcolor.hexa }" ... >
Okay so simply I have this layout consisting of two elements, a navigation ("left") and the actual site content ("right").
Now what I want is that the "left" div just stays like it is, but when downsizing the screen to a certain size, I would like the content div's width to decrease with it.
However, I have no idea on how to start. When I look up responsive web design I can only find skeletons for entire layouts with loads of divs and percentages but I just want this for one div only and I'm totally confused.
This is what I have right now:
.right {
width: 750px;
margin: 40px 0 40px 50px;
float: left;
position: relative;
}
.left {
margin: 40px 0px 40px 40px;
width: 210px;
float: left;
position: relative;
}
Hopefully this http://jsbin.com/uquzaw/1/ isn't too overwhelming.
Essentially, you need percentages in your css and a meta tag in your html to get the effect you are looking for.
What you're asking for isn't exactly responsive design. If I understand you correctly, you are going to need percentage widths.
HTML:
<div id="left">
Nav1 <br>
Nav2 <br>
Nav3 <br>
Nav4 <br>
</div>
<div id="right">
This is where the main content will go.
</div>
CSS:
body { margin: 0; padding: 0; }
#left {
width: 20%;
height: 100%;
background: red;
float: left;
text-align: center;
}
#right {
width: 80%;
height: 100%;
background: blue;
float: left;
text-align: center;
}