a challage for JS programmers

[AloneGuy90]

ඔන්න කිරියෙ වැඩ්ඩ‍ො ටිකට වැඩ පෙන්නන්නයි මට හෙල්ප් එකක් දෙන්නයි චාන්ස් එක.

අර බන් ෆේස්බුක් එකේ වගේ textarea එක auto expand වෙන්න තමයි වෙන්ට ඕන. jquery solutions හරියන්නෑ මොකද ඔය සයිට් එකේ ඔක්කොම කෑලි බෑලි මම Pure js වලින් ගැහැව්වේ.

මෙන්න Html code එක.

<textarea id="txtarea" cols="50" rows="6"></textarea>


ඔය ටෙක්ස්ට් area එක auto expand වෙන්න හදල දියල්ල මචං.

 

[AloneGuy90]

බම්ප්

 

[mldarshana]

jQuery වලින් කරහන් ... මෙච්චරයි කරන්න ඕන

$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length +1);
});

.my-textarea {
    font-family: Arial,sans-serif;
    font-size: 13px;
    min-height: 50px;
    overflow: hidden;
    width: 500px;
}

<textarea id="txtarea" cols="50" rows="6"></textarea>

ඔන්න JSFiddle එක

http://jsfiddle.net/j0641seu/

 

[AloneGuy90]

jQuery වලින් කරහන් ... මෙච්චරයි කරන්න ඕන

$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length +1);
});

.my-textarea {
    font-family: Arial,sans-serif;
    font-size: 13px;
    min-height: 50px;
    overflow: hidden;
    width: 500px;
}

<textarea id="txtarea" cols="50" rows="6"></textarea>

ඔන්න JSFiddle එක

එළ මේකෙන් ගත්ත අයිඩියා එකක් pure js වලින් ගහන්න. අපරාදෙ පොඩි වැඩ කෑල්ලකට ලයිබ්රරි එකක්ම කොල් කරන එක

 

[Lakshan-Seram]

<style>
#txtarea {
    border: 1px solid #999;
    width: 200px;
    height: 100px;
}
</style>

<textarea id="txtarea" cols="50" rows="6"  oninput="setHeight(this, 100);"></textarea>

<script>
function setHeight(el, h) {
    minh = h;
    el.style.height = "";
    el.style.height = Math.max(el.scrollHeight, minh) + "px";
};
</script>

 

[AloneGuy90]

<style>
#txtarea {
    border: 1px solid #999;
    width: 200px;
    height: 100px;
}
</style>

<textarea id="txtarea" cols="50" rows="6"  oninput="setHeight(this, 100);"></textarea>

<script>
function setHeight(el, h) {
    minh = h;
    el.style.height = "";
    el.style.height = Math.max(el.scrollHeight, minh) + "px";
};
</script>

එළ මචං පට්ට.

මචං Js වලින් element එකක margin එකත් එක්ක height or width එක ගන්න ක්‍රමයක් නැද්ද? Pure js වලින්?

 

[Lakshan-Seram]

එළ මචං පට්ට.

මචං Js වලින් element එකක margin එකත් එක්ක height or width එක ගන්න ක්‍රමයක් නැද්ද? Pure js වලින්?

Eka lesiyen ganna ba.. eth lesiyen ganna widihak tiyenawa.. One element eka wrap karapan thawa element ekakin itapasse parent ge offsetHeight hari clientHeight hari try karapan.

 

[AloneGuy90]

Eka lesiyen ganna ba.. eth lesiyen ganna widihak tiyenawa.. One element eka wrap karapan thawa element ekakin itapasse parent ge offsetHeight hari clientHeight hari try karapan.

ඒ විදිය තමයි මාත් කරන්නේ මචං. මේකත් ට්‍රයි කරල බලන්ට ඕන. https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle?redirectlocale=en-US&redirectslug=DOM%2Fwindow.getComputedStyle

 

[Lakshan-Seram]

ඒ විදිය තමයි මාත් කරන්නේ මචං. මේකත් ට්‍රයි කරල බලන්ට ඕන. https://developer.mozilla.org/en-US...n-US&redirectslug=DOM/window.getComputedStyle

Cross browser compatible na

 

[AloneGuy90]

Cross browser compatible na

opera and IE OLD versions අවුල්

 

[Lakshan-Seram]

opera and IE OLD versions අවුල්

IE ≤ 8 awl wenna one.. Mama web dev karanawa.. IE8 thawama clients la illanawa.. oya wage winadi 30 wedakata mama Rs25,000k gatta IE8 fix ekak

 

[AloneGuy90]

IE ≤ 8 awl wenna one.. Mama web dev karanawa.. IE8 thawama clients la illanawa.. oya wage winadi 30 wedakata mama Rs25,000k gatta IE8 fix ekak

පට්ට මම හදන සයිට් එකට ලැබෙන්නෙත් ඔය වගේ ගනන්. මචං වෙලාව තියෙනව නම් https://www.tsu.co/ මේ සයිට් එකේ textarea එක auto expand වෙන විදියට පොඩ්ඩක් බලන්න පට්ට ක්ලීන්. height inline css ලියලත් නෙමේ වැඩේ වෙන්නේ. අපේ කෝඩ් එකෙනුත් වැඩේ වෙනවනම් එච්චරයි යූසර්ස්ල ඕව හොයන්නෑනේ. බට්. උන් සොලුයුෂන් එක දීල තියෙන කොලිටිය පට්ට වගේ.

 

[Lakshan-Seram]

පට්ට මම හදන සයිට් එකට ලැබෙන්නෙත් ඔය වගේ ගනන්. මචං වෙලාව තියෙනව නම් https://www.tsu.co/ මේ සයිට් එකේ textarea එක auto expand වෙන විදියට පොඩ්ඩක් බලන්න පට්ට ක්ලීන්. height inline css ලියලත් නෙමේ වැඩේ වෙන්නේ. අපේ කෝඩ් එකෙනුත් වැඩේ වෙනවනම් එච්චරයි යූසර්ස්ල ඕව හොයන්නෑනේ. බට්. උන් සොලුයුෂන් එක දීල තියෙන කොලිටිය පට්ට වගේ.

Site ekakatamada? Madi wage nedda? mama nam 50,000ta wada gannawa hebei freelancing.. mama tsu register wela na.. CSS use karanawa athi..

Passe hoyala balannam.. current giya.. ada sunday ne.. overtime karanawa athi ECB un.. apita thama kelawenne.. mata wedath tiyenawa

 

[Lakshan-Seram]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.textarea {
   display: inline-block;
   *display: inline;
   zoom: 1;
   border: 1px solid #999;
   min-height: 100px;
   width: 200px;
   word-wrap: break-word;
}
</style>
</head>

<body>
<div contentEditable="true" class="textarea"></div>
</body>
</html>

 

[AloneGuy90]

Site ekakatamada? Madi wage nedda? mama nam 50,000ta wada gannawa hebei freelancing.. mama tsu register wela na.. CSS use karanawa athi..

Passe hoyala balannam.. current giya.. ada sunday ne.. overtime karanawa athi ECB un.. apita thama kelawenne.. mata wedath tiyenawa

අම්මෝ එච්චර නම් ජීවිතේට අරන් නෑ. කොහොමත් මම පට්ට කම්ප්ලෙක්ස් සයිට් ගහන්නෑ. පොඩි සයිට් එළ එළ ඉඩ තියෙන වෙලාවක බලමු.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.textarea {
   display: inline-block;
   *display: inline;
   zoom: 1;
   border: 1px solid #999;
   min-height: 100px;
   width: 200px;
   word-wrap: break-word;
}
</style>
</head>

<body>
<div contentEditable="true" class="textarea"></div>
</body>
</html>

expanding-wrapper ක්ලාස් එක තියෙන div එකකට කරල තියෙන්නේ

 

[Lakshan-Seram]

අම්මෝ එච්චර නම් ජීවිතේට අරන් නෑ. කොහොමත් මම පට්ට කම්ප්ලෙක්ස් සයිට් ගහන්නෑ. පොඩි සයිට් එළ එළ ඉඩ තියෙන වෙලාවක බලමු.



expanding-wrapper ක්ලාස් එක තියෙන div එකකට කරල තියෙන්නේ

Ehema neththam kohomada ban geewath wenne .. mama nam karanne freelancing.. mehe weda karala oya ganana ganna ba.. tsu eke koheda oya text area eka tiyenne..?