propagate change of scrollbar range to text box in dat.gui - javascript

Just wondering if somebody else had the same problem.
I created a scroller inside a gui in dat.gui.
When I later want to change the min and max values of the scroller, I do:
scrollBar.__min=0;
scrollBar.__max=listNbBaseElements[newValue2]-1;
scrollBar.initialValue=0;
scrollBar.object.scrollProgress=0;
Unfortunately, the change does not seem to propagate to the text input box created by dat.gui on the right side of the scroller. The min and max input of the text input stays the same as the original values initially defined in the scroller creation. When I try to update the content of the input, it does not accept values in the new range...
How can I find the input box __min and __max properties?
Cheers!

Related

Dropdown menu css to expand the width based on content

I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.
In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.
Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.
Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>
The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.

MooTools: Animate size of input box on click/toggle

can only use Mootools here!
Okay so I have a basic input box:
<input id='input_box' value='Name' class="validate['required']" />
The class is for MooTools floor validation.
So what I have in mind is this:
1) The input box has the text of the value inside.
2) When the user clicks on the input box, the left side of the box slides inwards (left to right), so it now shows:
Name [inputbox]
3) If the user clicks out of the box area without typing anything, then it slides back to its original position with Name inside the box area.
I was thinking of doing it this way:
Have the text positioned behind the input box, onlick animate the size of the box, then fade in the text in the position. However, my Mootools knowledge is really bad, maybe something like this (as a starting point)?
function introFunction() {
var input = new Fx.Style($('input_box'),'width':'200');
input.start(200);
}
Then apply that to onlick, but it doesnt work :/
I gave it a try. http://jsfiddle.net/fJjTN/1/
I used tween instead of Fx. Instead of doing the effect on the input field, I did it on the label.
Edit after feedback in comments
http://jsfiddle.net/47CAH/1/

How can I get cursor position in a textbox as a pixel value?

I'm trying to do something like that:
When use enter "#" in the textbox, the colorpicker div must be opened in bottom of the cursor position. I can get the order of the cursor with element.selectionStart but it's not reliable way to do that. It must be a pixel value. Any suggestion?
If you're sure that the textfield will never scroll, you can simply replicate the font and box sizing of the textfield in a div positioned out of view, and then measure the size of a span with the same contents as the textfield.

How to detect if a text-field needs to wrap in JavaScript/dojo?

I have a textfield in a grid in which I wish to turn off text wrapping, but display a tooltip with the full text if wrapping is required. So, how could I detect if a field needs to wrap?
I tried to query the field's length, but it was either in em or in px based on if the user resized it. How could I get the wrapping status?
An option to detect if the text wraps - create (with jQuery, for instance) an invisible span with the same font settings and white-space: nowrap, set it's text to the field's content and check if the span's width is bigger than the field's width (in pixels, obtained via width())
Working fiddle: http://jsfiddle.net/TR98y/1/
Perhaps you can check the height (via scrollHeight) of the text container. It should increase when things start wrapping.
The only other alternative I can think of is setting overflow-x:hidden and then dettecting the overflow somehow.

How do I stop a textarea from scrolling to the top whenever I change its value

I'm making something where a textarea gets more and more text appended. In firefox, the textarea scroll back up to the top each time.
I currently have something like textarea.scrollTop=1000000; to scroll it back down each time it changes, but it still goes up to the top for a very short time.
Is there any way to stop it doing so?
I ran into this problem, too. It happens in IE and Firefox but not Opera and Chrome.
I thought of hiding the momentary jumps to the top by "double-buffering" changes to the textarea:
Create two textareas with the exact same properties and dimensions. Only one of these is visible; the other one is hidden.
Append text to the hidden textarea: set [the value of the hidden textarea] to [the value of the visible textarea] + [text to append]. (The textarea will automatically scroll to the top, but this textarea is hidden!)
Scroll the hidden textarea to the bottom: set scrollTop to a high integer value like (-1 >>> 1).
Swap the hidden textarea with the visible one. Now the new text is shown, sans jumping to top!
You can swap the hidden/visible textareas by using one of two methods:
Use absolute positioning to place the textareas on top of each other in conjunction with toggling their visible property.
Swap the actual DOM elements. I'm not sure if this will introduce a new type of "flicker." You may have to create a div to contain the visible textarea so the layout of the page doesn't keep changing...
i thing that is problem of adding the content via the script, paste your code which append text to your textarea

Categories

Resources