Creating a Progress bar using 2 images using JavaScript & CSS - javascript

Basically what i am trying to achieve is create a progress bar kind of affect using 2 images.
(one grey scale & one colored). Trying to put these 2 divs beside one another & then modify the x-position and width of these dynamically. But facing problem to put them beside one another. Am i going in the right approach? Any other approaches for achieving this are also welcome.

This will work across all browsers:
HTML
<div id="progress-container">
<span></span>
</div>​
CSS
#progress-container{
background: grey; /* default background */
width: 200px;
overflow: hidden; /* fit to the height of span */
}
#progress-container span {
display: block; /* to enable width and height for this element */
background: orange;
height: 15px;
width: 25%;
}
Working example: http://jsfiddle.net/ZPffE/2/

<div id="one-hundred">
<div id="percentage">
</div>
</div>
try to organize your div like this?

Related

creation of a hidden navbar which is only visible at a defined size

I am currently in training and to carry out a common thread project, I would like to stand out from my comrades who use a responsive navbar which displays a burger menu with a "hidden" menu which is displayed as a footer after reducing the window. (which only appears from a specific dimension)
For example the website https://www.parcasterix.fr/
I've been racking my brains for 3 days and I haven't found
Thank you
Start with the basics, make a container and use a nice natural HTML markup.
Naturally, elements are in display:block, this makes them following the page size. You can make them display:inline-block, so they stay on the same line, but will always follow the flow, and show their content.
No need to go complicated, at least on the beginning. But even after.
.container {
resize: both;
overflow: auto;
width: 80%;
height: 140px;
}
div {
border: 1px black solid;
display: inline-block;
padding: 10px; /* Just to make it nicer */
}
<div class="container">
<!-- Insert your content here and try to resize with the handle on the
bottom right corner -->
<div>Some content</div>
<div>And some more. Hey did you notice?</div>
<div>Elements are just following the flow!</div>
</div>
This is a simplified version, but assuming I've understood you correctly, you can do this simply with a CSS #media query. Hide the footer normally, show it when the screen size is small enough:
/* footer is hidden by default */
footer {
display: none;
}
#media(max-width:400px) {
footer {
display: block;
}
}
Once the screen width is over 400px, the footer will be hidden

How can I animate grid box change with angular BrowserAnimationsModule?

To describe my issue, I will start from the roots to explain what I am trying to do, and why I decided to use Grid Box for this, let's start off with two wireframes:
My layout is built up from two containers; the body and the sidebar. Don't think of it as this is the whole website, this is just a component.
The sidebar contains two elements, notes and chat.
Notes & chat elements can be mini-sized, but once it is mini-sized, the second part of the left body container will get wide and take the place that the sidebar used to take at it's bottom space, like in the example below:
So after researching a bit I couldn't find any other solution besides having 2 different components for the second-data part that needs to get wider, or just use a Grid Box, however, I must animate the side bar and the second part of the data with a transition of it's width changing.
There is an angular POC example I have created with Grid Box to achieve what I need without animation:
https://stackblitz.com/edit/angular-ivy-7tucsx?file=src/app/app.component.html
Is it possible to achieve this animation with grid box by just adding the .closed class to my .container like in the example POC?
There is a CSS only solution that can help you.
In the snippet, hover the container to make the bottom div expand.
The trick is to use a 3 column grid, and an auxiliar element that grows / shrinks:
In production , the trick element would have an height of 0, and be invisible.
.container {
display: grid;
border: solid 1px red;
grid-template-columns: 1fr auto auto;
grid-template-rows: 100px 100px 10px;
transition: all 3s;
width: 500px;
}
#right {
background-color: yellow;
width: 200px;
grid-column: 2 / span 2;
}
#bottom {
background-color: lightgreen;
grid-column: span 2;
}
#trick {
background-color: tomato;
grid-column: 2 / 3;
width: 0px;
transition: width 3s;
}
.container:hover #trick {
width: 200px;
}
<div class="container">
<div id="left">L</div>
<div id="right">R</div>
<div id="bottom">B</div>
<div id="trick">T</div>
</div>
The idea is to use animations provided by angular. So you need to add following in app.module.ts:
imports:
[
BrowserAnimationsModule,
BrowserModule
]
Add the animations to that #component decorative:
animations: [
trigger('<animationName>' [<definitions>])
]
In html, apply animation to required div:
<div [<#animationName>] = '<state-definitions-name>'></div>
[UPDATED]
The above is abstract code. For detailed code, I'm attaching my stackblitz code: https://stackblitz.com/edit/angular-ivy-zs1x59
Change height, width respectively as required in #component's animations

How to bring frosty-glass effect for div over another div that contain texts

I want to have a frosty-glass effect on a div. There are few examples over internet on how to achieve this, however most of them say that, you have a background image for your body then you have a small div over it and want to have frosty-glass effect for that small div.
However my case is slightly different as I dont have any background image rather some text (or any other DOM for that matter) under a div, there is another div which covers that 1st div partially and I want to have frosty-glass effect on that 2nd div. Below is a little example
HTML
<div class = 'parent'>
<div class = 'top'>
</div>
<div class = 'bottom'>
Some div...
</div>
</div>
CSS
.parent {
height: 200px;
width: 100%;
}
.top {
height: 80px;
width: 100%;
position: fixed;
top: 0;
background-color: rgba(0,0,0,.2);
}
.bottom {
height: 150;
width: 100%;
margin-top: 10px;
}
I am looking for to have the frosty-glass effect for div with class top which is actually fixed positioned.
The Codepen example - https://codepen.io/Volabos/pen/RwWxwQd
Is there any way to have that effect using CSS?
Thanks for any pointer
Use the css filter property, eg. filter: blur(3px);.
Find a demo based on yours here.

Adjusting container div using JS

I am currently struggling with a site and I have no idea where to start on this bit of code.
I have a container div, .overflow-block1, which has 4 image divs in them, .block-container. These are automatically pulled in via php and JS and there are 54 image blocks in this container.
Currently I am using JS to add a class to the .overflow-block which increases its width to 25750px to fit all the image blocks next to each other in a single row.
The problem with this is that as content gets added they now need more width so I have to manually add more width, but content will be added regularly and I do not wish to spend the rest of my life changing the width of this block every time content is added.
Can anyone point me in the right direction to use JS to automatically set the container width to fit all the image blocks?
Thank you
As I've written on a comment, here is a solution only with CSS.
#parent {
overflow-x: hidden;
width: 190px;
}
#container {
white-space: nowrap;
border: 1px solid #f0f;
width: 190px;
overflow-x: visible;
}
#container>div {
background: #ccc;
width: 50px;
height: 50px;
display: inline-block;
/* for IE6/7, remove if you don't need to support those browsers */
*display: inline;
zoom: 1
}
<div id="parent">
<div id="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eee</div>
<div>fff</div>
</div>
</div>

how do I make a resizable scrolling text box in a fluid layout?

I've tried using Dreamweaver's standard fluid layout, and modified it with 10% column widths and 24 columns on the desktop design. I've tried creating a div within a div (bear with me, I'm a noob at Dreamweaver), and set the constraints of the text box to be within the outside div, and haven't been able to come up with a solution on that front.
I tried to set the parameters of the text box itself but that doesn't work either because of the conflict of % v. px. In the fluid layout, I'm using % for the resizing to work.
In essence, the issue lies within being able to set the vertical constraints on the text box to be in proportion for when the screen size changes; horizontal is fine because I can just set the width constraint in Dreamweaver's design module.
I'm thinking that I'll have to set it up through a javascript of some sort; although I know nothing about java except to pluck code from someone who's built it and plug it into the site.
Sorry for the rambling nature of this post, and I hope it makes sense.
I was helping you in your other question regarding jQuery and I decided to snoop around and found this question. I understand you want a fluid height for a text box in a column. That can be achieved like this:
CSS:
/*
In order to use width/height: 100% on the body and html
You need to remove the margins and padding on them, otherwise
you'll see a vertical and horizontal scroll bar, which is awful.
This way, it removed margins and paddings on everything, ultimately
leading to better styling overall.
*/
*
{
margin: 0;
padding: 0;
}
body, html
{
width: 100%;
height: 100%;
}
/* Create a wrapper to base all other %-based measurements off of. */
#wrapper
{
width: 100%;
height: 100%;
}
/* The column that the textbox will be inside */
#someColumn
{
width: 50%;
height: 50%;
margin: 5px;
padding: 5px;
}
#someColumn textarea
{
width: 25%;
height: 50%;
/* The textbox will now be 50% the height of #someColumn */
}
HTML:
<body>
<div id="wrapper">
<div id="someColumn">
<textarea></textarea>
</div>
</div>
</body>
Here's a jsFiddle to see what it looks like

Categories

Resources