javascript only firing on first cell in gridview

[readbanana]

I have a textbox in a column of a gridview. Onfocus of the textbox, css implements a background color change. Also, for the edges of the textbox (to be rounded - look nice) I have two divs surrounding my textbox. Onfocus I want these divs to be visible and onblur i want them to disappear. No matter which textbox in the column has the focus, the edges show up in the first textbox. they only consider the onfocus out if you click on a different column altogether. I am desperate! I've been on this for too long and pressure is mounting! I know nothing about javascript and really need help!

function Visible(obj)
{
document.getElementById("leftDiv").style.visibility='visible';
document.getElementById("rightDiv").style.visibility='visible';

}
function Invisible(obj)
{
document.getElementById("leftDiv").style.visibility='hidden';
document.getElementById("rightDiv").style.visibility='hidden';
}

[peter_budo]

JSP stands for Java Server Pages not for Java Script. Post moved

[macgurl70]

Can you post the html?

And the css code - I can not tell what is going on with just the small snippet.

[readbanana]

html

<ItemTemplate>

             <div id="leftDiv" class="leftdiv" style="display:none"></div>
               <asp:TextBox ID="costTB" runat="server" Text='<%# Bind("Cost") %>' AutoPostBack="true" CssClass="grid-input"  ></asp:TextBox>
               <div id="rightDiv" class="rightdiv" style="display:none"></div>
 
            </ItemTemplate>

javascript

function Visible(obj)
{
document.getElementById("leftDiv").style.display='block';
document.getElementById("rightDiv").style.display='block';

}
function Invisible(obj)
{
document.getElementById("leftDiv").style.display='none';
document.getElementById("rightDiv").style.display='none';
}

css

.grid-input:focus
{
background: url("images/prod-table-input-bg.png") repeat-x scroll 0 0 transparent;
border:0 none;
float:left;
font-size:11px;
height:27px;
line-height:27px;
text-align:center;
}
div.leftdiv
{
float:left;
background:url(images/prod-table-input-left.png) no-repeat;
width:3px;
height:27px;	

}
div.rightdiv
{
float:left;
background:url(images/prod-table-input-right.png) no-repeat;
width:3px;
height:27px;

}

[macgurl70]

Ok, re-reading your post - the script effect you have selected is doing exactly what it is supposed to do, change when the focus changes with a click or a tab. (yes, I admit, I had to review my notes to make sure I understood this myself) However, it reads like you want the div to show and be hidden when the visitor simply moves the mouse which would be an onmouseover and onmouseout event.

The code below is my personal preference - I don't like to assign main functions in my CSS code, except for the hovers and link options.

CSS code

.grid-input
{
background: url("images/prod-table-input-bg.png") repeat-x scroll 0 0 transparent;
border:0 none;
float:left;
font-size:11px;
height:27px;
line-height:27px;
text-align:center;
}

#leftDiv
{
float:left;
background:url(images/prod-table-input-left.png) no-repeat;
width:3px;
height:27px;	
display:none;
}

#rightDiv
{
float:left;
background:url(images/prod-table-input-right.png) no-repeat;
width:3px;
height:27px;
display:none;
}

I like the display none in the css code instead of the div tag - it will still change when the function is called.

I also prefer using the id for the divs in my CSS code. I find it is easier for me to keep track of what I am changing or styling when I know I will be using a script on them.

Javascript

function visibleDiv(){
   document.getElementById("leftDiv").style.display="block";
   document.getElementById("rightDiv").style.display="block";
}

function hideDiv(){
   document.getElementById("leftDiv").style.display="none";
   document.getElementById("rightDiv").style.display="none";
}

Basically the same - it is in here so what I post makes sense (at least to me). Even though the CSS code has the div set to "none" it will be visible when you change it to "block" using the javascript.

The biggest difference I could see is actually using the script in the asp:TextBox

<asp:TextBox ID="costTB" onmouseover="visibleDiv();" onmouseout="hideDiv();" runat="server" Text='<%# Bind("Cost") %>' AutoPostBack="true" CssClass="grid-input"  ></asp:TextBox>

There are no values in the javascript since you are changing the same two divs on all of them. It will also allow for all the elements to hide and show the divs, and if you want to change what divs are shown, objects can be used in the scripts to customize it even more.

Hope this helps some