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/
Related
I'm making a tooltip lib. It uses a styled <div>.
The red colored one. It was transformed 45 degree and clipped off.
I need a dynamic calculation of height for the clipped-red one above.
In this case the height is exactly getBoundingClientRect().height / 2,
the built in function is transformed aware but not clipped aware.
The clip-path property is might be customized, so we cannot just simply dividing the height by 2.
I need a custom js function something like: getClippedBoundingClientRect()
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.
I'm currently working on this using x3dom: http://folk.ntnu.no/emilh/modell.htm , and I have two problems.
First one is that when I load my model, it appears in a awkward position, I'd like to automaticly flip it and zoom so that you see it from a better side. Currently I have no idea how to do this.
Secondly I'm trying to make a button that toggles the visibility on the outer shell of the model, I've identified the shapes that builds up the shell, but I don't know how to toggle their visibility. So if I have the ...., what can I do to it to make it hidden?
Sorry for mixing Norwegian and English on the site :P
And thanks in advance!
There are two ways of dealing with the zoom level.
Change the scale attribute of your transform, making the shape bigger.
Add a viewpoint node, like so
<viewpoint id="view_id" position='0 10 15' orientation='-1 0 0 0.5'></viewpoint>
The position and orientation values will depend on your scene.
It is asked long time ago but for people who have same problem the solution is like following:
You can use
<vievpoint position="0 0 250">
to change default zoom of your object. first and second parameters for x y coordinates and third one for zoom. If you want to zoom out you can use positive values, to zoom in you can use negative values.
Whole code is like this:
<x3d width='500px' height='400px'>
<scene>
<viewpoint position="0 0 250"></viewpoint>
<tramsform>
<inline url="path">
</transform>
</scene>
</x3d>
For the visibility you can use the transparency attribute on the material tag. http://doc.x3dom.org/author/Shape/Material.html
The shape is still there but you can modify the transparency of it.
I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.
I'm trying to draw a grid on a <canvas> element with the ultimate goal of making a Go board.
For some reason the grid is looking stretched, with the lines being thicker than 1 pixel and the spacing being completely wrong. It doesn't even start in the (10,10) position..
It would be great if someone could take a look at tell me what I'm doing wrong.
http://jsfiddle.net/h2yJn/
I've found the problem. I was setting the dimensions of the <canvas> using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
http://jsfiddle.net/h2yJn/66/
Please try it outside jsfiddle, maybe jsfiddle is applying some linear transformation.
Also please make sure that you add 0.5 everywhere to both x and y coordinates. Alternatively, you can apply translate(0.5, 0.5) to shift all coordinates by half a pixel.