Etreck :: Show Hide Layers

Topics:
» ASP
» HTML
» Stylesheets
» JavaScript
» PHP
» Flash
» More...

Site:
» Forum
» About

Show Hide Layers

In this article I'll be looking at what you can do in DHTML and Javascript functions.

Why use dynamic laters?
The basic syntax
Show hide layer function
A quick example

Why use dynamic layers?

Dynamic layers can be used to do several praction functions:

Show/hide adverts
Add extra content
use tooltips
Add dymanic content

a) adverts

Using dynamic adverts allows you to fill the screen with an advert for a short time or inserting the advert into the middle of the page without having tro disurb content. This allows you to give the user the option to hide the advert as well so it does not intrude.

b) adding extra content

Visitors with different screen sizes cause no end of problems, so making the decision of where to draw the line is a hard one. 640 pixels? 700 pixels? 800 pixels?

The problem is thayt if you make your side too wide it won't fin on some users screens whereas if you make it too small the content will be all squashed up and won't fill the screen.

The solution. Extra content added on in a layer. This can be done using the syntax:

If client.width > 800 Then

show layer

Else

hide layer

End If

MSN use this to add their channels menu onto the edge of the page if the browser window is wide enough.

c) using tooltips

Tooltips can be easily added to images using the ALT tag which provides text for the image if it does not load of a user has disabled them. However if you want to add a tooltop to ordinary text (links) or if you want to enhance your tooltips with formated text, images, etc, you can do this using a layer.

d) adding dynamic content

Dynamic content means you can add pages on top of each other using an ifrane. For instance ou could have a layer pop up with an iframe linking to a help page on your site.

The basic syntax

When dynamically showing or hiding layers it is slightly more complex than programing in languages such as Visual Basic ("objecct. show"). However it can be donein javascript using:

document.object.visible = 'true or false'

You can add this directly into a link though the easiest way I find is to embedd it in a fuction:

This script presumes you have a layer called layer1. To name your layer simply add the following to the tag:

name="layer1" ID="layer1"

Yuo can then create a link to activate this fuction:

<a href="javascript:hidelayer()">Hide My Layer</a>

Show Hide Layer Function

The above example works fine but you need a different link and function for showing and hiding the layer. It may not be cross browser compatable either but we will worry about that in a later article. But its easier to have one function to do both so you only need one link and so you can have it done automatically in case you want to. For the situation you could use this script:

// layer1 is visible
// so hide it
document.layer1.style.visible = 'False'

else

// layer1 is hidden
// so show it
document.layer1.style.visible = 'True'

end if
}
</script>

Now all you need to do is add the following link somehwere into your page and everytime you click it, it will auotmatically show or hide your layer (make sure your layer is named layer1).

<a href="javascript:showhidelayer()">Show/hide My Layer</a>

A quick example

Here's an example we used on one of M World's old sites where it detects how wide the browser is and if its wide enough it writes in another column in a table. All you need to do is modify this so that it adds in a layer if the browser is wide enough.

The easiest way to do this is to write you code in HTML and then convert it into javascript using a tool such as HTML to AnyCode.

It also reloads the page if a user resizes the browser to make sure it fits on but you can remove this function if you dont want this to happen by removing the second script tag at the bottom.

hidestuff();