[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

div tag item select (part 2)

Posted on 2007-08-09
6
Medium Priority
?
306 Views
Last Modified: 2013-11-19
Continuing from http://www.experts-exchange.com/Internet/Web_Development/Q_22753327.html?cid=239#a19666334

How do I highlight the item selected in the div tag?
0
Comment
Question by:narmi2
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:amit_g
ID: 19666470
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<script>
var Key_Up = 38;
var Key_Down = 40;
var MaxLength = 5;

var g_CurrentIndex = -1;

function OnKeyDownHandler(e)
{
      var key;

      if(window.event)
      {
            key = e.keyCode
      }
      else if(e.which)
      {
            key = e.which
      }

      if (key == Key_Down)
      {
            g_CurrentIndex++;

            if (g_CurrentIndex >= MaxLength)
            {
                  g_CurrentIndex = MaxLength - 1;
            }
      }
      else if (key == Key_Up)
      {
            g_CurrentIndex--;

            if (g_CurrentIndex < 0)
            {
                  g_CurrentIndex = 0;
            }
      }

      if ((key == Key_Down) || (key == Key_Up))
      {
            for (i = 0 ; i < MaxLength ; i++)
            {
                  document.getElementById("oListSpan_" + (i + 1)).style.backgroundColor = "";
            }

            document.getElementById("oInput").value = document.getElementById("oListSpan_" + (g_CurrentIndex + 1)).innerHTML;
            document.getElementById("oListSpan_" + (g_CurrentIndex + 1)).style.backgroundColor = "#555555";
      }
}
</script>

</head>
<body>

<form>

<input id="oInput" type="text" onkeydown="OnKeyDownHandler(event)">
<div id="oListDiv">
      <span id="oListSpan_1">list 1</span><br/>
      <span id="oListSpan_2">list 2</span><br/>
      <span id="oListSpan_3">list 3</span><br/>
      <span id="oListSpan_4">list 4</span><br/>
      <span id="oListSpan_5">list 5</span><br/>
</div>

</form>

</body>

</html>
0
 
LVL 1

Author Comment

by:narmi2
ID: 19666483
instead of using MaxLength=5, is there no dynamic way of detecting the size?
0
 
LVL 58

Expert Comment

by:amit_g
ID: 19666494
Yes assuming it is as simple as given.

var MaxLength = document.getElementById("oListDiv").getElementsByTagName("span").length;

you may have to modify this if you have other spans in the same div.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:narmi2
ID: 19666520
i've left the code exactly how it is and only replaced the var MaxLength line with the new code and it does not work.   when i click the up/down arrow keys on the keyboard, nothing happens.
0
 
LVL 58

Accepted Solution

by:
amit_g earned 2000 total points
ID: 19666578
You have to bring the var MaxLength line inside the function i.e.

function OnKeyDownHandler(e)
{
      var key;
      var MaxLength = document.getElementById("oListDiv").getElementsByTagName("span").length;
0
 
LVL 1

Author Comment

by:narmi2
ID: 19666606
Would you be interested in more points?

I hope you will be: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22753494.html
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month20 days, 12 hours left to enroll

865 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question