Header Fix

Well don't want to place too much detail on this page, but here's how to fix my site headers.

See Karaoke app for specific details; however, I used Photoshop to build an image that's 13.333 wide x 1.198 height for a perfect fit!

In the ASPX master page, add the user control.

<%@ Register TagPrefix="UserControl" Tag>
<UserControl:HeaderBlocker runat="server" />

---------------------------------

HeaderBlocker.ascx contains:

<link href="../css/style-header-blocker.css" rel="stylesheet" type="text/css" />   
<script src="../js/header-fix.js" type="text/javascript"></script>
<script type="text/javascript">
    HeaderFix('images/header-1280x1024.jpg');
</script>

-----------------------------------
style-header-blocker.css contains:

#heading {
    margin: auto;
    text-align: left;
    padding-left: 0px;
    position: absolute;
    padding-top: 0px;
    /*z-index:-1; sends to back*/
}

h1 {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0; padding: 0;
}

------------------------------------
header-fix.js contains:
       
       function checkResolution() {
            var width = screen.width;
            var height = screen.height;
            var screenResolution;
            var screenNotStandard = false;
           
            if (width == 1280 && height == 1024) {
                screenResolution = "High";
            }
            else if (width == 1024 && height == 768) {
                screenResolution = "Med";
            }
            else if (width == 800 && height == 600) {
                screenResolution = "Low";
            }
            else {
                screenNotStandard = true;
            }

            if (screenNotStandard) {
                if (width > 1200) {
                    screenResolution = "SuperHigh";
                }
                else if (width < 1200 && width > 1000) {
                    screenResolution = "High";
                }
                else if (width < 1200 && width > 1000) {
                    screenResolution = "Med";
                }
                else if (width < 1000) {
                    screenResolution = "Low";
                }
            }

            return screenResolution;
        }

        function HeaderFix(inImageSource)
        {
            var screenRes = checkResolution();

            if (screenRes == "High") {
                document.write("<h1 id='heading'><img src='"+inImageSource+"' /></h1>");
            }
            else if (screenRes == "Med") {
                document.write("<h1 id='heading'><img src='"+inImageSource+"' /></h1>");
            }
            else if (screenRes == "Low") {
                document.write("<h1 id='heading'><img src='"+inImageSource+"' /></h1>");
            }
            else {
                document.write("<h1 id='heading'><div id='headingForLargePic');
            }       
        }
   
That's it...worked! I'm using this approach with two ASP.NET 3.5 sites that I built. SWEET!



 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments

Leave a comment

Submitted comments are subject to moderation before being displayed.

 Enter the above security code (required)

 Name (required)

 Email (will not be published) (required)

Your comment is 0 characters limited to 3000 characters.