Develop Reference

Onclick not this

I have created a function for a sidebar that slides down the first href when clicking on this and then anything that was not this would slide up. This worked fine until I needed to call the function using "onclick" which then meant not $(this) would not work as it can only call (this) . I am using tagbuilder so can only call one unique event listener.
JS
$(".foo > a").each(function () {
$(this).click(function () {
$(this).siblings(".sibling").slideToggle();
$(this).toggleClass("active");
$(".foo > a").not(this).siblings(".sibling").slideUp();
$(".foo > a").not(this).removeClass("active");
});
});
C#
a.MergeAttribute("onclick", "Click.call(this)");
Not this to target the sidebar and slide not this up

To not add CSS class to the current target, just remove the current CSS and add to its siblings.
$(".foo > a").click(function () {
$(this)
.removeClass('active')
.siblings()
.addClass('active');
});
.foo {
display: flex;
}
.foo a {
border: 1px solid black;
color: black;
padding: 15px;
margin: 15px;
text-decoration: none;
}
.foo a.active {
background: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">
Link1
Link2
Link3
</div>

How to customize the dataGridView cells in visual studio

I want to customize the size of dataGridView cell, how can I do that? iwant to increase the height of cell

here is a sample I am using:
.Grid td { //these are data cells
background-color: #d7e1e5;
color: black;
font-size: 10pt;
line-height: 200% // Adjust the height here
}
.Grid th { //Header cells
background-color: #007FFF;
color: White;
font-size: 10pt;
line-height: 200% // Adjust the height here
}

Highlighting duplicate <ul></ul> menu navigation's

I am attempting to design a site for someone who wants both the Contact Us page in the bottom portion of the menu and above their logo in the top right corner.
As such here is the client code:
This is the top menu above the logo:
<ul class="topnavigation" style="width:1000px; border-bottom-style: none; height: 40px;">
<li class="highlight" style="width:100px; height: 40px; font-family:Calibri; float:right;">Contact Us</li>
<li style="width:100px; height:40px; font-family:Calibri; border-left:1px solid white; border-right:1px solid white; float:right;">Home</li>
</ul>
And this is the menu under the logo:
<ul class="navigation" style="width:1000px; height:40px; border-bottom:none;">
<li style="width:150px; font-family:Calibri; height: 40px; border-right:1px solid white;">About Us</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Applications</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Features and Benefits</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Technical Specs</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Contact</li>
<li style="width:145px; font-family:Calibri; border-right:none; height: 40px;">Recognition</li>
</ul>
To highlight which page the user selected I used some javascript (which I have been trying to learn lately) and CSS
JavaScript:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$('.navigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
});
CSS:
ul.navigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.navigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.navigation li a:last-child{}
ul.navigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.navigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.navigation li.highlight a
{
color:white;
}
ul.navigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
a, a:visited
{
color:#000;
}
ul.topnavigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.topnavigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.topnavigation li a:last-child{}
ul.topnavigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.topnavigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.topnavigation li.highlight a
{
color:white;
}
ul.topnavigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
With this implementation if the user clicks on any page it highlights the page. But if they click on the Contact Us in the top corner is only highlights the Contact Us in the bottom menu and not the top menu. I found that strange and is a question in itself for me because I would expect it to highlight the top portion and not the bottom portion. (If anyone can answer that as well I would appreciate it - because I don't see how it is recognizing it).
So, how can I have both the top contact page navigation and bottom contact page navigation highlight at the same time. I am assuming that this will be done with java script and not on the C# code.
I have attempted to combine the two such as
$('.navigation li a' & '.topnavigation li a').each(function () {
but realized this probably wouldn't work because it is indexing. Although I am not sure. I attempted to set them as an "if equivalent" so if both href were the same then it would highlight them. Nothing I have done has worked (although amusingly I have gotten some odd results highlighting other navs).
So, any suggestions? Point me in the right direction? Something I am not seeing or how can this be done? Is this going to be needed to be done in C#? Can JavaScript do it?
Please let me know. This is the first question I have asked so I am frustrated on this.

You really don't need an each here, nor do you need to combine selectors unless you're doing something special based on their root class. You just need a way to match things up. Here is a demo - http://jsfiddle.net/jayblanchard/AEY5h/
EDIT: The original code still works (you need to remove e.preventDefault(); for your site)
$('li a').click(function(e) {
e.preventDefault(); // just for this demo
var thisHREF = $(this).attr('href'); // get the href of the clicked item
$('li').removeClass('highlight'); // remove all the classes
$('a[href="' + thisHREF + '"]').closest('li').addClass('highlight'); // add the class to the items that have the same href
});
To highlight the elements where your page matches up add the following (outside of the above block)-
var currentPage = location.pathname.substring(1);
$('a[href="' + currentPage + '"]').closest('li').addClass('highlight'); // adds highlight to current page element
In the fiddle I have replaced the location info with jsfiddle's info so that both Contact Us elements are highlighted - http://jsfiddle.net/jayblanchard/AEY5h/1/

You can combine jQuery selectors using a comma like this:
$('.navigation li a, .topnavigation li a').each(function () {
Notice that the comma is included inside the single quotes.

jQuery errors, Remove default .highlight class from list-items
In your .topnavigation menu, don't provide preselected .highlight classes.
You have a preselected item with class .highlight, which may be why it appears that your script is working to highlight the item in your .topnavigation menu, but not your .navigation menu.
Also, your jQuery has some errors and I recommend combining selectors since the .each() function is the same for both.
This corrected version should do the trick (if there are no preselected items with .highlight):
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a, .navigation li a').each(function () {
if (str.indexOf($(this).attr('href').toLowerCase()) > -1) {
$(this).parent().addClass("highlight");
}
});
});
Example JSFiddle: http://jsfiddle.net/gfullam/0rppzomt/

The correct way to combine multiple selectors into one with jQuery is not like this:
$('.navigation li a' & '.topnavigation li a')
but rather like this:
$('.navigation li a, .topnavigation li a')
Here's a link to more documentation on the multiple selector usage. Make that change in your javascript and you should properly be selecting all the elements you're trying to target.

C# Read from and write to specific CSS classes

I'm trying to write a C# application that will perform an operation on some CSS files. Say you have the following CSS code:
.ClassOne
{
color: #FFFFFF;
font-weight:normal;
font-size: 9pt;
font-family: Tahoma;
vertical-align: middle;
border: solid 1px #7F7F7F;
padding: 1px 1px 1px 1px;
background-color: #B48410;
background-position: center center;
}
.ClassTwo
{
color: #FFFFFF;
background-repeat: repeat-x;
background-color: #000000;
}
.ClassThree
{
color: #000000;
font-weight:normal;
font-size: 9pt;
font-family: Tahoma;
vertical-align: left;
border: solid 1px #F3Dc51;
padding: 1px 1px 1px 1px;
background-color: #A32DF1;
}
What I would like to do is search the file for specific classes, say ClassOne, then store the background-color element applicable to that class. This wouldn't have to be done for all classes in the CSS file, so in the example above I might just want to store the background-color for ClassOne and ClassThree.
The application should then be copy the stored values into another CSS file, with the same classes.
I will know the classes that these operations have to be performed on.
I have taken a look at ExCSS, but i'm not sure how to use it, and if it would be helpful in this instance.
Can anyone help?

This should get you started on ExCss, at least on the parsing part:
[Test]
public void Banana([Values (".ClassThree")] string targetClass, [Values ("#A32DF1")] string expectedColor)
{
var parser = new Parser();
var sheet = parser.Parse(sample);
var result = sheet.Rulesets
.Where(s => s.Selector.ToString() == targetClass)
.SelectMany(r => r.Declarations)
.FirstOrDefault(d => d.Name.Equals("background-color", StringComparison.InvariantCultureIgnoreCase))
.Term
.ToString();
Assert.AreEqual(expectedColor, result);
}
What you'll end up doing, perhaps instead of using Linq, is to loop through your css and build a new css with the values in the declarations that match what you are targeting. For example, below, which is probably not optimally efficient, but could do the trick:
var targetClasses = new List<string> { ".ClassOne", ".ClassThree" };
var targetDecls = new List<string> { "background-color" };
var parser = new Parser();
var sheet = parser.Parse(sample);
foreach (var r in sheet.Rulesets)
{
if (targetClasses.Contains(r.Selector.ToString()))
{
Debug.WriteLine(r.Selector.ToString());
Debug.WriteLine("{");
foreach (var d in r.Declarations)
{
if (targetDecls.Contains(d.Name))
{
Debug.WriteLine("\t" + d);
}
}
Debug.WriteLine("}");
}
}

After table sorter not applying the table css styles?

I applied tablesorter css styles for a table in a page.And i also i need to apply another style for rows if textbox entered data matching with any column of table grid data need to apply different color for that row.
$(function () {
grid = $('#tblsearchresult');
// handle search fields key up event
$('#search-term').keyup(function (e) {
text = $(this).val(); // grab search term
if (text.length > 1) {
// iterate through all grid rows
grid.find('tr').each(function (i) {
if ($(this).find('td:eq(1)').text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(2)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(3)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(4)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
});
}
else {
grid.find('tr:has(td)').css({ background: "" });
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
<table id="tblsearchresult" class="tablesorter"">
<thead>
<tr>
<th>ApplicationName</th>
</tr>
</thead>
<tbody>
<% foreach (var request in Model.ApplicationRoles)
{ %>
<tr>
<td>
<span id="appName_<%: request.Id%>">
<%: request.Application.Name%></span>
</td>
</tr>
</tbody>
</table>
tablesorter css :
table.tablesorter {
font-family:arial;
color: rgb(51, 51, 51);
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #8dbdd8;
border: 1px solid #FFF;
font-size: 8pt;
padding: 5px;
}
table.tablesorter thead tr .header:not(.nosort) {
background-image: url('/sorter/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
background-color: rgb(239, 243, 251);
padding: 5px;
border: solid 1px #e8eef4;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp:not(.nosort) {
background-image: url('/sorter/asc.gif');
}
table.tablesorter thead tr .headerSortDown:not(.nosort) {
background-image: url('/sorter/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
.divpager
{
display: inline-block;
float: left;
}
I am not able apply anonymous function row color when search text macthed with any table grid row data.please tell me.

Try this code (demo):
$(function () {
grid = $('#tblsearchresult tbody');
// handle search fields key up event
$('#search-term').on('keyup search', function (e) {
text = $(this).val().toUpperCase(); // grab search term
if (text.length > 1) {
// iterate through all grid rows
grid.find('tr').each(function (i) {
var found = false;
$(this).children().each(function(j){
if (this.textContent.toUpperCase().match(text)) {
$(this).addClass('result');
found = true;
}
});
$(this).toggle(found);
});
} else {
grid.find('td').removeClass('result');
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
$('table').tablesorter();