Here We Go Again: June 2011

Friday, June 24, 2011

Corner Banner or Rotate text with CSS

To rotate text in all browsers is not easy with simple CSS and HTML with out using image. But it's do able and it's really simple. Let's have a text at -45 degree in left top corner of a web page. That will look something like in the image.

First we need simple HTML for the text so let's get that out of the way.

    <!DOCTYPE html>
    <html>
    <head>
    <link href="rotate.css" rel="stylesheet" />
    

    </head>
    <body>
        <span id="corner-banner">
            <em>beta</em>
        </span>
    </body>
    </html>

Then we need some CSS for it. save this as rotate.css.

    #corner-banner {
        position: absolute;
        left: -65px;
        top: 25px;
        display: block;
        width: 200px;
        background: #333; /* old browsers */
        background: -moz-linear-gradient(top, #333 0%, #000 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#000)); /* webkit */
        text-align:center;
        font-size:11px;
        line-height:13px;
        padding:3px 3px 4px 3px;
        text-shadow: #000 1px 1px 0;

        -moz-transform: rotate(-45deg); /* FF3.5+ */
        -o-transform: rotate(-45deg); /* Opera 10.5 */
        -webkit-transform: rotate(-45deg); /* Saf3.1+, Chrome */
        transform: rotate(-45deg); /* CSS3 (for when it gets supported) */


        box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
        -moz-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
        -webkit-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
        -o-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
    }
    #corner-banner em {letter-spacing:1px;font-style:normal;font-size:18px !important;color:#fff;text-transform:uppercase;line-height:12px;display:block;}

This will show the banner in the FF, Safari, Opera and Chrome with out any problem but what we do for IE. For IE we will put in this style. save this as ie.css

    #corner-banner {
        text-align:center;
        left: -40px;
        top: -40px;
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
        }

Now this is for only -45 degree angle to understand how the text rotation work in IE you need to know what is M11, M12, M21 and M22. Well they are the value for the angle in our case it is -45 degree value of cos theta and sign theta. You can get them with your scientific calculator or use the web Scientific Calculator. But how do we know what value to put in for M11, M12, M21 and M22.
well here you go.

M11 = COS THETA,
M12 = SIN THETA,
M21 = -SIN THETA,
M22 = COS THETA

above order will give us -45 degree angel but let's say if we want 45 degree angle then we will use this.

M11 = COS THETA,
M12 = -SIN THETA,
M21 = SIN THETA,
M22 = COS THETA

Only we need to change the M12 and M21 value to +/-.

Hope this helped with rotating text in IE. NO NEED TO USE IMAGES

Thursday, June 23, 2011

Deleting Duplicates from MS SQL table

To delete duplicates form a table is very easy. Before you delete any thing from the table make sure to back up the DB or the table before running this command. There is the SQL statement that will do the trick.

DELETE
FROM [table_name]
WHERE [Column_ID] NOT IN
(
SELECT MAX([Column_ID])
FROM [table_name]
GROUP BY [Column name])

Where [Column name] is the column that you think have duplicate value. Give it a shot!!

Check when the MS SQL Store Procedure were updated

To check the MS SQL Store Procedures updated date and time use this SQL statement.

SELECT name, create_date, modify_date
FROM sys.objects
WHERE type = 'P'
ORDER BY modify_date DESC

Some time when you are developing. It is hard to keep track of the SP when they got updated or not this way you will know which SP to move to the live server from your development server.

Wednesday, June 22, 2011

WebResource.axd and ScriptResource.axd error

If you are getting the WebResource.axd and ScriptResource.axd Java script error on your asp.net page and you are using the IIS 7.0 with IIS URL rewrite.

There is a very good chance that you have a URL rewrite rule that Enforce lowercase URLs. If that is the case then make sure that you a condition in there that will not force the WebResource.axd and ScripResource.axd to lowercase. Once you add the Rule form the IIS GUI. It will look some thing like this in the web.config file.

                <rule name="LowerCaseRule1" stopProcessing="true">
                    <match url="[A-Z]" ignoreCase="false" />
                    <action type="Redirect" url="{ToLower:{URL}}" />
                    <conditions>
                        <add input="{URL}" pattern="WebResource.axd" negate="true" />
                        <add input="{URL}" pattern="ScriptResource.axd" negate="true" />
                    </conditions>
                </rule>

The Other reason could be that you have a page that looks something like this http://www.url.com/page.aspx?id=1 and have a rule that will rewrite the URL to http://www.url.com/1 that will give you the WebResource.axd and ScriptResource.axd error. Make sure that when you rewrite the URL include the page name too. some thing like this http://www.url.com/page/1. That will fix the issue too.