Classmates Expandable Banner V

Classmates Expandable Banner V.1 Brief

Overview

The purpose of this document is too give a brief overview of the functionality and coding that makes the expandable banner mechanism function.

The JavaScript Code

Find The Object and then Show or Hide the Layers

The Show-Hide Layers action shows, hides, or restores the default visibility of one or more layers in all 4.x browsers. This is done with the JavaScript function MM_findObj and MM_showHideLayers which are shown below.

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&d.all) x=d.all[n]; for (i=0;!x&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&d.layers&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x & d.getElementById) x=d.getElementById(n); return x;

}

function MM_showHideLayers() { //v3.0 mozilla fix

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v;}

obj.visibility=v;

if(!document.all & document.getElementById){obj.display=(v=='hidden')?'none':'inline'}

}}

Fixing redraw problem for window resizing in NS 4 browsers.

A known problem with Netscape and layers is when a user resizes their browser window the content inside the div tags disappears. This function will redraw the layer after the browser window is resized.

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

How the imagery is placed on the web page.

For this explanation we will be using the 468 x 60 banner at the top of the classmates UI as a reference in the explanation of how all this works.

Placing the banner on the web page which the user sees

The banner is located on the classmates web page inside the layer tags “<div> </div>”. Location of the banner layer is dictated by the preferences “left:” and “top:” and the dimensions are controlled by the “width:” and “height:” preferences. The banner then is placed inside the div tags inheriting the location from the div. By changing the preferences the banner layer can be placed anywhere on the page without effecting how the JavaScript works.

Example Code:

</div>

Placing the dropdown panels on the page that users do not see

The expandable part of the expandable banner starts out invisible/hidden on the page. These are located in identical positions on the web page right up against the banner that is the trigger mechanism for the expansion. These hidden layers can contain either an image only, HTML utilizing the table tag for width and height or a Flash file (except NS 6.x). All these options need to be sized exactly the same size as the DIV width and height.

Example Code:

Either HTML, an image or Flash can be placed inside these div tags.

</div>

How the code is accessed inside the HTML.

Hooking up the Banner to trigger the expansion of panel 1,2 and 3

In order for the banner to reference the JavaScript functions we give it an image map with 4 areas assigned to it. Each area either expands or collapses panel 1, 2 or 3 (shown above).

Area 1 coordinates and functionality

On a 468 x 60 banner area 1 is an image map polygon with the coordinates of ="0,60,0,0,468,0,468,60,457,60,457,33,141,33,141,60" So anytime a user puts there cursor inside these coordinates the below will happen for area 1

If the user moves the cursor over the banner it will trigger an onMouseOver event to expand panel 1 and to hide panel 2 and 3. This is accomplished by telling the MM_showHideLayers function to “show” div ID expand1.

If the user moves the curser off the banner it will trigger an onMouseOut event that will hide all layers listed after the MM_showHideLayers function.

Area 2 coordinates and functionality

On a 468 x 60 banner area 2 is an image map rectangle with the coordinates of “142,33,248,60"

If the user moves the cursor inside area 2 it will trigger an onMouseOver event to expand panel 1 and to hide panel 2 and 3.

onMouseOver="MM_showHideLayers('expand1','','show','expand2','','hide','expand3','','hide')">

Area 3 coordinates and functionality

On a 468 x 60 banner area 3 is an image map rectangle with the coordinates of "352,33,456,60"

If the user moves the cursor inside area 3 it will trigger an onMouseOver event to expand panel 3 and to hide panel 1 and 2.

onMouseOver="MM_showHideLayers('expand1','','hide','expand2','','hide','expand3','','show'))

Hooking up Panels 1 thru 3 to stay visible on mouse over or disappear on mouse out.

Since the user will need to mouse out of the banner to get to the dropdown panel and the banner is setup to make the panel disappear if they mouse out we need to give the expandable panels mouse over and mouse out code in order to control the display when the focus of the cursor is over the panel.

When the curser is inside the panel (in this example panel 1 with the ID of expand 1) it maintains visibility with the ‘show’ attribute inside the showHideLayers command which itself is inside the div tag.

When the curser is moved outside the panel the this mouse out code is triggered

Which will cause the expand 1 layer to disappear in IE browsers and NS 6.x. However in Netscape 4.x browser the onMouseOut event is not part of the layer object so we need to reference the functionality with a <script</script> tag inside the div tags like so;

<div>

<!-- //Netscape 4.x fix to hide panel on mouseout

function onMouseOut() {MM_showHideLayers('expand1','','hide');

}

//-->

</SCRIPT>

</div>

Expand 2 and 3 panels are set up the same way with the difference only being there div ID attribute is changed.

('expand2','','show') and ('expand2','','hide')

Known Problems

Netscape 6.x

Netscape 6 with it’s Gecko rendering engine has some know problems that have been posted on it’s bug list ( It’s common knowledge that its rendering engine (Gecko) is terribly broken when compared with every other major
browser currently shipping (MSIE5x-Mac, MSIE6x-PC; Opera6; and even NN4x).

They involve:
DHTML animation (moving layers)
DHTML Menus (hiding and showing layers)
The above two issues are triggered by an engine flaw and the inability
to redraw elements... especially on pages that contain background images
of any kind, and/or embedded images of more than 4-bit depth.

Even though this code does display images, HTML and Flash in a drop down panel it is terribly slow. The other caveat is with Flash when you mouse out the flash will not disappear even though the mechanism works with an image or HTML code.

Introducing the Expandable Banner

This mechanism without any other stuff in it is roughly 4 k in size.

<html>

<head>

<title>468 x 60 Expandable Banner Demo Version 6</title>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&d.all) x=d.all[n]; for (i=0;!x&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&d.layers&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x & d.getElementById) x=d.getElementById(n); return x;

}

function MM_showHideLayers() { //v3.0 mozilla fix

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v;}

obj.visibility=v;

if(!document.all & document.getElementById){obj.display=(v=='hidden')?'none':'inline'}

}}

//-->

</script>

</head>

</a>

</div>

<!-- //Netscape 4.x fix to hide panel on mouseout

function onMouseOut() {MM_showHideLayers('expand1','','hide');

}

//-->

</SCRIPT>

</div>

<!-- //Netscape 4.x fix to hide panel on mouseout

function onMouseOut() {MM_showHideLayers('expand2','','hide');

}

//-->

</SCRIPT>

</div>

<!-- //Netscape 4.x fix to hide panel on mouseout

function onMouseOut() {MM_showHideLayers('expand3','','hide');

}

//-->

</SCRIPT>

</div>

</map>

</body>

</html>