View Full Version : How did they...

06-25-2006, 07:31 PM
Does anyone have any idea how did http://masswerk.at/jsuix/index.html make the cursor look different from the normal ones(I mean how did they make them fat)?? If anyone could try finding that out then I'd be really very grateful.:)

Thanks for your time reading this thread.

06-25-2006, 07:56 PM
Clever idea.
But that's really no big deal; a simple element with a background, width 1em, height, say, 1.2em, will work just fine.

06-25-2006, 07:56 PM
Looks normal to me. To change cursors though, use the cursor style property. You can even use a custom cursor. These have worked in IE for awhile and now appear to work in the more recent FF as well.

06-25-2006, 08:30 PM
John: He's talking about the keyboard cursor inside the terminal, not the mouse cursor.

06-26-2006, 05:59 AM
Yes I am talking about the keyboard cursor. Twey: can you tell me how do I do it??

06-26-2006, 12:04 PM
I told you:
a simple element with a background, width 1em, height, say, 1.2em

06-26-2006, 02:38 PM
Yes I know that(thanks to the DOM Inspector) but how did they manage to move it as the user typed?? Is that on a textarea or sth(I don't think so) and why doesn't the browser get redirected when the user types Backspace(in firefox)?? Any ideas Twey or anyone else who would like to help??

06-26-2006, 02:51 PM
The browser doesn't get redirected because it's a textbox, which expands when the user adds a character (I think). This also explains how the cursor moves with the text.

06-26-2006, 03:11 PM
But didn't you just say that that's not a cursor but a simple element with backgrouna and height 1em and width 1.2em??

06-26-2006, 03:17 PM
Other way 'round, actually :)
But yes, since the textbox expands or contracts with the text, the "cursor" simply exists after it, and moves as it does.

06-26-2006, 03:20 PM
Uh ... This thing is getting my head round and round(but unfortunately I am getting no-where). Anyone who would help this confused person to implement something like a cursor??

06-26-2006, 04:35 PM

At least you Twey?? You've always been helping me, any ideas??

06-26-2006, 04:59 PM
I've told you already. Simple element with a green background after a text input, then just have the text input expand or contract with the text inside it.

06-26-2006, 05:05 PM
I get it now. That's pretty simple, really.... however... how would you code the textbox getting bigger? That's certainly not the default...

06-26-2006, 05:16 PM
<input type="text" onchange="this.style.width = this.value.length + 'em';">... should do fine.

06-26-2006, 05:17 PM
Simple element with a green background after a text input, then just have the text input expand or contract with the text inside it.

Expand or contract?? I don't want my text box to expand or contract I just need a terminal look in it. I mean I have an input element and I need a terminal like look with the broad cursor, expanding or contracting would ruin the whole layout.:(

By the way that code snippet by Twey is not increasing the input's width.

06-26-2006, 05:23 PM
No... that's the point...

It's like this:

[text box]|||
[t e x t b o x]|||

Where the ||| represents the cursor, right after the textbox, right after the text. Just make the box expand/contract as you type (invisably, using css), and you're done.
This would all be on top of your layout... not moving the whole thing, just the textbox.

The catch is making it expand/contract with it's contents... not sure how to do that, which is why I asked Twey.

06-26-2006, 05:26 PM
Yep now I know how to make that code snippet work. Just unfocus it.

drj33: how do I make that ||| appear before the [textbox] ?? and are html elements valid inside forms Twey??

06-26-2006, 05:32 PM
unfocusing wiill change the size of the box? huh?

html is fine within a form*, except within particular items, like in a dropdown menu, etc.... can't be in there.

*(for the most part.... there are a couple weird things, I think, like you don't want a form within a form)

Just put it after the textbox:
<input type="text">|||

You could just make a gif, or use Twey's method. Either way.

06-26-2006, 05:34 PM
Yea now I get it thanks but isn't there a way to change the size of the textbox as soon as the user starts typing??
Or shall I use onkeydown??

06-26-2006, 05:39 PM
I guess onkeydown would work.. basically you need a recursive loop any time the person is inside the textbox, checking for text and resizing the textbox to the text. Using a textarea might work better to follow the size of the text, and you might want to use css, not javascript, to resize, if possible.

Again, I'm really not sure how. Twey should be able to tell us when he gets back :)

06-26-2006, 05:43 PM
Uh-oh !!! Didn't work as expected but anyways Thanks guyz. I'll try to hack the original code and rip out the code. Thanks Twey and drj33 and everybody who used up their precious time to read this thread.

06-26-2006, 05:45 PM
Yep now I know how to make that code snippet work. Just unfocus it.Yeah, that's a disadvantage of using onchange. Another idea is to do something like this:
<script type="text/javascript">
function expandForContent(idBox) {
var box = document.getElementById(idBox);
box.style.width = box.value.length + "em";

function startChecking(idBox) {
var box = document.getElementById(idBox);
if(box.checkThread == null) box.checkThread = window.setInterval("expandForContent('" + idBox + "')", 100);

function stopChecking(idBox) {
var box = document.getElementById(idBox);
if(box.checkThread != null) {
box.checkThread = null;

<!-- ... -->

<input type="text" id="stdin" onchange="expandForContent(this.id);" onkeydown="startChecking(this.id);" onkeyup="stopChecking(this.id);">Untested, of course.
and are html elements valid inside forms Twey??Of course they are. Otherwise, what would be the point of a form?

/EDIT: Heh, seems you guys figured it out whilst I was writing that. :)

06-26-2006, 06:46 PM
Thanks Twey but now I am hacking that piece of code as the input method didn't work. But your idea is great, if nothing works then I am sure to use the same thing.:)