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.

append input value to a div jquery whilst user is typing

What I'm trying to do is append to text from a input field to a div as the user is typing...
So they can see what the text will look like.
What I have is the below.
jQuery('#options_6_text').keyup(function() {
jQuery('.product_zoom').appendTo(jQuery(jQuery(this).val()));
console.log(jQuery(this).val())
});
Now the console.log is working as I would have thought, however the text does not seem to be appending to the .product_zoom div, any ideas what I'm doing wrong??
Thanks!
EDIT
jQuery('#options_6_text').bind('keyup blur', function() {
jQuery('.product_zoom').text(jQuery(this).val());
});
This allowed me to do exactly what I was after.
Thanks

Change to this:
jQuery('.product_zoom').html(this.value);
You're going to want to use .html() for this, this way it replaces the div content each time the user types, the append() was adding to the current content each time.
Demo: http://jsfiddle.net/rRnSB/

Simply doing it like this: SIMPLE FIDDLE
$('#options_6_text').keyup(function() {
$('.product_zoom').text(this.value);
});

Change text color based on background color?

I've a pretty minimalistic site, so I want to add details to it, like a hidden theme switching. But I don't want to tell the user that the theme can be changed, so I want to hide the text.
I've tried this:
var tausta = $(body).css("background-color");
$('.piiloteksti').css("color",tausta);
But it doesn't do anything. What would be the correct approach?
A fiddle.

if($('.piiloteksti').css("color",tausta); is a wrong statement. Thats a syntax error! There shouldn't be any if here.
Either remove if
$('.piiloteksti').css("color",tausta);
or complete the if statement.
if($('.piiloteksti').css("color",tausta)){
// some other code
}
Also $(body) does not refer to anything. Use either $('body') or $(document.body)

I tried to modify CSS, and it works.
// javascript
var tausta = $('body').css("background-color");
if($('.piiloteksti').css("color") == tausta) {
alert(tausta);
}
// css (test)
body{background-color:red;}
.piiloteksti{color:red;}

The syntax of your the if statement was off a little. Also, body must be made a String literal.
var tausta = $("body").css("background-color");
$('.piiloteksti').css("color", tausta);
Example: http://jsfiddle.net/HbAHS/8/

You can hide the element with CSS
.piiloteksti{display:none;} Fiddle
OR if you think that would interfere with your layout then,
.piiloteksti{visibility:hidden;} Fiddle
Or you can just give transparent color to your piiloteksti elements
.piiloteksti{color:transparent;} Fiddle

javascript - check if a div is empty

I have the following setup:
<div id="whatever">
<!-- Here some dynamic divs will be loaded -->
</div>
I need to know when the "whateverdiv" has nothing inside. The catch is that when I say nothing I mean if user sees nothing. So if inside the div something like
<div style="display: none">LOOOONG TEXT</div>
is loaded I consider it empty.
If is full of blank spaces is also empty, etc... if user doesn't see anything in it is empty.
Since there are too many cases to cover (content with height 0, content with display none, blank spaces, tabs, hidden inputs etc... almost anything may be loaded there depending on situations) I tried to use the height attribute to see if has content (the div expands depending on content). This idea worked ok but now I have another problem: I must add display: none on it sometimes. When I do that the height is always load as 0. I can't use visibility because div has 10px padding that I don't want to see when is not shown. So I'm back to square one... finding some sort of way to see if a div is empty in all that cases.
Any idea how should I do that?

var d = $('#myDiv');
var empty = d.text().trim().length === 0 || !d.is(':visible');

This one should work.
http://jsfiddle.net/fedmich/SmRnT/
I'm cleaning the html comments via Regex
$(function() {
var w = $('#whatever').clone();
w.find(':hidden').remove();
var html = w.html();
html = html.replace(/<!--.*-->/g,'')
html = $.trim(html);
alert( html );
});​
To summarize
clone the object
remove hidden elements
remove html comments
$.trim( )

If you dont count whitespace as if something is not empty:
$("selector").is(":empty")
OR
$("selector").contens().length
Does the trick.
If you dont want to count text nodes as empty:
$("selector").children().length
See:
http://api.jquery.com/empty-selector/
http://api.jquery.com/contents/
http://api.jquery.com/children/

What does style.display = '' actually do?

After researching this issue for a couple of hours, I found that one of the most efficient ways to toggle a page element's display (in HTML) is to do something like:
// showing
document.getElementById('element').style.display = '';
// hiding
document.getElementById('element').style.display = 'none';
Simple question: What does style.display = '' actually do?
Does it "reset" the original display property?
Or does it remove the display property, thereby using the default style for display?
..........................................
Would be nice to know: Does anyone know of any links to any kind of documentation about this?
(Yes, I have Google-d this issue, but I'm probably not entering the right search term and keep coming up with completely un-related search results.)
Thanks for any suggestions or links.

Yes, it resets the element's display property to the default by blanking out the inline "display: none", causing the element to fall back on its display property as defined by the page's ranking CSS rules.
For example, here's a <div> with the ID of "myElement".
<div id="myElement"></div>
A <div> has a setting of display:block by default. In our style sheet, suppose we specify that your <div> is to be displayed as table:
div#myElement
{
display:table;
}
Upon loading your page, the <div> is displayed as table. If you want to hide this <div> with scripting, you might do any of these:
// JavaScript:
document.getElementById("myElement").style.display = 'none';
// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});
All of thse have the same effect: adding an inline style property to your <div>:
<div id="myElement" style="display:none"></div>
If you wish to show the element again, any of these would work:
// JavaScript:
document.getElementById("myElement").style.display = "";
// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});
These remove the display CSS property from the inline style property:
<div style=""></div>
Since the inline style no longer specifies a display, the <div> goes back to being displayed as table, since that's what we put in the style sheet. The <div> does not revert to being displayed as block because our CSS overrode that default setting; blanking out the inline display property does not negate the rules in our style sheets.
For giggles, here's the Google query I used for verification of my answer: javascript style display empty string default
...and a couple of links where this is mentioned:
http://jszen.blogspot.com/2004/07/table-rowsrevealed.html
http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/
(not in the article, but in the comments section)

It sets the display style to the default value for that element. For most elements if not all, the default value is something other than none.

It removes the value for the display property so that the default value is used.
It does not reset the original display property.
If you for example have this:
<span id="test" style="display:block;">b</span>
And do this:
document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';
the display style used for the element ends up being inline because that's the default for the element, it is not reset back to the style specified in the HTML code.

It sets the css for that element's display to null which essentially wipes out what was set and it reverts to its default value.