I often use similarity less , for example:
.position{
position:absolute;
right:10px;
top:20px;
}
So I want to use a mixin :
.position(#absolute:absolute;#top:0;#right:0;#bottom:0;#left:0){
position: #absolute;
top:#top;
right: #right;
bottom:#bottom;
left:#left;
}
But sometimes I don't need right， but the function always inject right into my code.
So what I should do if I want to have the follow code:
.position(#absolute:absolute;#top:12px;#left:12px;#bottom:12px);
//without 'right'
.position{
position: absolute;
top:12px;
bottom:12px;
left:12px;
}
Thanks!
You can rewrite your mixin like this (it doesn't have any required parameters):
.position(
#position: absolute;
#top: false;
#right: false;
#bottom: false;
#left: false
){
position: #position;
& when not (#top = false) {
top: #top;
}
& when not (#right = false) {
right: #right;
}
& when not (#bottom = false) {
bottom: #bottom;
}
& when not (#left = false) {
left: #left;
}
}
Now you can set only those params you really need:
a {
.position(
#top: 20px,
#left: 0px
);
}
b {
.position(
#bottom: -50px,
#right: 0
);
}
Css output:
a {
position: absolute;
top: 20px;
left: 0px;
}
b {
position: absolute;
right: 0;
bottom: -50px;
}
Related
I would like my scroll to work like this when the user scrolls. e.g to start to fill up instead of moving.
Is it possible to make the scroll-thumb grow or to style the scrollbar-track-piece different before and after the thumb?
Here is a small example how to implement this loader
window.addEventListener("scroll", (e) => {
var html = document.documentElement;
let step = 100 / (html.scrollHeight - window.innerHeight);
let loader = document.getElementById("scrollprogress");
loader.style.width = (step * html.scrollTop) + "%";
})
#scrollprogress {
height: 5px;
position: fixed;
left: 0;
top: 0;
background: orange;
}
.backgr {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 5px;
background: lightgrey;
z-index: -1;
}
.box {
height: 3000px;
}
<div id="scrollprogress"></div>
<div class="backgr"></div>
<div class="box"></div>
You can approximate this using negative box shadow:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-thumb {
background-color: orange;
box-shadow:-1000vmax -1000vmax 0px 1000vmax orange;
}
body {
width:300vw;
height:300vh;
background:linear-gradient(60deg,red,blue,orange);
margin:0;
}
html {
background:#fff;
}
At the moment I have a snippet of LESS that will basically shift each subsequent child further down from the top:
&:nth-child(n+2) {
top: #alertTop + 10px;
}
&:nth-child(n+3) {
top: #alertTop + 20px;
}
&:nth-child(n+4) {
top: #alertTop + 30px;
}
Is there anyway to use the 'x' part of 'n+x' in the calculation so that I don't have to manually add these?
I.e. something like:
&:nth-child(n+x) {
top: #alertTop + (x * 5px);
}
LESS/CSS only methods preferred.
From the documentation: Create a mixin that calls itself, along with a guard expression:
LESS
#test {
#child-count: 5;
#child-height: 100px;
position: relative;
height: #child-count * #child-height;
> div {
position: absolute;
left: 0;
right: 0;
height: #child-height;
background: red;
}
.loop(#i) when (#i <=5) {
> :nth-child(#{i}) {
top: (#i - 1) * #child-height;
}
.loop(#i + 1);
}
.loop(1);
}
Result
#test {
position: relative;
height: 500px;
}
#test > div {
position: absolute;
left: 0;
right: 0;
height: 100px;
background: red;
}
#test > :nth-child(1) {
top: 0px;
}
#test > :nth-child(2) {
top: 100px;
}
#test > :nth-child(3) {
top: 200px;
}
#test > :nth-child(4) {
top: 300px;
}
#test > :nth-child(5) {
top: 400px;
}
CodePen
I am struggling to understand how guarded expressions (from a different topic I am led to believe that these are the LESS equivilant of if functions) can be used to set individual properties. Although the below works it seems a little over the top, however it does allow me to do what I need to do. Is this the best way? If not what would be considered so?
.cover() {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cover(#property, #value) when (#property = "top") {
position: fixed;
top: #value;
right: 0;
bottom: 0;
left: 0;
}
.cover(#property, #value) when (#property = "bottom") {
position: fixed;
top: 0;
right: 0;
bottom: #value;
left: 0;
}
.cover(#property, #value) when (#property = "left") {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: #value;
}
.cover(#property, #value) when (#property = "right") {
position: fixed;
top: 0;
right: #value;
bottom: 0;
left: 0;
}
This lets my type for example...
#cover{
.cover("left", 55px);
}
which renders as
#cover{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 55px;
}
If you use LESS version >= 1.6, you can use dynamic property names, which would reduce your code to this:
.cover(#property: left, #value: 0) {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
#{property}: #value;
}
#cover {
.cover(left, 55px);
}
In addition to the #mingos answer, an optimized impl. (i.e. with no redudant properties in output) could look like:
.cover(#property: top, #value: 0) {
position: fixed;
top: #t;
right: #r;
bottom: #b;
left: #l;
.-(#property);
.-(...) {#t: 0; #r: 0; #b: 0; #l: 0}
.-(top) {#t: #value}
.-(right) {#r: #value}
.-(bottom) {#b: #value}
.-(left) {#l: #value}
}
// usage:
.a {.cover(left, 55px)}
.b {.cover(right, 33px)}
I have created a template that contains a panel and a content. Depending on the template's class (Top, Left, Right, or Bottom) the panel will have a different position. The expand and collapse animations are performed using transition and classes.
EDIT:
Here is a fiddle: http://jsfiddle.net/ckkVx/2/
/EDIT
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link href="../Css/reset.dev.css" type="text/css" rel="stylesheet">
<link href="../Css/V_PanelTemplate.dev.css" type="text/css" rel="stylesheet">
<script src="../Js/jquery-1.9.1.min.js" type="text/javascript">
<script src="../Js/V_PanelTemplate.dev.js" type="text/javascript">
</head>
<body class="PanelTemplate Bottom">
<div class="Panel AutoHide Collapsed">PANEL</div>
<div class="Content Expanded">CONTENT</div>
</body>
</html>
And here is the CSS code:
#CHARSET "UTF-8";
.PanelTemplate {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.PanelTemplate > .Panel,
.PanelTemplate > .Content {
position: absolute;
-webkit-transition: ease-in-out 400ms;
-moz-transition: ease-in-out 400ms;
-ms-transition: ease-in-out 400ms;
-o-transition: ease-in-out 400ms;
transition: ease-in-out 400ms;
}
.PanelTemplate.Top > .Panel,
.PanelTemplate.Bottom > .Panel {
height: 100px;
left: 0;
right: 0;
}
.PanelTemplate.Left > .Panel,
.PanelTemplate.Right > .Panel {
width: 200px;
top: 0;
bottom: 0;
}
.PanelTemplate.Top > .Content,
.PanelTemplate.Bottom > .Content {
left: 0;
right: 0;
}
.PanelTemplate.Left > .Content,
.PanelTemplate.Right > .Content {
top: 0;
bottom: 0;
}
.PanelTemplate.Top > .Panel {
top: -90px;
}
.PanelTemplate.Left > .Panel {
left: -190px;
}
.PanelTemplate.Right > .Panel {
right: -190px;
}
.PanelTemplate.Bottom > .Panel {
bottom: -90px;
}
.PanelTemplate.Top > .Panel.Expanded {
top: 0;
}
.PanelTemplate.Left > .Panel.Expanded {
left: 0;
}
.PanelTemplate.Right > .Panel.Expanded {
right: 0;
}
.PanelTemplate.Bottom > .Panel.Expanded {
bottom: 0;
}
.PanelTemplate.Top > .Content {
top: 100px;
bottom: 0;
}
.PanelTemplate.Left > .Content {
left: 200px;
right: 0;
}
.PanelTemplate.Right > .Content {
right: 200px;
left: 0;
}
.PanelTemplate.Bottom > .Content {
bottom: 100px;
top: 0;
}
.PanelTemplate.Top > .Content.Expanded {
top: 10px;
}
.PanelTemplate.Left > .Content.Expanded {
left: 10px;
}
.PanelTemplate.Right > .Content.Expanded {
right: 10px;
}
.PanelTemplate.Bottom > .Content.Expanded {
bottom: 10px;
}
/* Test CSS */
.PanelTemplate > .Panel {
background: #777;
color: #FFF;
}
.PanelTemplate > .Content {
background: #333;
color: #FFF;
}
And, if needed, the JavaScript code:
(function($) {
$(document).ready(function() {
var CLOSE_DELAY = 1000;
var $panel = $('.PanelTemplate > .Panel.AutoHide').first();
$content = $('.PanelTemplate > .Content').first();
$panel.mouseenter(function() {
$panel
.addClass('Expanded')
.removeClass('Collapsed')
.data('isMouseOver', true);
$content
.removeClass('Expanded')
.addClass('Collapsed');
}).mouseleave(function() {
$panel.data('isMouseOver', false);
// Waiting a short time in case the mouse accidently leaves
var timeout = setTimeout(function() {
// If it's no longer over after time out, closing
if( ! $panel.data('isMouseOver')) {
$panel
.removeClass('Expanded')
.addClass('Collapsed');
$content
.addClass('Expanded')
.removeClass('Collapsed');
}
clearTimeout(timeout);
}, CLOSE_DELAY);
});
});
})(jQuery);
When I'm using the classes Top or Left on my template, everything works as intended, but when I use either Right or Bottom, the panel, while moving out of the body, expends the window and causes scroll bars to appear.
I read in another question related to overflow:hidden than it could be due to a relatively positioned element, but I don't have any. I also tried to position the html tag and add overflow:hidden to it too, but it didn't help either.
What can I do to prevent this ?
This should fix your issue-
body {
max-width:100%;
}
The problem is in the CSS. Vector's answer with max-width: 100%; is great, but if that doesn't work then use the !Important override feature. For Example:
.PanelTemplate {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden; !Important
}
That will help override the other rules on overflow!
I can't get my images to go side my side (below share and follow) on this page:
http://toddheymandirector.com/REEL/index_newlook_gallery2222.html
The suspect code:
#gallery ul div {
min-width:26.6%;
margin:0;
float:left
background-color:#595959;
}
Any ideas?
find this block into your css file:
img.a {
left: 0;
position: absolute;
top: 0;
z-index: 10;
}
and replace the position to relative:
img.a {
left: 0;
position: relative;
top: 0;
z-index: 10;
}