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/
Related
Solved. The answer to the question bellow was given to me by #freedomn-m and to found there: Set focus on div contenteditable element
For a Rich Text Editor using an editable div:
I wish the caret to be showing again in the div after, for example, a click on the font size selector. I thought that giving back the focus to the div would be enough but it isn't. Maybe I could save the position of the caret and set it back at its right position after the interruption. But something tells me there must be a much easier way to do that... Maybe something in jquery? So far I've got that:
$("#fontSizeChanger").change(function(){
var newSize = $("#fontSizeChanger").val();
$("#editor").css("font-size", newSize);
$("#editor").focus();
});
"fontSizeChanger" is the id of a drop-down box and "editor" the id of the div.
Any ideas?
Update: What I really want is to see the caret blinking in the div after for example I clicked on a button outside of it.
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!
I want to show contents of an input type text if the text is wider than the current input width.
When I hover the field, I want the text to scroll to the left or something similar, in order to view the hidden text.
Thank you.
Note: tell me if I have to add/change the question's tags, please.
I thought about how I would do this and this is what I came up with.
On input hover I'm going to take the input value and put it in a div (or any other element). Then get the width of that div and compare it with the width of the input. If the div is wider than the input then I'm going to animate the inputs text-indent by the difference of the widths.
$('input').hover(function(){
var temp = $('div').html($(this).val()).width();
if($(this).width() < temp){
$(this).animate({
textIndent: $(this).width()-temp
}, 100);
}
});
You can see the full solution here: http://jsfiddle.net/taneleero/tB5C5/2/
Should be enough to get you going.
Eh, even though I did make that comment. couldn't resist this one myself. Using jQuery:
<input type="text" id="txt" value="A very long text goes here very long text goes here very long text goes here very long text goes here very long text goes here indeed."></input>
$('#txt').hover(
function() {
$(this).animate({"scrollLeft": this.scrollWidth}, this.value.length*50)
},
function() {
$(this).stop();
this.scrollLeft = 0;
}
)
here jQuery .animate() is used to animate .scrollLeft position of text within input field. Animation duration is tied to text length, so the speed should be the same for all kinds of texts. When mouse leaves input control - scroll position is reset to original.
Demo: http://jsfiddle.net/uPGmC/
If you googled a bit for "input text scroll left", you would find answers like this, combining it with jQuery docs on hover and animate you would piece the solution together yourself.
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.
hello I'm trying a text box expand and collapse option, the text box expand while clicking on it, and collapse while clicking again on it, there is a placeholder in it, while I'm trying to click again in the text box the blinking cursor appears on the placeholder. please help me to hide the blinking cursor in the text field.
The code for this is:
<#spring.formTextarea "messageWallMessage.messageText", "rows=1 cols=1 style='font-size:11px;color:#666666;width:650px; min-height:28px; padding:0 0 0px 1px;margin: 6px 0 -6px 10px;' onkeyup='return showLinkedIcon();' onFocus='if(this.value == 'What\'s on your mind?') { this.value='';showLinkedIconPublish();return false;}' onBlur='return publishMsg();' onClick='return showLinkedIconPublish();'spellcheck='false'"/>
One solution is to have the textarea immediately call blur() when it gains focus while you want the cursor to be suppressed. You will of course need to add logic to prevent this behavior once you want the textarea to become selectable.
Here's a basic example: http://jsfiddle.net/3V8F6/1/
Unfortunately, it does not appear that you can alter the look of the text cursor without changing the look of the text along with it. The two are one in the same and part of the way the OS handles text in general (as far as I can tell).
You could make your text white to hide the cursor until someone starts typing, but I'm sure you were hoping for a better solution than that.