I want the color of the bars in the menu icon to change on mouse hover. So far I'm only able to change the background color. Any suggestions?
Fiddle: https://jsfiddle.net/Walter69/nwczmdah/5/
.container {
display: inline-block;
cursor: pointer;
}
.container:hover {
color: #fff!important;
background: #FF0000;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #000;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
You need to add the color when hover the container:
.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
background: #FFF;
}
https://jsfiddle.net/nwczmdah/6/
I have been trying to solve my grid and I'm not sure why my columns are not stacking up next to each other. when I am making a div with a container and inside it a row and then 12 columns the columns are taking the full width then staking below
$screen-width: 1147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: ( $i /$number-of-columns ) * 100%;
background:#ccc;
float: left;
margin-left: $gutter;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin:0px auto;
padding: 0 $padding 0 $padding;
background: blue;
#include clearfix;
}
.row {
width: 100%;
margin: 0;
background: green;
#include clearfix;
}
You are dividing the available space by the number of columns, but then you are adding a margin to the left of each column So if you have 10 columns then each column is 10% of the total width + gutters. This adds up to more than 100% and is pushing three of your columns onto the next line.
Most grid systems solve this in one of two ways...
A) use css calc() to calculate the width of each column by dividing the space by the number of columns then deducting the gutter. E.g. calc(10% - 30px);
B) Use padding on each column to create the gutters and add it equally on both sides. E.g. padding:0 15px; This will give you an even spread of the columns and require no calculations but the downside is you'll need -15px margin on each side of your container to accommodate it and you'll need an extra HTML tag inside each column.
So I have managed to add that into a function, But now I have left margin what seems to be happening, which I'm not sure why is that, I have tried, things like putting a negative margin on the row.
$screen-width: 2147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#function grid-width($cols, $has-gutter:false) {
#if $has-gutter {
#return calc(((100% / #{$number-of-columns}) * #{$cols}) - #{$gutter});
}
#else {
#return calc((100% / #{$number-of-columns}) * #{$cols});
}
}
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: grid-width(#{$i}, true);
background:#ccc;
display: inline-block;
margin-left: $gutter;
float: left;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin: 0px auto;
height:100px;
background: blue;
#include clearfix;
}
.row {
width: 100%;
height:50px;
background: green;
#include clearfix;
}
I have created USA states map using jqvmap
. See
jqvmap.com
I want to write state names in middle of map like image below.
I have tried using pseudo elements but its not working.
This is my code.
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'usa_en',
enableZoom: false,
showTooltip: true,
backgroundColor: '#D9D9D9',
color: '#009F45',
borderColor: '#ffffff',
borderOpacity: 0.25,
borderWidth: 2,
hoverColor: '#999999',
selectedColor: '#0077aa',
selectedRegion: 'MO',
onRegionClick: function (element, code, region)
{
var message = 'You clicked "'
+ region
+ '" which has the code: '
+ code.toUpperCase();
alert(message);
}
});
});
/*!
* jQVMap Version 1.0
*
* http://jqvmap.com
*
* Copyright 2012, Peter Schmalfeldt <manifestinteractive#gmail.com>
* Licensed under the MIT license.
*
* Fork Me # https://github.com/manifestinteractive/jqvmap
*/
.jqvmap-label
{
position: absolute;
display: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #000000;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jqvmap-zoomin
{
top: 10px;
}
.jqvmap-zoomout
{
top: 30px;
}
.jqvmap-region
{
cursor: pointer;
}
.jqvmap-ajax_response
{
width: 100%;
height: 500px;
}
/*Colors of state*/
path#jqvmap1_nj{
fill:#7AC37A;
}
path#jqvmap1_tn{
fill:#7AC37A;
}
path#jqvmap1_in{
fill:#7AC37A;
}
path#jqvmap1_co{
fill:#7AC37A;
}
path#jqvmap1_ca{
fill:#026E38;
}
path#jqvmap1_ca:after{
content:'ca';
position: absolute;
top: 0;
color:#fff;
}
path#jqvmap1_ak{
fill:#6E6F73;
}
path#jqvmap1_tx{
fill:#6E6F73;
}
path#jqvmap1_ar{
fill:#6E6F73;
}
path#jqvmap1_la{
fill:#6E6F73;
}
path#jqvmap1_al{
fill:#6E6F73;
}
path#jqvmap1_nh{
fill:#6E6F73;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.usa.js"></script>
<div id="vmap" style="width: 600px; height: 400px;"></div>
First, there is no built-in parameter in jqvmap to add the states code.
Finding a good position for this labels is not a trivial task. For example, Florida's shape is not convex, Michigan has two parts.
Some questions related on stackexchange network:
- Algorithm for finding irrregular polygon centroid (label point)
- How to split compound polygons into convex polygons?
- Partitioning a polygon into convex parts
So, I tried to place them with a dummy algorithm, which places the state code at a kind of centroid of state shapes.
Then, you can move them as you want, and use the positions you have set.
Here is the main function which compute the centroid of a SVG path:
//svgPathParser => browserified version of
// https://github.com/hughsk/svg-path-parser
var parsedPath= svgPathParser(path);
// pathes in jqvmap are, for the most of them, in the form of [ start Point, [ curves ] ]
// if you want better results it is possible to refine that.
var origin= { x: parsedPath[0].x, y: parsedPath[0].y };
var pathPartCentroids= [];
var totalLength= 0;
for( var i=1; i< parsedPath.length - 1; i++){
var pathPart= parsedPath[i];
if(pathPart.code !="c")
break;
//centroidOfPathPart returns the centroid of a Bezier curve.
var pathPartCentroid= centroidOfPathPart([ [0,0], [ pathPart.x1, pathPart.y1 ], [ pathPart.x2, pathPart.y2 ], [ pathPart.x, pathPart.y ] ]);
pathPartCentroid.x += origin.x;
pathPartCentroid.y += origin.y;
pathPartCentroid={ centroid: pathPartCentroid, distance: norm( pathPartCentroid, origin) }
pathPartCentroids.push(pathPartCentroid);
totalLength+= pathPartCentroid.distance;
origin.x+= pathPart.x;
origin.y+= pathPart.y;
}
var centroid= {x:0,y:0};
//segments are weighted by their length
pathPartCentroids.forEach(function( pathPart ){
centroid.x += pathPart.centroid.x * pathPart.distance / totalLength;
centroid.y += pathPart.centroid.y * pathPart.distance / totalLength;
});
You can edit position with this pen.
Then use that another one to add state codes in a map.
I have such issue:
`(line 7, column 99880):
unexpected "m"
expecting "-->"
Code: combineStylesheets
'StaticR [css_bootstrap_min_css, css_normalize_min_css]
In a stmt of a 'do' block:
$(combineStylesheets
'StaticR [css_bootstrap_min_css, css_normalize_min_css])
In the second argument of `($)', namely
`do { $(combineStylesheets 'StaticR [css_bootstrap_min_css, ....]);
$(combineScripts 'StaticR [js_jquery_1_11_0_min_js, ....]);
$(widgetFile "default-layout") }'
In a stmt of a 'do' block:
pc <- widgetToPageContent
$ do { $(combineStylesheets
'StaticR [css_bootstrap_min_css, ....]);
$(combineScripts 'StaticR [js_jquery_1_11_0_min_js, ....]);
$(widgetFile "default-layout") }`
What can it be? If I remove normalize.min.css's FilePath from the combineStylesheets, it will work. If I yesod devel in the folder, it will work. But ghci & cabal clean && cabal configure && cabal build will fail.
Here is the corresponding code:
pc <- widgetToPageContent $ do
$(combineStylesheets 'StaticR
[ css_bootstrap_min_css
, css_normalize_min_css
])
$(combineScripts 'StaticR
[ js_jquery_1_11_0_min_js
, js_bootstrap_min_js
])
$(widgetFile "default-layout")
giveUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
The problem in the css_normalize_min_css
Here is contents of the normalize.css
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
Here is contents of normalize.min.css:
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
Both leads to compilation error.
But if I write normalize first, it works both in yesod devel and cabal build
$(combineStylesheets 'StaticR
[ css_normalize_min_css
, css_bootstrap_min_css
])
I can see such strange behavior only on the minified css.
I'm trying to position a child element behind it's parent:
<div><p>test</p></div>
My CSS is:
div {
width: 100px;
height: 100px;
background: red;
z-index: 2;
}
div p {
position: relative;
z-index: 1;
}
The z-index of the <p> is lower than it's parent z-index, but it is displayed in front. Why is that?
The div and the p in the example exist on different stacking contexts, and the div's z-index tells it to appear two levels higher than its siblings, not its children.
However, an element's z-index that is below zero puts it behind its parent.
Giving the p a z-index of -1 puts the p behind the div, regardless of the div's z-index.
If that's possible in your situation, you need to prevent stacking context on the parent. To do so, remove the z-index from your <div/> and set the <p/>'s z-index to -1:
div {
width: 100px;
height: 100px;
background: red;
/* z-index: 2; */
}
div p {
position: relative;
z-index: -1;
}