I have a custom range slider in react that renders the toggle(range) value dynamically values from API. Further, the value or amount the slider covers needs to be divided into sub-sections, whose widths need to be the sum of the value or amount the slider covers.
For example, If the slider covers 220 value/range, it should be divided into 2 sections (say) with a width of sub-sections equivalent to 120 & 100 respectively. The divided values are received from the API itself. It will look something like this:
I was able to handle the maximum functionality of this, except to divide the slider into sections properly & set the dynamic width of the sections.
I have included the working snippet:
https://codesandbox.io/s/nifty-matsumoto-5nnrv
Some of the CSS might seem a bit messed up due to browser compatibility-issue, but it pretty works to replicate my problem.
here is a working solution. Please make sure to refactor, as it is quick and dirty.
I have added a calcSlideWidth function that determindes the correct width of a slide.
I pass the calculated pecentage value to the span that contains the sliderPopup
I have extracted percent to the State
https://codesandbox.io/s/competent-http-br6s6?file=/src/SegmentedSlider.js
Related
I am trying to append content inside a Gridster widget but with no luck for two days already. I tried with:
.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
but the sizes x and y only accept numbers - its default re-sizing mechanism and they are not pixels. They are some sort of steps. If I increment with +1 the size_y the widget is re-sized more than needed and again with its own mechanism.
I was also looking for a way to reduce this step. No luck.
I also tried to change the widget height, min-height, etc. It was not re-sizing.
Do you have any suggestions, ideas?
Just in case anyone comes to this question later.
The x and y numbers are the number of columns and rows a widget takes up. You define the number of rows and columns, as well as the width and height of each when you create the gridster grid.
I've read similar questions on SO about how to do this, but my setup is slightly different and the solutions proposed on those questions, have produced a strange result.
On my page I have a DIV, whose height is fixed which I've given the ID table-container. As the ID suggests, it contains a table (id="myTable"), which has a row appended to the bottom every few seconds using JavaScript. The effect I am trying to achieve is that as the table grows in size, and beyond the size of the table container, the table-container DIV will scroll down so that the last row is always visible.
I've used the following JavaScript to achieve this:
$('#table-container').scrollTop ($('#myTable tr:last').position().top);
This works fine for the first 20 or so row additions, but after that it loses track of the bottom row completely. I can't figure out why it starts off so well, and then messes up.
I've created a JSFiddle which illustrates the problem.
https://jsfiddle.net/crickes/meqzf4g1/16/
Why can't you just do $('#table-container').scrollTop ($('#myTable').height() ); ?
I'm retrieving text from ajax which feeds a tile whose content changes every 5 seconds. The tile's height is variable so I need to get the offset between the text and another element to set the correct height for the text. (let's say it's like a tile that feeds from Facebook statuses and I have to make sure it doesn't come on top of an absolute-positioned element at the bottom.
Here, the codepen example: http://codepen.io/anon/pen/kFsif (test in webkit, open the console)
What happens is that, as the element is being transformed, sometimes I get a different offset (should always be the same), ranging (in this example) from 62.1875 to even 47.24595642089844. 5 pixels are a lot in my case.
My question is: Is there a way to obtain the offset().top (or it could also be the position().top) of an element that is being transformed so that it gives me always a consistent result?
Thanks in advance.
Edit:
This is an example of how the final markup looks like: http://jsfiddle.net/n3KvJ/
Imagine what I'm trying to do is to set .medium height so that it doesn't touch .bottom. Problem is: .tile height is variable and the position I'm getting changes during a transform.
I am working on Demo of bubble sort and other as well using pure Javascript (not jquery) using buttons . I need to swap buttons from current position to the location reqired. I am successful in sorting the numbers but unable to set animations as desired.
Bubble Sort code
(The desired animation here would be to translate the numbered button with the maximum value to the right on each pass.And the minimum to the left. Until the numbers are displayed in completely sorted order.Used the word "desired" since animations would be different for other sorts.)
temp1.style.webkitTransform="translateX(100px)"; //only for Chrome
temp.style.webkitTransform="translateX(-100px)";
I need some help...
How should I do the markup of a layout with two images and a block of text divided in 2 columns with different width, where the 2nd column starts lower than the first one because of one of those images? Here is a sketch of my layout:
I hope I described my problem explicitly enough.
P.S.: Is it possible actually?
CSS3 has a solution, but it is not standard yet and won't work in older browsers here is a link http://www.css3.info/preview/multi-column-layout/.
Possibly the best idea is to use javascript somehow. Put all the text in the first column and test the height then move portions of the text over to the next column until you have equal columns or until the first column is at a desired height.
Another method is to have predefined proportions eg(2/3 in the first column and 1/3 in the second). Then split the text based on the proportions using character count. This won't be exact and you could use a method similar to the one above to find exact width based on overflow properties, but the characters should average out to be the correct length.
This method is pretty simple and would look like
var txt='Column text...';
var len=txt.length;
var chars=Math.floor(len*.67);
//Assuming you want 2/3 of the text in the first column
document.getElementById('col1').innerHTML=txt.substring(0,chars);
document.getElementById('col2').innerHTML=txt.substring(chars);
//Notice that this could split in the middle of a word so you would need to do
//some checking for the nearest space and the change the break to there.
//Also you could then use the previous method to adjust it if you want something really accurate