homepage Welcome to WebmasterWorld Guest from 107.22.127.92
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library : Charter : Moderators: whoisgregg

JavaScript and AJAX Forum

    
Adjust Margins Dynamically
Automatically shift webpage margins to adjust for 1px off-center
j2trumpet




msg:3880528		 2:18 am on Mar 28, 2009 (gmt 0)

I've noticed that when the body has a centered background, the webpage is centered within the body, and the width of the viewing area is an odd number of pixels, the browser will shift the webpage over a pixel, often causing the page to be off-center from the background. I'm trying to write a script that 1) detects which browser the viewer is using, 2) detects the width of the viewing area and determines if it's even or odd, and 3) changes the CSS margin-left attribute to move the webpage back to be center with the background. The tricky part is that each browser handles this situation differently. I think my logic and scripting make sense, but it's not working. Could someone please help me? All my code is below.

/*CSS*/

#wrapper {
width: 900px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
position: relative;
}

/*JAVASCRIPT*/

/*DETERMINE BROWSER*/

var browser = navigator.appName;
var b_version = navigator.appVersion;
var aol = b_version.search("America Online Browser");
var safari = b_version.search("Safari");

if ((browser == "Microsoft Internet Explorer") && (aol < 0)) {
var browser = "ie";
}
else if ((browser == "Microsoft Internet Explorer") && (aol > 0)) {
var browser = "aol";
}
else if (browser == "Opera") {
var browser = "opera";
}
else if ((browser == "Netscape") && (safari < 0)) {
var browser = "firefox";
}
else if ((browser == "Netscape") && (safari > 0)) {
var browser = "safari";
}

/*DETERMINE WINDOW WIDTH*/

function findLivePageWidth() {
if (window.innerWidth) {
return window.innerWidth;
}
if (document.body.clientWidth) {
return document.body.clientWidth;
}
return (null);
}

var livePageWidth = findLivePageWidth();
var test = livePageWidth % 2;

if (test == 1) {
var width = "odd";
}
else {
var width = "even";
}

/*ADJUST ALIGNMENT*/

var objectID = "wrapper";
var CSSProp = "margin-left";
var newVal = (((livePageWidth / 2) - 450) + 1) + "px";

function marginAdj(objectID, CSSProp, newVal) {
if ((browser == "ie" ¦¦ "aol" ¦¦ "safari") && (width == "odd")) {
var object = document.getElementById(objectID);
object.style[CSSProp] = newVal;
}
}

/*HTML*/

<body onload="marginAdj(objectID, CSSProp, newVal);">


 

daveVk




msg:3880574		 5:01 am on Mar 28, 2009 (gmt 0)

All the global vars will calculate prior to onload, to early for document properties.

move this block inside marginAdj that becomes marginAdj()

var livePageWidth = findLivePageWidth();
var test = livePageWidth % 2;
if (test == 1) {
var width = "odd";
}
else {
var width = "even";
}
/*ADJUST ALIGNMENT*/
var objectID = "wrapper";
var CSSProp = "margin-left";
var newVal = (((livePageWidth / 2) - 450) + 1) + "px";

rocknbil




msg:3880713		 3:04 pm on Mar 28, 2009 (gmt 0)

The tricky part is that each browser handles this situation differently.

And will continue to do so as new browsers come out, almost monthly. To repeat the downtrodden mantra, if Javascript is disabled this won't work anyway. Rather than duct taping it with a solution that is going to be a thorn in your site from this day forward, are you absolutely positive sure you can't solve it with a change in your layout methods?

Valid doctype [webmasterworld.com]?
Pages validate [validator.w3.org], the combination of these two causing it to render in standards mode as opposed to quirks mode?

j2trumpet




msg:3880825		 7:12 pm on Mar 28, 2009 (gmt 0)

I have my background repeating vertically in the body tag from the very top to the very bottom. If I move it into the wrapper div tag, it'll only extend as far as the division. If the division doesn't extend to the very bottom, the background will come to an abrupt end, making it look bad. I tried writing another script that would change the wrapper div height to always be at least as long as the viewing area, but couldn't get it to work. I'm open to suggestions.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved