• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 355
  • Last Modified:

scriptlet hide everything but div

I want to have a bookmark so when I click on it, everything hides except what is in the div with the id pageContainer.  This is for a news site.  Basically I want to hide the surrounding area except the main body area.
0
jackjohnson44
Asked:
jackjohnson44
1 Solution
 
roxviperCommented:
0
 
Samuel LiewCommented:
Working example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
   font-size: 18px;
   font-family: Calibri, Arial, Verdana;
}
#pageContainer {
   border: 1px solid red;
   padding: 10px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function showDiv(divId) {
	var all = document.getElementsByTagName("*");
	for(i=0;i<all.length;i++) {
			all[i].style.display = "none";
	}
	var elem = document.getElementById(divId);
	do { elem.style.display = "block"; } while(elem = elem.parentNode);
}
//]]>
</script>
</head>

<body>
<h1>Heading</h1>
<p>Some Text</p>
<p>Some Text</p>
<div id="pageContainer">Text in div pageContainer</div>
<p><a href="#" onclick="showDiv('pageContainer');">This bookmark hides display of everything other than pageContainer</a></p>
<p>Some Text</p>
<p>Some Text</p>
</body>
</html>

Open in new window

0
 
kadabaCommented:
<a href="#" onclick="showDiv('pageContainer');">
should be
<a href="#" onclick="showDiv('pageContainer');return false;">

and also please check for any script errors.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Samuel LiewCommented:
There's nothing wrong with that, but since you insist, here's the updated code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
   font-size: 18px;
   font-family: Calibri, Arial, Verdana;
}
#pageContainer {
   border: 1px solid red;
   padding: 10px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function showDiv(divId) {
        var all = document.getElementsByTagName("*");
        for(i=0;i<all.length;i++) {
                        all[i].style.display = "none";
        }
        var elem = document.getElementById(divId);
        do { elem.style.display = "block"; } while(elem = elem.parentNode);
}
//]]>
</script>
</head>

<body>
<h1>Heading</h1>
<p>Some Text</p>
<p>Some Text</p>
<div id="pageContainer">Text in div pageContainer</div>
<p><a href="#" onclick="showDiv('pageContainer'); return false;">This bookmark hides display of everything other than pageContainer</a></p>
<p>Some Text</p>
<p>Some Text</p>
</body>
</html>

Open in new window

0
 
kadabaCommented:
sam,
No offense.
I always use return false for it not to evaluate to href which is the default behavior.
Your script still has errors, at least I got it in IE 8 and FF.
So pointed them out.

No points for me, glad to help a lending hand.

Best,
kadaba
0
 
jackjohnson44Author Commented:
cc
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now