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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript to hide scrollbars in IE7

Status
Not open for further replies.
MrMiyagi

MrMiyagi

Technical User
Feb 11, 2009
43
FI
Hello,

I am trying to hide the scrollbars on my site. For all browsers except ie7 and ie6, this works:

function hidescrollbars() {
document.body.setStyle({ position:"fixed" });
document.body.setStyle({ overflow:"hidden" });
}

function showscrollbars() {
document.body.setStyle({ position:"" });
document.body.setStyle({ overflow:"visible" });
}

I did manage to hide the scrollbars with ie7 by adding an attribute scroll = no to the body tag like this:

<body scroll="no">

The problem is that i can not input this inside my javascript function. I have tried:

document.body.scroll = no;
document.(body ID).scroll = no;

prototype:
document.body.writeAttribute('scroll', 'no');

How can I add and remove this scroll = no attribute inside my body tag without giving the body tag an id?












 
Sort by date Sort by votes
Assuming you only have one body tag (I know, I know, but I've seen people do some crazy things out there)...here is one way:

Tested in IE 7...

Code: 
<html>
	<head>
	<script language="javascript">
	window.onload = function () {
		// this will hide the scroll bar
		document.getElementsByTagName("body")[0].style.overflow = "hidden";
	}
	</script>
</head>
<body>

</body>
</html>

</body>
</html>
[/code]

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
 
Upvote 0 Downvote
Thankyou vicvirk,

Unfortunately I could not get this working in ie7...other browsers work. The difference to your example is that i cant use onload because I need onclick event handlers to hide the scrollbars and make some divs visible at the sametime. I tried like this:


<html>
<head>
<script src="prototype/prototype-1.6.0.3.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript">
function showpopup(){
$('popup').show()
$('curtain').show()
$('logo').hide()
$('flash').toggleClassName('flash2');
document.getElementsByTagName("body")[0].style.overflow = "hidden";
}

function hidepopup(){
$('popup').hide()
$('curtain').hide()
$('logo').show()
$('flash').removeClassName('flash2');
$('flash').toggleClassName('flash');
document.getElementsByTagName("body")[0].style.overflow = "visible";
}

</script>
</head>

<body (different ids on different pages)>

<a href="#" onclick="showpopup();">Show</a>
<div id="curtain"> </div>
<div id="popup"> </div>

</body>

</html>


If I only could find a way to add this body attribute with jscript <body scroll="no"> ..
 
Upvote 0 Downvote
Code: 
document.getElementsByTagName("body")[0].scroll = "no";





--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
 
Upvote 0 Downvote
Thanks,

But still could not get IE7 to hide the scrollbars...dont know what would help. It has to be something that can be executed onclick...
 
Upvote 0 Downvote
put the original code I posted into a function
Code: 
<script language="javascript">
	function hideScrollBars() {
		document.getElementsByTagName("body")[0].style.overflow = "hidden";
	}
</script>
<input type="button" value="hide scrollbars" onclick="hideScrollBars();" />

I'm using IE 7 and it works, I also tried it in Chome and FF and it works there too...

If it doesn't work for you, post your implemented code and we can go from there...

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
 
Upvote 0 Downvote
I could not get this working with ie7. I am making popup divs that are hidden and shown with $('popup').hide() and $('popup').show(). The same function should also hide the scrollbars when shown. Simplified code is shown in my previous message.

By the way if I have this type of function to hide the popup div:

function hidepopup(){
$('popup').hide()
$('curtain').hide()
}

What is the best place in html to run the function? I have a problem when page is loading because the popup div shows for a second before the function hides it... ?


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
327
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
747
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
170
Daniel K
Daniel K
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
367
xwb
xwb
BobMe23
What new features have appeared in the latest versions of Java?
Replies
1
Views
48
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top