HIDE/SHOW Layer HELP!

S

sirjesster

Can somebody please help me with this?

I need some code (html, css, javascript, etc.) that does the exact
same thing as the "more" link on the top of google's homepage.

I need a link that shows hidden content on click and hides the hidden
content when the link is clicked again, or when any other part of the
page is clicked.

This would help so much!

Thanks in advance.
 
T

Thomas 'PointedEars' Lahn

Can somebody please help me with this?
Yes.

I need some code (html, css, javascript, etc.) that does the exact
same thing as the "more" link on the top of google's homepage.
Click to expand...

It might be a good idea to have a look at this exact source code, then.


PointedEars
 
S

sirjesster

I have looked at the source code and I have a dilemma. The javascript
is written in a long string of code. I do believe that it is illegal
to actually cut and paste the code into my site, so I need it to be
rewritten, right? Since I am not javascript savvy, I dont know how to
do any of this. Do you have any suggestions on what I should do?

Thanks
 
T

Thomas 'PointedEars' Lahn

I have looked at the source code and I have a dilemma. The javascript is
written in a long string of code. I do believe that it is illegal to
actually cut and paste the code into my site, so I need it to be
rewritten, right?
Click to expand...

It is very likely that you will need to rewrite it in any case, as Google's
HTML and client-side script code is usually of poor quality. So that is not
a good template anyway.
Since I am not javascript savvy, I dont know how to do any of this. Do
you have any suggestions on what I should do?
Click to expand...

With Firebug it is easy to find out that the relevant HTML fragment in
Firefox is (pretty-printed):

<a onclick="this.blur(); gbar.tg(event); return false"
href="http://www.google.com/intl/en/options/"
<u>more</u><span style="font-size: 11px;">â–¼</span>
Click to expand...

this.blur() is irrelevant here. You can retrieve the relevant script code
in a pretty-printed form with, e.g.:

window.alert(gbar.tg);

Any other method that returns the string representation of the corresponding
Function object would be feasible, too.


Please quote the minimum of what you are replying to, and reply *below*
those trimmed quotes, as you can see here.


PointedEars
 
D

Doug Gunnoe

I need a link that shows hidden content on click and hides the hidden
content when the link is clicked again, or when any other part of the
page is clicked.

This would help so much!

Thanks in advance.
Click to expand...

This will toggle the visibility attribute of a div

<html>
<head>
<title>Hide layer example</title>
<script type="text/javascript">
function toggleLayer(){
hiddenThings = document.getElementById('hiddenStuff');
if(hiddenThings.style.visibility == "hidden")
hiddenThings.style.visibility = "visible";
else{
hiddenThings.style.visibility = "hidden";
}
}
</script>

</head>

<body>

<div><p>This stuff is in a layer that is visible</p>
<p>To toggle the hidden stuff, <a href="javascript:void(0)"
onclick="toggleLayer()">click here</a>.</div>

<div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
is in a hidden layer
<p>See all the suff now.
<p>Stuff
<p>More stuff</div>



</body>

</html>

I hope that helps.
 
S

Stevo

Randy said:
function toggleLayer(){
var theDiv = document.getElementById('myDiv')
theDiv.style.visibility = (theDiv.style.visibility ==
"hidden"?"visible":"hidden")
}
Click to expand...

Wow, I never thought I'd ever get to improve on some Randy Webb code,
but here I am doing it :)

function toggleLayer(targetDiv){
var theDiv = document.getElementById(targetdiv);
if(theDiv)
{
theDiv.style.visibility = (theDiv.style.visibility ==
"hidden"?"visible":"hidden");
}
}

I added missing semi-colons, made it a generic func to handle any layer,
and added defensive coding in case theDiv doesn't exist.
 
E

Evertjan.

Randy Webb wrote on 02 dec 2007 in comp.lang.javascript:
What it still doesn't do is "hide it when any other part of the page is
clicked".
Click to expand...

<body onclick='hideLayer()'>
<button onclick = 'toggleLayer()'
onmouseout = 'nobubble = false;'
Toggle</button>
Click to expand...
<br><br>
<div id='myDiv'>my Div/my Layer</div>
<br><br>
any other part of the page
</body>

<script type='text/javascript'>

var nobubble = false;

function toggleLayer(){
nobubble = true;
var theDiv = document.getElementById('myDiv');
theDiv.style.visibility =
(theDiv.style.visibility == "hidden")
?"visible":"hidden";
};

function hideLayer(){
if (nobubble) return true;
var theDiv = document.getElementById('myDiv');
theDiv.style.visibility = "hidden";
};

</script>
 
S

Stevo

Randy said:
Are you sure the UA supports .getElementById, .style, and .visibility? :)
Click to expand...

Unless the user is using a 1995 Browser then yes ;-)
I won't comment on the semi-colons as I don't want to have the debate
again. They aren't required, and can even cause harm if you don't know
for sure where to put them.
Click to expand...

Same applies to spaces, commas, parentheses and quotes. Why are
semi-colons different? If you don't put them on, then you can forget
about your code ever being minimized. I used to always drop trailing
semi-colons until the day came when I wanted to minimize some code.
 
D

Doug Gunnoe

I won't comment on the semi-colons as I don't want to have the debate
again. They aren't required, and can even cause harm if you don't know
for sure where to put them.
Click to expand...

You're right about the semi-colons. I use them because I think it
looks neater.
 
S

sirjesster

<html>
<head>
<title>Hide layer example</title>
<script type="text/javascript">
function toggleLayer(){
hiddenThings = document.getElementById('hiddenStuff');
if(hiddenThings.style.visibility == "hidden")
hiddenThings.style.visibility = "visible";
else{
hiddenThings.style.visibility = "hidden";
}}

</script>

</head>

<body>

<div><p>This stuff is in a layer that is visible</p>
<p>To toggle the hidden stuff, <a href="javascript:void(0)"
onclick="toggleLayer()">click here</a>.</div>

<div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
is in a hidden layer
<p>See all the suff now.
<p>Stuff
<p>More stuff</div>

</body>

</html>
Click to expand...


This is what I am looking for, thanks. But I also need the div to
"float" over all of the content on the rest of the page. When the link
is clicked, I don't want the rest of the page to be pushed down due to
the link expanding, but, instead, the div should hover over the rest
of the page. Also, is there a way for the div to hide after any other
part of the page is clicked. (i know this was mentioned but I dont
know if anyone did it.)

Thanks everybody who has helped with this.

Also, I tried your code Randy Webb and Stevo, but when I plug it in,
it doesn't work. Am I doing something wrong? Thanks a ton.
 
S

sirjesster

Yes, you are doing something wrong as the code I posted was tested
before posting it.
Click to expand...

I'm very new to javascript, so could you please give me the code
enclosed in the entire html document? I tried plugging your script
into Doug Gunnoe's document but it didn't work, so if its anything
beyond doing that, I dont know how to do it. I am probably doing
something incorrectly, so if you could point out my flaws, it would be
very helpful.
Floating on top? You use position:absolute, give it coordinates, and use
a z-index. All of which is CSS, not JS.
Click to expand...

After I posted my last reply, I realized that it obviously was css.
Thanks for that.

All I have left to do now is make the div hide when the rest of the
document is clicked. You mentioned to see Evertjan's code, but again,
when I input his script into my document, it still doesn't work. It's
probably something I am doing wrong, as i said, i am very new to this.
Any help that you can give me with this issue is very much
appreciated.

Thanks again.
 
D

Doug Gunnoe

All I have left to do now is make the div hide when the rest of the
document is clicked. You mentioned to see Evertjan's code, but again,
when I input his script into my document, it still doesn't work. It's
probably something I am doing wrong, as i said, i am very new to this.
Any help that you can give me with this issue is very much
appreciated.

Thanks again.
Click to expand...

Evertjan used an onclick event in the body element
<body onclick='hideLayer()'>
Click to expand...

Try what I posted but in the body tag put, <body
onclick='toggleLayer()'>

I'm sure Evertjan has a good reason for testing the onmouseout event,
but I'm not sure what it is.
 
S

sirjesster

Try what I posted but in the body tag put, <body
onclick='toggleLayer()'>
Click to expand...

I tried it, but instead of making the div disappear by clicking on any
part of the body of the document, it makes the div only appear and
disappear by clicking on the body of the document. (i.e. when I click
the link "click here" nothing happens, but when I click any other part
of the page, the div appears, and when I click again, it disappears.)

Thanks for the suggestion.
 
D

Doug Gunnoe

I tried it, but instead of making the div disappear by clicking on any
part of the body of the document, it makes the div only appear and
disappear by clicking on the body of the document. (i.e. when I click
the link "click here" nothing happens, but when I click any other part
of the page, the div appears, and when I click again, it disappears.)

Thanks for the suggestion.
Click to expand...

Of course. I'm sorry that was stupid of me. I'll fix it.
 
D

Doug Gunnoe

No problem. I appreciate the help.

I tried it, but instead of making the div disappear by clicking on any
part of the body of the document, it makes the div only appear and
disappear by clicking on the body of the document. (i.e. when I click
Click to expand...

Now I see what Evertjan was doing. The onclcik event bubbles up
through the dom tree, I suppose being passed on to every containing
element until it stops at the root. I should have remembered that
sooner, because I have had that problem a couple of times in the past.
But some days I don't have walking around sense.

Anyway, here's my last attempt. Good luck.

<html>
<head>
<title>Hide layer example</title>
<script type="text/javascript">
var bodyclick;
function toggleLayer(){
bodyclick = false;
hiddenThings = document.getElementById('hiddenStuff');
if(hiddenThings.style.visibility == "hidden")
hiddenThings.style.visibility = "visible";
else
hiddenThings.style.visibility = "hidden";
}
function hideLayer(){
hiddenThings = document.getElementById('hiddenStuff');
if(bodyclick == true)
hiddenThings.style.visibility = "hidden";
else bodyclick = true;
}

</script>

</head>


<body onclick="hideLayer()">


<div><p>This stuff is in a layer that is visible</p>
<p>To toggle the hidden stuff, <a href="javascript:void(0)"
onclick="toggleLayer()">click here</a>.</div>


<div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
is in a hidden layer
<p>See all the suff now.
<p>Stuff
<p>More stuff</div>


</body>
 
S

sirjesster

Anyway, here's my last attempt. Good luck.

<html>
<head>
<title>Hide layer example</title>
<script type="text/javascript">
var bodyclick;
function toggleLayer(){
bodyclick = false;
hiddenThings = document.getElementById('hiddenStuff');
if(hiddenThings.style.visibility == "hidden")
hiddenThings.style.visibility = "visible";
else
hiddenThings.style.visibility = "hidden";}

function hideLayer(){
hiddenThings = document.getElementById('hiddenStuff');
if(bodyclick == true)
hiddenThings.style.visibility = "hidden";
else bodyclick = true;

}

</script>

</head>

<body onclick="hideLayer()">

<div><p>This stuff is in a layer that is visible</p>
<p>To toggle the hidden stuff, <a href="javascript:void(0)"
onclick="toggleLayer()">click here</a>.</div>

<div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
is in a hidden layer
<p>See all the suff now.
<p>Stuff
<p>More stuff</div>

</body>
Click to expand...

It works beautifully.

Thank you so much for the effort you put into this. I couldn't have
done it without you, or the others who helped contribute. It is
greatly appreciated.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

show/hide layer 3
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
Show/Hide HTML Table Columns using SELECT option 1
How can I hide a div using an event listener on multiple checkboxes? 6
How do I hide the modal after 5 seconds? 4
Help with my responsive home page 2
Please Help? 0
Div layer switching 2

Members online

Total: 45 (members: 1, guests: 44)
Robots: 210

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top