PDA

View Full Version : How did they...



shachi
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.

Twey
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.

jscheuer1
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.

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

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

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

shachi
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??

Twey
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.

shachi
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??

Twey
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.

shachi
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??

shachi
06-26-2006, 04:35 PM
Oh someone PLEASE PLEASE HELP ME!!!:(

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

Twey
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.

djr33
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...

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

shachi
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.

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

It's like this:

[text box]|||
or
[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.

shachi
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??

djr33
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.

shachi
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??

djr33
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 :)

shachi
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.

Twey
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) {
window.clearInterval(box.checkThread);
box.checkThread = null;
}
}
</script>

<!-- ... -->

<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. :)

shachi
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.:)