(ESDB) Elkhodary Software Development Blog: 2011

Monday, July 11, 2011

how to keep footers at the bottom of the page (Modified)

On a previous post, I wrote about how to keep footers at the bottom of the page.
This post works great but while using it on a form I noticed that I need more modifications to it.

The first modification is that I used the form as the container.
The second one is to use a black background for the form to make sure that it stretched to the footer that is positioned on the bottom of the page.

In case of using a form you can use something like the following :

STYLE

html, body {
margin:0;
padding:0;
height:100%;
background-color:#23211d;
font-size: .90em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
}

#container {
width:960px;
}

#headerLogo
{
background-image:url('Images/webnew_header.jpg');
height:141px;
}

#page
{
background-color:Black;
padding-bottom:200px;

}

#footer

{

color:#464541;

background-color:Black;

position:absolute;

bottom:0;

width:960px;

height:200px;

}

Master Page

<body>
<form id="Form1" runat="server" style="min-height: 100%; position: relative; background-color: Black;
width: 960px;margin: 0px auto 0px auto;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div id="container">
<div id="headerLogo">
</div>
<div id="page">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div id="footer">
<table width="100%" cellpadding="0px" cellspacing="0px">
<tr>
<td align="left" valign="bottom">
All rights reserved for <a href="http://www.victorylink.com" target="_blank">Victory
Link</a>
</td>
<td align="right">
<asp:Image ID="imgTower" runat="server" Height="200px" ImageUrl="~/Styles/Images/lower_right_image.png"
ImageAlign="Right" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>

Wednesday, June 8, 2011

Deserialize javascript JSON into dictionary

This code uses a DictionaryConverter class which is a custom class that inherits from JavsScriptConverter.

string decodedPayLoad;

System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

// Register the custom converter.

js.RegisterConverters(new JavaScriptConverter[] { new DictionaryConverter() });

IDictionary list = js.Deserialize<IDictionary>(decodedPayLoad);

This is the custom class that was called above

public class DictionaryConverter : JavaScriptConverter

{

public override IEnumerable<Type> SupportedTypes

{

//Define the ListItemCollection as a supported type.

get { return new ReadOnlyCollection<Type>(new List<Type>(new Type[] { typeof(IDictionary) })); }

}

public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)

{

throw new NotImplementedException();

}

public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer)

{

if (dictionary == null)

throw new ArgumentNullException("dictionary");

return dictionary;

}

Hope it helps :)

Sunday, June 5, 2011

Get Users IP Address

You can use the following :

To get the IP address of the machine and not the proxy :

HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"];

If the above is null or empty use this code :

HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"];

Happy coding :)

Wednesday, May 25, 2011

Download CSV file and solving the encoding problem

I will not talk too much ..

Most of the cases you open the blog for a fast review to get an answer and if you did not find it within seconds, you will leave :)

So here it is

    Response.Clear();
string fileName= String.Format("Client_{0}.csv", DateTime.Now.ToString("yyyyMMdd_HHmmss"));
Response.ContentType = "text/csv";
Response.AddHeader("content-disposition", "filename=" + fileName);
Response.Write("Ahmed,Mohamed,Adel\n");
Response.End();

EDIT : 30/05/2010

Solving the problem with UTF-8

CSV file has a problem with UTF-8 encoding.

To solve this problem, you have to know first what is BOM - If you do not care you can move down to the end of the post and get the solution directly but for those who want to learn more, you can continue reading-. BOM is Byte Order Mask which is a Unicode character used to signal the byte order of a text file or stream. Its code is U+EEFF. BOM use is optional and if used should appear at the start of the text stream. Beyond its specific use as a byte-order indicator, the BOM character may also indicate which of the several Unicode representations the text is encoded in.

The UTF-8 representation of the BOM is the byte sequence 0xEF, 0xBB, 0xBF.

So the code I wrote is :

Response.Clear();

string fileName = String.Format("Requests_{0}.csv",DateTime.Now.ToString("yyyyMMdd"));

Response.ContentType = "application/csv";

Response.AddHeader("Content-Type", "text/csv");

Response.AddHeader("content-disposition", "filename=" + fileName);

Response.Charset = Encoding.UTF8.WebName;

Response.HeaderEncoding = Encoding.UTF8;

Response.ContentEncoding = Encoding.UTF8;

byte[] bytes = new UTF8Encoding().GetBytes(requestsBuilder.ToString());

List bytesList = new List();

bytesList.Add((Byte)239);

bytesList.Add((Byte)187);

bytesList.Add((Byte)191);

bytesList.AddRange(bytes);

Response.BinaryWrite(bytesList.ToArray());

Response.Flush();

Response.End();

It works more than perfect :)

Hope you enjoy it

Monday, May 23, 2011

PostbackUrl vs NavigateUrl

Difference between PostbackUrl and NavigateUrl

NavigateURL: Submits a 'Get' request to the URL (just like if you had typed it in your browser)

PostBackURL: Submits a 'Post' request containing the information from the form to the specified URL.

Thursday, May 19, 2011

ASP Menu: Above Extra Space on Chrome Browser

STORY

While working on a project, I tried to remove the extra space above an asp menu which is visible on Google Chrome browser ,but not on IE.

I did not find any padding or margins that cause that !!

To find the reason I view the output html source and I find that there were an image above the control !!

<img alt="Skip Navigation Links" src="/WebResource.axd?d=m8HuaqPYLmzk_UowATGkDX-O9aChdqOof5uTooTVtSHcyrMcV8ntTntRgD92n1YaI9VBs2mZBYD1JR0kt803GUDBQtemqa3fUePbK6F-lHA1&t=634224162214550464" width="0" height="0" style="border-width:0px;">

When I removed this image, the space is remove, so what is the reason for it ?!

FIX

There is an easy fix to it by setting the SkipLinkText property of the menu equal to ”” (empty string) will stop the menu control from rendering the accessibility feature and Safari, Chrome and IPhone’s and IPod’s mobile Safari browsers (my headache) will stop adding that 15px on the top of the menu.

Hope it helps

Sunday, May 1, 2011

Jquery Plugin for lens effect image zooming

In this post, I will not write too much ..

Just look at the link below :-

http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

Hope it helps :)

Tuesday, April 12, 2011

How to keep footers at the bottom of the page

To keep footer at the bottom of the page is not that simple !

But after a long try I find it out and I am happy to share it with all of my visitors.

It's not that complicated after you got it. But the main solution is to divide your page into three divs inside a main container one.

so you have four divs :

1. Container

2. Header

3. Main

4. Footer

2,3 and 4 are inside 1

The styles below are required for that behavior, Of course it's better place would be on the master page.

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding-bottom:60px; /* Consider Footer Height */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Footer Height */
}

Modified on 11-07-2011
You can take a look at my next post on this topic

Thursday, March 31, 2011

SQL ... Select all rows after skipping rows count

I need to select all rows after skipping rows count and here is the select statement for that :

SELECT TOP(@COUNT)
[UserId]
,[LinkId]
,[ShareDate]
,[SharedFromUserId]
,[TotalLike]
,[TotalDislike]
FROM
(
SELECT [t0].*, ROW_NUMBER() OVER (ORDER BY [t0].ShareDate DESC) as RowIndex
FROM UserLink AS [t0]
WHERE [t0].UserId IN ((SELECT UserId FROM UserReader WHERE ReaderId = @USERID) UNION (SELECT @USERID))
) AS [t1]
WHERE [t1].RowIndex > @SKIP
ORDER BY [t1].RowIndex

Using LINQ, You can do it with SKIP and TAKE methods which are another solution. But in my case it was not a good idea to do that as it was a part of a long procedure :)

Hope it helps ...

Wednesday, March 23, 2011

Text Truncate with three dots

Most of the time I work with this via extension methods and display only number of characters of a string then adding 3 dots ...

On current project I need to display a text not limited by number of characters but by a specified width ...

I did it by applying a style on div as you see below:

<asp:Label ID="lblTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Label>

</div>

If you need to do it programatically you can see this link, but I did not try it :

http://www.codeproject.com/KB/aspnet/truncate-text-fit-aspnet.aspx

Hope it helps you all,

Inform me if you find any problem or a better way

Tuesday, January 18, 2011

How you grap YouTube thumbnails given its URL

You tube video id
You tube video id can be found either in the direct url like http://www.youtube.com/watch?v=H-BCPymjGI4 ( Tha string after “v=” ) or in the embed code.

Get the thumbnail image of the you tube video
You tube sores all these images under their sub domain IMG.
Copy this url http://img.youtube.com/vi/VIDEO_ID/default.jpg where Video ID is the one you got as seen above.

Hope it helps