I am working on a page progress loader, I would like to animate the width throughout progress however I am not having any luck. Please see below, any help would be most appreciated.
https://jsfiddle.net/nbx9dwzL/
HTML
<div id="page-progress-bar-top"></div>
Javascript
var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")
CSS
#page-progress-bar-top{
position:absolute;
height:4px;
background:#12ADFD;
z-index:100;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
-moz-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
}
#page-progress-bar-top.complete{
width:100%;
}
You have no initial width, and the default width for a <div> element is 100% (it's a block element).
To see the transition, you're looking to apply a width, of say 1px to start out with:
document.addEventListener("click", function() {
var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")
});
#page-progress-bar-top {
width: 1px;
position: absolute;
height: 4px;
background: #12ADFD;
z-index: 100;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
-moz-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
}
#page-progress-bar-top.complete {
width: 100%;
}
<div id="page-progress-bar-top"></div>
This can be seen working here.
Related
I want to make a similar page as this one: https://lp.anzi.kr/?page=listeners.
When you hover over a button, it moves up and some text will show with a background.
I try to make this with the following code: https://jsfiddle.net/rcv8b0kh/3/
$button = document.querySelector('button');
$textcontent = document.querySelector('.textcontent');
if ($button.hover) {
$textcontent.classList.add('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
visibility: hidden;
}
.active {
visibility: 1;
transform: translateY(-3.5rem);
transition: all .3s ease 0s background-color: black;
color: white
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I also see people using ::before and ::after for these kind of animations but I don't really know how to implement them here.
Here's a solution with pure CSS and :after pseudo element:
div {
position: relative;
width: 10em;
}
p {
text-align: center;
transform: translateY(4rem);
}
p:after {
content: "";
display: block;
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
transform: translateY(-5rem);
}
div:hover p:after {
transform: translateY(-12rem);
}
<div>
<p>some text</p>
</div>
You seem to be getting confused between javascript and jquery. However, I don't think ($button.hover) would be a valid condition in either.
button = document.querySelector('button');
textcontent = document.querySelector('.textcontent');
button.addEventListener('mouseover', handlerIn)
button.addEventListener('mouseout', handlerOut)
function handlerIn() {
textcontent.classList.add('active')
}
function handlerOut() {
textcontent.classList.remove('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
transition: opacity 0.2s linear;
}
.active {
opacity: 1;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
you don't need js to do that its a simple css method
<div>
<button class="hoverbtn" id="hoverbtn">
</button>
<div id="textcontent" class = "textcontent">
<span>some text</span>
</div>
</div>
and here is css to hide and show text
If the second item is directly inside the container:
#hoverbtn:hover > #textcontent { opacity : 1 }
If the second item is next to (after containers closing tag) the container:
#hoverbtn:hover + #textcontent { opacity : 1 }
If the second item is somewhere inside the container:
#hoverbtn:hover #textcontent { opacity : 1 }
If the second item is a sibling of the container:
#hoverbtn:hover ~ #textcontent { opacity : 1 }
so here is your css :
.hoverbtn {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
.hoverbtn:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all 0.3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
}
.hoverbtn:hover+.textcontent {
opacity: 1;
}
reference : https://stackoverflow.com/a/4502693/6550949
You really shouldn't need Javascript to do this.
I'm not really sure what you're looking for, but I'd use a width / opacity transition on the .textContent (when button is hovered) and it achieves very similar results to the page you have linked.
button {
background-color: red;
border-radius: 50%;
border: none;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
}
button:hover {
box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent p{
width:0px;
opacity:0;
transition: opacity .3s ease 0s;
}
button:hover + .textcontent p{
width:200px;
opacity:1;
transition: all .3s ease 0s;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that, but the EUR sign won't appear inside the field, I want to move this sign at the end of the input but for some reason, I can't do it. I don't want to remove class form-control. Any help?
My snippet:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 15px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 0px;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>
You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.
See updated fiddle.
.input-symbol-euro {
position: relative;
display: inline-block;
width: 50%;
}
.input-symbol-euro input {
padding-right: 15px;
width: 100%;
}
.input-symbol-euro:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto;
content: "€";
right: 20px;
}
.form-control {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>
How to create a smooth text input box shadow effect like on this website
Use the CSS3:
#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}
#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}
Try using Firebug or similar tool there.
You declare some initial "invisible" box shadow and its visible counterpart and declare some transition in addition:
.elem {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
This styling is extracted from that site.
EDIT: You wanted mouseover rather than focusing.
.element
{
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover
{
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
I'm trying to implement Checkbox Four as demonstrated on this site: http://www.paulund.co.uk/playground/demo/css-style-checkboxes/
I want to modify this checkbox by adding the red colored text 'N' when unchecked, and blue colored text 'Y' when checked.
The code I have so far is:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxFour
{
width: 40px;
height: 40px;
background: #ddd;
margin: -30px 160px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour label
{
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour input[type=checkbox]:checked + label {
background: #CC0000;
}
You can easily do it via psuedo-elements
may be like this :))
.checkboxFour label:before {
content:'N';
color:red;
display: block;
padding: 5px;
text-align: center;
}
.checkboxFour input[type="checkbox"]:checked + label:before {
content:'Y';
color:blue;
}
http://jsfiddle.net/E67n6/8/
Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour. Any help on this would be great.
html:
<div class = "image1">
<img src="images/image1t.jpg" />
</div>
Try the below code
.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}
Set a css3 transition property on your anchors, then on :hover property, the effects will "animate".
.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}