Develop Reference

Shrinking a Table in JavaScript

Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:

If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.

In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}

alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools

The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.

Format text as user inputs in a contenteditable div

I'm attempting to make a page that allows users to input text and it will automatically format the input -- as in a screenplay format (similar to Amazon's StoryWriter).
So far I can check for text with ":contains('example text')" and add/remove classes to it. The problem is that all of the following p tags inherit that class.
My solution so far is to use .next() to remove the class I added, but that is limited since there might be need for a line break in the script (in dialogue for instance) and that will remove the dialogue class.
$('.content').on('input', function() {
$("p.input:contains('INT.')").addClass("high").next(".input").removeClass("high");
$("p.input:contains('EXT.')").addClass("high").next(".input").removeClass("high");
});
I can't get || to work in the :contains parameter either, but that's the least of my issues.
I have a JS fiddle
I've worked on this for a while now, and if I could change only the node that contains the text (INT. or EXT. in this example) and leaves the rest alone that would work and I could apply it to the rest of the script.
Any help would be appreciated, I'm new to the stackoverflow so thank you.

See the comments in the code below for an explanation of what's going on.
Fiddle Example
JQuery
var main = function(){
var content = $('.content');
content.on('input', function() {
$("p.input").each(function() {
//Get the html content for the current p input.
var text = $(this).html();
//indexOf will return a positive value if "INT." or "EXT." exists in the html
if (text.indexOf('INT.') !== -1 || text.indexOf('EXT.') !== -1) {
$(this).addClass('high');
}
//You could include additional "if else" blocks to check and apply different conditions
else { //The required text does not exist, so remove the class for the current input
$(this).removeClass('high');
}
});
});
};//main close
$(document).ready(main);

Is there a way to place a keyboard shortcut inside an editable div?

For example, i have a div which users can type into it. i would like to place shortcuts so when the user inputs the word pi. The output would be the symbol π. Or if the user inputs sqrt then they would get this symbol inf then the output would be ∞. and even when the tab button is clicked to indent a couple of lines. I have not seen a web app that does this yet so any help would be appreciated.

There's some extensive key tracking + field updating you can do to accomplish this, or you can get a jQuery plugin that already does something similar (if not exactly) and modify it to accomplish the same task.
This might be what you are looking for though:
http://code.google.com/p/js-hotkeys/wiki/about

You could simply use a replace. See JSFiddle demo here
$('.test').keydown(function (event) {
if ($('.test').val().contains("pi")) {
var newVal = $('.test').val().replace("pi", "π");
$('.test').val(newVal);
//Place Cusor at the end of the div if using editable div
}
else if ($('.test').val().contains("inf")) {
var newVal = $('.test').val().replace("inf", "∞");
$('.test').val(newVal);
//Place Cusor at the end of the div if using editable div
}
});
In this sample I am using an input. You can change that to div

how to make a select bigger on the clientside

Hallo,
I'm working on a website which is pretty simple and old. We just use standard ASP there is no JavaScript framework or something and I can't really program JavaScript.
I have a cell in a table and in there I want to have between 1 and 7 select's. If there are seven I don't have enough space and because our company uses Internet Explorer the select boxes don't get bigger when you open them.
So I thought i could do some kind of javascript or something to just make one of the select boxes bigger when the mouse is over it.
How would I do that?

Have you tried Cialis ? :p
Seriously now, if the select boxes change size on mouseover they may break layout and depending on conditions make it impossible to select something..
the way to do it though would be
<script type="text/javascript">
var selects = document.getElementsByTagName('select')
for (var i=0;i<selects.length;i++)
{
selects[i].onfocus = function(){
this.oldwidth = this.style.width;
this.style.width = 'auto';
}
selects[i].onblur = function(){
this.style.width = this.oldwidth;
}
}
</script>
can be seen live at http://www.jsfiddle.net/YN37p/
update
also have a look at http://www.jsfiddle.net/YN37p/1/ for use of classes and a workaround to an issue in the previous solution, where you need to click twice to open select box.

How to move the textbox viewport when gaining focus?

I have a textbox that may contain strings larger than the textbox size. When I'm typing, the textbox "viewport" always moves to show the last character I typed (for example when you write a very large title in a SO question).
a
The problem is that if the texbox loses focus, when it is focused again the viewport always is set at the start of the text, and I want it at the end.
I tried moving the caret programatically to the end of the text and it works, but the viewport is still at the beginning of the text, so the user still has to press any key to move the viewport to the end of the text.
Example
This is the textbox before losing focus:
alt text http://img35.imageshack.us/img35/6697/10437837.jpg
And this after focus is lost:
alt text http://img11.imageshack.us/img11/1390/33816597.jpg
I'd like that when the txtbox gains focus again the viewport is set like in the first image.
Is possible to do this ?

Sry, but I don't think it's possible. At least not in clean and browser-consistent way.

Okay, you are battling browser and event limitations here.
You can not simulate a UI-Event in such a way that it mimics human interaction (it's a security issue). However, there are certain built-in ways to manipulate the control of text in a few DOM elements -- The textarea element is a good example of this with its selectionStart/selectionEnd (browser-specific implementation) variables. You should probably note that in Firefox, the selectionStart/selectionEnd make your desired effect, but, again, only under Firefox.
So, your issue can not be solved in a cross-browser way. You would have to go to simulating the effect through text slicing and so forth.
Here is a quick pseudo-code example of what I mean:
element.onblur = function (event) {
this.hidden = this.value;
if (this.value.length > (this.offsetsetWidth / 12)) {
this.shown = this.value.slice(this.value.length - (this.offsetWidth / 12));
this.value = this.shown;
}
};
element.onfocus = function (event) {
this.value = this.hidden || this.value;
};
The slice hack here is based off a ratio of a monospaced font's width (12px) to the width of the element (whatever it may be). So, if we have a box of 144px and we are dealing with a monospaced font, we know that we can fit 12 characters in the box at a time -- so, we slice in this manner.
If the length of the value in the input is 24 characters, we do simple math to slice at (24 - (w/12))'th position into the string.
It's all a hack -- And, in all honesty, is there any practical application to this? Perhaps you should add some subtext under the input that gives an ellipsis-like preview of the last part of the text.

I feel like I might have misread the question after reading the other answers talking about hacks and such, but I knocked together a quick sample that works fine in IE8 and Firefox 3.5.2. Assuming that an input element with an id="Test" and calling the following function onfocus:
function TestFocus()
{
var Test = document.getElementById("Test");
if (document.selection)
{
var SEnd = document.selection.createRange();
SEnd.moveStart("character", Test.value.length);
SEnd.select();
}
else if (Test.setSelectionRange)
{
Test.setSelectionRange(Test.value.length, Test.value.length);
//- Firefox work around, insert a character then delete it
var CEvent = document.createEvent("KeyboardEvent");
if (CEvent.initKeyEvent)
{
CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
Test.dispatchEvent(CEvent);
CEvent = document.createEvent("KeyboardEvent");
CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
Test.dispatchEvent(CEvent);
}
}
//- The following line works for Chrome, but I'm not sure how to set the caret position
Test.scrollLeft = Test.scrollWidth;
}
In Firefox, it uses initKeyEvent to send a space key and then the backspace key immediately after. In Chrome, I'm not sure how to set the caret to go to the end, but setting scrollLeft on the input almost works, maybe you can play around with it a little? As for Opera, I have no idea. I certainly hope this helps you on your way though.

One way that's a little hack-y would be to dynamically reload the text-box after focus is lost.
Just store the string in a variable and remove the text-field, then add it back in with $.html() or whatever method you like with the string in it.
Simple, works across browsers, but a little hack-y.

set the text-align css property of the textbox to right aligned when losing focus.
with mootools:
$('#yourtextboxid').setStyle('text-align', 'right');