Solved

scriptlet hide everything but div

Posted on 2010-09-12
7
329 Views
Last Modified: 2012-05-10
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
Comment
Question by:jackjohnson44
7 Comments
 
LVL 5

Expert Comment

by:roxviper
Comment Utility
0
 
LVL 14

Accepted Solution

by:
sam2912 earned 500 total points
Comment Utility
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
 
LVL 22

Expert Comment

by:kadaba
Comment Utility
<a href="#" onclick="showDiv('pageContainer');">
should be
<a href="#" onclick="showDiv('pageContainer');return false;">

and also please check for any script errors.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 14

Expert Comment

by:sam2912
Comment Utility
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
 
LVL 22

Expert Comment

by:kadaba
Comment Utility
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
 

Author Closing Comment

by:jackjohnson44
Comment Utility
cc
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now