I have a mouseover function where I changed the 'span' color of my 'a' tag. I take the 'a' tag that isMouseOver and replace the text to match the 'span'. This works, until recently I needed to add functionality from the server side. Therefore, the HTML is using runat="server". This in turn, changes my 'id' and adds "ct100_" to the front of my id's. However, when I apply this text to my variables it does not function. I can create a variable with the string "#ct100_span_Messages" and it will change my text but if the variable uses '#ct100_span' + $(this).attr('id').replace('img_', '').replace('a1_', '').replace('a_', '') it comes up with "ct100_span_Messages" (exactly the same string value) but does not work. I have tried using .toString() as well with no success. Thanks for the help,
*If they do not have runat="server" and I take out the added 'ct100_' it works. I really don't understand why my string's match exactly but jQuery will not read it.
Here is the JQUERY that works
(Once I add more buttons it becomes tedious to maintain each 'id'):
$("a[class='NoDecoration Menu']").mouseover(function (e) {
var selected = window.location.pathname
.replace('/My/', '').replace('.aspx', '');
var hover = $(this).attr('id').replace('img_', '')
.replace('a1_', '').replace('span_', '').replace('a_', '');
var test = "#ct100_span_Messages";
if (selected != "Messages" && hover == "Messages") {
$(test).css('color', 'orange');
}
if (selected != "Documents" && hover == "Documents") {
$("#ctl00_span_Documents").css('color', 'orange');
}
});
Here is the JQUERY that doesn't work:
$("a[class='NoDecoration Menu']").mouseover(function (e) {
var selected = window.location.pathname
.replace('/My/', '').replace('.aspx', '');
var hover = $(this).attr('id').replace('img_', '')
.replace('a1_', '').replace('span_', '').replace('a_', '');
var test = '#ct100_span_' + $(this).attr('id').replace('img_', '')
.replace('a1_', '').replace('a_', '');
if (selected != hover) {
$(test).css('color', 'orange');
}
});
Here is my HTML with the 'a' tags and 'span':
<div runat="server" id="MenuGroupMessages" class="fluidrow PaddingSized">
<div class="MenuGroup">
<a id="a_Messages" class="NoDecoration Menu" style="float: left">
<img id="img_Messages" style="width: 30px; margin-top: 0%;"
alt="MessageCenter" src="/Images/Mail.png" />
</a>
</div>
<div style="float: left;">
<a id="a1_Messages" class="NoDecoration Menu" style="float: left"
href="/My/Messages.aspx">
<span runat="server" id="span_Messages"
class="DashboardMenuOptions">My Messages</span>
</a>
</div>
</div>
<div runat="server" id="MenuGroupDocuments" class="fluidrow PaddingSized"
style="margin-top: 3%;">
<div class="MenuGroup">
<a id="a_Documents" class="NoDecoration Menu" style="float: left"
href="/My/Documents.aspx">
<img id="img_Documents" style="width: 30px; margin-top: 0%;"
alt="MessageCenter" src="/Images/Documents.png" />
</a>
</div>
<div style="float: left;">
<a id="a1_Documents" class="NoDecoration Menu" style="float: left"
href="/My/Documents.aspx">
<span runat="server" id="span_Documents"
class="DashboardMenuOptions">My Documents</span>
</a>
</div>
</div>