|
Hi all.
I'm having a slight problem to which I can't seem to find a solution on Google (obv because I'm not searching right) so I thought you might point me towards a link with a solution.
I have a textbox. Using Javascript, whenever the user enters a key, javascript iterates through a predefined array and returns a list of matching items in a Div. The result is :
<div><ul><li>item 1</li>......<li>item n</li></ul></div>
Then the user can click on one of the items and the selected option is automatically inserted into the textbox.
So far so good.
But, how is it possible to let the user use the cursor keys on his/her keyboard to select an option? :/ I have no idea how can this be done but I'm sure it can be.
Could someone direct me to a tutorial on this? Coz I'm sure it wouldn't make sense to give the code here (sure it will be too long).
Thanks a lot for any help provided.
PS: I'm using ASP VB but I can translate from PHP and .NET code if need be. I'm sure this is purely Javascript but still 
In life truth does not matter. What really matters is what others believe to be the truth. (The Up and Comer - Book)
|
|
|
|
|
take the following as an example
<script>
var cur_elem = -1;
function resetElements(prt,cls,omit) {
for(i=0;i<=prt.childNodes.length -1; i++){
if(i != omit) {
prt.childNodes[i].className = cls;
}
}
}
function dosomething(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
target_elem = (!document.all) ? document.getElementById("testId") : document.all["testId"];
if(code == 38) {
if(cur_elem >= 1) cur_elem -=1;
target_elem.childNodes[cur_elem].className = "over";
resetElements(target_elem,"normal", cur_elem);
target_elem.className = "activeList";
document.getElementById("notice").innerHTML = "Up:" + cur_elem + " .::. Element content:" + target_elem.childNodes[cur_elem].innerHTML + " .::. Total elements:" + target_elem.childNodes.length;
} else if(code==40) {
if(cur_elem <= target_elem.childNodes.length-2) cur_elem +=1;
target_elem.childNodes[cur_elem].className = "over";
resetElements(target_elem,"normal", cur_elem);
target_elem.className = "activeList";
document.getElementById("notice").innerHTML = "Down:" + cur_elem + " .::. Element content:" + target_elem.childNodes[cur_elem].innerHTML + " .::. Total elements:" + target_elem.childNodes.length;
}
}
</script>
with defined styles like
<style>
.normal {
background-color:#ffffff;
display:block;
}
.over {
background-color:#990000;
display:block;
}
.activeList {display:block}
ul.def {display:none;}
</style>
and with the following html:
<pre><input type="text" name="random" id="random" onkeydown="dosomething(event);" />
<ul id="testId" name="testId" class="def">
<li>some value</li><li>some value 2</li><li>some value 3</li><li>some value 4</li><li>some value 5</li><li>some value 6</li></ul>
<div id="notice">[empty]</div>
</body></pre>
be aware of the fact that the <li> elements MUST have no space between because of sum reason i dun understand(spaces are treated are child elements of the UL element in FF and opera.)
This is a basic example ... further enhancements are up to you.
Code? Yeah i love it fried together with a glass of wine.
|
|
|
|
|
sweet ... thanks for the detailed reply man
In life truth does not matter. What really matters is what others believe to be the truth. (The Up and Comer - Book)
|
|
|
|
|
hi, i am doing an educational project, and i copied all the ASP.net file into my wwwRoot folder,and when i browse any pages using http://localhost/login.aspx, the page was opened, but could not coonect with SQL server.
so, what will be the Connecting string !! plz help,
|
|
|
|
|
|
Hai
I am using div.Inside the div i wrote some content. for that i set width auto, browser take it with as 100%.why it is taking like that. i want the width is equal to my content.
example
<div>
<u>Hai</u>
</div>
in css
div
{
width:auto;
}
If i gave like this it should measure only the word know.but it measure the whole line. Can give the solution . why it is happen like this.
Thanks in advance
|
|
|
|
|
You are using a block-level element (div) which will always attempt to take up "the entire line" as opposed to flow-level elements (u, img, span etc.) which take up just the space of their contents.
You should not be setting width: auto often as it is the default. Only if you are overriding inherited properties will you set it.
I don't know what you are trying to do but this may be more appropriate:
<span>
<u>Hai</u>
</span>
span is a flow-level generic element while div is a block-level generic element.
|
|
|
|
|
Hi to all
I would like to search a html document file for all the style properties and loop through them
for example
if i have the code :
<div style="color:#fff"> </div>
<div style="text-align:center">
I want the regular expression to pick up the following text
style="color:#fff"
style="text-align:center"
I want to get the amount if hits it found and then I should be able to loop through it.
Sorry this is probably a noob question but havent used regex for 2 years
C# code please
Thanx
Le Roux Viljoen
Web Developer
PCW New Media
South African Branch
www.pcwnewmedia.com
|
|
|
|
|
style[\s]*=[\s]*"([a-z0-9\s;:]+(?!=[>"]))
i presume you can write c# code
Code? Yeah i love it fried together with a glass of wine.
|
|
|
|
|
Thanx
Yes i will be able to take it from here
Le Roux Viljoen
Web Developer
PCW New Media
South African Branch
www.pcwnewmedia.com
|
|
|
|
|
I'd like to add that you should take a look at the Expresso tool found on this site for working with regular expressions. In case you have more regular expressions to work with, you may find it very useful 
"The clue train passed his station without stopping." - John Simmons / outlaw programmer
"Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon
"Not only do you continue to babble nonsense, you can't even correctly remember the nonsense you babbled just minutes ago." - Rob Graham
|
|
|
|
|
also I found that this code
style[\s]*=[\s]*"([^"]+(?!=[>"]))["]
works a bit better as the previous code cut off the style code at "-" characters
Le Roux Viljoen
Web Developer
PCW New Media
South African Branch
www.pcwnewmedia.com
|
|
|
|
|
I want to use the code below to check the age of who ever fills in a form, I am trying to use a regulary expression to do this, at the moment it keeps giving me the wrong results;
|
|
|
|
|
Regular expressions are for pattern matching, not numeric comparisons. Replace:
var reg_expression = /[0-18]/;
if (reg_expression.test(quiz.personal_age) == true) ...with:
var age = parseInt(quiz.personal_age);
if (age <= 18 )
---- You're right.
These facts that you've laid out totally contradict the wild ramblings that I pulled off the back of cornflakes packets .
|
|
|
|
|
I need to provide a 'code' for people to enter to prove they are human (well at least that they are reading the page!)
I am getting huge amounts of mail generated by some russian 'hacker' and I need to stop this.
Does anyone know how to go about coding these little boxes, or if there is a tool available to do it? It is a very simple HTML web - no jave etc - as I am a very simple programmer and am not into Java. (Well not yet anyway)
Thanks for any assistance.
David
|
|
|
|
|
|
Thank you ever so much Phil. I will give that a try. What a fabulous idea!!
David
|
|
|
|
|
If you want to have full control over the code yourself, there are some CAPTCHA projects on CP.
For example this[^] one.
|
|
|
|
|
I second that referenced article. It is a very good one.
"The clue train passed his station without stopping." - John Simmons / outlaw programmer
"Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon
"Not only do you continue to babble nonsense, you can't even correctly remember the nonsense you babbled just minutes ago." - Rob Graham
|
|
|
|
|
I am currently developing a small web site using MySQL - PHP, but I am not sure the technology really matters in my problem.
I have a page where users can search for items based on some parameters they can select. I have made this using a simple HTML form and this works like a charm, but for one parameter: the user must select an area on a map. What I have done is that I display a map on which different areas are numbered from 1 to 7 and the user chooses an area using radio buttons near the map (I know, a dropdown would be better, but I chose to consistent with the rest of the form). What I would like is that he could be able to select an area directly on the map. I have no idea which technology to use to achieve something like that (basically "selecting" an area on a map and keep that selection marked). HTML area tags do not fit, since I don't want to jump to the target on mouse click, but only to mark the area as selected and use that value later.
~RaGE();
I think words like 'destiny' are a way of trying to find order where none exists. - Christian Graus
Do not feed the troll ! - Common proverb
|
|
|
|
|
well, you can still use an HYTML area map, but you don't have to jump anywhere on a mouse-click / selection, but call a Javascript function instead that either sets a hidden variable and/or sets the appropriate radio button....
|
|
|
|
|
OK, and how do I make the choice of the user visible for him (change the selected area on the map), without the page reloading (so as not to lose his other form data) ?
I guess I could change the picture, switching between 7 images where a different area is selected on each picture according to the area having been clicked into. But does not this need reloading ?
I'm waiting for Windows Feng Shui, where you have to re-arrange your icons in a manner which best enables your application to run. Richard Jones
|
|
|
|
|
well, it's slighty tricky... with only 7 areas you could have 8 different images (one with each area highlighted and one with none) and use JavaScript to swap to the appropriate one each time... if your images aren't too big that could work ok... or, if you have atool like Fireworks [^] then you could create a really fancy map that does what you want - but trying to code that "by hand" would be a bit much...
If it's not 100% necessary to show the selection on the map, you could just highlight and select the apprpriate radio button - so when they click on Area 2, for example, then radio button 2 gets selected and has it's background colour set to red, say.. all possible wiht JavaScript...
|
|
|
|
|
Thank you very much for your advice Phil, I'll have a go at the javascript version. I suppose that I will need an alternative for people having javascript disabled...
~RaGE();
I think words like 'destiny' are a way of trying to find order where none exists. - Christian Graus
Do not feed the troll ! - Common proverb
|
|
|
|
|
Hi all
Has anyone got any experience in the above (http://www.tibco.com/devnet/gi/[^].
We're just about to embark on evaluating it and wondered if anyone had any pointers or gotchas?
Thanks
Ben
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
