In reactjs I need to attach a linear progress bar as a bottom to div. I tried with a normal linear progress bar and attached the linear progress to the end of the div with the flex-end property.
Below is the code sandbox link for my implementation.
Code Sandbox Link:
codesandbox.io/s/linear-progress-bar-forked-udhxqz
But my requirement is the div should be as per the below screenshot
.
How can I achieve the below div with HTML and CSS changes?
I should implement using in reactjs
I was able to get your example working with a few CSS changes, below are the only two parts I needed to change:
.App {
overflow: hidden;
}
.emptyProgressBar {
border-radius: 0px;
}
.fillingProgressBar {
width: 102%;
}
Then in App.tsx, change your left style to -101, like the following:
left: props.percent - 101 + "%",
A working example forked from your sandbox is available here.
Related
We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
I have an element that overlays another element. The main element is a canvas where elements constantly have mouse interactions and the element directly overtop of it just shows elements that act as little markers. Same position, same size and it's important the overlay is overtop of the canvas.
What would it mean to make this "overlay" only exist visibility wise? As in having no possible user input because for its purposes it's not really there to be interacted with, just showing something.
Removing selection in CSS stops you from clicking on it but it's still overtop of the other element and doesn't allow mouse events. Hiding the element removes its presence but also makes it invisible.
In a normal desktop application you would just draw something to the screen and add functionality if you wanted but with HTML those two things are inherently the same.
I believe adding in the CSS the following code solves your issue:
.no-interaction {
z-index : -5
}
OR
.interaction {
z-index : 5
}
Turns out all it took was setting the pointer-events CSS attribute to none on whatever you want to have no presence.
I figured it would be a little more interesting than that, but there's a built in way in CSS.
<div id="canvas"></div>
<div id="overlay"></div>
#canvas, #overlay {
width: 500px;
height: 500px;
position: absolute;
}
#canvas {
background: blue;
}
#overlay {
background: red;
pointer-events: none; // right here
}
$('#canvas').click(function() {
alert('Clicked');
});
https://jsfiddle.net/ufsy33aw/
I have this very simple code:
$(document).ready(function() {
$('.content>div').hide();
$('.content>h3').click(function() {
$(this).next().slideToggle('fast');
$(this).toggleClass('active');
});
});
it causes of course that my div slides out from top to bottom. Could you help me add to this code or command the line that in result it will be slide out from right to left??
.slideToggle() animates the height of the matched elements so you will likely have to rely on a different function/method - but this is not that difficult. You can do this either in JavaScript or use CSS3 animation properties. Depends on the use case but I'd probably use the CSS3 option because it is hardware accelerated on most devices so it is smoother.
Here's a simple sketch how that could be done
In the JavaScript file:
$('.content>h3').click(function() {
// just switch the class 'open' the rest is defined in CSS
$(this).next().toggleClass('open');
$(this).toggleClass('active');
});
And in the CSS file:
.content div {
width: 0;
overflow: hidden;
transition: width 1s ease-out;
}
.content div.open {
width: 100%;
}
Example:
http://jsbin.com/qebigohu/2/ (preview)
http://jsbin.com/qebigohu/2/edit (code)
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/
i'm trying to show a hidden div while hovering over the logo of the page.
the website is: http://www.enbloc-magazin.de/
as i said i want to show a container (#snowflakesContainer, display: none;) while hovering ov the logo.
i used several scripts like:
$('#logo').hover(function() {
$('#snowflakesContainer').toggle();
});
but nothing worked.
the css of the hidden container is:
#snowflakesContainer {
top: -553px;
position: absolute;
width: 100%;
height: 100%;
display: none;
}
thanks for any help!
Console gives an error on your facebook jssdk code.
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
on line 8:
button = container.getElementsByTagName( 'h1' )[0],
Try putting it below the page so you give your content the chance to load.
Your javascript should work until there.