Is it possible to set transition delay on :after? - css-transitions

How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle


Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>


yes, it should do it but you need an inital li:after before your li:hover:after

Related

How to fix transition of transform on IE with property: transform: scaleX(-1) translateY(-50%);

[enter image description here][1]
[1]: the image of the button
[2] There are styles for this button. Please looking at the line (.btnDefault:hover:after).
.btnDefault {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 46px 0 25px;
background-color: #fff;
width: 160px;
height: 48px;
font-size: 16px;
letter-spacing: 2px;
text-align: center;
border-radius: 50px;
box-shadow: 0px 12px 51px 0px rgba(88, 49, 33, .4);
transition: opacity .3s ease-in-out;
}
.btnDefault:after {
content: '';
position: absolute;
top: 50%;
right: 25px;
width: 22px;
height: 22px;
background: url('https://i.stack.imgur.com/pPcvP.png') no-repeat;
background-size: contain;
transform: translateY(-50%);
transition: transform .3s ease-in-out;
}
.btnDefault:hover {
opacity: .7;
}
.btnDefault:hover:after {
transform: scaleX(-1) translateY(-50%);
}
[3] this is button HTML
<a class="btnDefault">VIEW MORE</a>

Stripe payments is not being created in django. It says token is submitted successfully, but it does not show in stripe account

when i created a stripe checkout form, i set up everything as the docs said. When i submit the form (test keys), it says that the token was created successfully, but it does not show in the stripe account dashboard.
settings.py
STRIPE_SECRET_KEY = "itsthestripesecretkeyfromaccount"
STRIPE_PUBLISHABLE_KEY = "itsthestripepublishkeyfromaccount"
views.py
def checkout(request, **kwargs):
item = Shop.objects.filter(id=kwargs.get('pk', "")).first()
stripe.api_key = settings.STRIPE_SECRET_KEY
publishKey = settings.STRIPE_PUBLISHABLE_KEY
if request.method == 'POST':
token = request.GET.get['stripeToken'] # Using Flask
charge = stripe.Charge.create(
amount=10.00,
currency='usd',
description="Testing",
source=token,
)
context= {'publishKey':publishKey,
'item':item}
return render(request,"checkout/checkout.html",context)
checkout.html
<html><head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style media="screen">
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
</head>
<body>
<div class="wrapper">
<script src="https://js.stripe.com/v3/"></script>
<form action="." method="POST" id="payment-form">
{% csrf_token %}
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame5" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-31bf44cd4b7f3b6da4e3f1268a2aa532.html#style[base][color]=%2332325d&style[base][fontFamily]=%22Helvetica+Neue%22%2C+Helvetica%2C+sans-serif&style[base][fontSmoothing]=antialiased&style[base][fontSize]=16px&style[base][::placeholder][color]=%23aab7c4&style[invalid][color]=%23fa755a&style[invalid][iconColor]=%23fa755a&componentName=card&wait=false&rtl=false&keyMode=test&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 19.2px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
<div id="stripe-token-handler" class="is-hidden">Success! Got token: <span class="token"></span></div>
<script nonce=""> // Create a Stripe client.
var stripe = Stripe('{{ publishKey }}');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
var successElement = document.getElementById('stripe-token-handler');
document.querySelector('.wrapper').addEventListener('click', function() {
successElement.className = 'is-hidden';
});
// Not in demo.
function stripeTokenHandler(token) {
successElement.className = '';
successElement.querySelector('.token').textContent = token.id;
}
</script><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeController1" allowpaymentrequest="true" src="https://js.stripe.com/v3/controller-d87ddc0145c66826814f1428b5e7b170.html#apiKey=pk_test_6716BBCWhzb1IsIdnonD5MSL00cUgtEOeV&stripeJsId=033a2233-e2e5-4b9d-8fba-1b32c0755684&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController1" aria-hidden="true" tabindex="-1" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important; user-select: none !important;"></iframe>
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeMetricsController0" al
I am currently trying to make the payments go through from django website, and it shows in the dashboard of the strip account. Unfortunately, I am unable to figure this out. I have been trying to change things around, but i cant seem to understand what i have to do. If you could, can you please help me? Thanks in advance!
I see in the API requests it says success, but it dont show on the dashboard

Nav bar isn't working properly?

So I'm making a website for a school assessment, and I was wondering why my Nav bar links are always slightly below the actual nav bar itself. If anyone could help that'd be great :).
ul {
text-align: center;
padding-left: 1px;
top: -10px;
list-style: none;
}
ul li {
font-family: Arial;
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: 0px;
padding: 10px 89.5px;
background-color: #6C2DC7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #8467D7;
}
a:link {color:#FFFFFF;} /* unvisited link */
a:visited {color:#FFFFFF;} /* visited link */
a:hover {color:#FFFFFF;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
a {
text-decoration: none;
}
This is what it looks like on my website.

If you change this it will work:
line 75 of your style.css
ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
really you should make this just for your nav bar and not for every ul so you could change it to the below: up to you though both ways work :)
#navigation ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}

Cannot apply effect in my Modal window

I have created a bell notification icon clicking on which a modal window opens. I want to fade the modal window in and out through CSS. I've done that coding but the modal window is not fading in but its fading out properly.
Here is my code..
function showModal()
{
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}
#bellNotification
{
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover
{
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip
{
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
font-family: 'Palanquin';
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp
{
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay
{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
width: 50%;
min-height: 200px;
background-color: white;
font-family: 'Titillium';
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input
{
color: #4d4d4d;
font-family: 'Palanquin';
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
</div>
</div>
Where is the problem? I can't find.
Also you'll see the modal window is not functioning properly. Clicking anywhere is disappearing the modal window. But that I'll make later. First I want to know why its not fading in??

Try to use CSS animations instead of property transitions. See this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

I've found a solution of this without changing any css..
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
I don't know why this one worked and not the earlier one. But probably I think the browser takes some time (in ms) to render the content when display: block is set. And before complete rendering of content, the fadeIn animation is already started. This might have interfered with the animation and disabling it.
I don't know I'm right or wrong?
Delaying the line which sets the opacity to '1' by a few ms is now working.
Now Run the updated code below and see it works -
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
function hideModal() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.display = "none"
}, 300);
}
#bellNotification {
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover {
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip {
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip {
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover {
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp {
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window {
width: 50%;
min-height: 200px;
background-color: white;
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input {
color: #4d4d4d;
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip">
<div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.
<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" />
<input type="button" value="Proceed" />
</div>
</div>

css - dynamic width horizontal lists

I'm trying to build a horizontal list based menu. In this menu, the two left floated menu links are fixed width, while the remaining menu links are floated right.
The issue is I'd like the two fixed width links to stay as is, however the floated right items to be spaced evenly throughout the rest of the available whitespace.
See my fiddle
CSS:
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table;
table-layout: fixed;
width:100%;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
float: left;
display: table-cell;
white-space:nowrap;
}
#footer_menu .nav_r {
float: right;
width:auto;
display: table-cell;
white-space:nowrap;
}
HTML:
<div id="footer_menu">
<ul>
<li class="nav_l">Link</li>
<li class="nav_l">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
</ul>
</div>
Anyone have any ideas?

Try this - DEMO
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
display: table;
width: 100%;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table-row;
background: #ccc;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
display: table-cell;
white-space:nowrap;
width:50px;
padding:5px;
border: 1px solid #000;
}
#footer_menu .nav_r {
width:auto;
display: table-cell;
white-space:nowrap;
padding:5px;
border: 1px solid #c00;
}​