We Keep Coding

Styling track of slider range with a shape either side of halfway point

I have a slider, but need to style the track so that each side of the halfway point is a shape that colours depending on the position of the slider. I have absolutely no idea where to start with this so have no example code of what I have tried.
This is the design I have been given:

For the design you have few options. The most common one is to have 2 svgs. The other one is to transform a div using CSS.
the starting point could be 0 (the center). based on the circle position you start styling the svg that it overlaps onto. We can say that from -1 to -100 we refer to the shape on the left and from 1 to 100 we refer to the shape on the right.
How to get the value based on the position of an element? When the mouse moves, we update the value based on the current position and the starting position (0). have a look at getBoundingClientRect.
If it's easier you could also think of it as:
0% to 50% = -100 to 0
50% to 100% = 0 to 100.
where the position of the element (i.e. 50%) is the position of the circle when using transform: translateX(N).

Using CSS transforms for proportional sizing and spcing

I want to use CSS transforms to do some layouts of images, and have the image layouts be consistent across different screen widths. (For the purposes of this post, I’m only going to discuss widths and x (left) values.) All the data that I need to do these layouts are in a database.
Of course, if I could do an HTML layout with dedicated styles for each layout, I’d be fine. I could do it like I have it here in this pen. There are three boxes, 2 smaller ones and a larger one that is 3 times the size of the smaller ones. The smaller boxes are each 10% of the window width, the larger one is 30%. The boxes are equally spaced, the left-most one is 10% from the left, the larger middle one is 30% from the left and the last one is 70% from the left. This leaves an equal amount of space ( 10% ) between the boxes.
img#smallA { /* CSS for the first box */
position: absolute;
top: 10%;
left: 10%;
width: 10%;
}
The spacing is uniform when using CSS only.
On the above pen that uses CSS only, you can resize the window width all you want and the sizing and spacing stays consistent; proportional to the screen width, just as we have coded it to do.
So it seems logical that one should be able to do the same thing with a transform. You can get the window width with JS, you can set the width of the boxes with the transform and you can set the x values with the transform. But here’s the pen where I’ve tried to do it. Click the larger box to run the sizeAndPos() function. Now if you resize the window width to 1000 pixels (watch the little gizmo in the center of the CodePen screen), this JS / transform method works perfectly and the layout looks like the other one. But if you stretch it, the spacing starts going off immediately. (Remember to click the larger box after resizing). I think the reason it works at 1000 pixels wide, is b/c at that window width, the boxes are at their natural width. But I don’t understand why it only works in that case.
The spacing is off now; the between gap box 2 and 3 is too big.
For anybody how looks at the code, you may wonder why I’m passing the original width of each image (origWidth) to the function. This is because the CSS scale transform function sizes the image based on it’s original dimensions (scaling an image to 1 gives you 100% of the original size). So to do a proportional size, you first have to figure out how many pixels wide the box should be (10% or 30% of the screen width, depending on the box). Then you have to divide that amount by the original size to get the proper ratio to do the scaling. The small boxes are 100 pixels wide and the large one is 300 pixels wide.
Surely this is possible with transforms. I have tried setting the transform properties individually, to control the order of the operations, but it didn’t help. Can anyone tell me why this doesn’t work?

After trying to make this way too complicated, I found the answer. Change the transform-origin property of the elements. The default on this property is 'center' both axis. But we need our transformations to originate from the top left corner.
img#smallA {
transform-origin: left top;
position: absolute;
}

How can I translate with webkit-transform enough so that

I am using webkit-transform: scale(zoomFactor,zoomFactor) in css to zoom the contents of an iframe. When I zoom it to the proper size to fit inside the iframe, the positioning of the elements is offset like this:
I cannot figure out how to find the x and y I would need to offset it to get it so that the contents of the iframe appear to be in the same corner as before it was scaled. The amount the contents are offset depend on how large or small the scalefactor is. Does anyone know how I can get this to work?

by using transforms you can set the transform origin.
In your case you want to scale to the top left.
so the origin should not be default (center) but at 0px left and 0px top.
-webkit-transform-origin:0px 0px;

Position absolute for a rotated Div

I have a parent div and child div. Child is position absolute with respect to parent div. Child div is rotated by 90 degrees. Since the origin is the center (meeting point of 2 diagonals) of the child, the child div is shifted pixels outside of the container.
To elaborate this problem I have added 2 parents-child output in the fiddle below.
http://jsfiddle.net/Xja29/
In the fiddle I have added an event which resets the child position to the top-left corner of their respective parents. Here is the reset code. Note top & left values are different for the 2 child divs
JQuery Code:
$("#link").click(function(){
//Child 1 needs top=45 and left=-45
$("#c1").css({"top":"45px", "left":"-45px"});
//Whereas Child 2 needs top=30 and left=-30
$("#c2").css({"top":"25px", "left":"-25px"});
//As one can see there are different values for top and left for childs of different dimension. Is there any relation or formula to find out this values?
});
Exactly, I want to find out the relation between rotation angle, width, height and co-ordinate system of the child div. Please let me know if anything such exists. Thank you.

You can use as style:
transform: rotate(90deg) translate(0,-100%)
transform-origin: top left
to get the requested alignment without using Javascript

You can always use the following calculation:
top = (child_div.width - child_div.height)/2
left = (child_div.height - child_div.width)/2 = -top
Let's examine the formula for top. The center of the child div is (child_div.height/2) units below the top of the parent's div. After rotating the child div, its top is (child_div.width/2) units above its own center. This implies that its top is (child_div.width/2) - (child_div.width/2) units above its parent's top. Simplifying it, we get the aforesaid formula. The formula for left can be derived analogously.
If you are going to move them using Javascript, you can calculate these values at the run time and use them.

Well, the child div resides in its own coordinate system relative to the parent container which position' is not static (the body otherwise). If you want to rotate a div around a certain point, which is not the origin of its coordinate system the steps to be taken are as follows:
subtract the vetor of the rotation point from the position vector of the div. (so the rotation center will lie in the origin).
rotate the div.
undo step one by adding the "rotation-center-vector" to the position of the div.
These steps are a quite general approach and a common concept, just have a look at tranformation matrices. In other words, rotating arround a certain point always involves these three steps (the same holds true for scaling objects).
Good luck...

Get actual width and height of an element after being scaled using CSS3

In Firefox, I need to scale a <div> containing text and images.
After using -moz-transform: scale() the content is visually scaled but the <div> still returns it's original sizes when trying to get these values using javascript.
Any solution for this behaviour?

If you already know the scale value, do the math using a bit of javascript. Multiply the scale value by the actual sizes you are getting. (960px scaled to 0.5 = 480px)
If you don't know the scale value, you need to get the current transformation matrix using getComputedStyle() and then do the math.
var element = document.getElementById("divScaledToHalf"),
style = window.getComputedStyle(element, ""),
matrix = style.getPropertyValue("-moz-transform");
console.log(matrix); // matrix(0.5, 0, 0, 0.5, 0px, 0px)

Use element.getBoundingClientRect() its already answered here:
CSS3 how to calculate height and width after scale

When galer88 says:
"After using -moz-transform: scale() the content is visually scaled but the <div> still returns it's original sizes when trying to get these values using javascript."
The DIV's original sizes are being returned because in fact what is really happening is a ZOOM and not a SCALE.
When you SCALE an object, you should literally modify the width, height, and depth (in case of 3D) of the object to make it smaller or larger.
When you ZOOM out or in, on the other hand, you simply move the camera's focus further back or nearer to the object. The object's width, height, and depth (in case of 3D) are not affected during zooming.
Please check a possible solution in Pierre's answer.