We Keep Coding

Highlight selected table cell C# Menu

I have a dynamic Menu populating from database. I have issues in highlighting the currently selected Menu, I am using ASP.net C#. Please check the code below.
HTML
function highlight(clMenu) {
clMenu.id = "clMenu";
}
<form id="Form1" method="post" runat="server">
<asp:Table ID="tblMenu" runat="server" Width="100%">
</asp:Table>
</form>
C#
TableRow rwMenu = new TableRow();
ConnectionCls ConObj = new ConnectionCls();
string StrQuery = "select * from Menus where isenabled=1";
ConObj.GetSqlDataTable(ref Dt, StrQuery);
if (Dt.Rows.Count > 0)
{
for (i = 0; i <= Dt.Rows.Count - 1; i++)
{
string Href = Dt.Rows[i]["url"].ToString();
clMenu.Text = "" + Dt.Rows[i]["MenuName"] + "";
clMenu.Attributes.Add("onclick", "highlight(this)");
rwMenu.Cells.Add(clMenu);
tblMenu.Rows.Add(rwMenu);
}
}
Everything is working perfectly except the menu onclick event. When i click on a Menu its background color i am able to change successfully, on clicking another menu its background color also changing but the previous selected menu its not clearing
CSS
#clMenu {
background-color:#EE3D43;
}

I will recommend to go for CSS class attachment instead of setting DOM element's id; because logically there has to be unique ids to each and every DOM element. But single CSS class can be assigned to many elements though.
So please have a look at below changes:
CSS:
.clMenu {
background-color:#EE3D43;
}
Javascript code:
function highlight(domElem) {
$(".clMenu").removeClass('clMenu'); //removing highlight class from previously clicked menu
$(domElem).addClass('clMenu'); //adding highlight class to currently clicked menu
}

If this class are used only for this anchors only then try this
function highlight(clMenu){
$(this).attr('id').click(function () {
$(document).find('.anchorColor').removeClass('anchorColor');
var aId = $(this).attr('id');
$(this).addClass('anchorColor');
});
}
and instead of doing the css with id try with class:
.anchorColor {
background-color:#EE3D43;
}

Javascript code behaves proper in IE and improper in firefox

i need a clarification regarding my bug.
my requirement is to get the html tag names used in UI dynamically using javascript. Where my code got executed in IE, but it's not proper in Mozila Firefox.
My Code,
HTML CODE:
<table>
<tr>
<td>
<input type="text" />
</td>
<td>
<select>
<option>p_string1</option>
<option>p_string5</option>
</select>
</td>
</tr>
</table>
JS:
for (i = 0; i < table.rows[0].cells.length; i++)
{
pNode[i] = table.getElementsByTagName('td')[i].childNodes[0].nodeName;
}
I'm getting the value #text instead of the tag name Select. But getting the tagname INPUT properly..

I would assume this is because firefox (correctly) selects the first childNode, which is whitespace. If you remove ALL white space between the and the you'd probably get the correct tag.
EDIT, like this:
<td><input
I created some jsFiddles to demonstrate the effect:
http://jsfiddle.net/NUEwg/2/
http://jsfiddle.net/zbmeG/1/
EDIT 2:
You could consider using document.querySelectorAll. This is support in all browsers except IE6 and IE7. If you don't need support for these, something like this might work.
var inner_tags = document.querySelectorAll('td > *')
var first_tag = inner_tags[0].tagName;
Hope this helps.

use the tagName and firstChild element attributes:
http://www.w3schools.com/jsref/prop_element_tagname.asp
var cells = table.getElementsByTagName('td');
for (i = 0; i < table.rows[0].cells.length; i++)
{
var cell = cells[i];
if ( cell && cell.firstChild) {
result = null;
for ( position in cell.childNodes){
if (! result) result = cell.childNodes[position].tagName;
}
pNode[i] = result;
}
}
Notice that line hops and tabulation are noticed by some browsers as TextNodes, which have not tagName, because of that we cycle through the childnodes searching for a defined tagName attribute.
I updated the example at http://jsfiddle.net/9YJsd/1/

Radio Buttons clear check when clicked again

I have a set of three radio buttons and they have mutual exclusion in them, as I implemented group name property, but the problem is, in the initial stage, none of the radio button is selected,
But when I select any of the radio button, then I cannot deselect the same, although mutual exclusion is in progress, but I want them to deselect as well.
My code aspx is:
<td>
<asp:RadioButton ID="AChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>
<td>
<asp:RadioButton ID="DChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>
<td>
<asp:RadioButton ID="WChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>

You have both a code problem and a misunderstanding.
The misunderstanding is about how the mutual exclusion radio buttons work (or are supposed to work) (or are expected by the users to work).
The code problem is that in a mutually exclusion radio buttons group you need to initially select one of them.
So, I believe there are two ways of solving the problem:
Keep the radio buttons groud. Add a "none" button to the set, so that it works as if none of the other three are selected. And initially select this "none" button.
change the radio buttons to check boxes, so the user might select and deselect each of them. Then implement your own exclusion logic. I don't recommend this one.

You would need to use javascript...
doing binding in jquery, it's easier, and the name= should match your rendered groupname "name=" attribute...
var lastChecked = null;
$('input[name=A]').click(function(){
if (lastChecked == this) {
this.checked = false;
lastChecked = null;
}
lastChecked = this;
});

Use this to deselect:
var radios = document.getElementsByName('A');
for(var i=0; i<radios.length; i++)
{
radios[i].checked = false;
}

You can deselect a radio button by using the attribute ondblclick.
<input type="radio" name="RadioGroup1
" value="1" ondblclick="uncheckRadio();">
Apple</label>
When you double click on the radio button, just call a javascript function to set the checked property to false.
function uncheckRadio() {
var choice = document.form1.RadioGroup1;
for (i = 0; i < choice.length; i++) {
if ( choice[i].checked = true )
choice[i].checked = false;
}
}

Here is a similar implementation using the attribute ondblclickand jQuery. Also, this will allow you to include this functionality within controls with a dynamically generated client ID.
Code behind:
foreach (ListItem li in rbl.Items)
li.Attributes.Add("ondblclick", string.Format("clearCurrentRadioButtonSelection(\"{0}\")", rbl.UniqueID));
ASPX page
function clearCurrentRadioButtonSelection(controlName) {
var id = "input[name=" + controlName + "]";
$(id).each(function () {
$(this).attr('checked', false);
});
}

Analysing button in html to check if can register for events

I want to register for events on a button in a web page using javascript addEventListener or something equivalent. But the web page doesn't appear to have standard form buttons. The html snippet below is the html markup for what appears as a button on the page.
I want to detect mousedown (or mouseclick or equiv). Is there any way I could detect the user clicking on this button?
<a href="javascript:" id="WIN_0_536870914" arid=536870914 artype="Control" ardbn="Dial" artcolor="null" class="btn btn3d arfid536870914 ardbnDial" style="top:247; left:115; width:46; height:21;z-index:1001;">
<div class="btntextdiv" style="top:0; left:0; width:46; height:21;">
<div class="f1" style=";width:46">Dial</div>
</div>
</a>

The only tricky bit will be getting the elements from the DOM in the first place. If you know the id then it's trivial to get this specific button:
var elem = document.getElementById('WIN_0_536870914');
elem.addEventListener('click', function () {
alert('click!');
});
http://jsfiddle.net/ugsYB/
Although you probably want to target all the buttons by their class:
var elems = document.getElementsByClassName('btn');
var i;
for(i = 0; i < elems.length; i++) {
var elem = elems[i];
elem.addEventListener('click', function () {
alert('click!');
});
}
http://jsfiddle.net/ugsYB/1/ (Note: there are cross browser issues with getElementByClassName)
Of course, jQuery makes this sort of thing trivial:
$('.btn').click(function () { alert('click!'); });
http://jsfiddle.net/ugsYB/2/
But it might be overkill for your needs.

odd even class for table rows

I have table with rows where as in between have hidden rows and because of that odd even css class not able to set. How can I avoid those hidden rows?
HTML
<tr class="oddRow">
<td>Avinash</td>
<td>18-Jun-2010</td>
<td>LI1004</td>
<td>5,600.00</td>
<td>Sort</td>
</tr><tr class="oddRow" style="display:none;">
<td>Ajith</td>
<td>18-Jun-2010</td>
<td>LI1006</td>
<td>5,001.00</td>
<td>!</td>
</tr><tr class="evenRow">
<td>Ankur</td>
<td>14-Jun-2010</td>
<td>LI1005</td>
<td>5,000.00</td>
<td>me</td>
</tr><tr class="oddRow">
<td>Ajith</td>
<td>18-Jun-2010</td>
<td>LI1006</td>
<td>5,001.00</td>
<td>!</td>
</tr>

I know this isn't tagged jQuery but this would be the easiest way to apply this solution...
You don't need two CSS classes here (odd and even), just one. Start by setting the CSS for every row to use the "oddRow" style declarations by default. The "evenRow" style declarations should simply overwrite the defaults.
Add this JS function
var zebraStripes = function($) {
$('table.stripes tr').removeClass('evenRow')
.filter(':visible:odd').addClass('evenRow');
// using the :odd selector as it is zero-based
}
You can then bind this function to the document ready event as well as any event that changes row visibility.
Edit
Updated to work with jQuery 1.7, example here - http://jsfiddle.net/UZNKE/6/

Assuming your question is asking what I posted in the comments, you'll have to have a more in-depth 'hide' function which will change the classes of all subsequent functions. I expect you'll want to use something like this:
function hideRow(rowNum)
{
var rows = document.getElementById('table-id').getElementsByTagName('table');
// get current class and hide the row
var currentClass = rows[rowNum].className;
rows[rowNum].style.display = 'none';
// set up classname array
var classNames = new Array("oddRow", "evenRow");
// make sure 'j' points to the next desired classname
var j = 0;
if (classNames[j] == currentClass)
j = 1;
// make all subsequent visible rows alternate
for (i=rowNum+1; i<rows.length; i++)
{
// ignore empty rows
if (rows[i].currentStyle.display == "none")
continue;
// set class name
rows[i].className = classNames[j];
j = (j+1) % 2;
}
}
Note: I haven't tested the code, but I commented it so you should be able to figure out what's going on