Multicolor progress bar using CSS - javascript

I want to create a multicolor progress bar please help me to code. when progress less than 50 it will show red when progress is >50 and <90 it will show green and from 90 to 100 it show blue, how to do it??

You need to create one div for the progressbar and then you just add divs inside the progressbar div.
`
<div class="bar">
<div class="fifty">
<p>50%</p>
</div>
<div class="twentyfive">
<p>25%</p>
</div>
<div class="ten">
<p>10%</p>
</div>
</div>
`
The CSS could be something like this:
`
.bar {
width: 100%;
height: 30px;
border-radius: 10px;
background-color: #b3b3b3;
color: white;
text-align: center;
}
.fifty {
width: 50%;
height: 100%;
background-color: green;
float: left;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.twentyfive {
width: 25%;
height: 100%;
background-color: orange;
float: left;
}
.ten {
width: 10%;
height: 100%;
background-color: red;
float: left;
}
`

I created a multicolor progress bar.
Check it on my codepen here: https://codepen.io/onlintool24/pen/dyVJrww
Just need to change the var progressval value and you can see the multicolor progress bar.
var progressval = 50;
var elm = document.getElementsByClassName('progressab')[0];
elm.style.width = progressval+"%";
elm.innerText = "You're "+progressval+"% There!";
if(progressval>90 && progressval<=100 ){ elm.style.backgroundColor = 'blue';
}else if(progressval>50 && progressval<90 ){ elm.style.backgroundColor = 'green';
}else if(progressval<=50){ elm.style.backgroundColor = 'red';
}
.progressa {
border-radius: 50px !important;
height: 35px;
line-height: 36px;
font-size: 14px;
overflow: hidden;
height: 35px;
margin-bottom: 20px;
background-color: rgba(0,0,0,0.5);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
line-height: 36px;
height: 35px;
font-size: 14px;
border: 3px solid transparent;
}
.progressab {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
-webkit-transition: width .25s ease,height .25s ease,font-size .25s ease;
-moz-transition: width .25s ease,height .25s ease,font-size .25s ease;
-ms-transition: width .25s ease,height .25s ease,font-size .25s ease;
-o-transition: width .25s ease,height .25s ease,font-size .25s ease;
transition: width .25s ease,height .25s ease,font-size .25s ease;
width: 0;
color: #fff;
text-align: center;
font-family: 'Open Sans',sans-serif !important;
animation: progress-bar-stripes 2s linear infinite reverse;
}
#keyframes progress-bar-stripes{
0% {
background-position: 40px 0;
}
100% {
background-position: 0 0;
}
}
<div class="progressa">
<div class="progressab" style=" background-color: rgb(178, 222, 75);"></div>
</div>

Related

Gradiend transparency on input font when text extends over the input

I am facing a problem: I am creating some inputs with different states; one of this states is when the text of the input is longer that the input itself: in this case the text that is hidden at the left of the input should fade out with a gradient transparency:
My code for now is this:
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
.Input:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
transition: border-bottom 0.5s ease;
border-bottom: 1px solid gainsboro;
}
.Input input {
margin-top: 20px;
height: 40px;
width: 100%;
padding-left: 0;
font-size: 16px;
font-weight: 300;
background-color: transparent;
background-image: linear-gradient(to bottom, gainsboro 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 0 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
box-shadow: none;
}
.Input h1 {
font-size: 16px;
color: gainsboro;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
bottom: 0;
transition: 0.5s ease all;
width: 100%;
line-height: unset;
}
.Input:hover:before {
transition: border-bottom 0.5s ease;
border-bottom: 1px solid dimgray;
}
input:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 100% 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
}
input:focus,
input:not(:focus):valid {
border: none;
outline: none;
}
input:focus ~ h1, input:not(:focus):valid ~ h1 {
color: tomato;
transition: all 0.5s ease;
transform: translateY(-25px);
}
<div class="Input">
<input type="text" class="Input" name="testInput" value="" data-id="" required>
<h1>
MyInput
</h1>
</div>
<br>
Any help will be welcome…
Thanks in advance!
The idea to check if the text reach a particular length, if yes you show a hidden element.
In the example below I simplified to the test but what you need to do is to calculate the width that the text should take and then compare with the input width. You can check this link for some idea
Calculating text width
$('.Input input').on('keypress change keyup', function() {
if ($(this).val().length > 10) {
$(this).parent().find('.grad').css('opacity', '1');
} else {
$(this).parent().find('.grad').css('opacity', '0');
}
})
$('.Input .grad').click(function() {
$(this).parent().find('input').focus();
})
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
.grad {
position: absolute;
cursor: text;
top: 25px;
bottom: 2px;
left: 0;
right: 90%;
opacity: 0;
transition: 0.5s;
z-index: 1;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
}
.Input:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
transition: border-bottom 0.5s ease;
border-bottom: 1px solid gainsboro;
}
.Input input {
margin-top: 20px;
height: 40px;
width: 100%;
padding-left: 0;
font-size: 16px;
font-weight: 300;
background-color: transparent;
background-image: linear-gradient(to bottom, gainsboro 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 0 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
box-shadow: none;
}
.Input h1 {
font-size: 16px;
color: gainsboro;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
bottom: 0;
transition: 0.5s ease all;
width: 100%;
line-height: unset;
}
.Input:hover:before {
transition: border-bottom 0.5s ease;
border-bottom: 1px solid dimgray;
}
input:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 100% 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
}
input:focus,
input:not(:focus):valid {
border: none;
outline: none;
}
input:focus~h1,
input:not(:focus):valid~h1 {
color: tomato;
transition: all 0.5s ease;
transform: translateY(-25px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Input">
<span class="grad"></span>
<input type="text" class="Input" name="testInput" value="" data-id="" required>
<h1>
MyInput
</h1>
</div>
<br>

Exit search box by clicking anywhere else on screen

I built a sliding down search box. When you press the search icon a search box drops down, and if you press the search icon the search box will disappear again. I want another way for people to exit the search box besides just clicking on the search icon again. I also want to be able to exit the search box by clicking anywhere else on the screen besides the search box. How would I do this?
jsfiddle - https://jsfiddle.net/pkhj0frp/
jQuery('.search-icon').on('click', function() {
jQuery('.search-form').toggleClass('search-visible');
});
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-icon {
float: right;
line-height: 70px;
cursor: pointer;
margin: 0px 34px;
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(20% + 1px);
transform: translateX(-50%);
left: 50%;
width: 100vw;
}
.search-form.search-visible {
opacity: 1;
height: 110px;
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5;
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0;
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none;
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd;
}
.search-form .input-group {
margin-left: 18px;
position: relative;
width: 100%;
margin-top: 10px;
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #000 solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none !important;
width: calc(100% - 36px) !important;
font-size: 50px;
font-family: 'freightlight';
font-style: italic;
text-transform: uppercase;
color: #000;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
-webkit-font-smoothing: antialiased;
}
.search-form .form-control:focus {
background: #fff !important;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-icon"><img src="https://www.nature.org/cs/groups/webasset/documents/webasset/search-icon.png"></div>
<form role="search" method="get" class="search-form form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
I create exit the search box by clicking anywhere else on the screen and keypress shortcut.
jQuery('.search-icon').on('click', function(e) {
e.stopPropagation();
jQuery('.search-form').toggleClass('search-visible');
});
$(window).bind('keydown', function(e) {
e.preventDefault()
var keyCode = e.keyCode || e.which;
if (keyCode == 117) {
$('.search-form').toggleClass('search-visible');
}
});
$(document).click(function() {
$('.search-form').removeClass('search-visible');
})

Slide dynamic text on hovering a different element

I am breaking my head to get the div content to slide before appearing when I hover over the relevant item that is suppose to change the content of the div dynamically using jquery. The content just changes but I would like them to slide, I have tried various things but in vain.
Please excuse me if my question is silly, I am new to Jquery.
HTML
<div class="servdescripitems">
<h3>Heading 1</h3>
<p>Paragraph of first service</p>
<ul>
<li>Heading 1 list 1</li>
<li>Heading 1 list 2</li>
</ul>
<div class="button">Service 1</div>
</div>
<ul class="serviceslist">
<li class="service1"></li>
<li class="service2"></li>
<li class="service3"></li>
</ul>
Jquery
$('.service1').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
});
$('.service2').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 2</h3><p>Paragraph of second service</p><ul><li>Heading 2 list 1</li><li>Heading 2 list 2</li></ul><div class="button">Service 2</div>');
});
$('.service3').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 3</h3><p>Paragraph of second service</p><ul><li>Heading 3 list 1</li><li>Heading 3 list 2</li></ul><div class="button">Service 3</div>');
});
CSS
.servdescripitems {
width: 100%;
height: 400px;
}
.servdescripitems h3 {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15pt;
color: #ed1f24;
margin-bottom: 10px;
}
.servdescripitems p {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
margin-bottom: 15px;
}
.servdescripitems ul{
list-style-image: url("../images/servicelist.png");
padding-left: 30px;
}
.servdescripitems li {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
padding-bottom: 5px;
}
.button {
border-top: 1px solid #7e7e7e;
background: #3b363b;
background: -webkit-gradient(linear, left top, left bottom, from(#7e7e7e), to(#3b363b));
background: -webkit-linear-gradient(top, #7e7e7e, #3b363b);
background: -moz-linear-gradient(top, #7e7e7e, #3b363b);
background: -ms-linear-gradient(top, #7e7e7e, #3b363b);
background: -o-linear-gradient(top, #7e7e7e, #3b363b);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-family: 'Lato', sans-serif;
font-size: 11pt;
font-weight: bold;
text-decoration: none;
text-align: center;
width: 150px;
height: 20px;
margin: 5px auto;
}
.button:hover {
border-top-color: #ed1f22;
background: #ed1f22;
color: #ffffff;
cursor: pointer;
}
.button:active {
border-top-color: #ed1f22;
background: #ed1f22;
}
.serviceslist {
width: 80%;
margin: 0 auto;
}
.serviceslist li {
margin-bottom: 3px;
margin-right: 30px;
float: left;
}
.service1 {
background: rgba(0, 0, 0, 0) url("../images/service1.png") no-repeat scroll 0 0;
background-position: 0 0;
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service2 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service3 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
I have fiddled the script here
with jQuery the simplest slides are Up and Down as they are built-in.
I've added a div inside your current service details container, so the container's size is not affected when sliding content in/out
This is how I've updated each of your mouseover functions:
$('.service1').mouseover (function() {
//check if current service shown is not the same - this avoids sliding to same content
if(inside_div.attr("current-service")!="1"){
//slideUp current content
inside_div.slideUp(function(){
//once slideUp is finished, change the content of the inside div...
inside_div.html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
// ... then tell the div what service content it now has, and slide it back down
inside_div.attr("current-service","1").slideDown();
});
}
});
Here's an updated fiddle:
https://jsfiddle.net/g66aa0oo/
Let me know if any further explanation is needed.
Also See: https://api.jquery.com/slideUp/
If you really want left/right sliding, I'd recommend looking at a carousel effect plug-in such as slick

Is it possible to animate a div border?

I am using .addClass and .removeClass on some divs which add or remove the bottom border. Is animating this possible? Something like this:
$("#left-title").addClass('active').show("slide", { direction: 'left', easing: 'easeInCirc' }, 1000);
Thanks
Sure, use the transition css3 property:
div{
float: left;
position: relative;
padding: .2em .5em .5em .5em;
background: #eceded;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
box-shadow: inset 0 -5px 0 0 #bbb;
border-radius: 5px;
border: 1px solid #999;
overflow:hidden;
cursor: pointer;
}
div:after{
content: '';
display: block;
width: 0;
height: 5px;
position: absolute;
top: 100%;
left: 0;
margin-top: -5px;
background-color: red;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
div:hover:after{
width: 100%;
background-color: #0c0;
}
<div>Hover me</div>

I can't center a button and fix it to the browsers footer?

http://i.imgur.com/SXgTt.png
You see removing these two will make the image work, but it don't stick to the footer when viewed in browser
here's how its look like
http://i.imgur.com/gdBMr.png
and here's the css with html
<style>
body {
text-align: center;
background-color: #080707;
font-family: "Open Sans", sans-serif;
}
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px auto 0;
text-decoration: none;
position:fixed;
bottom:23px;
}
.enter:hover {
background: #cf2f32;
color: white;
-webkit-transition: background 0.4s ease, color 0.4s ease;
-moz-transition: background 0.4s ease, color 0.4s ease;
-o-transition: background 0.4s ease, color 0.4s ease;
-ms-transition: background 0.4s ease, color 0.4s ease;
transition: background 0.4s ease, color 0.4s ease; }
</style>
<body>
<p><img src="images/fullbg.png" style='width:100%; max-width: 800px;' border="0" alt="Null"></p>
Enter
</body>
I don't think you can use the auto margins trick if the element is set to position fixed. But you can have it this way:
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px 0 0 -82px;
text-decoration: none;
position:fixed;
left: 50%;
bottom:23px;
}
Just set the left margin to be half of the element's width.
I cant see images, buy you can try;
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 0 0 0 -83px;;
text-decoration: none;
position:fixed;
bottom:23px;
left:50%;
}

Categories