I have an html/css/javascript page that works perfectly except for the first time. Basically, the divLUMProvideZipCode starts with the hidden class, but when you press the button it will become visible. The problem is that it doesn't fade in like it should, it just appear immediately, without any transition. After that, it works perfect, but chances are the user will only press the button once, twice tops so to get the effect, it needs to work the first time. Anyone got any ideas?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leads User Maintenance</title>
<link rel="stylesheet" type="text/css" href="LeadsMaintenance.css"/>
<script>
function changeClass() {
var doc = document.getElementById("divLUMProvideZipCode");
if (doc.className.indexOf("hidden") >= 0)
{
doc.className = "visible solidShadowBox";
}
else
{
doc.className = "hidden";
}
};
</script>
</head>
<body>
<div class="centeredBodyWrapper">
<div id="divLUMNavigation" class="solidShadowBox">
<button onClick="changeClass()">Show Me</button>
</div>
<div id="divLUMUserSelect" class="solidShadowBox">
</div>
<div id="divLUMUserInformation" class="solidShadowBox">
<div id="divLUMProvideZipCode" class="hidden solidShadowBox">
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
.centeredBodyWrapper {
margin: auto;
width: 960px;
}
#divLUMNavigation {
width: 100%;
height: 50px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
}
#divLUMUserSelect {
width: 100%;
height: 50px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
}
#divLUMUserInformation {
width: 100%;
height: 640px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
}
#divLUMProvideZipCode {
width: 200px;
height: 350px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
ms-transition: all 1s;
transition: all 1s;
}
.solidShadowBox {
-webkit-box-shadow: 0px 0px 8px 0px #909090;
-moz-box-shadow: 0px 0px 8px 0px #909090;
-o-box-shadow: 0px 0px 8px 0px #909090;
-ms-box-shadow: 0px 0px 8px 0px #909090;
box-shadow: 0px 0px 8px 0px #909090;
}
.hidden {
visibility: hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
ms-transition: all 1s;
transition: all 1s;
}
.visible {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
ms-transition: all 1s;
transition: all 1s;
visibility: visible
}
Try using opacity:0 in your hidden class and opacity:1 in your visible class instaed of doing transition on visibility
.hidden { height:1px; overflow:hidden; opacity:0;}
.visible { height:auto; opacity:1; overflow:visible; }
Try that.
Related
I am trying to create an effect on an anchor element so that when it is hovered over the button will light up and have a vibrant light effect.
The button that i want the effect to work on is a 'donate' button. I have reached almost the desired effect, however, when the button is hovered it lights up and then the text becomes unreadable.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* testing new code from here */
.container a {
position: relative;
display: inline-block;
padding: 15px 30px;
border: 2px solid #0f0;
text-decoration: none;
font-weight: 650;
color: #fff;
margin: 5px;
letter-spacing: 0.45px;
-webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
transition: 0.5s;
transition-delay: 0s;
}
.container a:hover {
color: #000;
}
.container a span {
position: relative;
z-index: 100;
}
.container a::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #0f0;
box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
.container a:hover::before {
width: 60%;
height: 100%;
left: -2px;
box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
transition-delay: 0s, 0.5s, 1s, 1s;
}
.container a::after {
content: "";
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #0f0;
box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
.container a:hover::after {
width: 60%;
height: 100%;
right: -2px;
box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
transition-delay: 0s, 0.5s, 1s, 1s;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="header-container">
<header class="main-header">
<h1 class="logo">Animal Charity</h1>
<nav class="nav-links">
<a class="menu-link1" href="">About us</a>
<a class="menu-link2" href="">Our Work</a>
<a class="menu-link3" href="">Success Stories</a>
<a class="menu-link4" href="">Shop</a>
<a class="menu-link5" href="">Contact us</a>
<div class="container">
<a class="donate" href="">Donate</a>
</div>
</nav>
</header>
</div>
</body>
<footer></footer>
</html>
The reason i think it is an issue with the z index is because when i set it to 100 this should therefore bring the text back to the front, however, as i mentioned it does not reveal from behind the green of the box shadow even though i set the text colour to black. Any suggestions or help would be greatly appreciated. Thanks
You might wrap your button text into e.g. span and position it:
body {background:grey}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* testing new code from here */
.container a {
position: relative;
display: inline-block;
padding: 15px 30px;
border: 2px solid #0f0;
text-decoration: none;
font-weight: 650;
color: #fff;
margin: 5px;
letter-spacing: 0.45px;
-webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
transition: 0.5s;
transition-delay: 0s;
}
.container a span {position:relative; z-index:1;}
.container a:hover {
color: #000;
}
.container a span {
position: relative;
z-index: 100;
}
.container a::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #0f0;
box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
.container a:hover::before {
width: 60%;
height: 100%;
left: -2px;
box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
transition-delay: 0s, 0.5s, 1s, 1s;
}
.container a::after {
content: "";
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #0f0;
box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
.container a:hover::after {
width: 60%;
height: 100%;
right: -2px;
box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
transition-delay: 0s, 0.5s, 1s, 1s;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="header-container">
<header class="main-header">
<h1 class="logo">Animal Charity</h1>
<nav class="nav-links">
<a class="menu-link1" href="">About us</a>
<a class="menu-link2" href="">Our Work</a>
<a class="menu-link3" href="">Success Stories</a>
<a class="menu-link4" href="">Shop</a>
<a class="menu-link5" href="">Contact us</a>
<div class="container">
<a class="donate" href=""><span>Donate</span></a>
</div>
</nav>
</header>
</div>
</body>
<footer></footer>
</html>
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* testing new code from here */
.container a {
position: relative;
display: inline-block;
padding: 15px 30px;
border: 2px solid #0f0;
text-decoration: none;
font-weight: 650;
color: #fff;
margin: 5px;
letter-spacing: 0.45px;
-webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
transition: 0.5s;
transition-delay: 0s;
}
.container a:hover {
color: #000;
}
.container a span {
position: relative;
z-index: 100;
}
.container a::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #0f0;
box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
z-index: -1;
}
.container a:hover::before {
width: 60%;
height: 100%;
left: -2px;
box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
transition-delay: 0s, 0.5s, 1s, 1s;
}
.container a::after {
content: "";
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #0f0;
box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
z-index: -1;
}
.container a:hover::after {
width: 60%;
height: 100%;
right: -2px;
box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
transition-delay: 0s, 0.5s, 1s, 1s;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header-container">
<header class="main-header">
<h1 class="logo">Animal Charity</h1>
<nav class="nav-links">
<a class="menu-link1" href="">About us</a>
<a class="menu-link2" href="">Our Work</a>
<a class="menu-link3" href="">Success Stories</a>
<a class="menu-link4" href="">Shop</a>
<a class="menu-link5" href="">Contact us</a>
<div class="container">
<a class="donate" href="">Donate</a>
</div>
</nav>
</header>
</div>
</body>
</html>
EDIT
Solved it. See post below.
/ END OF EDIT
EDIT
NOT related to the suggested topic above and not solved by changing to vh as measurement of top-value instead as shown in this fiddle (as suggested by the first comments here): http://jsfiddle.net/wm02ovx8/3/. The div still doesn't animate in, but rather pops up in the blink of an eye.
/ END OF EDIT
I'm trying to animate a drawer div from top and into view. The animation works fine as long as it's in view to begin with (the "top" css property value being more than -1), but since I have a negative value that is calc(-100% + 30px) on the top property it just "pops up" instead. What am I missing here?
[Fiddle] (To open the menu, press the index word on the right)
HTML:
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS:
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 10px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
Javascript:
function showIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos <= 0) {
pos++;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
function hideIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos >= 0) {
pos--;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
document.getElementById("indexMenu").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "block";
showIndex();
});
document.getElementById("closeIndexLayer").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "none";
hideIndex();
});
//</editor-fold>
I solved it another way instead, and in a way I'm more familiar with. The way I found that worked for me adds a class to the element and that class have animation properties. Then if you want to animate out, just add the animation properties to the element that is being animated (in this case the id #alignLinks).
[Fiddle]
Javascript:
let drawer = document.getElementById("alignLinks");
document.getElementById('indexMenu').onclick = function() {
if(this.innerHTML === 'Index')
{
this.innerHTML = 'Close';
drawer.classList.add('topAnimDown');
} else {
this.innerHTML = 'Index';
var computedStyle = window.getComputedStyle(drawer),
topProp = computedStyle.getPropertyValue('top');
drawer.style.topProp = topProp;
drawer.classList.remove('topAnimDown');
}
}
HTML
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS
body {
background: hotpink;
}
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
.topAnimDown {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
top: 0 !important;
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
I've adapted some code that I have sourced which shows a popup after X seconds. The JavaScript functionality seems fine, the issue is that whatever I try I am unable to center the popup in the middle of the screen.
Please see the popup here:
http://ts564737-container.zoeysite.com/
I have tried wrapping the popup in another div, setting that div to width: 100% andposition: fixed then setting the popup container to margin: 0 auto, without success.
I have also tried various display and position properties. What I understand is that the popup container doesn't have anything to be the center of, which is why I tried to wrap it inside another div but I'm unable to make this work as I wish.
Please see my code below:
CSS:
#wd1_nlpopup {
display: none;
position: absolute;
margin: 0 auto !important;
top: 200px !important;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}
#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}
HTML:
<div id="wd1_nlpopup" data-expires="30" data-delay="1">
X
<script type="text/javascript" src="https://form.jotformeu.com/jsform/62332622875356"></script>
</div>
JavaScript:
jQuery(document).ready(function(jQuery){
var wd1_nlpopup_expires = jQuery("#wd1_nlpopup").data("expires");
var wd1_nlpopup_delay = jQuery("#wd1_nlpopup").data("delay") * 1000;
jQuery('#wd1_nlpopup_close').on('click', function(e){
jQuery.cookie('wd1_nlpopup', 'closed', { expires: wd1_nlpopup_expires, path: '/' });
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeOut(200);
e.preventDefault();
});
if(jQuery.cookie('wd1_nlpopup') != 'closed' ){
setTimeout(wd1_open_nlpopup, wd1_nlpopup_delay);
}
function wd1_open_nlpopup(){
var topoffset = jQuery(document).scrollTop(),
viewportHeight = jQuery(window).height(),
jQuerypopup = jQuery('#wd1_nlpopup');
var calculatedOffset = (topoffset + (Math.round(viewportHeight/2))) - (Math.round(jQuerypopup.outerHeight()/2));
if(calculatedOffset <= 40){
calculatedOffset = 40;
}
jQuerypopup.css('top', calculatedOffset);
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeIn(500);
}
});
/* jQuery Cookie Plugin v1.3.1 */
(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a);}else{a(jQuery);}}(function(e){var a=/\+/g;function d(g){return g;}function b(g){return decodeURIComponent(g.replace(a," "));}function f(g){if(g.indexOf('"')===0){g=g.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\");}try{return c.json?JSON.parse(g):g;}catch(h){}}var c=e.cookie=function(p,o,u){if(o!==undefined){u=e.extend({},c.defaults,u);if(typeof u.expires==="number"){var q=u.expires,s=u.expires=new Date();s.setDate(s.getDate()+q);}o=c.json?JSON.stringify(o):String(o);return(document.cookie=[c.raw?p:encodeURIComponent(p),"=",c.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join(""));}var g=c.raw?d:b;var r=document.cookie.split("; ");var v=p?undefined:{};for(var n=0,k=r.length;n<k;n++){var m=r[n].split("=");var h=g(m.shift());var j=g(m.join("="));if(p&&p===h){v=f(j);break;}if(!p){v[h]=f(j);}}return v;};c.defaults={};e.removeCookie=function(h,g){if(e.cookie(h)!==undefined){e.cookie(h,"",e.extend(g,{expires:-1}));return true;}return false;};}));
Would anybody please be able to advise on where I'm going wrong with my CSS? Any help is very much appreciated. Thank you for your time.
Add this css to your #wd1_nlpopup
{
top: 50%;
transform: translateY(-50%);
width: 600px; // add a size for your modal
left: 0;
right: 0;
}
The final css:
#wd1_nlpopup {
display: block;
position: absolute;
margin: 0 auto !important;
top: 50%;
transform: translateY(-50%);
right: 0;
left: 0;
width: 600px;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}
#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}
wd1_nlpopup {
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
By just a quick lookup !! try the below css. Change this to your css, hope it helps
#wd1_nlpopup {
margin: 10% 38% !important;
top: 0px !important;}
I looking to get some help with this. I am having issues with a modal not working correctly in IE8. Can anyone help me out or tell me how to create modal that work in ie8. I am up to any suggestions etc.
Thanks you.
Here my code:
HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
I think adding this will solve the problem:
-ms-transition: opacity 400ms ease-in;
webkit transitons are not well supported by IE
check this for further details.
I'm trying to implement Checkbox Four as demonstrated on this site: http://www.paulund.co.uk/playground/demo/css-style-checkboxes/
I want to modify this checkbox by adding the red colored text 'N' when unchecked, and blue colored text 'Y' when checked.
The code I have so far is:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxFour
{
width: 40px;
height: 40px;
background: #ddd;
margin: -30px 160px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour label
{
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour input[type=checkbox]:checked + label {
background: #CC0000;
}
You can easily do it via psuedo-elements
may be like this :))
.checkboxFour label:before {
content:'N';
color:red;
display: block;
padding: 5px;
text-align: center;
}
.checkboxFour input[type="checkbox"]:checked + label:before {
content:'Y';
color:blue;
}
http://jsfiddle.net/E67n6/8/