Develop Reference

expand textarea which ALREADY contains text

I've read all the posts here about textareas - and, yes, I too feel that it's been beat-to-death... but I've got a situation which I can't find a post about and it's driven me crazy for 5 days now.
Situation:
Multiple (hundreds of) textareas with a normal state of display:none which become visible as needed.
I save work in process via a database... and re-open the form to continue entering data. (yes, there's code to change the display state if the textareas have data in them - but that's not relevant to the situation.
I currently have a very good widget for expanding my textareas AS I ENTER the data - my problem is that when I re-open the form the textareas go back to their initial height.
I've attempted creating a function which processes ALL textareas when the form loads by triggering the keyup event in all of the textareas - but it doesn't make them expand... however, if I simply click into the field and then use an arrow key they open right up. Unfortunately this is NOT an option... like I said HUNDREDS of textareas.
Here's the code I've got for the keyup event / trigger:
$("textarea").each(function() {
$(this).keyup(function() {
var target = $(this).attr("id");
var tElement = document.getElementById(target);
GrowUP(tElement);
});
});
$("textarea").trigger('keyup');
and the code for my expansion of textareas:
function GrowUP(oTextArea){
var nMaxChars = 2000;
var nTextLength = oTextArea.value.length;
setTextAreaHeightWidth(oTextArea);
if (nTextLength >= nMaxChars){
oTextArea.value = oTextArea.value.substring(0, nMaxChars);
return;
}
}
function setTextAreaHeightWidth(oTextArea){
var nTA5Height = 20;
var nTextLength = oTextArea.value.length;
var sTextAreaType = oTextArea.className;
var nHeight;
var nWidth;
if (sTextAreaType.indexOf("long") >= 0){
nHeight = nTA5Height;
}
// setting default height for the text area
oTextArea.style.height = nHeight + "px";
if (nTextLength > 0 && oTextArea.scrollHeight >= nHeight){
oTextArea.style.height = oTextArea.scrollHeight + "px";
if (navigator.userAgent.indexOf("Firefox") > 0){
oTextArea.style.height = oTextArea.scrollHeight + 20 +"px";
}
}
}
I'm open to any suggestions.
OK - update:
I've found a way to fool JSFiddle into having the data already entered in the field... Just select the 2nd checkbox to get it to show the textarea.
The textarea opens in the initial height - which I need to be the EXPANDED height (and it SHOULD if the code I wrote actually worked!)
P.S. In JSFIDDLE, under "Frameworks & Extension" you have to make sure it says "No wrap - in " ... it's been automatically changing this to "On DOM ready" which doesn't work! Here's the link: http://jsfiddle.net/MitchinThailand/fqcppux8/6/

For a quick and simple fix, instead of triggering the keyup event in your afterOnLoad() function, trigger it after the switch statement in your Summary(obj) function.
Here is a working fiddle: https://jsfiddle.net/uwzo25fs/1/
In general, just trigger the event(s) that modify element heights AFTER you have stopped hiding the corresponding element(s).

Jquery: Start function after browser fills textbox

I have created a server control for a login panel.
On this panel I have a textbox for the username and a textbox for the password.
Below that there is the button for login.
I want the button to be disabled if either or both textboxes are empty.
For that I created a function that checks the length of the contents of the textboxes.
function doCheck()
{
var lngth1 = document.getElementById('pnLogin_txtUserName').value.length;
var lngth2 = document.getElementById('pnLogin_txtPassword').value.length;
if (lngth1 > 0 && lngth2 > 0)
{
$('#pnLogin_btLogin').removeAttr('disabled');
} else {
$('#pnLogin_btLogin').attr('disabled','disabled');
}
}
I run this function at the start and on every keyup event.
That works great.
The problem is when the browser starts with the page. It fills in the username and password if they are stored.
When the function is then run, it still disables the button even though there is information in the textboxes.
I tried this:
setTimeout( function()
{
doCheck();
}, 2000);
But after 2 seconds I see the button disabling while seeing my credentials filled in.
If I inspect the element in Chrome, I don't see my credentials in the html code.
So where is it stored? How can I detect this?

You will not see the values in the html as they are not actually in the DOM.
You may access their values using $("#pnLogin_txtUserName").val() and
$("#pnLogin_txtPassword").val().
I would simplify your function and use jQuery specific syntax rather than native javascript.
function doCheck() {
var lngth1 = $("#pnLogin_txtUserName").val().length;
var lngth2 = $("#pnLogin_txtPassword").val().length;
if (lngth1 > 0 && lngth2 > 0) {
$('#pnLogin_btLogin').prop('disabled', false);
} else {
$('#pnLogin_btLogin').prop('disabled', true);
}
}
I also changed your code from .attr to .prop for disabling the input. Find more information with this stackoverflow question
The problem is when the browser starts with the page. It fills in the username and password if they are stored. When the function is then run, it still disables the button even though there is information in the textboxes.
Your code is being executed the moment it is loaded and parsed by the browser. The proper jQuery method is to use whats called .ready() which will execute after jQuery detects the page has finished loading.
$(document).ready( function() {
doCheck();
});
Or more simplified to:
$(function() {
doCheck();
});
detecting change
We can detect when the values get changed by bind an event listener:
$("pnLogin_txtUserName").change(function() {
console.log( 'pnLogin_txtUserName has changed', $(this).val() );
});
If we add a class to your inputs, say .loginElements, then we do things a bit easier and detect several different events:
$(".loginElements").on( 'change keypress', function() {
doCheck();
});

Problems with backgrounds in input field

When I double click the card the dialog pops up, and it is then possible to create checkBoxes. So far so good. Then I want to if I create one checkBox in the dialog and save the data via button, the value of created checkBoxes appears on the card. Then if all checkBoxes who are created is checked, a green background appears on the card. To indicate that the task got finish. like in the image below:
When I do create two cards, and one of them indicate the task got finish, like in the image above. In the second one you just create eg. two checkBoxes. Then the issue is, that the green background disperses from the first card. like in the Image below:
The code in JQuery:
function CheckBoxesChecked() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numChecked == numAll) {
$('.checkBoxCard').css("background-image", "none").addClass('jo');
}
else {
$('.checkBoxCard').removeClass('jo').css('background-image', "url('/Pages/Images/creampaper.png')");
}
}
I tried to fix it by the code below:
function CheckBoxesChecked() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numChecked == numAll) {
$currentTarget.$('.checkBoxCard').css("background-image", "none").addClass('jo');
}
else {
$currentTarget.$('.checkBoxCard').removeClass('jo').css('background-image', "url('/Pages/Images/creampaper.png')");
}
}
Where I use $currentTarget to indicate that each card is unique. But it seems not working. Any idea how to fix the issue?
DEMO

Change
$currentTarget.$('.checkBoxCard').css("background-image", "none").addClass('jo');
to
$currentTarget.find('.checkBoxCard').css("background-image", "none").addClass('jo');
See the updated fiddle.

use e.delegateTarget instead of target. see https://api.jquery.com/event.delegateTarget/

Javascript rating system

I am not a javascript guru so please be patient with me.
I was looking for a good rating with js and I ran to the his blog:
http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html
The author has a demo and has provided the code to download.
it looks really nice except the fact that it doesn't have the example for saving the colors. Therefore the colors are back to black (default color) once user moves the mouse away.
any idea how to have the colors fixed?

In addition to the code TimDog has added:
adding
_rated = false;
to
$(".fav_rating li label").hover(function() {
resets the colors every time user hovers over the ratings. Then when they click _rated is set to true and therefore prevents the color change
in addition, i used a hidden input in my form that will contain the value of the rating. To do this my .click looks like following:
$(".fav_rating li label").click(function(e) {
e.preventDefault();
_rated = true;
$("#item_fav_rating").val($(this).parent().index() + 1)
});

Here's one way -- I took a closer look at the script.js in the example code:
Add this global variable under animationTime
var _rated = false;
The colors are reset here -- see how I've used the _rated variable?
// Restore all the rating to their original colours
if (_rated) $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
Then in your click handler:
//Prevent the click event and show the rating
$("#rating li a").click(function (e) {
e.preventDefault();
_rated = true;
//alert("You voted on item number " + ($(this).parent().index() + 1));
});
This will keep the colors highlighted. It will be reset when you refresh the page or rerun the reset animation line above.
Hope this helps.

I havent seen the code of the blog you mentioned, but it seems when user clicks on any button it is showing alert ie, onclick() is used. so you can have one global variable which will save the number and there itself you can add code to keep the color.

Mootools - Getting 'undefined' as a value from dropdown - can't get value

I've created some hidden drop-down fields that I'm attempting to keep hidden until appropriately selected.
I'm trying to do this with mootools - I've put in 'alerts' so that I can see the variables getting passed along at each step.
The first hidden dropdown shows appropriately and the value displays accordingly, but when a value is selected from the 2nd dropdown the value is 'undefined' and the 3rd dropdown does not display.
I've been looking it over time and time again but cannot figure out why this won't work. Any advice would be greatly appreciated. I'm new to mootools & Javascript so it may be a simple fix I'm just not seeing.
You can view the JSFiddle for this - it contains all the html/javascript.

This works. Instead of relying on this, I changed it to use the passed Event object, then got the target from that.
window.addEvent('domready', function() {
$('numberStyle').addEvent('change', function() {
var targ = $(this.get('value'));
$$('.sub-1').setStyle('display', 'none');
targ.setStyle('display', 'block');
alert('TargID = ' + targ.id);
targ.addEvent('change', function(evt) {
var targID1 = $(evt.target).get('value');
alert('The value is of sub-1 is ' + targID1);
$$('.sub-2').setStyle('display', 'none');
$(targID1).setStyle('display', 'block');
});
});
});