Grid lines behind div without using absolute positioning - javascript

I'm trying to build a time selector that:
Sits inside a scrollable div (overflow-y:scroll)
Has an interactive click-and-drag area
Has a grid of 25 single-pixel lines behind the interactive area
Stretches vertically to fit any selected height
(This example image incorrectly shows the grid lines not perfectly aligned with the time markers to the left, so just pretend they do)
Accompanying codepen: http://codepen.io/t3db0t/pen/VKROka (non-interactive)
Previously I had this all working with absolute positioning, but that wreaked havoc with scrolling (as in, you couldn't use the mouse wheel to scroll the div, which is a requirement). So I have everything working without absolute positioning except for the grid lines.
I could do a repeating pattern or image, but then it would not stretch vertically correctly. The number of lines will always be the same. Any ideas?

You can use this using a repeating linear gradient. The trick is to use percentages that divide into the number of lines that you want. if you want a total of 25 sections then your last gradient stop should be 4% (4% x 25 = 100%).
you can position your line anywhere within the gradient by placing color stops on top of eachother.
The line will not be one pixel but a percentage of the whole width. There are some cross browser rendering issues that can cause the width of the line to vary. However under the right circumstances this can be a great solution.
Keep in mind that this divides the contianer into 25 sections ... not 26 sections divided by 25 lines. if you want that your gradient would have to be 3.85% (100 / 26)
My code example places the line at the begining of the repeated gradient, the link below places it in the middle
http://www.virtuosoft.eu/tools/css-gradient-generator/?t=linear&d=angle&r=on&a=0&sp=00000000_0_%25__00000000_1.7_%25__000000_1.7_%25__000000_2.3_%25__00000000_2.3_%25__00000000_4_%25
.gradient {
background-image: -webkit-repeating-linear-gradient(90deg,black 0%,black 0.5%,transparent 0.5%,transparent 4%);
/* IE10+ */
background-image: repeating-linear-gradient(0deg,black 0%,black 0.5%,transparent 0.5%,transparent 4%);
background-image: -ms-repeating-linear-gradient(90deg,black 0%,black 0.5%,transparent 0.5%,transparent 4%);
}

I fixed this problem. The parent was not positioned correctly, and it was causing the child to somehow intercept the scrolling in an undesirable way, so I am now using the absolute-positioned, layered divs to show the grid lines. Harun's answer is intriguing, but I wasn't able to get it to work exactly as required.

Related

Calculate the width of a rotated div based on window height and window width and desired empty space

I need to calculate the width of a rotated div using only the window height and width, so that it only leaves room for an empty triangle in the top left and the bottom right of the webpage.
Something like this (red part is the rotated div):
The problem I have is that the calculation for the correct width needs to work for every window width and height combination. I am convinced this is possible using trigonometry, but it's been quite a while since I actually worked with sin/tan/cos/etc. and so far nothing I tried really worked, so I need some help/pointers.
To summarize what I want to achieve:
There should be an empty triangle top left with an angle of 55 degrees and a height of 150px;
There should also be an empty triangle bottom right with the same dimensions as above
There should be a div that gets rotated like this:
transform: rotateX(45deg) rotateZ(45deg);
transform-origin: top left;
The only thing that should be changed about the rotated div is the "width" css attribute. This values should change depending on the window height and width (these are the only variables).
I have tried multiple things, but I just can't figure it out. Here is my lastest attempt (try changing window size to see the problem):
https://codesandbox.io/s/relaxed-shtern-qphkj
As you can see I managed to always have the exact same top left triangle regardless of window height and width. The problem is the bottom right triangle, that either gets overlapped by the rotated div (aka rotated div is too wide) or the empty triangle gets too large (aka the rotated div isn't wide enough).
Any ideas or pointers would be appreciated.

Set the height of the vertical line (Developed in :after ) to a specific point, so that we don't have to readjust it over different devices

I have a vertical timeline
Which have the boxes left and right
Similar to
https://www.w3schools.com/howto/howto_css_timeline.asp
if you can see this I want the vertical timeline height to be on the last box circle it should not exceed the circle
What I have done so far :
I calculate the height from using
height: calc(100% - 640px);
and applied break points but this fails in different devices is there any way how can I achieve this
Expected output Image

How to slide a responsive SVG slider?

I have made this SVG slider.
When hovering over the red bars at the bottom the rainbow rectangle #moveSVG should slide from right to left or vice versa.
That works fine, but only if I don't make the #moveSVG responsive.
When I make the SVG responsive by..
.. removing the width and height and setting it with css 100vw and 100vh
.. adding viewBox="0 0 5200 900" preserveAspectRatio="xMinYMax
slice"
..it doesn't work anymore. The rectangle is sliced of.
(See snippet)
Now how can I make this responsive slider without slicing it?
P.S. There are 2 solutions which I would prefer not to use:
instead of moving by setting transform to translate, I can change the viewBox x coordinate, but that seems sloppy since I don't have to change the y width and height
I can use the transform on the sub-SVG #bandsSVG, but in the real project there are 3 sub-SVGs so I would have to do it 3 times. Also seems sloppy.
Code --> https://jsfiddle.net/e_motiv/53w0unc3/
The solution is actually to add a group below the svg and translate that group and leave the svg with responsiveness and viewBox.
<g id="realMoveSGV">..</g>
https://jsfiddle.net/e_motiv/xv93zdx1/

Resizing and rotation on svg (Raphael.js) creates jumping

I've been working on this problem for days. I am trying to implement a "free transform" tool for svgs. Similar to that of Raphael.FreeTransform or how you would move/rotate/scale images in MS Word. (Yes, I am aware there are libraries) The following jSFiddle displays my problem: https://jsfiddle.net/hLjvrep7/12/
There are 5 functions in the jsFiddle: rotate-t. shrink-t, grow-t, shrink, grow. The functions suffixed with '-t' also apply the current rotation transformation. e.g.:
grow-t
rect.attr({height : height * 1.25, width : width * 1.25}).transform('r' + degree);
grow
rect.attr({height : height * 1.25, width : width * 1.25});
Once an svg is rotated, then scaled. If you try to rotate the svg again (after scale), the svg jumps. To see this, go top the fiddle:
Hit rotate-t twice. Svg should rotate a total of 30 degrees from the rectangles origin.
Hit grow (not grow-t) twice. Note the top left position of the svg stays the same.
Hit rotate-t once. Note the svg jumps to a different position, then rotates.
Note hitting rotate-t subsequent times will continue to rotate the image around the origin (which is what I want the first time rotate-t is clicked)
One solution I had was to apply the current rotation transformation whenever changing the height and width. This fixes my previous problem, but introduces another problem. To see an example of this, go to the fiddle, and:
Hit rotate-t twice.
Hit grow-t a couple times. Notice the svg grows, but the top left position of the rectangle moves. That's a problem for me. I want the svg to grow without the top left corner to move.
Notes on using the jsFiddle:
Any combination of rotate-t, grow-t, shrink-t will exhibit the ideal rotation behavior (about the origin, no jumping). But this also demonstrates the undesired growing and shrinking (top left position moved when svg is on angle).
Any combination pf rotate-t, grow, shrink will exhibit the ideal scaling behavior (top left corner of svg doesn't move). But this also demonstrates the undesired rotation property (will jump around after different rotations and scales).
Bottom line: I want to be able to the svg rotate around the origin. Then grow the image, while the top left position remains the same. Then rotate the svg again, around the origin without any jumping.
I am aware the how the transform function impacts the local coordinate system of the svg. I'm leaning towards using rotate-t, grow, shrink combo and simply apply some x-y offsets to remove the "jumping" effect. I would imagine there must be some sort of offset I could apply to avoid jumping or shifting during rotation or scaling, but its not clear to me how to calculate such offsets. Any help would be appreciated.
Please don't hesitate to ask anymore questions. Like I said, I've been digging into this for days. Clearly, I don't understand it all, but am somewhat intimate with what's happening and happy to explain anything in more detail.
My solutions for scale, rotate, move back and front etc:
$scope.back = function () {
if($scope.currentImage !==null) {
if($scope.currentImage.prev!=undefined) {
var bot = $scope.currentImage.prev;
$scope.currentImage.insertBefore(bot);
ft.apply();
}
}
};
//Function for moving front
$scope.front = function () {
if($scope.currentImage !==null) {
if($scope.currentImage.next!=undefined) {
var top = $scope.currentImage.next;
if($scope.currentImage.next.node.localName == "image")
$scope.currentImage.insertAfter(top);
ft.apply();
}
}
};
//ZOOM
$scope.zoomIn = function () {
if ($scope.currentImage!= null) {
var ft = paper.freeTransform($scope.currentImage);
if(ft.attrs.scale.y<4) {
$scope.currentImage.toFront();
ft.attrs.scale.y = ft.attrs.scale.y *(1.1);
ft.attrs.scale.x = ft.attrs.scale.x *(1.1);
ft.apply();
ft.updateHandles();
}
}
};

Create an animatable radial mask for layered images?

Here's what I'm trying to do:
I have two circular SVG images stacked on top of each other. The top image is grayscale. The bottom image is full-color.
What I'd like to do is, via a 1-100 percentage, remove the top image like the hands sweeping the face of a clock based on number. Let's say I'm at 25%. From 12 o'clock to 3 o'clock the grayscale image would be gone like a pie wedge) revealing the identical full-color image below. (see image for more clarity).
example of radial mask concept
Is this possible to do with HTML5/CSS? JQuery? Some way else I'm not considering?
Here is a fiddle of what i came up with http://jsfiddle.net/3a5eubcv/ .Basically your background image would be the red circle and then you have 2 masks floating over it (divs with semitransparent background). Sorry for not adding the javascript for it as well, but for you 25% = transform:rotate(90deg);.When you reach 50%, the right mask should stop and the left one should continue. 75% = .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);} .I'm sure the code can be simplified, but hopefully this could get you going.

Categories

Resources