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!
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!


Cool,
Thanks for sharing,
Keep up the good work
Reply to this