Jump to content
Sign in to follow this  
banzemanga

Textarea into a Spinner

Recommended Posts

I know it sounds crazy but i wonder if it can be done.-Let's say i have a textarea then i give it a height of a textfield.-I will only maintain the vertical scrollbar. Then maybe, could i use the textarea as a substitute of a spinner?Therefore i would have to assign a specific function for the up arrow and another specific function for the down arrow.Any ideas, comments or believe that it could be done?

Share this post


Link to post
Share on other sites

Sure, it could probably be done. Have you thought about using a select?

<select size="3"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select>

Share this post


Link to post
Share on other sites

You can't use a textarea as a spinner because the textarea will submit the entire value, not just the one line that is shown. There are spinner controls that people have made if you want to use a spinner.

Share this post


Link to post
Share on other sites

@jeshI did consider the dropdown list but i still rather have a spinner. Thanks though.@justsomeguyI know it sounds crazy, that is why i am asking for ideas of if it can be done. The point is that i will of course filter keystrokes like enter keys so that it would be consumed and not shown on the textarea. But the biggest challenge for me is to find a way to control directly what the up and down arrow does when clicked or pressed. Of course, i will also have a parser for the text inside it so that it will read what the values should accept or not. Thanks too.

Share this post


Link to post
Share on other sites

You can create a spinner, but you shouldn't use a textarea for it. You would use a normal text field, and you would create some graphics for the up and down buttons, and have each image run a Javascript function that changes the value in the textbox. Like I said, there are things like this that people have already made.

Share this post


Link to post
Share on other sites

I know that the usual way to do it is using graphics. But there is no point for me to create this topic if i don't find it challenging. Besides, wouldn't be great you get multiple features with only one object instead of three?Maybe i just give it up since it seems almost imposible to do it with the textarea. But if anyone knows how to control the textarea's scrollbar for something like this, please tell me. I would really like to do the spinner with this.

Share this post


Link to post
Share on other sites

It's not the scrollbar that is the problem. The problem is that when you submit a form with a text area it submits *all* of the data in the text area. You can't even tell what line the user was looking at. If you can get around that then you can use a text area, but I can't think of any method I've seen that you can use to get around that. It's not about a challenge, it's about using the right tool for the job. The right tool is a Javascript-controlled text field, not a jerry-rigged text area.

Share this post


Link to post
Share on other sites

There are a lot of things that can be done for that. One is to disable the edit and only allow the users only spin the values. Another one is to have a keystroke detector that will filter out the characters that must not go in there like line brake. And also a parser that reads the text and then decide if the text is in a valid format. If so then takes it and compute it. Otherwise the value will be reset to the previous value. Those things are easier to do for me. My challenge is in the scrollbar.

Share this post


Link to post
Share on other sites
There are a lot of things that can be done for that. One is to disable the edit and only allow the users only spin the values. Another one is to have a keystroke detector that will filter out the characters that must not go in there like line brake. And also a parser that reads the text and then decide if the text is in a valid format. If so then takes it and compute it. Otherwise the value will be reset to the previous value. Those things are easier to do for me. My challenge is in the scrollbar.
However you scroll or not scroll it, the value sent by the textarea is going to be the full text.If you write<textarea>Option1Option2Option3Option4</textarea>the form is going to send the string "Option1\nOption2\nOption3\nOption4\n" no matter where you've scrolled.

Share this post


Link to post
Share on other sites
There are a lot of things that can be done for that. One is to disable the edit and only allow the users only spin the values. Another one is to have a keystroke detector that will filter out the characters that must not go in there like line brake. And also a parser that reads the text and then decide if the text is in a valid format. If so then takes it and compute it. Otherwise the value will be reset to the previous value. Those things are easier to do for me. My challenge is in the scrollbar.
You're not understanding what I'm saying. Go ahead and build it then, and see what problems you run into. See if you can figure out how to tell the web server which value they selected.

Share this post


Link to post
Share on other sites

This is a fool's errand, but I'll offer just this much.The position of the scrolltab might be determined with reference to scrollheight, scrolltop, and clientheight. You might also use scrolltop to set the vertical position of the textarea. I don't know if lineheight will give you the true height of a single line of text, or if you can determine the true height from lineheight, but it's worth looking into. And boy could that vary with browsers and platforms.I have used scrollwidth to position the left-right scrolling of a div in specific increments, but I knew the increments in advance. And I checked my DOM inspector to see if these properties are available for a textarea. They are listed, but I haven't played with them.That's pretty much what I know about this subject and how I came by my knowledge.

Share this post


Link to post
Share on other sites

Even that won't necessarily solve anything. You might be able to get the position of the scrollbar, but what can you do with that? Can you use the scroll position to determine which line you're looking at and crop everything before and after it? Maybe, if you can guarantee the text size and line spacing. Can you do that reliably across browsers? What's wrong with a text field + Javascript?

Share this post


Link to post
Share on other sites

I just figure, if you're going to bark up the wrong tree, it ought to be the right wrong tree.

Share this post


Link to post
Share on other sites

I think that what i have been trying to do have been confused with the second post.First of all, i am only going to have a one line value.Right, no multiple lines since line brake will be disabled using javascript keystroke events handlers.Second, i want to use the scrollbar arrows as the spinner buttons. So when i click to the up arrow it will change the value.(which i don't find anywhere any javascript code or in the DOM specifications on assigning a javascript function to the scrollbar arrows,so i am asking if it is possible or if anyones knows how to)Edit: Well troubles there are going to be a bunch so not applicable is an good answer. So to make it simple, does anyone know how to assign the scrollbar buttons a specific javascript function?

Share this post


Link to post
Share on other sites

There is no way to find out if a textarea scrollbar button has been clicked. (Or any other scrollbar button, as far as I know.)

Share this post


Link to post
Share on other sites

Here is some part of the code. Now if you try it, you will immediately see that you can't get multiple lines even if you press the enter key.Parsing the text content is a lot more trouble but can be done. So like i said it is not the challenge.

<html>	<head>		<script type="text/javascript">			window.onload = constructor;			function constructor() {				textarea = document.getElementById("smart");				if (!textarea.status)						textarea.onkeydown = enterhit;			}			function enterhit(evt) {				if (evt.which == 13)					return false;			}		</script>		<style type="text/css">			#smart {				overflow-y: scroll;				overflow-x: hidden;			}		</style>	</head>	<body>		<textarea id="smart"></textarea>	</body></html>

The REAL challenge ares:-Enable ONLY the horizontal scrollbar to be clickclabe all the time-Give a specific handling event for the up arrow and down arrowAfter that, everything is a piece of cake compared to those.So, i believe i was not specific enough; therefore i apologize for that.Edit: even if it has multiple lines, the sent text can be parsed on the server so that it will take only the text between break lines and inside the text-cursor position will be evaluated. But forget about that. My spinner is not about multiple lines. It is about changing the complete value of it.

Share this post


Link to post
Share on other sites

The scrollbar UI component and the buttons on it aren't part of the DOM structure, they are part of the browser's UI. You can't do anything with them in Javascript, the only thing in the DOM is the textarea element itself. That's why I suggested using images that will run a Javascript function. Those you can access in the DOM.

Share this post


Link to post
Share on other sites

Like justsomeguy said, the scroll component of the textarea isn't visible to the DOM. However, if you ditch the textarea idea, and if you don't want to use a select, and if you don't want to use an input type="text" (as justsomeguy has been suggesting), you might be able to do this with a div which has it's overflow property set to scroll.Here's a simple example of how you can capture the scroll events of the div:

<html><head><style>#test { height:36px; width:40px; overflow:scroll; }</style></head><body><div id="test">1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/></div><script type="text/javascript">function handleScroll(e){	e = e || window.event;	var div = e.target || e.srcElement;	alert(div.scrollTop);}document.getElementById("test").onscroll = handleScroll;</script></body></html>

With some CSS, that div could look just like a textarea.

Share this post


Link to post
Share on other sites

I see, that is why you people where talking about multiple liners. I love this idea and will try something with it. But one last comment is that the scrollbar is not rendered correctly in firefox. It looks like it disapears when i shrink the height to the size of a textfield. The same problem happens to the textarea though.

Share this post


Link to post
Share on other sites

Yeah, i took a look at that one before.The reason i choose to do it with the textarea was because it only required on element while the conventional way uses three elements (two buttons and a textfield).I was hoping that somebody knew some trick or that in was someplace of the dom i couldn't find would have the customization of the scrollbars. (i even tried the div scrollbar trick on the textarea and didn't work)The div is a great idea and very creative too but it means that i must have multiple lines and text is not editable.If i didn't care about the number of elements needed, i just create a div with three textfields and two buttons that will spin the values of the focused field and remove the borders of the textfields while making the div's border visible so that it looks like one element. (well this would be in the case of a full date spinner)I am still considering my options and trying to come up with something good. But still, thanks everyone. I got to learn a lot and hints too.Edit: I think i found a very good example of a spinner with scrollbars.http://www.wiseblocks.com/input-components...finedmasks.html

Share this post


Link to post
Share on other sites
Edit: I think i found a very good example of a spinner with scrollbars.http://www.wiseblocks.com/input-components...finedmasks.html
The "scrollbars" are actually also images. -they just have been created to look like XP system UI components.http://www.wiseblocks.com/WiseBlocks_resources/img/xp/18.gif

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...