Is it possible to actually make a progress bar from input range? Someone is typing a number and bar is moving to the right with changed background color on left side of thumb, depends how big the number is. Here is live DEMO http://jsfiddle.net/xnehel/ur26k9cx/2/ `
input[type=number]{
font-size: 20px;
padding: 5px;
}
input[type=range]{
margin-left: -200px;
position: absolute;
top:7px;
}
input[type=range]{
-webkit-appearance: none;
width: 170px;
}
input[type=range]::-webkit-slider-runnable-track {
height: 35px;
background: #ddd;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
border: 0;
width: 16px;
background: goldenrod;
}
input[type=range]:focus
{
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
`
Aight found perfect solution for my problem:
LIVE DEMO
Currently, there is no pure CSS and input[type="range"] cross browser solution. If you're looking for something like IE's implementation of ::-ms-fill-lower and ::-ms-fill-upper which no other browser has implemented at this time.
You might be able to fake it with a bit of javascript and additional elements.
Related
Looking for information on how to change the slider color depending upon what side of the dragable portion it is on, such as how the HTML5 video player slider does.
I've looked around for a bit and haven't found anything for pure JS solutions, only JQUERY, which I can't use. Any suggestions?
Depending on the design you can achieve this with pure CSS too:
input[type='range'] {
-webkit-appearance: none;
background-color: #ddd;
height: 20px;
overflow: hidden;
width: 400px;
}
input[type='range']::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 20px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background: #333;
border-radius: 50%;
box-shadow: -210px 0 0 200px #666;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}
input[type='range']::-moz-range-thumb {
background: #333;
border-radius: 50%;
box-shadow: -1010px 0 0 1000px #666;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}
input[type="range"]::-moz-range-track {
background-color: #ddd;
}
input[type="range"]::-moz-range-progress {
background-color: #666;
height: 20px
}
input[type="range"]::-ms-fill-upper {
background-color: #ddd;
}
input[type="range"]::-ms-fill-lower {
background-color: #666;
}
<input type="range"/>
Using this you'll have to be aware of the input width and matching the box-shadow of the slider-thumb to be more than the width. As the box-shadow around the thumb is what is giving the appearance of different colours either side.
Also as this utilises overflow: hidden on the input you would not be able to have a bigger thumb than track.
Hence if the design is more specific I can also recommend noUISlider it doesn't use jQuery
I am trying to make some web page as show in image .I am able to make almost 90%.But I have one issue
how to make square as shown in image (a square which have triangle in bottom.I know we can make square using border .but how to make triangle in that bottom triangle
how to make contend scrollable mean my contend it not scrolling I already use overflow:auto and scroll
)
.bg {
background: #597A4D!important;
width: 100%!important;
}
.nav_bar {
background: #597A4D!important;
border-style: none;
height: 44px;
border: 0px!important;
border-radius: 0px!important;
}
.display_menu li a{
font-size: 1.2em!important;
color: #ffffff!important;
}
ul.display_menu li:last-child{
background:#3C86D7;
}
.rowClass {
display: block;
margin-top: 3%;
}
.rowClass >div {
padding: 3em;
text-align: center;
}
.text_row div{
display: block;
border: 1px ;
padding: auto;
color: #ffffff;
margin-top: 3%;
}
.rowClass span {
display: block!important;
color: #ffffff;
}
.logo_image{
width: 60px;
height: 60px;
}
.email_div label {
color: #ffffff;
font-weight: bold;
text-align: center;
}
.email_div{
width: 50%;
margin: auto;
}
.email_div label {
}
.email_div input {
background: transparent;
border: 1px solid #3C86D7;
display: inline;
width: 50%;
}
.email_div button {
display: inline;
}
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
Here is my plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview
just do this
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 200px;
}
or desired height instead of
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
it will start scrolling because it will only scroll if data is overflowing
and for shape this article may help but you don't need to use any thing just use bootstrap tooltip
Try this for the overflowing
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 250px;
}
to get an idea to make those box with shapes,
See this DEMO
I have found a few questions similar to this, but were unable to help me.
When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine.
I have the following code for a fixed header:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
My CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.
I have posted the rest of my page on jsfiddle.net
http://jsfiddle.net/5n4pF/
If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance
EDIT
When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.
You should position your header absolute. and give the news a margin-top the size of the header.
The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).
It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.
In this fiddle: http://jsfiddle.net/5n4pF/3/
* {
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#black_top {
background: black;
font-size: 5px;
display:block;
width: 100%;
height: 5px;
}
#logo_header {
margin-top: 20px;
}
.list_item {
list-style-type: none;
display: inline-block;
font: 16px Arial;
padding: 10px 30px 10px 30px;
text-align: center;
}
#top_nav {
font: Arial 30px;
display: block;
width: 100%;
}
.nav_links {
text-decoration: none;
color: black;
}
hr {
margin-right: 30px;
margin-left: 30px;
color: #f00;
opacity: 0.3;
}
.nav_bullets {
color: #D6D6D6;
}
::-moz-selection {
background: #93E6E5;
}
::selection {
background: #b3d4fc;
}
#news_block {
/*Chrome & Safari*/
-webkit-column-count: 3;
-webkit-column-gap: 40px;
/*Firefox*/
-moz-column-count:3;
-moz-column-gap: 40px;
margin: 20px;
position: absolute;
top: 249px;
width: 100%;
box-sizing: border-box;
}
#search_field {
font-size: 25px;
}
.fixed {
width: 100%;
box-sizing: border-box;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0;
position: fixed;
padding-top: 15px;
padding: 10px;
}
the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.
I was working on it today, and I found the solution.
Change the CSS from
.fixed-header .main-header {
display: none;
}
to
.fixed-header .main-header {
display: inline;
}
I'm kind of stuck on creating a fadeIn of strings. What I want to do is have a bar appear next to a string when the user hovers over it. Like this:
| string
But the thing is, when the | appears, there is a displacement of the string to the right, how would I go about fixing this problem? This is my current CSS and Java code.
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
display: none;
margin-right: .4em;
}
JS:
$(document).ready(function(){
$('.details').mouseenter(function(){
$('.line').remove();
$(this).prepend('<a class="line"></a>');
$('.line').fadeIn(250);
});
$('.details').mouseleave(function(){
$('.line').fadeOut(250);
});
});
Assuming each row (parent element of .line and .details) is relative-positioned, try this
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
position: relative;
left: 10px; /*play with this*/
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
position: absolute; /* */
left: 0px; /* */
display: none;
margin-right: .4em;
}
This will push the details element 10px or however much space is needed while preventing the line element from pushing the details
Done without any JavaScript, can you believe it?
Fiddle
p::before {
content: '|';
position: absolute;
margin-left: -5px;
opacity: 0;
transition: opacity 250ms;
}
p:hover::before {
opacity: 1;
}
Ahhh, the power of CSS3
I want to hide my CSS triangle which is attached to a div using :before, and I came across this solution to implement: https://stackoverflow.com/a/11354393/998117
However, my jQuery is not working:
$(".contact input[type='submit']").click(function(event) {
event.preventDefault();
$(".contact .inner").addClass("hidden");
...
(Yes, it does get called.)
This is what my CSS/SASS looks like:
.contact {
background: #3c6ea5;
color: #fff;
display: none;
height: 500px;
.hidden:before {
display: none;
}
.inner {
margin: auto;
padding-top: 20px;
position: relative;
width: 400px;
&:before {
border: solid;
border-color: #3c6ea5 transparent;
border-width: 14px 16px 0 16px;
bottom: -107px;
content: "";
display: block;
position: absolute;
right: -50px;
}
.hidden:before {
display: none;
}
}
...
Why is it not hiding it? What am I doing wrong?
Your Sass is off just a little bit, should be:
.inner {
&.hidden:before {
display: none;
}
}
Notice the & before hidden
Try below code to solve your problem:
.inner { &:before {
.hidden & { display:none;}}}