Karatas, FERHAT
I would love to change the world, but they won't give me the source code!
X-UA-Compatible
30.8.2009 16:43:40 - Filed under : C# | Asp.net | CSS | AJAX
Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site. Use below statement at top of your page :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
or use it in web.config :
<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="X-UA-Compatible" value="IE=EmulateIE7" />
        </customHeaders>
    </httpProtocol>
</system.webServer>
Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

NOTE: The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content.  Although adding this tag will prevent most display issues, you may also need to update your site to properly detect IE8.

Keywords : Emulate IE7
with 0 comments

Activate current link in master page
14.7.2009 13:21:42 - Filed under : Asp.net | CSS
Step 1 :
<ul>
<li id="<%=current("/Index.aspx,/Contact.aspx") %>">
<a href="/Public/CustomerCare/Index.aspx"><span>Customer</span></a></li>
<li id="<%=current("/Contact.aspx") %>">
<a href="/Public/CustomerCare/Contact.aspx"><span>İletişim</span></a></li>
</ul>

Step 2 :
protected string current(string currentpage)
{
   // activate current link
   string pname = Request.ServerVariables["SCRIPT_NAME"];

   string result = pname.Substring(pname.LastIndexOf("/"), pname.Length - pname.LastIndexOf("/"));

   if (currentpage.IndexOf(result)>=0)
   {
     result = "current";
   }
  
   return result;
}

Keywords : CSS, activate current page, asp.net
with 0 comments

ASP.NET GridView Paging Style
23.6.2009 10:05:07 - Filed under : Asp.net | CSS
Tip 1: Change the style of the selected page or highlight the current page in the GridView Pager control
A simple way is to use CSS as shown below. The <PagerStyle> is set to a css class which modifies the style of the pager:
<head runat="server">
    <title></title>
       <style type="text/css">   
              .cssPager span { background-color:#4f6b72; font-size:18px;}    
        </style>
</head>
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
    <PagerStyle CssClass="cssPager" />
...
The output is as shown below, with the style set for the current page.


Tip 2: How to increase the spacing between the ASP.NET GridView Pager Numbers
One simple way is to use CSS again. Observe how we have set a cssClass to the PagerStyle, similar to what we saw in Tip 1, and are increasing the padding for the <td>:
<head runat="server">
    <title></title>
       <style type="text/css">            
            .cssPager td
            {
                  padding-left: 4px;     
                  padding-right: 4px;     
             }
        </style>
</head>
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
    <PagerStyle CssClass="cssPager" />
...
The output looks similar to the following with the increased space between the page number display.


Keywords : Some Tips and Tricks while Using ASP.NET GridView Paging
with 0 comments

Change Style Sheets On-The-Fly
6.7.2007 12:56:14 - Filed under : CSS
Use this script to allow visitors to change a page style sheet on-the-fly, by clicking on a link in the page. The script works by switching the active style sheets. You can use any number of style sheets, which are automatically detected by the script. Optional alerts are included. Setup is easy and straightforward.

Step 1 : Setting up the Style Sheets...

Make up your style sheets and set the link rel='s up to load them, as shown below. These belong in the <head> of the page.

What you name the style sheet files does not matter (so long as the extension is .css) since the script references them only by a number, not the file name.

We show four different style sheets used; but you can use fewer or more as needed.  The script will automatically detect the number of style sheets in use.

Note the order of the style sheets. The *last* sheet loaded is the one the browser will use initially. One trick to avoid confusion is shown below, where we load the first sheet an additional time at the end of the list.
<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
<link rel="stylesheet" href="style_3.css">
<link rel="stylesheet" href="style_4.css">
<link rel="stylesheet" href="style_5.css">
Step 2 : Setting Up the JavaScript

Insert the follwing script in the <head> of the page, usually right after the link rel='s. Set doAlerts=false; to shut off the alert boxes when changing styles.
<script language="JavaScript">
<!--
var doAlerts=true;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
//-->
</script>
Step 3 : Calling the JavaScript to Change Style Sheets

A simple JavaScript call to the changeSheets() function enables the desired style sheet. We've adjusted the call so you start at 1 for the first sheet, 2 for the second sheet, 3 for the third, etc., in the same order they are listed in your link rel='s above.
<a href="JavaScript:changeSheets(1)">Style One</a>
<a href="JavaScript:changeSheets(2)">Style Two</a>
<a href="JavaScript:changeSheets(3)">Style Three</a>
<a href="JavaScript:changeSheets(4)">Style Four</a>
Keywords : StyleSheet, on-the-fly changing
with 0 comments

Previous | Next
Current Page: 1