I'm trying to make a progress bar with the CSS attr function, here is my code :
.progress_bar {
height: 10px;
width: 10cm;
background-color: #cae3ff;
}
.progress {
height: inherit;
width: attr(progress);
background-color: #0077ff;
transition: 1s cubic-bezier(1,0,0,1);
}
<div class="progress_bar">
<div class="progress" progress="80%"></div>
</div>
As you can see by running the code snippet, the bar doesn't work, I read the docs about the attr function and still I don't find the problem, could you help me please ?
attr() was originally intended for use with the content property and support for it there is good.
CSS Values and Units Module Level 4 adds support for any property (such as width), but that specification is currently a Working Draft and browser support is non-existent.
Try using the width rule in the style attribute like style="width:50%"
I found another way :
.progress_bar {
height: 10px;
width: 10cm;
background-color: #cae3ff;
}
.progress {
height: inherit;
background-color: #0077ff;
transition: 1s cubic-bezier(1,0,0,1);
}
<div class="progress_bar">
<div class="progress" style="width:80%"></div>
</div>
Using the style attribute, instead of creating a new attribute.
Try this one.
.progress_bar {
height: 10px;
width: 10cm;
background-color: #cae3ff;
}
.progress {
height: inherit;
width: calc(var(--width, 0) * 1%);
background-color: #0077ff;
transition: 1s cubic-bezier(1,0,0,1);
}
<div class="progress_bar">
<div class="progress" style="--width: 80;"></div>
</div>
Related
I've created a vertical navigation on the left of our site. We'd like the background color for a .item to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav .item, the href will redirect them to a page and we want that .item to be highlighted a unique hex color that we can customize for each nav .item. All 6 nav items would have a different color.
One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav .item in our vertical nav bar.
Is Javascript or Jquery the way to go? Any help would be appreciated!!
Heres a FIDDLE with all the code.
sample CSS:
.navback {
position: fixed;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background: #283237;
z-index: 4;
}
.navbar {
position: fixed;
top: 44px;
left: 0px;
width: 100px;
height: 60vh;
background: #283237;
display: flex;
z-index: 5;
flex-direction: column;
}
.topbar {
border-top: 1px solid #000;
top: 44px;
}
.navbar .item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
max-height: 100px;
z-index: 5;
}
.navbar .item div.label {
color: #fff;
position: relative;
top: 5px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
left: -100px;
}
Sample HTML:
<div class="topbar"></div>
<div class="navback leftnav">
<div class="navbar">
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
JS/jQuery
// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";
// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;
$(".item")
.find("[href^='" + hereUrl + "']")
.closest(".item").addClass("here");
Note .find("[href^=...]") selects things that start with what you're looking for.
CSS
/* now use .here to style */
.item.here {
background-color: purple;
}
.item.here .label {
font-weight: bold;
}
To answer your question directly, yes this could be done also via JavaScript/jQuery but there is a far simpler way using the css :active selector.
For example, if the user clicks the .item
then the code would be:
.item:active {
background-color: #cecece; // or whatever styling you want
}
Sidenote: As a webdesigner myself, in general i'd advise using the :hover selector when it comes to navbar highlightng instead of the :active one.
Use jquery in your html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Add the following script
$('.item').click(function(){
$('.item.active').removeClass("active");
$(this).addClass('active');
})
CSS
.item.active {
background-color: red;
}
Please see updated fiddle
If you are using jQuery you can loop through each anchor and test it against the current URL of the page like this:
$(function highlightCurrentUrl() {
var currentUrl = window.location.href;
var items = $(".item").each(function() {
var anchor = $(this).find('a');
$(this).removeClass('active');
//comparison logic
if (anchor.prop('href') == currentUrl) {
$(this).addClass("active");
}
});
});
What this does is add a class to the matching .item in the menu. (This won't work in JSFiddle due to Content Security policy so you will have to test it your own environment.)
Next, you will need to define the styles that will be applied to an .item.active DIV tag. And, if you want different colors for different items, you should probably give them ID's in you markup, so you can reference them individually:
<div class="item hvr-shrink" id="home-link">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink" id="central-link">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
These rules are saying that when the active class is added to the div with the ID home-link or central-link it should have the following properties
#home-link.active {
background-color: blue;
}
#central-link.active {
background-color: green;
}
I'm trying to create an animated slider so that the "non-active" slides are still shown on the sides.
The height of the children is not known. Also, when resizing the page, the height might increase.
Currently I have this: https://codepen.io/anon/pen/odoYPx
HTML:
<div class="row side-by-side-slider">
<div class="col-md-6 ss-slide-left ss-slide">
<div class="ss-slide-content">
Content
</div>
</div>
<div class="col-md-6 ss-slide active">
<div class="ss-slide-content">
Content
</div>
</div>
<div class="col-md-6 col-md-push-10 ss-slide">
<div class="ss-slide-content">
Content
</div>
</div>
</div>
CSS:
body {
overflow: hidden;
}
.side-by-side-slider {
overflow: hidden;
}
.side-by-side-slider .ss-slide {
position: absolute;
opacity: .26;
margin: 0 15px;
background: #f5f4f4;
-webkit-box-shadow: 0 0 40px 0 #F5F4F4;
box-shadow: 0 0 40px 0 #F5F4F4;
border-radius: 10px;
padding: 45px 70px;
width: 50%;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.side-by-side-slider .ss-slide-left {
left: -33.3333333%;
}
.side-by-side-slider .ss-slide.active {
left: 25%;
opacity: 1;
}
.col-md-push-10 {
left: 83.33333333%;
}
The problem is that the parent (.side-by-side-slider) doesn't wrap around the children. I couldn't figure out how to do it without children being "position: absolute" since then I had alignment issues. I left out the slider JS code because for this problem it's not necessary. It's still a work in progress.
Any help is appreciated!
https://codepen.io/7ssan91/pen/RyjVNW you can use this slider with only Html and Css if you want to control of the height you should use media query https://www.w3schools.com/css/css_rwd_images.asp
I was just wondering if there was a pure CSS solution, but couldn't make one.
I ended up using jQuery to achieve this. More specifically this function:
makeChildHeight() {
let maxHeight = $('.side-by-side-slider .ss-slide').innerHeight() + 80;
Array.prototype.forEach.call($('.side-by-side-slider .ss-slide'), function(slide) {
if ($(slide).innerHeight() + 80 > maxHeight) {
maxHeight = $(slide).innerHeight() + 80;
}
});
$('.side-by-side-slider').css(
{'height': maxHeight}
);
}
Is there any way to have a transition on the order of flex-box items?
In other words, can I have this (details in this fiddle)
#container {
display: flex;
}
#container:hover div:last-child {
order: -1;
}
animated (the element getting the new position assumes it's position over time), please?
I am not really answering the question because I am not using the order property.
But I wanted to do something similar to what you expect, and finally decided to :
In HTML, add a data-order attribute to the elements
Add the CSS properties for each element position
Change the data-order using Javascript
Using CSS transitions for the interpolation
setInterval(changeOrder, 3000);
function changeOrder() {
const allSlides = document.querySelectorAll(".single-slide");
const previous = "1";
const current = "2";
const next = "3";
for (const slide of allSlides) {
const order = slide.getAttribute("data-order");
switch (order) {
case current:
slide.setAttribute("data-order", previous);
break;
case next:
slide.setAttribute("data-order", current);
break;
case previous:
slide.setAttribute("data-order", next);
break;
}
}
}
.all-slides {
display: flex;
width: 80vw;
margin: 0 auto;
perspective: 500px;
height: 500px;
}
.single-slide {
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 30%;
position: absolute;
background-color: white;
transition: 2s ease;
box-shadow: 0px 5px 10px lightgrey;
}
/* Left slide*/
.single-slide[data-order="1"] {
left: 10vw;
transform: translate(-50%) scale(0.8, 0.8);
z-index: 1;
opacity: 0.7;
}
/* Middle slide */
.single-slide[data-order="2"] {
left: 40vw;
transform: translate(-50%);
z-index: 3;
opacity: 1;
}
/* Right slide*/
.single-slide[data-order="3"] {
left: 90vw;
transform: translate(-120%) scale(0.8, 0.8);
z-index: 2;
opacity: 0.7;
}
.single-slide:nth-child(2) {
order: 3;
}
.single-slide:nth-child(1) {
order: 2;
}
.single-slide:nth-child(3) {
order: 1;
}
<div class="all-slides">
<div class="single-slide" data-order="2">
<h3>First slide </h3>
<p>Some text</p>
</div>
<div class="single-slide" data-order="3">
<h3>Second slide</h3>
<p>Some other text</p>
</div>
<div class="single-slide" data-order="1">
<h3>Third slide</h3>
<p>Yet some other text</p>
</div>
</div>
This could be useful if you want to animate a slider (or anything else), but want to keep the order of the elements in the HTML for accessibility purposes, which is one of the useful usage of the order property. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property_and_accessibility
Sadly no: the order attribute is animatable, but only as integers. That means that for each step/frame of the animation it will interpolate the value by flooring to the neareast integer. So items will only ever show up in the slot that the computed integer value results in, never in-between in any smooth sort of motion way.
It's technically still an animation: the calculated integer position should still follow the timing function and keyframe rules of the animation, it's just that the items "jump" from position to position as they change.
See https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation
This question is old now, but I recently tested this, using this Fiddle (adapted from the one posted by Jason in a comment): http://jsfiddle.net/aqrxcd1u/ (code below).
In both Chrome and Firefox this partially animates, in that the order transitions one at a time from the current value to the target value. Meaning it doesn't go from 5->1 but instead goes 5->4->3->2->1.
In desktop Safari it still goes 5->1 directly.
#container {
display: flex;
}
#container div {
width: 100px;
height: 100px;
margin-right: 10px;
background-color: red;
}
#container div:nth-child(even) {
background-color: blue;
}
}
#container div:last-child {
order: 5;
transition: order 1s;
}
#container:hover div:last-child {
order: -1 !important;
}
<div id="container">
<div style="order: 1">Element 1A</div>
<div style="order: 2">Element 2B</div>
<div style="order: 3">Element 3C</div>
<div style="order: 4">Element 4D</div>
<div style="order: 5">Element 5E</div>
</div>
As Emil stated, it only animates as an integer. However, I am thinking of a hack:
Put the element you want to display in a wrapper with 1/10 of the height, set the wrapper overflow: visible
Then put 9 spacing element between these wrappers with the same height.
Put order and transition on all of them.
Change order of a wrapper and watch it 'transitioning'.
Sadly, it's ugly and only work in Firefox.
Here is what I tested in Angular
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.