In my css. . .
body {
visibility:hidden;
}
body::after {
visibility:visible;
background-color:yellow;
}
The ::after pseudo has no effect. Am I making an error that I don't see, or is something wrong with the implementation in Firefox, Chrome?
See this fiddle and play around with it to see what attributes are necessary:
body {
visibility: hidden;
}
body::after {
visibility: visible;
display: block;
width: 50px;
height: 50px;
content: '';
background-color: #000;
}
<body>
</body>
Related
So I was experimenting with css filter, the experiment worked quite well but not in Firefox.
I wanted to apply a filter onto a segment of the background image. The idea was to fix the background image of the wrapper and the inner elements to create the illusion that the filter is applying only to a certain area and can be moved, here with scrolling.
This is what I tried:
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
height: 200%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column
}
body,
div {
background-image: url("https://i.imgur.com/wu7EkAX.jpg");
background-attachment: fixed;
}
div {
filter: saturate(0%);
width: 50%;
height: 40%;
}
<div></div>
<div></div>
This works quite well with Chrome (and I think also in other browsers) but not with Firefox. It seems like it is a result of some optimization which misbehaves.
If you scroll with your mousewheele and then click, it refreshes, otherwise it stays in this state (at least if you run it standalone).
The "solution" is quite simple, you force Firefox to re render, there are whole posts about this topic but here are two of my approaches:
With a css animation
#keyframes renderFix {
from {
outline-color: red;
}
to {
outline-color: blue;
}
}
html {
outline: 1px solid red;
animation: 1s infinite alternate renderFix;
}
With some JavaScript
{
let html, s = false,
cycle = function () {
html.style.outlineColor = s ? "red" : "blue"
s = !s;
window.requestAnimationFrame(cycle)
}
window.requestAnimationFrame(function () {
html = document.body.parentElement
html.style.outlineStyle = "solid";
html.style.outlineWidth = "1px";
cycle()
})
}
The JavaScript fix applied:
{
let html, s = false,
cycle = function () {
html.style.outlineColor = s ? "red" : "blue"
s = !s;
window.requestAnimationFrame(cycle)
}
window.requestAnimationFrame(function () {
html = document.body.parentElement
html.style.outlineStyle = "solid";
html.style.outlineWidth = "1px";
cycle()
})
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
height: 200%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column
}
body,
div {
background-image: url("https://i.imgur.com/wu7EkAX.jpg");
background-attachment: fixed;
}
div {
filter: saturate(0%);
width: 50%;
height: 40%;
}
<div></div>
<div></div>
I am creating a stylesheet for print media that includes an inline SVG as the content of an element's pseudo-class (i.e., ::before, ::after).
When testing in Chrome, it seems to work just fine, but when the page is first loaded in Firefox and Safari, the SVG element does not appear in the print preview. It then appears on all subsequent attempts.
I am not exactly sure what is going on, but if I had to guess, my conjecture would be: when page hasn't been cached there is latency rendering the pseudo-element that is happening concurrently to the browser creating the print page.
I am very curious to know why this is happening, and if there is any solution where an SVG pseudo-element can be used reliably.
Here is a stripped down code example. Please see if you can reproduce this issue:
var button = document.querySelector('button');
button.addEventListener('click', function () {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
position: relative;
display: block;
margin-top: 1em;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
}
<div>
<button>
print
</button>
</div>
I can repro.
It seems to be a bug with the loading of the svg, I guess it would be the same with any image.
One workaround is to load it outside of your #print rules with display: none :
var button = document.querySelector('button');
button.addEventListener('click', function() {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
div::after {
display: none;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
opacity: 1;
position: relative;
display: block;
margin-top: 1em;
}
}
<div>
<button>
print
</button>
</div>
An other one would be to preload it via js before hand.
First time using SCSS, and testing my knowledge from the Sass-Lang.com guide. According to the guide, it is possible to both set variables and use mixins to simplify your CSS.
I was coding an animation where the div is clipped from bottom to top. I used variables to set the initial and final clip-path settings, and used them while calling a mixin. Yet I get the error, 'Invalid CSS after "...slider-initial)": expected "{", was "; }"'. What am I doing wrong?
Here is my code:
<body>
<section id='main'>
<div id='left'></div>
<div id='right'></div>
<section>
</body>
$slider-initial: inset(0 0 0 0);
$slider-final: inset(0 0 100% 0);
#mixin slider-clip($slider-state) {
-webkit-clip-path: $slider-state;
clip-path: $slider-state;
}
body {
height: 100%; width: 100%;
margin: 0 auto;
}
#main {
height: 64vh; width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
border: 1vh solid black;
}
#left {
order: 1;
width: 4%;
height: 100%;
margin-left: 46%;
background: green;
}
#right {
opacity: 1;
order: 2;
width: 4%;
height: 100%;
margin: auto;
margin-left: 0;
animation-name: dropdown;
animation-duration: 4s;
background: red;
}
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
You called your mixin in a wrong way:
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
In the guide on sass-lang.com, you can see the following example of how to include a mixin:
.box { #include border-radius(10px); }
Applied to your case, your code should look like this:
#keyframes dropdown {
from { #include slider-clip($slider-inital); }
to { #include slider-clip($slider-final); }
}
i am using kendo sortable data source is kendo observable array,
when we sorting the divs we are updating the array object in change event,
but array is updating properly but ui is not updating.
can u please help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="playlist">
<ul id="sortable-basic" data-bind="source:items" data-template="template">
</ul>
</div>
<script type="text/x-kendo-tmpl" id="template">
<li class="sortable">#:value#<span>#:time#</span></li>
</script>
<script>
var data;
$(document).ready(function () {
data = kendo.observable({
items: new kendo.data.ObservableArray([
{ value: 'Papercut', time: '3:12' },
{ value: 'One Step Closer ', time: '4:10' },
{ value: 'With You ', time: '5:00' },
{ value: 'Points of Authority ', time: '2:59' }]
)
});
kendo.bind($('#playlist'), data);
$("#sortable-basic").kendoSortable({
change: function (e) {
var daa = data.items.splice(e.oldIndex, 1);
data.items.splice(e.newIndex, 0, daa[0]);
}
});
});
</script>
<style>
#example
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist
{
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title
{
height: 80px;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgba(0,0,0,.1);
}
#playlist-title span
{
display: none;
}
#sortable-basic
{
padding: 0;
margin: 0;
}
li.sortable
{
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
}
li.sortable:last-child
{
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span
{
display: block;
float: right;
color: #666;
}
li.sortable:hover
{
background-color: #dceffd;
}
li.hint
{
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after
{
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child
{
border-radius: 4px;
}
li.hint span
{
color: #fff;
}
li.placeholder
{
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
</body>
</html>
I think I found your problem. It seems to be the change function, just remove it and you can sort your list.
I've not used kendoSortable but I would assume that it is already maintaining the array sort because you have bound the array to the kendoSortable. That's the purpose of binding, it keeps the data and elements in sync for you. What you're doing in the change event is simply undoing the work that the binding just did, that is, sort the elements AND the bound array.
As per telerik,
https://www.telerik.com/forums/sortable-and-moving-items-in-observable-arrays
You have to do this manually and attaching sortable to an array doesn't do anything automatically. So what you are doing is correct, however even though your changes reflect correctly in observable array it doesn't on screen.
So we have to trigger clear and change event, to sync UI with the array. There may be a better way invoke sync without having to clear out array but this was a hack that worked for me.
Here is a sample code where we clear the array and then re-insert which fixes the issue.
$("#sortable-basic").kendoSortable({
change: function (e) {
var daa = data.items.splice(e.oldIndex, 1);
data.items.splice(e.newIndex, 0, daa[0]);
var copiedArray = data.items.splice(0, data.items.length);
$.each(copiedArray,
function (index, item) {
data.items.push(item);
});
}
});
I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.