Cropping a page for use in frame

kosmokramer · Apr 14, 2004

Hey everyone. I am trying to make a website that will use frames. The navigation will be in buttons on the left hand side, and will remain a static page while one on the right changes. Alright, so far that is simple enough. The problem is that I want the background image in the page on the right (the changing one) to be centered as if there were not a frame on the left of it pushing it over.

True, I could crop the background image to the width of the navigation bar, use the small cropped part for the background of the navigation bar and use the rest for the background of the main content page, but I would rather not do that.

Humm...now that I think about it, it sounds like a JavaScript problem. I'll ask in that forum, but if anyone has any suggestions here, I'd love to hear them!!

Vragabond · Apr 15, 2004

I personaly can't think why the described method of using two different background pictures cropped would be bad. Still, you could use the css in the right pane to position your background:

Code:

<style type="text/css">
body {
 background: url(myback.jpg) [b][COLOR=red]-200px 0px[/color][/b] no-repeat;
}
</style>

Hope it helps.

BillyRayPreachersSon · Apr 15, 2004

Your crossposting will only serve to confuse people who may be reading onloy one of the forums. I suggest you stick to one forum or the other.

I've answered your query here: thread216-821648

Dan

LFI · Apr 15, 2004

It took a little trial-and-error, but I got this to work how I think you want it in IE6:

framesetPage.html

Code:

<html>
<frameset rows='100%' cols='20%,80%'>
<frame name='navigation' src='navigation.html' />
<frame name='body' src='body.html' />
</frameset>
</html>

navigation.html

Code:

<html>
<body background='Nic1.bmp'>
I am the navigation window.
</body>
<html>

body.html

Code:

<html>
<head>
<script>
function setBackground()
{
 document.body.background = parent.navigation.document.body.background;
 var shiftLeft = parent.navigation.document.body.offsetWidth;
 document.body.style.backgroundPosition = 'top ' + (-1*shiftLeft);
}
</script>
</head>
<body onload='setBackground()' onresize='setBackground()'>
I am the body window.
</body>
<html>

This has the effect of making it look like the two frames share the same background image without having to crop anything. The background image only has to be defined in the navigation bar. If you resize the window, the image adjusts accordingly.

Difficulty might arise if the left frame doesn't finish loading before the right frame attempts to determine its offsetWidth. This may not be a problem (since the offsetWidth is not a property of the CONTENTS of navigation.html, but of the frame size), but if it is a problem, there are ways to combat that as well. Post separately if that's an issue.

For possibly more-error-resistance, define the background image in the frameset:

Code:

<html>
<script>
var backgroundImage = "Nic1.bmp";
</script>
<frameset rows='100%' cols='20%,80%'>
<frame name='navigation' src='navigation.html' />
<frame name='body' src='body.html' />
</frameset>
</html>

Then have both frames access the parent for the image:

navigation.html

Code:

<html>
<head>
<script>
function setBackground()
{
 document.body.background = parent.backgroundImage;
}
</script>
</head>
<body onload='setBackground();'>
I am the navigation window.
</body>
<html>

body.html

Code:

<html>
<head>
<script>
function setBackground()
{
 document.body.background = parent.backgroundImage;
 var shiftLeft = parent.navigation.document.body.offsetWidth;
 document.body.style.backgroundPosition = 'top ' + (-1*shiftLeft);
}
</script>
</head>
<body onload='setBackground()' onresize='setBackground()'>
I am the body window.
</body>
<html>

Good luck!

--Dave

kosmokramer · Apr 15, 2004

Thanks for the help everyone. I have not gotten to try them out yet, but when I get back from work today, I'll see how they work.

Vragabond, the reason I didn't want to crop the image and do it that way is because in the main content page, I have a client side script that determines the screen size, and sets the background accordingly (largeBackground.jpg if screensize is 1200 high, background.jpg otherwise). I didn't want to mess with trying to figure out how the size of the navigation frame would work with the size of the background. True, I could use percentages, but I would like to keep the navigation menu the same size regardless of the screen size.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Cropping a page for use in frame

kosmokramer

Programmer

Vragabond

Programmer

BillyRayPreachersSon

Programmer

LFI

Programmer

kosmokramer

Programmer

Similar threads

Part and Inventory Search

Sponsor