Hide Other Layers on clicking link 1

[kylebellamy]

I am playing with layers and have no problem with creating the DIV to be hidden and getting them to show up on a link click.

Here's the code I'm using:

function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}

The thing is that I have each layer set to have a translucent background at 58% black so when multiple links are clicked, you can see the DIVs overlapping.

How do I modify the code above to check for and hide any other layers when a link is clicked to show a new layer? I'm going to use this as the main way I display data for the site so they need to be hidden. So if the Artwork layer is showing and the Contact layer link is clicked, the Artwork layer is hidden and the Contact one shows.

Thanks in advance!

http://www.kb-design-studios.com

 

[grtammi]

If it was me looking at this, I would use JQuery, and over-ride the click event for the divs with a particular class name.

For example, your Artwork and Contact Layers would be assigned a classname of "transparent" (or something like that), then a JQuery snippet would hide all the divs with a classname of "transparent", and then show only the one that was clicked on. You would also have to add a classname (or other identifier) to the links that are targeting specific elements.

Does that sound like something you're trying to do?

$("a.clickable_link").click(function() {
  $(".transparent").hide() ;

  // determine what link was clicked on and show it
  // in this example, I will assume each link has a 
  // unique id, which could be used in conjunction with
  // the id of the div in question
  $("#layer_" + this.id).show() ;

  // cancel default click event 
  return false ;
});

That's an example ... and not tested.

Greg

 

[kylebellamy]

Yes, that's what I'm attempting. Problem is, I don't have the slightest what JQuery is or how to use it. lol

And, yes, using the class as you mentioned:

<div 
class="semitransparent"
   id="uniquename" 
   style="display:none; 
      position:absolute; 
      left:177px; 
      top:185px;
	  width:600px;
	  height:400px; 
      padding: 5px;">
<font color="#FFFFFF">Home Content Here</font>
</div>

Can you send me somewhere which will give me the easy basics on JQuery? Seems like something I should learn.

http://www.kb-design-studios.com

 

[kylebellamy]

Never mind on where to learn, I'll answer my own on that one... Google it! lol

http://www.kb-design-studios.com

 

[kylebellamy]

Oh, hey, that is good! Much simpler than the the full on Javascript. I can see why JQuery is so popular. Thanks on multiple levels for the help and the intro to this style.

http://www.kb-design-studios.com

 

[grtammi]

It's nice isn't it?

I use the following resources:

http://docs.jquery.com

http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html

http://tutorialblog.org/8-fantastic-jquery-tutorials-for-designers/

You'll find a lot of ways to do the same thing ... pick the one you can best understand.

Greg