My issue:
I've made myself an image map/interactive image of sorts and it's working perfectly on Chrome, safari and Firefox. However, when I try it on the dreaded internet explorer, it's really glitchy. The little points are supposed to expand into larger boxes, on internet explorer it either doesn't work or messes up in the process.
See the problem:
See this Fiddle,
See this website for a better idea (my code is active on here).
What part of my code could be causing this it to mess up on IE? Any help would be greatly appreciated!
HTML and CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
<style>
html
color: #e5e5e5;
text-align: center;
font-family: "Roboto", Helvetica, sans-serif;
}
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
margin-right: 12px;
margin-left: 12px;
}
strong {
font-weight: 900;
font-family: "Roboto Condensed", Helvetica, sans-serif;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Roboto Condensed", Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
a:visited {
color: #dff3fd;
}
li.active a, a:hover, a:active {
color: #e5e5e5;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: inline-block;
width: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 1190px;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #dff3fd;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 550px;
height: 400px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #dff3fd;
}
</style>
</head>
<body>
<h1></h1>
<div class="distribution-map">
<button class="map-point" style="top:24%;left:26.5%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>details</p>
<iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</button>
<button class="map-point" style="top:26%;left:49%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:27.3%;left:71.4%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:63.5%;left:31.5%">
<div class="content">
<div class="centered-y">
<h2>Another one</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:65%;left:56%">
<div class="content">
<div class="centered-y">
<h2>another one</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:68%;left:74%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
</div>
It seems that <=IE9 can not use transitions.
http://caniuse.com/#feat=css-transitions
There is a polyfill that might help though here: http://ecsstender.org/extensions/css3-transitions/index.html
Related
I want to hover both classes col-md-3 and overlay-text via one hover. When hover over image I want to trigger second hover, in this case over text.
If CSS somehow could support if/else statements, I would wrote if
col-md-3 is hovered then hover overlay-text.
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 270px;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
-webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-moz-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-o-transition: background-color 0.5s ease-in-out, font-size 0.5s;
transition: background-color 0.5s ease-in-out, font-size 0.5s;
}
.overlay-text:hover {
content: "";
background-color: #328ba6;
cursor: pointer;
transition: ease-in-out 0.5s, font-size 0.5s;
line-height: 2;
font-size: 1.5rem;
}
.overlay-text:hover::after {
transition: ease-in-out 1s, font-size 1s;
}
.col-md-3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
padding-left: 5px;
padding-right: 5px;
}
.col-md-3 img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.col-md-3 img:hover {
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
cursor: pointer;
}
.overlay-text-blank {
text-align: center;
font-size: 1.8rem;
font-weight: 600;
vertical-align: middle;
}
<div class="container">
<div class="row tiles">
<div class="col-md-3">
<img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid">
<div class="overlay-text">Custom text</div>
</div>
</div>
</div>
FiddleJS Demo: https://jsfiddle.net/57nvbfud/5/
You have two options here:
First one change hover to img:hover + .overlay-text
Second one is change both hover in col-md-3:hover.
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 270px;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
-webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-moz-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-o-transition: background-color 0.5s ease-in-out, font-size 0.5s;
transition: background-color 0.5s ease-in-out, font-size 0.5s;
}
.col-md-3:hover .overlay-text{
content:"";
background-color: #328ba6;
cursor: pointer;
transition: ease-in-out 0.5s, font-size 0.5s;
line-height: 2;
font-size: 1.5rem;
}
.col-md-3:hover .overlay-text::after{
transition: ease-in-out 1s, font-size 1s;
}
.col-md-3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
padding-left: 5px;
padding-right: 5px;
}
.col-md-3 img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.col-md-3:hover img{
-webkit-transform: translate3d(0,-10%,0);
transform: translate3d(0,-10%,0);
cursor: pointer;
}
.overlay-text-blank {
text-align: center;
font-size: 1.8rem;
font-weight: 600;
vertical-align: middle;
}
<div class="container">
<div class="row tiles">
<div class="col-md-3">
<img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid">
<div class="overlay-text">Custom text</div>
</div>
</div>
</div>
Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and CSS:
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
/* Setting initial 'left' value */
left: 0;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
I have found this piece of code which is very suitable for my site, I am going to use it as our site map, however the link I have embedded within the div is not clickable, any ideas?
Thanks a lot
HTML
<div class="distribution-map">
<img src="image.jpg">
<button class="map-point" style="top:16%;left:45%">
<div class="content">
<div class="centered-y">
<h2>Top Menu</h2>
<p>This is a link for Google</p>
</div>
</div>
</button>
</div>
CSS
h2 {
color: white;
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 5px solid #7fcff7;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}
I have an interactive image map on this site that works like this:
When a user hovers over one of the 6 points on the image, the point will expand into a box, where an embedded youtube video can be found. This is working well in all browsers except IE/edge. With IE, the point doesn't expand properly or smoothly and is very 'glitchy'.
I know it's the Iframes that's messing it up because I've only included Iframes for 3 of the 6 points, and the three without work well on IE.
Is there anything I can do to stop IE behaving this way?
I've attempted to float right on the iframe's, with no luck.
Cheers.
Edit:
The reason why the videos aren't showing in any browser is because they're currently on private on youtube itself. That's no issue, non-private videos work on everything except IE. Just a note, but the original problem persists. The problem is the expanding of the points is not smooth at all and sometimes doesn't even work (Due to the IE disagreeing with the Iframes (for some reason).
Update:
Still trying to figure out the solution, any help and I would be very grateful!
HTML and CSS for the interactive image:
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
<!--text-transform: uppercase;-->
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
margin-right: 12px;
margin-left: 12px;
}
strong {
font-weight: 600;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
#content a:link { color: #3cbeff;
font-weight: 420;
text-decoration: underline;}
#content a:visited { color: #3cbeff;
font-weight: 420;
text-decoration: underline;}
#content a:hover { color: #0077ee;} /* user hovers */
#content a:active { color: #0077ee;} /* active links */
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: inline-block;
width: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 725px;
padding: 0px;
box-sizing: border-box;
margin: 0 auto;
text-align: center;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
text-align: center;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #dff3fd;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus, .distribution-map .map-point:hover {
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0;
filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 400px;
height: 360px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content, .distribution-map .map-point:hover .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
float: right;
display:inline-block!important;
text-align: center;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #dff3fd;
}
</style>
<body>
<h1></h1>
<div class="distribution-map">
<img src="https://static1.squarespace.com/static/56b6eced3c44d81bd1aa7ac5/t/56f6496817110775128b832f/1458981438644/Homephoto12.png?format=1000w">
<div class="map-point" style="top:22%;left:21%">
<div class="content">
<!--<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>-->
<div class="centered-y">
<h2>Walnuts</h2>
<p>Watch the video and check the library!<br><br>
<iframe width="350" height="197" src="https://www.youtube.com/watch?v=1KyvkclOZ9U" frameborder="0" allowfullscreen></iframe>
<!-- <strong>Check out:</strong> <br>
This post covering more information, recipies and where you can get Walnuts--></p>
</div>
</div>
</div>
<div class="map-point" style="top:23.5%;left:53%">
<div class="content">
<div class="centered-y">
<center><h2>Maca Powder</h2>
<p>Watch the video and check the library!</p>
<iframe width="350" height="197" src="https://www.youtube.com/watch?v=eIxDXncGUbo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="map-point" style="top:26%;left:86%">
<div class="content">
<div class="centered-y">
<h2>Chia Seeds</h2>
<p>Watch the video and check the library!</p>
<iframe width="350" height="197" src="https://www.youtube.com/watch?v=_eTdjL9sRtE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="map-point" style="top:72%;left:19%">
<div class="content">
<div class="centered-y">
<h2>Quinoa</h2>
<p>Video and post date release date: Wednesday the 13th of April</p>
</div>
</div>
</div>
<div class="map-point" style="top:70%;left:51%">
<div class="content">
<div class="centered-y">
<h2>Goji berries</h2>
<p>Video and post date release date: Thursday the 14th of April</p>
</div>
</div>
</div>
<div class="map-point" style="top:71.5%;left:86.5%">
<div class="content">
<div class="centered-y">
<h2>Onion</h2>
<p>Video and post date release date: Friday the 15th of April</p>
</div>
</div>
</div>
</div>
There are known issues using Edge with YouTube content, and other media content. Users need to set 'Use Software rendering instead of GPU rendering' in their browser settings. Google the issue for more info.
Hope this helps?
I am also facing the same issue in my website after googling i found the following solution which is working fine in my case. When you are going to embed any video from youtube generate a different link by following the steps below.
In enbed block click on "Show more" which will show different options with the video, just check the last option in the queue if it is not checked.
Enable privacy-enhanced mode
This will generate a new url for you which will work with edge and all other browsers.
My website is completely responsive at the moment (the layout, the pictures etc), with one issue. There's a section of my code which I'm not sure how to make responsive. Here's code I want to make responsive: fiddle
I'd like it so it resizes like the rest of the website.
If anyone has any ideas, I'd be grateful!
Cheers
HTML &CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
<style>
html
color: #e5e5e5;
text-align: center;
font-family: "Roboto", Helvetica, sans-serif;
}
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
margin-right: 12px;
margin-left: 12px;
}
strong {
font-weight: 900;
font-family: "Roboto Condensed", Helvetica, sans-serif;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Roboto Condensed", Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
a:visited {
color: #dff3fd;
}
li.active a, a:hover, a:active {
color: #e5e5e5;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: inline-block;
width: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 1190px;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #dff3fd;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 550px;
height: 400px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #dff3fd;
}
</style>
</head>
<body>
<h1></h1>
<div class="distribution-map">
<button class="map-point" style="top:24%;left:26.5%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>details</p>
<iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</button>
<button class="map-point" style="top:26%;left:49%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:27.3%;left:71.4%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:63.5%;left:31.5%">
<div class="content">
<div class="centered-y">
<h2>Another one</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:65%;left:56%">
<div class="content">
<div class="centered-y">
<h2>another one</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:68%;left:74%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
</div>
It seems it's just one single setting that needs to be changed:
.distribution-map {
width: 100%;
}
(instead of a fixed width)
You need to use percentages to make everything responsive. Media queries is not always enough. I suggest to forget about pixels. Even for font-size. All you need to do is change base pixel (body) size for font-size instead of every h1,h2 etc. Modern applications use as less pixels as possible.
In your case if you want your circles responsible at all times use width: 100% in your distrubution-map. Also for .distribution-map .map-point:active,
.distribution-map .map-point:focus, .distribution-map .map-point:hover I have width: 50% for example which will take 50% width of your screen at all times, this way your get responsive design.
Answer on other questions:
#Joe this is how it looks like 1em = 100% ≈ 12pt ≈ 16px. Ofc if you have something else for example 20px in body (or browser default px -> depends on browser) and you make your h1 150% you will get 30px for example (children adopt the size). That's great when you use media queries. You only need to change px in body and the rest just adapts. As for width and height of your borders, you need to have some normalizer or reset (or change to 0px yourself) otherwise you also have default borders. That's why 40% + 60% width can be higher then 100% in css. Another problem is that margins act weird. margin-top will change if you resize in width... Not in height. I use just top as much as possible since that one resizes only when you change height of your window. The best way to start is designing for mobile first. (progressive enhancement) I suggest to read about all of this in head first mobile web