Here I have simple alert box:
/* The alert PROMO box */
.promobox {
padding: 10px;
background-color: #415ca2; /* Blue */
color: white;
margin-bottom: 7px;
}
/* The close button */
.closebtnpr {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 18px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
color: black;
}
<div class="promobox">
<span class="closebtnpr" onclick="this.parentElement.style.display='none';">×</span>
<center><b>U.S. POLO ASSN. DAY!</b></center>
</div>
When I click on (x) then hide element. But when I refresh page then again is displayed alert box.
How can I remember the choice of closing the alert box until I finish browsing the website?
update2:
sessionStorage.setItem('myCat', 'Tom');
The following example autosaves the contents of a text field, and if the browser is accidentally refreshed, restores the text field content so that no writing is lost.
// Get the text field that we're going to track
let field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
You almost got it in your last edit. Use sessionStorage (or localStorage if you want your data to persist). Instead of changing display attribute directly with js use css class, and remove it if user didn't dismiss it before.
Use boolean value for sessionStorage variable.
This code snippet won't work in the sandbox environment
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if(!dismissed){
alertDiv.classList.remove("hide");
}
addEventListener("click", function(){
alertDiv.classList.add("hide");
sessionStorage.setItem("dismissed", true);
});
});
.alert{border: 1px dashed lime; font-size: x-large; display: inline-block}
.hide{display: none}
<div class="alert hide" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
I'm attempting to replicate the experience from the Shopify checkout in my WooCommerce checkout page by animating the labels when the user focuses on a certain input, just like this:
I've tried using input:focus ~ label, but it won't work because the default WooCommerce input is inside a span (.woocommerce-input-wrapper) like this:
<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">Nombre <abbr class="required" title="obligatorio">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
</span>
</p>
<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
position: absolute;
top: 11px;
left: 11px;
padding: 0;
color: #808080;
transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
top: -8px;
font-size: 12px;
font-weight: 500;
}
</style>
Thanks!
I hope you find these codes useful
my css:
label {}
.woocommerce form .form-row label {
position: absolute;
left: 10px;
top: 15px;
}
.woocommerce form .form-row {
position: relative;
}
label.floatlabel {
top: -30px !important;
}
mu jQuery :
jQuery('.woocommerce form .form-row input').click(function(){
var label = jQuery("label[for='" + jQuery(this).attr('id') + "']");
if(jQuery('floatlabel').length ){
jQuery('label.floatlabel').removeClass('floatlabel');
}
jQuery(label).addClass('floatlabel');
})
The major issue with woocommerce checkout inputs is that labels are before inputs. For floating labels to work you need to place the labels after the inputs then it is all easy. (You can use any css method here: https://css-tricks.com/float-labels-css/).
I have tried finding a way to revert these elements in html but without success. I also tried using flexbox in css along with column-reverse but the animation didn't seem to work.
Basically the answer we are searching for is to the question: How to place labels after inputs in woocommerce checkout?
#Morteza Barati's answer could be good but it doesn't work properly. If inputs are autofilled then the label sits on top of them + once label moves up in case field is erased it won't come back down.
As already mentioned: There is no standardized way to change the input-label position on text input.
Off-topic: The design pattern in your screenshot comes from Googles material design (at least that's where it's commonly used and seen today). You can find more about that pattern here: https://material.io/components/text-fields
Solution with JS and CSS
You need some CSS and JS code to implement that design pattern. There are four different states you need to cover:
When a field receives the text-focus: Move the label up.
When a field loses focus and has no content: Move the label down.
When a field loses focus and has content: Leave the label up.
When a field has a value on page load: Move the label up.
Here's a short demo - the important part is the JS code which adds CSS classes to the field container on focus, blur and input.
jQuery('.form-row :input').each(function() {
var $input = jQuery(this);
var $row = $input.closest('.form-row');
// Is the field filled on page load?
if ($input.val()) {
$row.addClass('-filled');
}
// Enter or leave the "focus" state.
$input.on('focus', function() {
$row.addClass('-focus');
});
$input.on('blur', function() {
$row.removeClass('-focus');
});
// When the fields input value changes, add or remove the "-filled" state
$input.on('input', function() {
if ($input.val()) {
$row.addClass('-filled');
} else {
$row.removeClass('-filled');
}
});
})
.form-row {
position: relative;
padding-top: 20px; /* top padding adds space for the label */
margin: 10px 0;
}
.form-row label {
position: absolute;
top: 20px; /* initially, the label is down */
left: 0;
color: #aaa;
transition: all 0.3s;
}
/* Give both the label and input field the same padding/box-size */
.form-row input,
.form-row label {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* When the field is focused or filled, move the label up */
.form-row.-focus label,
.form-row.-filled label {
color: #6200ee;
font-size: 12px;
top: 0;
padding: 0;
line-height: 20px; /* Set the line height to the top-padding */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row">
<label for="field1">
Field 1 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field1">
</span>
</p>
<p class="form-row">
<label for="field2">
FIeld 2 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field2" value="Initial Value">
</span>
</p>
</div>
Pure CSS
TL;DR; this is not possible in WooCommerce out-of-the-box.
Note: A pure CSS solution is also possible when your comes after the field and could look like the below sample.
It works by using the input fields "placeholder" as the initial caption. The CSS selector :not(:placeholder-shown) matches every text field that has a value. The CSS selector :focus handles the input fields focus state.
However, this is just a sample and is not possible in WooCommerce without writing custom cart and checkout templates to produce the correct HTML elements.
.form-row {
position: relative;
padding-top: 20px;
margin: 10px 0;
}
.form-row label {
position: absolute;
color: #6200ee;
font-size: 12px;
top: 0;
left: 0;
padding: 0;
line-height: 20px;
opacity: 0;
transition: all 0.3s;
}
.form-row input {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* Here's the logic: */
.form-row input:focus::placeholder {
opacity: 0;
}
.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label {
opacity: 1;
}
<p class="form-row">
<input type="text" id="field1" placeholder="My Field">
<label for="field1">
My Field
</label>
</p>
I want to use Font Awesome for certain buttons inside Kendo Grids.
I can use the HtmlAttributes to add the class and it works fine.
command.Custom("name").Text(" ").Click("handler").HtmlAttributes(new { #class = "fa fa-file-text" });
But to avoid repetition, I'd like to use CSS. Kendo Grid add a class with the name of the custom button to it, e.g. k-grid-name. The end DOM looks like this:
<a class="k-button k-button-icontext k-grid-name" href="#"><span class="fa fa-check"></span> </a>
The CSS selector that I'm trying is:
.k-grid-name{
font-family: FontAwesome;
content: "\f000";
}
.k-grid-name a:before {
font-family: FontAwesome;
content: "\f000";
}
.k-grid-name span{
background-color: red;
}
I prefer to use the inside span, because it's in the center of the button. What's the correct selector for that?
try this
.k-grid-custombtnname span:before {
font-family: 'FontAwesome';
content: "\f00c";
}
This worked for me. Replace "custombuttonname" with the name of the custom grid button.
.k-grid-content .k-button.k-grid-custombuttonname::before {
font-family: 'FontAwesome' !important;
content: "\f000" !important;
}
Here' my solution. Register the dataBound callback with this..
const dataBound =(e) => {
$(".k-button.k-button-icontext.k-grid-custombtnname ").append("<span title='View Request'><i class='fas fa-search'></i></span>");
}
HTML
<div class="test">Bold Text. Normal Text</div>
Expected Output:
Bold Text. Normal Text
I know to add <b> for certain text. But the condition here is not to edit the HTML page. By using CSS or jquery need to set the certain text as bold.
Thanks in advance...
<div class="test">Bold Text. Normal Text</div>
.test {
font-size:0;
}
.test:before {
font-size: 12px;
content: "Bold Text. ";
font-weight: bolder;
}
.test:after {
font-size: 12px;
content: "Normal Text";
}
http://jsfiddle.net/td92r3jz/
Fiddle.
JQuery.
Get text, split by dot, wrap with <span> and put back.
Apply CSS onto first <span>. (run the snippet)
var t = $('.test').html().split('.');
var res = '<span>' + t[0] + '.</span><span>' + t[1] + '</span>';
$('.test').html(res);
.test>span:first-child {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Bold Text. Normal Text</div>
You could hide the text in your original div with css, and use the :before and :after css-selector to add the text again with css
div {
line-height:1000px;
overflow:hidden;
height:30px;
}
div:after {
content:"bold text";
position:absolute;
font-weight: bold;
}
div:before {
content:"normal text";
position:absolute;
font-weight: normal;
}
Is there any way to force a font to be monospaced using CSS?
By this I mean, using a non-monospace font, can you force the browser to render each character at a fixed width?
If this is for aligning digits in tables where some fonts (with traditional typography) render them by default with variable width (e.g. Segoe UI on Windows), you should look into CSS properties for:
font-variant-numeric: tabular-nums;
(this disables the proportional-nums default value for the numeric-spacing variant supported at least by OpenType fonts, and possibly by other font formats supported by the text renderer of your web browser for your particular platform)
No JavaScript needed! It is the cleanest way to disable the variable-width glyphs in these fonts and force them to use tabular digits (this generally uses in the same glyphs in the same font, but their leading and trailing gap is increased so the 10 digits from 0 to 9 will render at the same width; however some font may avoid the visual variable interdigit spacing and will slightly widden some digits, or could add bottom serifs to the foot of digit 1.
Note that this does not disable the variable height observed with Segoe UI (such as some digits will be x-height only like lowercase letters, others will have ascenders or descenders). These traditional digit forms may be disabled with CSS too, using
font-variant-numeric: lining-nums;
(this disables the default oldstyle-nums value for the numeric-figure variant supported at least by OpenType fonts, and by possibly other font formats supported by the text renderer of your web browser for your particular platform)
You can combine both:
font-variant-numeric: tabular-nums lining-nums;
--
The snippet below demonstrates this using a single proportional font (not monospaced!) featuring shape variants for digits, such as 'Segoe UI' on Windows and shows the different horizontal and vertical alignments produced.
Note that this style does not prohibit digits to change width if different styles like bold or italic is applied instead of medium roman as shown below because these will use different fonts with their own distinct metrics (this is not warrantied as well with all monospace fonts).
html { font-family: 'Segoe UI'; /* proportional with digit variants */ }
table { margin: 0; padding: 0; border: 1px solid #AAA; border-collapse: collapse; }
th, td { vertical-align:top; text-align:right; }
.unset { font-variant-numeric: unset; }
.traditional { font-variant-numeric: proportional-nums oldstyle-nums; }
.lining { font-variant-numeric: proportional-nums lining-nums; }
.tabular-old { font-variant-numeric: tabular-nums oldstyle-nums; }
.tabular-new { font-variant-numeric: tabular-nums lining-nums; }
.normal { font-variant-numeric: normal; }
<table>
<tr><th>unset<td><table width="100%" class="unset">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>traditional<td><table width="100%" class="traditional">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>lining<td><table width="100%" class="lining">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>tabular-old<td><table width="100%" class="tabular-old">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>tabular-new<td><table width="100%" class="tabular-new">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>normal<td><table width="100%" class="normal">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
</table>
Reference: https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric
Why not think outside the box and inside a table for this:
<table cellpadding="0" cellspacing="0">
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr>
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr>
</table>
You can't do this with CSS. Even if you could, the result will look horrible:
If you really do need to do this, you could use JavaScript to wrap each individual character in an element (or just do it by hand):
function wrap_letters($element) {
for (var i = 0; i < $element.childNodes.length; i++) {
var $child = $element.childNodes[i];
if ($child.nodeType === Node.TEXT_NODE) {
var $wrapper = document.createDocumentFragment();
for (var i = 0; i < $child.nodeValue.length; i++) {
var $char = document.createElement('span');
$char.className = 'char';
$char.textContent = $child.nodeValue.charAt(i);
$wrapper.appendChild($char);
}
$element.replaceChild($wrapper, $child);
} else if ($child.nodeType === Node.ELEMENT_NODE) {
wrap_letters($child);
}
}
}
wrap_letters(document.querySelectorAll('.boxes')[0]);
wrap_letters(document.querySelectorAll('.boxes')[1]);
.char {
outline: 1px solid rgba(255, 0, 0, 0.5);
}
.monospace .char {
display: inline-block;
width: 15px;
text-align: center;
}
<h2 class="boxes">This is a title</h2>
<h2 class="boxes monospace">This is a title</h2>
I've just found the text-transform: full-width; experimental keyword, which:
[...] forces the writing of a character [...] inside a square [...]
text-transform | MDN
Combined with negative letter-spacing, you can get not-so-horrible results:
<style>
pre {
font-family: sans-serif;
text-transform: full-width;
letter-spacing: -.2em;
}
</style>
<!-- Fixed-width sans-serif -->
<pre>
. i I 1 | This is gonna be awesome.
ASDFGHJK | This is gonna be awesome.
</pre>
<!-- Default font -->
. i I 1 | This is gonna be awesome.
<br>
ASDFGHJK | This is gonna be awesome.
Well, you didn't say using only CSS. It is possible to do this with just a little bit of Javascript to wrap each letter in a span. The rest is in CSS...
window.onload = function() {
const secondP = document.getElementById('fixed');
const text = secondP.innerText;
const newText = text.split('').map(c => {
const span = `<span>${c}</span>`;
return span;
}).join('');
secondP.innerHTML = newText;
}
p {
position: relative;
border: 1px solid black;
border-radius: 1em;
padding: 1em;
margin: 3em 1em;
}
p::after {
content: attr(name);
display: block;
background-color: white;
color: green;
padding: 0 0.5em;
position: absolute;
top: -0.6em;
left: 0.5em;
}
#fixed span {
display: inline-block;
width: 1em;
text-align: center;
}
<p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
<p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
In a paragraph with regular text, it looks terrible, but There are instances when this makes sense. Icon fonts and Unicode symbols could both make use of this technique.
I found this question while trying to find a solution for Unicode symbols that were shifting regular text to the right when they were replaced with other Unicode symbols.
I've done a verry pretty thing sometimes for countdowns:
HTML:
<div class="counter">
<span class="counter-digit counter-digit-0">2</span>
<span class="counter-digit counter-digit-1">4</span>
<span class="counter-digit counter-digit-divider">/</span>
<span class="counter-digit counter-digit-2">5</span>
<span class="counter-digit counter-digit-3">7</span>
</div>
SCSS:
$digit-width: 18px;
.counter {
text-align: center;
font-size: $digit-width;
position: relative;
width : $digit-width * 4.5;
margin: 0 auto;
height: 48px;
}
.counter-digit {
position: absolute;
top: 0;
width: $digit-width;
height: 48px;
line-height: 48px;
padding: 0 1px;
&:nth-child(1) { left: 0; text-align: right; }
&:nth-child(2) { left: $digit-width * 1; text-align: left;}
&:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
&:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
&:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
}
You can wrap the seconds digits in a span and style it like...
.time-seconds {display: inline-block;width: .52em;text-align: center;}
See Snippet.
function padlength(what) {
var output = (what.toString().length == 1) ? "0" + what : what;
return output;
}
function displaytime() {
var serverdate = new Date();
var dd = "am";
var hh = serverdate.getHours();
var h = hh;
if (h >= 12) {
h = hh - 12;
dd = "pm";
}
if (h == 0) {
h = 12;
}
h = parseInt(h);
var sec = String(padlength(serverdate.getSeconds()));
var timeFixed = h + ':' + padlength(serverdate.getMinutes()) + ':<span class="time-seconds">' + sec.charAt(0) + '</span><span class="time-seconds">' + sec.charAt(1) + '</span> ' + dd;
timeVariable = h + ':' + padlength(serverdate.getMinutes()) + ':' + sec + ' ' + dd;
document.getElementById("servertime-fixed").innerHTML = timeFixed;
document.getElementById("servertime-variable").innerHTML = timeVariable;
}
window.onload = function() {
displaytime();
setInterval("displaytime()", 1000);
};
center {
font-size: 3em;
font-family: Cursive;
}
.time-seconds {
display: inline-block;
width: .52em;
text-align: center;
}
<html>
<body>
<center id="servertime-fixed">H:MM:SS mm</center>
<center id="servertime-variable">H:MM:<span class="time-seconds">S</span><span class="time-seconds">S</span> mm</center>
</body>
</html>
i just had the same problem. my font didn't support font-variant-numeric: tabular-nums (which i knew about) and the other solutions didn't suit me, so i came up with this one - in my case i just had to expand letter spacing and then squash the (gigantic) zeros to make it look acceptable:
CSS:
.squashzeros { letter-spacing:.2em; }
.squashzeros span { display:inline-block; margin:0 -.09em; }
JS:
document.querySelectorAll('.squashzeros').forEach((o)=>{
o.innerHTML = o.innerText.replaceAll(/0/g,'<span>0</span>');
});
unfortunately i found no css-only solution.
No, not unless it's an actual mono-spaced font.
A mix of answers from Márton Tamás and nïkö:
document.querySelectorAll('pre').forEach( o => {
o.innerHTML = o.innerText.replace(/(.)/g, '<i>$1</i>');
});
pre i {
font-style: normal;
font-family: serif;
display: inline-block;
width: 0.65em;
text-align: center;
}
<!-- Fixed-width serif -->
<pre>
. i I 1 | This is gonna be awesome. 12:10
ASDFGHJK | This is gonna be awesome. 08:51
</pre>
<!-- Default font -->
. i I 1 | This is gonna be awesome. 12:10
<br>
ASDFGHJK | This is gonna be awesome. 08:51
No, there is no way to force anything in CSS. And there isn’t even a way to suggest that a non-monospace font be rendered as a monospace font.