Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Changing letters in boxes

Reply
Thread Tools

Changing letters in boxes

 
 
fulio pen
Guest
Posts: n/a
 
      10-30-2011
Dear group members:

I wanted to accomplish something, and know javascript or jquery can do
the work, but my knowledge on both languages is too limited. If
possible, please help. My idea is in the following web page.

http://www.pinyinology.com/js_learning/letters.html

Thanks for your help.

fulio pen
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-30-2011
30.10.2011 14:26, fulio pen wrote:

> I wanted to accomplish something, and know javascript or jquery can do
> the work, but my knowledge on both languages is too limited.


You don't need jQuery for a simple job like this. Using jQuery may
simplify coding a lot, but here probably the only thing it would be
useful for is simplifying the reference to a specific element. And
jQuery isn't really a language (at least not in the same sense as
JavaScript is a programming language) but a library that you may use in
addition to JavaScript, to ease coding.

> My idea is in the following web page.
>
> http://www.pinyinology.com/js_learning/letters.html


Remove the jQuery-related script elements (the reference to the library
doesn't work anyway) and add the following:

<script>
function letters(a,b,c) {
document.getElementById('box').innerHTML =
'<td>' + a + '</td><td>' + b + '</td><td>' + c + '</td>' ;
}
</script>

Change the <tr> tag for the table to <tr id=box>. (Here and before "box"
is just an identifier; choose another one if you can find a more
self-documenting name.)

Add onclick attributes to the <input> element to make them as follows:

box #1: <input type="text" value='x y z' size='10'
onclick="letters('x','y','z')" /><br />
box #2: <input type="text" value='a b c' size='10'
onclick="letters('a','b','c')" /><br />
box #3: <input type="text" size='10' onclick="letters('','','')" />

This way, the entire <tr> element is changed at the same time as
requested (though in practice, just replacing the <td> contents in
sequence would be just as good, unless there is a real risk of
intervening interrupts).

Note that clicking on the last box makes the letters disappear entirely,
i.e. the contents of each <td> element becomes empty, and this affects
the layout - the cells shrink. (They are still 10px wide and high due to
the padding you set.) If this is not desirable, there are varyings
things you can do, depending on the exact desired appearance. For
example, you could use '\xa0' (standing for no-break space) instead of
'' to make the cells preserve height (though not width) when cleared.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
 
fulio pen
Guest
Posts: n/a
 
      10-30-2011
On Oct 30, 9:08*am, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> 30.10.2011 14:26, fulio pen wrote:
>
> > I wanted to accomplish something, and know javascript or jquery can do
> > the work, but my knowledge on both languages is too limited.

>
> You don't need jQuery for a simple job like this. Using jQuery may
> simplify coding a lot, but here probably the only thing it would be
> useful for is simplifying the reference to a specific element. And
> jQuery isn't really a language (at least not in the same sense as
> JavaScript is a programming language) but a library that you may use in
> addition to JavaScript, to ease coding.
>
> > My idea is in the following web page.

>
> >http://www.pinyinology.com/js_learning/letters.html

>
> Remove the jQuery-related script elements (the reference to the library
> doesn't work anyway) and add the following:
>
> <script>
> function letters(a,b,c) {
> * *document.getElementById('box').innerHTML =
> * * *'<td>' + a + '</td><td>' + b + '</td><td>' + c + *'</td>' ;
> * }
> </script>
>
> Change the <tr> tag for the table to <tr id=box>. (Here and before "box"
> is just an identifier; choose another one if you can find a more
> self-documenting name.)
>
> Add onclick attributes to the <input> element to make them as follows:
>
> box #1: <input type="text" value='x y z' size='10'
> onclick="letters('x','y','z')" /><br />
> box #2: <input type="text" value='a b c' size='10'
> onclick="letters('a','b','c')" /><br />
> box #3: <input type="text" size='10' onclick="letters('','','')" />
>
> This way, the entire <tr> element is changed at the same time as
> requested (though in practice, just replacing the <td> contents in
> sequence would be just as good, unless there is a real risk of
> intervening interrupts).
>
> Note that clicking on the last box makes the letters disappear entirely,
> i.e. the contents of each <td> element becomes empty, and this affects
> the layout - the cells shrink. (They are still 10px wide and high due to
> the padding you set.) If this is not desirable, there are varyings
> things you can do, depending on the exact desired appearance. For
> example, you could use '\xa0' (standing for no-break space) instead of
> '' to make the cells preserve height (though not width) when cleared.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/


Thanks a lot. Will change accordingly immediately, and come back with
the changed page.

fulio pen
 
Reply With Quote
 
fulio pen
Guest
Posts: n/a
 
      10-30-2011
On Oct 30, 9:08*am, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> 30.10.2011 14:26, fulio pen wrote:
>
> > I wanted to accomplish something, and know javascript or jquery can do
> > the work, but my knowledge on both languages is too limited.

>
> You don't need jQuery for a simple job like this. Using jQuery may
> simplify coding a lot, but here probably the only thing it would be
> useful for is simplifying the reference to a specific element. And
> jQuery isn't really a language (at least not in the same sense as
> JavaScript is a programming language) but a library that you may use in
> addition to JavaScript, to ease coding.
>
> > My idea is in the following web page.

>
> >http://www.pinyinology.com/js_learning/letters.html

>
> Remove the jQuery-related script elements (the reference to the library
> doesn't work anyway) and add the following:
>
> <script>
> function letters(a,b,c) {
> * *document.getElementById('box').innerHTML =
> * * *'<td>' + a + '</td><td>' + b + '</td><td>' + c + *'</td>' ;
> * }
> </script>
>
> Change the <tr> tag for the table to <tr id=box>. (Here and before "box"
> is just an identifier; choose another one if you can find a more
> self-documenting name.)
>
> Add onclick attributes to the <input> element to make them as follows:
>
> box #1: <input type="text" value='x y z' size='10'
> onclick="letters('x','y','z')" /><br />
> box #2: <input type="text" value='a b c' size='10'
> onclick="letters('a','b','c')" /><br />
> box #3: <input type="text" size='10' onclick="letters('','','')" />
>
> This way, the entire <tr> element is changed at the same time as
> requested (though in practice, just replacing the <td> contents in
> sequence would be just as good, unless there is a real risk of
> intervening interrupts).
>
> Note that clicking on the last box makes the letters disappear entirely,
> i.e. the contents of each <td> element becomes empty, and this affects
> the layout - the cells shrink. (They are still 10px wide and high due to
> the padding you set.) If this is not desirable, there are varyings
> things you can do, depending on the exact desired appearance. For
> example, you could use '\xa0' (standing for no-break space) instead of
> '' to make the cells preserve height (though not width) when cleared.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/


Hi, Yucca:

Thanks for your help. I changed the code by taking your advice. The
new page is as follows:

http://www.pinyinology.com/js_learning/letters.html

In above page, I like to change the cursor to default in the boxes.
Now it is a vertical bar called text. I tried to change it, but failed
all efforts. I may have more questions, but have to modify the page
to present them. Thanks again.

fulio pen
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-30-2011
Jukka K. Korpela wrote:

> <script>
> function letters(a,b,c) {
> document.getElementById('box').innerHTML =
> '<td>' + a + '</td><td>' + b + '</td><td>' + c + '</td>' ;
> }
> </script>
>
> Change the <tr> tag for the table to <tr id=box>. (Here and before "box"
> is just an identifier; choose another one if you can find a more
> self-documenting name.)


Unreliable. Especially MSHTML (the layout engine that Internet Explorer
uses) is prone to errors with `innerHTML' accesses in table structures.

A safer approach is to remove all cells of the row except one, then replace
the content of the first cell and add more cells:

var tr = document.getElementById("box");
var firstChild = tr.firstChild;
while (tr.lastChild != firstChild)
{
tr.removeNode(tr.lastChild);
}

tr.cells[0].innerHTML = a;

var td1 = document.createElement("td");
td1.innerHTML = b;

/* or td1.cloneNode(false) */
var td2 = document.createElement("td");
td2.innerHTML = c;

tr.appendChild(td1);
tr.appendChild(td2);

(It suffices here to add text nodes to the cells, or replace their values if
existing, instead of using the proprietary and error-prone `innerHTML'
property. This can be accomplished using the `textContent' property of DOM
Level 3 Core or the document.createTextNode(…) and appendChild(…) methods of
DOM Level 2+ Core.)

Another possibility is to rewrite the entire table with `innerHTML'.
Quirksmode.org results have shown that this can be much more efficient than
the standards-compliant DOM approach. But probably not in this case.

> Add onclick attributes to the <input> element to make them as follows:
>
> box #1: <input type="text" value='x y z' size='10'
> onclick="letters('x','y','z')" /><br />
> box #2: <input type="text" value='a b c' size='10'
> onclick="letters('a','b','c')" /><br />
> box #3: <input type="text" size='10' onclick="letters('','','')" />


Since the value of the control can be used to construct the argument list
for the letters() method, and the `click' event bubbles universally, it
might not be necessary that each `input' element has an `onclick' attribute
specified. For example:

<script type="text/javascript">// <![CDATA[
function clickHandler(e)
{
var t = e.target || e.srcElement;
if (t)
{
if (t.nodeType == 3)
{
/* if a text node */
t = t.parentNode;
}

if (t.tagName.toUpperCase() == "INPUT")
{
letters.apply(null, t.value.split(" "));
}
}
}
// ]]></script>

<… onclick="if (typeof event != "undefined") clickHandler(event)" …>
<input type="text" value='x y z' size='10' /><br />
<input type="text" value='a b c' size='10' /><br />
<input type="text" size='10' value=' ' />
</…>

Usability, in particular keyboard navigation, might be better served by
listening to the not universally bubbling `focus' event instead, though.
For that matter, formatting should not be achieved using the `br' element,
but a semantic element, for example `label' elements that are parent
elements of their `input' elements.


PointedEars
--
When all you know is jQuery, every problem looks $olvable.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-30-2011
Thomas 'PointedEars' Lahn wrote:

> <… onclick="if (typeof event != "undefined") clickHandler(event)" …>


That has to be

<… onclick="if (typeof event != 'undefined') clickHandler(event)" …>

or

<… onclick='if (typeof event != "undefined") clickHandler(event)' …>

> <input type="text" value='x y z' size='10' /><br />
> <input type="text" value='a b c' size='10' /><br />
> <input type="text" size='10' value=' ' />
> </…>
>
> […]



PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-30-2011
30.10.2011 19:22, fulio pen wrote:

> http://www.pinyinology.com/js_learning/letters.html
>
> In above page, I like to change the cursor to default in the boxes.
> Now it is a vertical bar called text.


Setting the cursor is a CSS issue, not JavaScript (though you can set
the element property corresponding to the CSS property via JavaScript,
but there's no reason to do so if you want the setting to take effect
independently of the state of the page).

So please check
http://www.w3.org/TR/CSS21/ui.html#propdef-cursor
Note that an <input type=text> element typically has cursor: text set in
the browser stylesheet, so it won't inherit the property from its
ancestor. To set the cursor on <input> elements, use e.g.
input { cursor: default; }
in your stylesheet.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
fulio pen
Guest
Posts: n/a
 
      10-30-2011
On Oct 30, 2:14*pm, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> 30.10.2011 19:22, fulio pen wrote:
>
> >http://www.pinyinology.com/js_learning/letters.html

>
> > In above page, I like to change the cursor to default in the boxes.
> > Now it is a vertical bar called text.

>
> Setting the cursor is a CSS issue, not JavaScript (though you can set
> the element property corresponding to the CSS property via JavaScript,
> but there's no reason to do so if you want the setting to take effect
> independently of the state of the page).
>
> So please checkhttp://www.w3.org/TR/CSS21/ui.html#propdef-cursor
> Note that an <input type=text> element typically has cursor: text set in
> the browser stylesheet, so it won't inherit the property from its
> ancestor. To set the cursor on <input> elements, use e.g.
> input { cursor: default; }
> in your stylesheet.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/


Hi, Jukka:

Thanks a lot. The "input { cursor: default; }" has been inserted to
the style section. Now the cursor is the default arrow:

http://www.pinyinology.com/js_learning/letters.html

Other people have also helped me. I thank them all very much, and will
study their suggestions carefully to modify the code.

Thank you all for your help.

fulio pen
 
Reply With Quote
 
Matt McDonald
Guest
Posts: n/a
 
      10-30-2011
On 10/30/2011 11:58 AM, Thomas 'PointedEars' Lahn wrote:
> Unreliable. Especially MSHTML (the layout engine that Internet Explorer
> uses) is prone to errors with `innerHTML' accesses in table structures.
>
> A safer approach is to remove all cells of the row except one, then replace
> the content of the first cell and add more cells...


Agreed. Given the Table API that the DOM provides, usage of innerHTML
here is erroneous, especially in IE. There's also, of course,
createElement + appendChild if desired.

I wrote an article earlier today on this topic, except utilizing the DOM
Table API (insertCell + deleteCell):

http://www.fortybelow.ca/hosted/comp...l-replacement/

Comments are welcome.

--
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-31-2011
Matt McDonald wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Unreliable. Especially MSHTML (the layout engine that Internet Explorer
>> uses) is prone to errors with `innerHTML' accesses in table structures.
>>
>> A safer approach is to remove all cells of the row except one, then
>> replace the content of the first cell and add more cells...

>
> Agreed. Given the Table API that the DOM provides, usage of innerHTML
> here is erroneous, especially in IE. There's also, of course,
> createElement + appendChild if desired.
>
> I wrote an article earlier today on this topic, except utilizing the DOM
> Table API (insertCell + deleteCell):
>
> http://www.fortybelow.ca/hosted/comp...pt/table-cell-

replacement/
>
> Comments are welcome.


One problem which what you dubbed "DOM Table Cell API" (there really is no
official name for that part of the W3C DOM Level 2 HTML Specification) is
that the W3C DOM API Specification and the MSHTML DOM API definition
disagree (again, cf. HTMLSelectElement::add() [1]) with regard to the
meaning of the method's arguments and its return value:

Both support the value -1 to append a new cell; but while the standards-
compliant implementation requires the number of existing cells to be passed
for an alternative of that (tr.cells.length), MSHTML is at least documented
to require tr.cells.length - 1. Also, while the standards-compliant
implementation is supposed to throw DOMException INDEX_SIZE_ERR on error,
MSHTML is at least documented to throw no exception at all then, but to
return "null" instead (which, for the ECMAScript binding, is the `null'
value of the JScript implementation of the Null type). [2]

The same problem exists with
HTMLTableElement/HTMLTableSectionElement::insertRow(). [3]

Those differences suggest the possibility of other differences between
standards-compliant and other implementations than the MSHTML DOM in this
area. Therefore, I have intentionally used DOM Level 2+ Core methods in my
example – for which I am not aware of such quirks – and made no mention of
that "DOM Table Cell API".


PointedEars
___________
[1] <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14493106>
<http://msdn.microsoft.com/en-us/library/ms535921(VS.85).aspx>
[2] <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016>
<http://msdn.microsoft.com/en-us/library/ms536455(VS.85).aspx>
[3] <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-93995626>
<http://msdn.microsoft.com/en-us/library/ms536457(VS.85).aspx>
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Space between input boxes and selection boxes is not the same in Internet Explorer Stefan Mueller HTML 5 06-16-2009 02:06 PM
making all letters Caps/Small Letters Merrigan Python 4 12-14-2007 10:10 AM
Changing Drive Letters In XP fitzybhoy Computer Support 3 03-05-2004 06:25 PM
Changing from capital letters to small letters using perl Venugopal Perl Misc 11 11-05-2003 06:07 PM
Changing drive letters in XP? Gilligan Monger Computer Support 2 07-21-2003 07:45 AM



Advertisments