We Keep Coding

How to change color, size and shape of elements in a range slider?

I don't have any expertise in coding or web development. After hours of research in Google, I ended up writing a set of (perfectly working) codes to build a range slider with HTML, CSS and JS.
I'm using this slider to change media volume in my smartphone, in this Media Control Panel created using an Android application called Tasker. My slider is functional, but I want to make some cosmetic changes to my slider.
Could someone please help me to implement following into my code?
Color / gradient of the slider portion before the thumb.
Color / gradient of the slider portion after the thumb.
Size, shape, color, and opacity of the thumb.
This is the current code. Feel free to edit this.
<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>
<style>
.container{
display:flex;
width:100%;
padding-top:5
}
#volm{
-webkit-appearance: none;
background-color: magenta;
border-radius: 2px;
width:153px;
height:5px;
</style>
<script>
var slider = document.getElementById("volm");
slider.addEventListener("input",function()
{
performTask("WebView Slider - Media Volume",1,slider.value,)}, false);
</script>

HTML Range Input has the following two pseudo-elements:
-webkit-slider-runnable-track
-webkit-slider-thumb
You can style them using the pseudo-selectors.
This CodePen has a clever solution in achieving what you intend. By using box-shadows on the thumb, you can style the area before and after the thumb.
Use multiple box-shadows + blurring to achieve gradient-like effects.
I edited your code a little to show how the above can be achieved. Rest is just about preferences on how you want the slider to look like. You can also use JavaScript to dynamically change property values depending on the input.
.container{
display:flex;
width:100%;
padding-top:5;
height: fit-content;
}
#volm{
position: relative;
margin-top: 5px;
border-radius: 2px;
width:153px;
height: 5px;
-webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
-webkit-appearance: none;
position: relative;
box-sizing: border-box;
background-color: hsl(0deg, 0%, 90%);
width: 100%;
height: 20px;
border-radius: 5px;
overflow: hidden;
}
input::-webkit-slider-thumb {
position: relative;
left: initial;
bottom: 5px;
-webkit-appearance: none;
background-color: blue;
width: 20px;
height: 20px;
border-radius: 20px;
box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff;
margin-top: 5px;
}
<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>

Modal inside translated div does not occupy the whole screen [duplicate]

I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (top:0px, left:0px).
This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.
I have attached a JSFiddle with an example where I would have expected the yellow box be at the top corner of the page rather than inside of the container element.
You can find below a simplified version of the fiddle:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}
<div id="container">
Blue: Outer, <br>
Purple: Middle<br>
Yellow: Inner<br>
<div id="outer">
<div id="middle">
<div id="inner">
Inner block
</div>
</div>
</div>
</div>
How can I make translate3d work with fixed-positioned children?

This is because the transform creates a new local coordinate system, as per W3C spec:
In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
There's not currently a work-around that I'm aware of.
It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.

As Bradoergo suggested, just get the window scrollTop and add it to the absolute position top like:
function fix_scroll() {
var s = $(window).scrollTop();
var fixedTitle = $('#fixedContainer');
fixedTitle.css('position','absolute');
fixedTitle.css('top',s + 'px');
}fix_scroll();
$(window).on('scroll',fix_scroll);
This worked for me anyway.

I had a flickering on my fixed top nav when items in the page were using transform, the following applied to my top nav resolved the jumping/flickering issue:
#fixedTopNav {
position: fixed;
top: 0;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
Thanks to this answer on SO

In Firefox and Safari you can use position: sticky; instead of position: fixed; but it will not work in other browsers. For that you need javascript.

In my opinion, the best method to deal with this is to apply the same translate, but break children that need to be fixed out of their parent (translated) element; and then apply the translate to a div inside the position: fixed wrapper.
The results look something like this (in your case):
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
</div>
<div style='position: fixed; top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
<div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
Inner block
</div>
</div>
JSFiddle: https://jsfiddle.net/hju4nws1/
While this may not be ideal for some use cases, typically if you're fixing a div you probably could care less about what element is its parent/where it falls in the inheritance tree in your DOM, and seems to solve most of the headache - while still allowing both translate and position: fixed to live in (relative) harmony.

I ran across the same problem. The only difference is that my element with 'position: fixed' had its 'top' and 'left' style properties set from JS. So I was able to apply a fix:
var oRect = oElement.getBoundingClientRect();
oRect object will contain real (relative to view port) top and left coordinates. So you can adjust your actual oElement.style.top and oElement.style.left properties.

I have an off canvas sidebar that uses -webkit-transform: translate3d. This was preventing me from placing a fixed footer on the page. I resolved the issue by targeting a class on the html page that is added to the tag on initialization of the sidebar and then writing a css :not qualifier to state "-webkit-transform: none;" to the html tag when that class is not present on the html tag. Hope this helps someone out there with this same issue!

Try to apply opposite transform to the child element:
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
<div style='position: fixed; top: 0px;
-webkit-transform:translate3d(-100%, 0px , 0px);
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
Inner block
</div>
</div>

Add a dynamic class while the element transforms.$('#elementId').addClass('transformed').
Then go on to declare in css,
.translat3d(#x, #y, #z) {
-webkit-transform: translate3d(#X, #y, #z);
transform: translate3d(#x, #y, #z);
//All other subsidaries as -moz-transform, -o-transform and -ms-transform
}
then
#elementId {
-webkit-transform: none;
transform: none;
}
then
.transformed {
#elementId {
.translate3d(0px, 20px, 0px);
}
}
Now position: fixed when provided with a top and z-index property values on a child element just work fine and stay fixed until the parent element transforms. When the transformation is reverted the child element pops as fixed again. This should easen the situation if you are actually using a navigation sidebar that toggles open and closes upon a click, and you have a tab-set which should stay sticky as you scroll down the page.

One way to deal with this is to apply the same transform to the fixed element:
<br>
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
<div style='position: fixed; top: 0px;
-webkit-transform:translate3d(0px, 20px , 0px);
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
Inner block
</div>
</div>

How to make all images look same

I am new to web developing, and forgive me if this is very naive question but I am facing an issue where I have a row which has 7 images basically certification that My company has. They all are different size and color and doesnt look good together.
I am trying to make them all look same size and responsive.
So far I have used:
clip: rect(0px,60px,200px,0px);
but this just cuts the images, so I need some other solution which can fix this
My first image is 250*100px whereas other is 250*250px likewise I have 7 images all different size so I have set max-width:250px; height:auto; and this is how it look now:
CSS:
.ribbon img{
height:150px;
margin: 2px 2px 2px 2px;
}
.ribbon img:hover{
border: solid 1px black;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px black;
}
.ribbon{
vertical-align:center;
}
What I am trying to get is those first to image should come in center I have tried vertical-align:middle but doesn't work and the PCGS image is full size 250*250 so it is the problem

You could try img { height: 250px; } to makes all img with the same height, browser will handle the width onscale if you leave the width not set
Edit 1 -
If you want they have the same width, you may replace the height with width that setup the value you want, please try this example, https://jsfiddle.net/e7wv86pc/
img { width: 14%; }

You can also use css property background-size set to cover, and set the images using css background-image property like this:
.image {
width: 250px;
height: 250px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.i1 {
background-image: url("http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg##._V1_UY317_CR6,0,214,317_AL_.jpg");
}
.i2 {
background-image: url("http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}
<div class="image i1"></div>
<div class="image i2"></div>

multi profile css property value using html/js

<div class="holder">
<div class="img">
</div></div>
this is my html structure achieve a circle style (with some other effects too) of user profile. If it's static, it's easy and just set the background in .img.
But I'm doing a multi users social network, jst wondering is it correct to replace only the background property and keep using others property of for example my case, img class.

HTML
<div class="base">
<div class"inherited">
</div>
</div>
CSS
.base, .inherited{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.inherited{
background-image:url("images/123.jpg");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This will add the shared properties to both types of div, but specific ones only to derived divs

With use of border-radius you can make a circle effect with then a background-image property to shape it, then adjust the width & height to size you desire, you could even use background-size: cover to keep the circle responsive to whatever the image size.
<div class="profile-circle"></div>
<style>
.profile-circle {
width: 50px;
height: 50px;
float: left;
position: relative;
border-radius: 50%;
box-shadow: 0px 0px 10px #777;
background-image: url('yourimage-50x50.png');
background-position: -8px -4px;
border: 2px solid white;
}
</stlye>
Fiddle: http://jsfiddle.net/Y3akF/
If you wanted to change it over time, then just replace the background-image attribute as you described.,

How to draw a "smart" border in Javascript / CSS?

I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?

One option is to kind of fake it with a very small inset box shadow:
box-shadow: inset 0px 0px 5px 0px #ffff66;
Click here for an example.

Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.

Try using this solution http://css-tricks.com/7423-transparent-borders-with-background-clip/ , it's not compatibile with IE, versions < 9, however.

You could use the <canvas> element to get/manipulate the image pixels, have a look here: https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

put the image in the background of a div and set a inset box-shadow.
#myDiv{
background: url(http://dummyimage.com/300/09f/fff.png) 0 0 no-repeat;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
box-shadow:inset 0 0 1px #fff;
}
With the last pixel-parameter you can control the width of the inset-border

#jason; try this solution its also work in IE8 & above http://jsfiddle.net/sandeep/Ksr86/2/
CSS:
body{background:#000}
#test {
background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center;
width: 350px;
height: 350px;
position:relative;
}
#test:after {
position:absolute;
background:rgba(0,0,0,0.5);
content:"";
display:block;
top:2px;
left:2px;
right:2px;
bottom:2px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8
}