5 replies [Last post]
gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 25 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

heya,

I am trying to build a sidebar div that disappears when the width of the browser is less than 800px, but displays when the browser width is wider.

this is o.k., and has tested well in IE and Firefox, but I hit one problem.

when putting this code into a working html document. If there was any Iframe in the html page, the code will not work. I figure it must be throwing off the reading of my browser size and maybe I am not referencing the parent window correctly?

I cannot get around the use of Iframes either. this is a 3rd party issue...

here is the code: (just take out the iframe to make it work correctly)

thanks for any advice! really stuck on this one...

==============

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Div test</title>

<style type="text/css">
#sidebar {
width: 200px;
height: 200px;
background-color: green;
display: none;
}
</style>

</head>

<body onload="checkRightPanel();">

<script language="JavaScript">
<!--
window.onresize= checkRightPanel;

function checkRightPanel() {
userWidth = document.body.clientWidth;
if (userWidth >= 800) {
document.getElementById('sidebar').style.display = 'block';
} else {
document.getElementById('sidebar').style.display = 'none';
}
}
//-->
</script>

<div id="sidebar">
sidebar here
</div>

<!-- iframe start -->
<iframe width=900 height=240 marginwidth=0 marginheight=0
hspace=0 vspace=0 frameborder=0 scrolling=no
bordercolor="#000000"
src="http://www.webmonkey.com">
</iframe>
<!-- iframe end -->

</body>
</html>

Tags:
gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 25 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

size of browser / hide div problems

hmmm. getting closer.

I just changed the body reference to:

userWidth = document.getElementsByTagName('body')[0].clientWidth

which I think references the parent frame element if I am correct.

works in Firefox! but not ol' IE???

man. I hate IE. at least now I know it works though and I must be getting close.

any IE bugs anyone can spot? I am hopeless at cross-browser javascript.

cheers!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

size of browser / hide div problems

Hi gleddy,
Have a look here http://www.csscreator.com/css-forum/ftopic847.html top section, for another method of getting the browser width.

Hope that helps

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 25 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

size of browser / hide div problems

awww man.. thought it did then just found out I am still stuck with the same wierd IE bug that I just can't solve... this has been two days man! Crying

here is my last code.

the purpose is to make the #sidebar div dissappear once the browser width is less than 800px.

all works smoothly until an Iframe is in the browser. (might have to use sometimes...) All good in Firefox, but IE sometime won't work depending on the <iframe> src attribute...

for ex.
http://webmonkey.com => the hide div doesn't work.
http://different.com.au => everything works o.k.

anyone run into this type of thing before or know what the bug problem could be??? I am getting desperate Sad

here is the code: (just change the src for the <iframe> to see what I mean)....

=================

<html>
<head>
<title>Div test</title>

<style type="text/css">
#sidebar {
width: 200px;
height: 200px;
background-color: green;
display: block;
z-index: 1;
}
</style>

</head>

<body onload="checkRightPanel();">

<script language="javascript" type="text/javascript">
<!--
window.onresize= checkRightPanel;

function checkRightPanel() {
userWidth = document.getElementsByTagName('body')[0].clientWidth;
if (userWidth >= 800) {
document.getElementById('sidebar').style.zIndex = '1';
document.getElementById('sidebar').style.display = 'block';
} else {
document.getElementById('sidebar').style.zIndex = '0';
document.getElementById('sidebar').style.display = 'none';
}
}
//-->
</script>

<div id="sidebar">
<!-- AdSpace -->
<iframe src="http://www.different.com.au"></iframe>
<!-- /AdSpace -->
</div>

</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

size of browser / hide div problems

Hi gleddy,
Since the iframe is in the column you are trying to hide, try setting the iframe to display none.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 25 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

size of browser / hide div problems

ah no luck... thanks though tony.

the thing works pretty solid for everything except for this instance of what I have put up... (the iframe with certain urls).

the whole point of it is that I set the div to appear/disappear, and whatever is contained in the div disappears with it.

the only bugger was I noticed the IE bug with the iframe, and with this job they will be using iframes to drop in advertising content (of course :roll: )

might just cross my fingers and hope it actually works in the live environment.