We Keep Coding

Positioning loading indicator div at position irrespective of the screen size or resolution

in my aspx page, i have 3 td inside a table where i have placed
divs to display my content.i'm using ajax to load the data inside
each of the div.in the same td in which i am displaying my content div
i have also placed a div to show loading indicator when the data div
loads.
My problem is positioning the loading indicator div when its seen through
different machines with different resolution or screen size.
At present my loading indicator div are of type absolute.
Can any one suggest an elegant method of position my loading
indicator div in the three td's so dat its correctly centered
no matter whatever is the screen size or resolution.
i'm using c# web application.
Below is the markup of one of the td's,
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
<tr>
<td class="Box_TopLeftCurve">
</td>
<td valign="top" class="Box_TopRep">
</td>
<td class="Box_TopRightCurve">
</td>
</tr>
<tr>
<td class="Box_LeftRep">
</td>
<td align="left" valign="top">
<div class="Box_GridArea">
Data Here
</div>
<div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
Loading Indicator
</div>
</td>
<td class="Box_RightRep">
</td>
</tr>
<tr>
<td class="Box_BaseLeftCurve">
</td>
<td class="Box_BaseRep">
</td>
<td class="Box_BaseRightCurve">
</td>
</tr>

Display the indicator as a background image so that it is easy to center on any resolution.
.loader { background: url('/images/loader.gif') center center no-repeat; }
You could assign the background image to the table or the td in which it should appear.
When loaded you could remove the loader class using jQuery for example:
if (is_loaded) {
$('table td').removeClass('loader')
}

ASP.NET: How to extract a specific value from a table html source?

I want to extract the movie name of each row in the IMDb`s Boxoffice table..
example html table row:
<tr class="chart_even_row">
<td style="text-align: right;">
<b>1</b>
</td>
<td>
<img border="0" src="http://ia.media-imdb.com/images/M/MV5BMjA4NDg3NzYxMF5BMl5BanBnXkFtZTcwNTgyNzkyNw##._V1._SY30_SX23_.jpg" width="20" height="30">
</td>
<td>
<a href="/title/tt1392170/" >The Hunger Games</a> (2012)
</td>
<td style="text-align: right; padding-right: 20px;">$155M
</td>
<td style="text-align: right;">
$155M
</td>
<td style="text-align: center;">
1
</td>
</tr>
The value I want to extract is "The Hunger Games"..
I need a C# code that would achieve this for me..
NOTE: I want to do this via REGEX
Thanks in advance,
Rashad.

Screen scraping the IMDB is complicated, fragile, and forbidden. The IMDB provides plain-text data files you can use instead at http://www.imdb.com/interfaces
Update
Allow me to reiterate: screen scraping and data mining IMDB.com is in violation of their terms of use.
Regarding Regex: see this answer.
So if you're dead-set on doing this in violation of the IMDB's terms of use, the HTML Agility Pack is probably the best way to go.

try to copy paste the code in single html file. if you have too many pages to fetch then try to write code that will read them through html agility pack.
You can find html agility pack here http://htmlagilitypack.codeplex.com/

How to apply same style for multiple tables in a page

I have two gridviews in a aspx page, each bounded with similar data. Here is the screen shot.
The width of each column in the grid is defined in % and are the same for both the grids. Even then the output is not as expected, but slight variations in the column width. I need to make sure both the grids columns should appear same. Does any one know how to fix this (.net/javascript). Thanks for the help in advance.

while building the table set the class for each column individually, and then set the width in CSS
<table style="width: 100%;">
<tr>
<td class='firstCol'></td>
<td class='secCol'></td>
<td class='thrdCol'></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
and style
<style type="text/css">
.firstCol
{
width: 10%;
}
.secCol
{
width: 20%;
}
.thrdCol
{
width: 30%;
}
</style>

You could use CSS and classes. For example on table rows you would like to keep the same you can write
<tr class="specialrow">
or for certain cells
<td class="specialcell">
You would write the css like this
.specialcell
{
width:100px;
}
Perhaps a jsfiddle would help further?

A way to ensure both tables are equals is to use just one table. It's not the best solution, but it will get the job done. In order to put the separation between them, you will need to put a <tr colspan="14"><td> </td></tr> between them.
Again, it's not the best solution. If from your business perspective it makes sense to have it this way (the tables shows information about the same thing and makes sense to think of it as a whole), then you can use it without guilt.
Anyway... looking for some information about having several s and s in the same table lead me to this answer that has a lot of useful information about how to do it: Multiple thead/tbody design
you may try using the css table-layout:fixed in both tables and then specify the widths for each column in the css.

Modify cell attributes using field from model

I'm trying to use a simple table nested in a cell to show a graph on my elections result page.
<td>
<%: result.candidateName %>
<table style="border:0; padding:2px;">
<tr>
<td style="width:50px; border:0; height:15px; color:Blue; padding:0; font-size:75%;"><%: result.percentWon %>%</td>
<td style="background-color:Blue; width:400px; border:0; height:15px;"></td>
</tr>
</table>
</td>
What I need to do is change the width figure in the cell style (set to 400px now) to be 4*result.percentWon, but I cant figure out how to put Aligator tags in the middle of the style string.
Yes I'm a noob (o: Can anyone school me?

You can put <%: ... %> where-ever you want:
<td style="background-color:Blue; width:<%:4*result.percentWon%>px; border:0; height:15px;"></td>

ASP.NET Textbox size differs when TextMode=Password

I have a login page that has several textboxes on the page, one of them has the mode set to "password". This page worked previously but we've recently noticed (since an IE7 update) that the textbox that is specified as a password textbox is not as wide as the other textboxes on the page. If I remove the TextMode="Password", the textbox resizes to match the others.
I've checked for oddities on the page when the page displays using the IE developer toolbar, but it all looks ok.
The textbox code is fairly basic:
<tr>
<td>
Username
</td>
<td>
<asp:TextBox ID="txtUsername" runat="server" TabIndex="2"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txtPassword" TextMode="Password" runat="server" TabIndex="3"></asp:TextBox>
</td>
</tr>
I've found one other person asking about this on the web and they fixed it by applying a css to all the input controls on the page, but I haven't managed to get that to work either.

The best way to ensure that all of your controls will be of the same size is via style (either inline or in css).

I've found that if you use the following CSS:
input, select { font-family: sans-serif; }
this will make the text and password boxes be the same width. The font-family does not have to be sans-serif, but it must be defined.
This may be a better solution as it seems to fix the issue rather than band-aid over it by using an explicit width in your CSS. You can now just use the default font settings of the browser by using the generic font families or be explcit if you have a particular font you are using for the page.

It may help if you provide a Width="" property to your textboxes. That should force them to match up in terms of width even those they have different text modes.

If you specify a value (like 20) for the TextBox.Columns property (which maps to the <input size="" /> attribute) they'll match up. If you want to use CSS, you should try to avoid an inline style (which the TextBox.Width property creates).

You may try setting Width property of all the text boxes to be same. 150 would be a good value.

I think it is normal to have different widths for password-type and non-password-type textboxes when you specify the size as "columns", as the width of a textbox is calculated by multiplying the width of the largest character in the font (say, "m") by the requested number of columns.
When passworded, the largest character is always the bullet (all chars are bullets), so the width is different (when using a proportional font obviously). To solve this problem, specify a width in pixel and not columns, i.e.: style="width:250px;" (or use a non-proportional font).

I recently ran into this problem with internet explorer 11. I tried everything here and nothing worked, but then stumbled onto this post. What solved it for me was doing this:
<tr>
<td style="width: 1000px; text-align: right;">User Name:</td>
<td style="width: 200px; text-align: right;">
<asp:TextBox ID="UNTextBox" runat="server" style="width: 200px;"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 1000px; text-align: right">Password:</td>
<td style="width: 200px; text-align: right;">
<asp:TextBox ID="PassTextBox" runat="server" TextMode="Password" style="width: 200px;"></asp:TextBox>
</td>
</tr>
I HAD to put in style="width: 200px;" straight into the asp:TextBox tag or the sizes just would not match up in IE11.
Hope that helps someone