JavaScript menu and ListBox control problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Nash - 15 Jul 2003 14:42 GMT

I have this page with JavaScript menu and some ListBox controls. The
problem is when menus are open, they should show above those list boxes, but
they are allways beneath it. Guess it's a problem with HTML SELECT control
that is ASP.NET ListBox rendered to, but I can't find a way out of this
problem.
Anyone solved this problem?

Reply to this Message

bruce barker - 15 Jul 2003 18:05 GMT

with IE, the <select> is in a z-order above all html. there are two common
solutions:

1) when the flyout menu rendered, the select is marked as hidden.
2) render the menu in a iframe. you can get the iframe's z-order to be in
front of the select. you must size and position the iframe to be the same
size and location of the menu, as it will hide the underlying html. hint: if
the browser is not IE, use a div to keep the code mostly compatiable.

-- bruce (sqlwork.com)

> I have this page with JavaScript menu and some ListBox controls. The
> problem is when menus are open, they should show above those list boxes, but
> they are allways beneath it. Guess it's a problem with HTML SELECT control
> that is ASP.NET ListBox rendered to, but I can't find a way out of this
> problem.
> Anyone solved this problem?

Reply to this Message

Nash - 16 Jul 2003 08:59 GMT

Hi Bruce,
thanks for the reply.
However, there is a problem. Is there some setting on the IFrame that I have
to set for it to show JavaScript menu? I made html file that contains this
menu, but when it is put in the IFrame, it doesn't show at all.

> with IE, the <select> is in a z-order above all html. there are two common
> solutions:
[quoted text clipped - 14 lines]
> > problem.
> > Anyone solved this problem?

Reply to this Message

bruce barker - 16 Jul 2003 20:46 GMT

no. and iframe is just another browser window. put scrollbars on the iframe,
and see if the menu is clipped by the iframe.

> Hi Bruce,
> thanks for the reply.
[quoted text clipped - 22 lines]
> > > problem.
> > > Anyone solved this problem?

Reply to this Message

Darren Webb - 24 Jul 2003 20:43 GMT

This depends just how far you want to go.
In the case of netscape it does not let
the SELECT shine through the menu DIV system.

In the case of Microsoft Internet Explorer
you need to wrap the SELECT inside a positionable DIV
what you do is hide the DIV if
the menu expanded is on the same physical location.

You can go to dhtmlcentral.com and find such things
buried in the alternative downloads.

I know because I first supplied those guys with a
'how to' and they improved on it.

Below is what I sent them regarding DIV windows.
if you email me at darrenwebb@btinternet.com
I will hunt out the div around select menu code

<html>
<head>
<title>Windows Script</title>
<META NAME="Author" CONTENT="Thomas Brattli
(webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Re Designer:Darren Webb
(www.montegodata.co.uk)">

<style type="text/css">
.clWin {position:absolute; z-index: 2;
visibility:hidden; overflow:hidden; background-color:blue}
.clWindow {position:absolute; z-index:15; width:200;
background-color:blue; overflow:hidden;}
.clWinHead {position:absolute; top:0; width:200;
font-family:arial,helvetica; font-size:11px; font-
weight:bold; color:white; background-color:transparent}
.clText {position:absolute; z-index:50; font-
family:arial,helvetica; font-size:11px; background-
color:transparent}
.clLogo {position:absolute;}
.clWinButtons{position:absolute; font-
family:arial,helvetica; font-size:12px;}
.clUp {position:absolute; z-index:60; width:12;
height:12;}
.clDown {position:absolute; z-index:60; width:12;
height:12;}
.clLeft {position:absolute; z-index:60; width:12;
height:12;}
.clRight {position:absolute; z-index:60; width:12;
height:12;}
.clWinResize {position:absolute; z-index:30; width:30;
height:30; clip:rect(0,30,30,0); background-image:url
(resize.gif); layer-background-image:url(resize.gif)}
.tdData {font-family: Arial; font-size: 10px; line-
height:9px;}
</style>

<script language="JavaScript" src="Lib_Core.js"></script>

<script language="JavaScript" type="text/javascript">
/**********************************************************
**********************
Copyright (C) 2001 DHTMLCentral.com
This script is made by Thomas Brattli and copyrighted to
DHTMLCentral.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
We will also appreciate any links you could give us.
Tile,Cascade,HorizontalScroll(Table) and Widget Hiding
Added By Darren Webb
***********************************************************
*********************/

function mdown(e)    //Mousedown
{
    x=(bw.ns4 || bw.ns6)?e.pageX:event.x||event.clientX
y=(bw.ns4 || bw.ns6)?e.pageY:event.y||event.clientY
    if(bw.ie5 || bw.ie6) y+=document.body.scrollTop

    var id=-1;
    if (bw.ns4)
    {
        routeEvent(e)
    }
    else if (oWin.resizeover>-1)
    {
        id=oWin.resizeobj=oWin.resizeover;
    }
    else if(oWin.dragover>-1)
    {
        id=oWin.dragobj=oWin.dragover;
        oWin.clickedX=x-oWin[id].x;
        oWin.clickedY=y-oWin[id].y;
    }

    if (id>-1)
    {
        oWin[id].UpdateIndex()

        for ( var i = 0; i < oWin.length ; i++ )
        {
            oWin[i].oWindow.bg( i==id ? oWin
[i].defbga: oWin[i].defbg )
        }
        DisplayWidget( id ) ;
    } /* else {minimised pressed} */

    if(!bw.ns4) return false;
}

function mup(e)        //Mouseup
{
    if(oWin.dragobj!=-1)
    {
        var id = oWin.dragobj;
        oWin[id].lastx=oWin[id].x;
        oWin[id].lasty=oWin[id].y;
    }
    oWin.dragobj=-1

    if(oWin.resizeobj!=-1)
    {
        var id = oWin.resizeobj
        oWin[id].ScrollVerticalCheck()
        oWin[id].ScrollHorizontalCheck()
        oWin[id].origw=oWin[id].cr
        oWin[id].origh=oWin[id].cb
    }
    else if(bw.ns4) routeEvent(e)

    oWin.resizeobj=-1
}

function mmove(e)    //Mousemove
{
    x=(bw.ns4 || bw.ns6)?e.pageX:event.x||event.clientX
y=(bw.ns4 || bw.ns6)?e.pageY:event.y||event.clientY

    if(bw.ie5 || bw.ie6) y+=document.body.scrollTop

    id1=oWin.dragobj
    id2=oWin.resizeobj

    if(id2>-1)    //Resize
    {
        oWin[id2].cr = x - oWin[id2].x < 120 ?
120 : x - oWin[id2].x;
        oWin[id2].cb = y - oWin[id2].y < 100 ?
100 : y - oWin[id2].y;
        oWin[id2].Resize(oWin[id2].cr,oWin[id2].cb)
        DisplayWidget( id2, 'S' ) ;
    }
    else if(id1>-1) //Move
    {
        nx = x-oWin.clickedX;
        ny = y-oWin.clickedY < oWin.starty ?
oWin.starty : y-oWin.clickedY;

        if( oWin.keepinside )
        {
            if (nx+oWin[id1].cr>eval
(oWin.maxX)) nx=eval(oWin.maxX)-oWin[id1].cr
            else if(nx< eval
(oWin.minX)) nx=eval(oWin.minX)

            if (ny+oWin[id1].cb>eval
(oWin.maxY)) ny=eval(oWin.maxY)-oWin[id1].cb
            else if(ny< eval
(oWin.minY)) ny=eval(oWin.minY)
        }
        oWin[id1].x=nx
        oWin[id1].y=ny
        oWin[id1].moveIt(nx,ny)
        DisplayWidget( id1, 'M' ) ;
    }

    if(!bw.ns4) return false;
}

function w_mmover(num,resize){ if(!resize)
oWin.dragover=num; else oWin.resizeover=num }
function w_mmout() { oWin.dragover=-1;
oWin.resizeover=-1 }

function mdblclick(e,num)
{
    if(num>-1) oWin[num].Maximize();
    else if(oWin.dragover>-1) oWin
[oWin.dragover].Maximize();
}

function w_resize(w,h)
{
    this.oButtons.moveIt(w-oWin.buttonsw,0);
this.oResize.moveIt(w-oWin.resizew,h-oWin.resizeh)
    this.oWindow.clipTo(w-oWin.bordersize*2,h-
oWin.bottomh-oWin.headh);
    this.clipTo(w,h);
    this.oHead.clipTo(w,oWin.headh);
    this.oText.moveIt(2,3)
    this.ScrollVerticalCheck();
    this.ScrollHorizontalCheck();
}

function w_regular()
{
    this.oResize.css.visibility="inherit"
    this.Resize(this.origw,this.origh)
    this.moveIt(this.lastx,this.lasty)
    this.state="reg";
    this.UpdateIndex()
    DisplayWidget( 0 )
}

function w_maximize()
{
    if (this.state!="max")
    {
        if(this.state!="min"){this.lastx=this.x;
this.lasty=this.y}

        this.moveIt(10,oWin.starty)
        this.Resize(winpage.x2 - 10,winpage.y2 -
10 - oWin.starty);
        this.oResize.showIt();
        this.state="max"
        this.UpdateIndex()
        DisplayWidget( 0 )
    }
    else
    {
        this.Regular()
    }
}

function w_minimize()
{
    if(this.state!="min")
    {
        if(this.state!="max"){this.lastx=this.x;
this.lasty=this.y}
        this.state="min";

        y=winpage.y2-oWin.headh; ox=winpage.x2-
126; a=0

        for(i=0;i< oWin.length;i++)
        {
            x=i*125;
            ok=a

            if(a*125>ox){if(ox>126) i=0; a=0;
y-=oWin.headh; x=0}

            for(j=0;j < oWin.length;j++)
            {
                if(oWin[j].x==x && oWin
[j].y==y) a++
            }
            if(a==ok) break;
        }
        x=a*125;
        this.moveIt(x,y);
        this.oResize.hideIt()
        this.Resize(125,oWin.headh)
        this.oUp.hideIt();
        this.oDown.hideIt();
        this.oLeft.hideIt();
        this.oRight.hideIt();
        this.UpdateIndex(100)
        DisplayWidget( 0 )
    }
    else
    {
        this.Regular()
    }
}

function w_close()
{
    var i;
    var dID;
    var j;
    var dI;
    var id=-1;

    this.state='close'
    for ( i = 0 ; i < oWin.length && id == -1 ; i++ )
    {
        if ( oWin[i].state == "close" )
            id = i;
    }

    dID = parseInt( oWin[id].divHandle.substring(10),
10 ) ;

    for ( i = oWin.length - 1 ; i > id ; i-- )
    {
        dI = parseInt( oWin[i].divHandle.substring
(10) ) ;
        j = dI;
        do
        {
            j--

        } while ( j >= 0 &&
(document.getElementById( 'divWinButtons' + j ) ==
null) ) ;
        if ( j >= 0 )
        {
            document.getElementById
( 'divWinUp' + dI ).innerHTML =
document.getElementById( 'divWinUp' + j ).innerHTML
            document.getElementById
( 'divWinDown' + dI ).innerHTML =
document.getElementById( 'divWinDown' + j ).innerHTML
            document.getElementById
( 'divWinLeft' + dI ).innerHTML =
document.getElementById( 'divWinLeft' + j ).innerHTML
            document.getElementById
( 'divWinRight' + dI ).innerHTML =
document.getElementById( 'divWinRight' + j ).innerHTML
            document.getElementById
( 'divWinButtons' + dI ).innerHTML =
document.getElementById( 'divWinButtons' + j ).innerHTML
        }
    }

    for ( i = id ; i < oWin.length - 1 ; i++ )
    {
        oWin[i] = oWin[i+1];
        oWin[i].oHead.evnt.onmouseover=new Function
("w_mmover("+i+")")
        oWin[i].oHead.evnt.onmouseout=new Function
("w_mmout()")
        oWin[i].oResize.evnt.onmouseover=new
Function("w_mmover("+i+",1)")
        if(!bw.ns4)
        {

            oWin[i].oHead.evnt.ondblclick =
new Function("mdblclick(0,"+i+")")
        }
    }

    oWin.length--;

    removeElement('divWinRight'+dID);
    removeElement('divWinLeft'+dID);
    removeElement('divWinDown'+dID);
    removeElement('divWinUp'+dID);
    removeElement('divWinResize'+dID);
    removeElement('divWinButtons'+dID);
    removeElement('divWinHead'+dID);
    removeElement('divWinText'+dID);
    removeElement('divWindow'+dID);
    removeElement('divWin'+dID);

    DisplayWidget( 0 )
}

function getHandle(id)
{
    var hd=0;
    args = getHandle.arguments;
    if ( args.length && oWin.length > id )
        hd = parseInt(oWin[id].divHandle.substring
(10))
    else
        hd = oWin.length == 0 ? 0 : parseInt(oWin
[oWin.length-1].divHandle.substring(10))+1
    return hd;
}

function removeElement(tID)
{
    var eID = document.getElementById(tID);
    eID.parentNode.removeChild(eID);
}

function w_checkverticalscroll()
{
    this.oText.height=this.oText.evnt.offsetHeight||thi
s.oText.css.pixelHeight||this.oText.ref.height||0
    w=this.cr;
    h=this.cb;

    if(this.oText.height>h-oWin.bottomh-oWin.headh &&
this.state!="min")
    {
        this.oWindow.clipTo(w-oWin.scrollw-
oWin.bordersize*2,h-oWin.bottomh-oWin.headh);

        this.oUp.moveIt(w-oWin.scrollw,oWin.headh)
        this.oUp.clipTo(oWin.scrollw-
oWin.bordersize,h-oWin.bottomh-oWin.scrollimgh-
oWin.headh);

        this.oDown.moveIt(w-oWin.scrollw,h-
oWin.bottomh-oWin.scrollimgh)
        this.oDown.clipTo(oWin.scrollw-
oWin.bordersize,oWin.scrollimgh);

        this.oUp.showIt()
        this.oDown.showIt()
    }
    else{this.oUp.hideIt(); this.oDown.hideIt()}
}

function w_checkhorizontalscroll()
{
    this.oText.width=this.oText.evnt.offsetWidth||this.
oText.css.pixelWidth||this.oText.ref.width||0
    w=this.cr;
    h=this.cb;

    if ( this.hScroll && this.oText.width > w -
(oWin.scrollw + oWin.bordersize ) && this.state!="min")
    {
        this.oLeft.moveIt( this.ct, h -
oWin.bottomh )
        this.oLeft.clipTo( w - oWin.scrollw,
oWin.scrollw - oWin.bordersize);

        this.oRight.moveIt( w + oWin.bordersize -
oWin.scrollw - oWin.resizew, h - oWin.bottomh) ;
        this.oRight.clipTo( oWin.scrollw -
oWin.bordersize, oWin.scrollimgh ) ;

        this.oLeft.showIt()
        this.oRight.showIt()
    }
    else{this.oLeft.hideIt(); this.oRight.hideIt()}
}

var sctim=100;
var winScroll;

function w_scrollleft()
{
    clearTimeout(sctim);

    if(this.oText.x>=this.oWindow.cr-this.oText.width-
10 && winScroll)
    {
        this.oText.moveBy(-8,0);
        setTimeout(this.obj+".ScrollLeft()",30)
    }
}

function w_scrollright()
{
    clearTimeout(sctim);


    if (this.oText.x + 10 < this.oWindow.cr &&
winScroll)
    {
        this.oText.moveBy(8,0);
        setTimeout(this.obj+".ScrollRight()",30)
    }
}

function w_scrollup()
{
    clearTimeout(sctim);
    if(this.oText.y>=this.oWindow.cb-this.oText.height-
10 && winScroll)
    {
        this.oText.moveBy(0,-8);
        setTimeout(this.obj+".ScrollUp()",30)
    }
}

function w_scrolldown()
{
    clearTimeout(sctim);
    if (this.oText.y<=0 && winScroll)
    {
        this.oText.moveBy(0,8);
        setTimeout(this.obj+".ScrollDown()",30)
    }
}

function w_SetzIndex(reset)
{
    if (reset)
    {
        this.css.zIndex=reset;
        oWin.zIndex=100+oWin.length;
    }
    else
    {
        oWin.zIndex++;
        this.css.zIndex=oWin.zIndex
    }
}

function noScroll(){clearTimeout(sctim);winScroll=false}

var bw=new lib_bwcheck();/* Library */

var oWin=new Array();

function w_init()
{
    oWin.dragobj = -1;
    oWin.resizeobj = -1;
    oWin.zIndex = 100;

    oWin.bordercolor = "#935591";//Remember that you
have to change the images as well if you change this color
    oWin.bgcolor = "green"; //Default background
color
    oWin.bgcoloron = "silver"; //The "active"
background color
    oWin.bgscroll = "#C1A9C0";//The background-
color for the scroll area"

    //Image and MAP Settings

    oWin.bottomh = 13; //The height of the
bottom "border"
    oWin.headh = 15; //The height of the
head "border"
    oWin.bordersize = 1;    //The left and right
bordersize
    oWin.scrollw = 13; //The width of the scroll
area
    oWin.scrollimgh = 12;    //The width of the scroll
images
    oWin.buttonsw = 39; //The width of the buttons
image
    oWin.resizeh = 9; //The width of the resize
img
    oWin.resizew = 13; //The height of the resize
img
    oWin.logow = 19;

    oWin.starty = 40; //If you have a header or
something on the page that you want the TileVertical and
the dragdrop to care about set it here.
    oWin.defwidth = 200; //Default width for the
windows
    oWin.defheight = 200;    //Default height for the
windows
    oWin.between = 15; //This variable controls
how much space there will be between the windows when you
use TileVertical

    //Set this variable to 1 if you want to be able to
control the area the windows can be scrolled.
    oWin.keepinside=0 //VALUE: 1 || 0

    oWin.maxX=500 //This is the maximum X value the
windows can go to. Set this to "winpage.x2" to keep them
inside the window. VALUE: "winpage.x2" || px
    oWin.maxY=500 //This is the maximum Y value the
windows can go to. Set this to "winpage.y2" to keep them
inside the window. VALUE: "winpage.y2" || px
    oWin.minX=50 //This is the minimun X value the
windows can go to. Set to 0 to keep them inside the
window. VALUE: px
    oWin.minY=50 //This is the minimum Y value the
windows can go to. Set to 0 to keep them inside the
window. VALUE: px

    oWin.clickedX=0;
    oWin.clickedY=0;

    if (document.layers) {
        document.captureEvents(Event.MOUSEMOVE |
Event.MOUSEDOWN | Event.MOUSEUP | Event.DBLCLICK)
        document.ondblclick=mdblclick;
    }

    document.onmousemove=mmove;
    document.onmousedown=mdown;
    document.onmouseup=mup;
}

function create_window(i,hs,x,y,w,h,bg,bga)
{
    if(!x) x=10; if(!y) y=40; if(!w) w=oWin.defwidth;
if(!h) h=oWin.defheight;
    var dID = getHandle()

    oWin[i] = new lib_obj
('divWin'+i, "","","",i)
    oWin[i].oWindow = new lib_obj('divWindow'
+i, 'divWin'+i)
    oWin[i].oText = new lib_obj('divWinText'
+i, 'divWin'+i,'divWindow'+i)
    oWin[i].oHead = new lib_obj('divWinHead'
+i, 'divWin'+i)
    oWin[i].oButtons = new lib_obj
('divWinButtons'+i, 'divWin'+i)
    oWin[i].oResize = new lib_obj('divWinResize'
+i, 'divWin'+i)
    oWin[i].oUp = new lib_obj('divWinUp'
+i, 'divWin'+i);
    oWin[i].oDown = new lib_obj('divWinDown'
+i, 'divWin'+i)
    oWin[i].oLeft = new lib_obj('divWinLeft'
+i, 'divWin'+i);
    oWin[i].oRight = new lib_obj('divWinRight'
+i, 'divWin'+i)

    oWin[i].oHead.evnt.onmouseover=new Function
("w_mmover("+i+")")
    oWin[i].oHead.evnt.onmouseout=new Function("w_mmout
()")

    oWin[i].oResize.evnt.onmouseover=new Function
("w_mmover("+i+",1)")
    oWin[i].oResize.evnt.onmouseout=new Function
("w_mmout()")

    if(!bw.ns4){
    oWin[i].oHead.evnt.ondblclick = new Function
("mdblclick(0,"+i+")")
        oWin[i].oHead.css.cursor="move";
        oWin[i].oResize.css.cursor="w-resize"
        oWin[i].oWindow.css.overflow="hidden";
        oWin[i].oText.css.overflow="hidden"
        oWin[i].css.overflow="hidden"
    }

    oWin[i].divHandle = 'divWinText'+dID;
    oWin[i].hScroll = hs ? 1 : 0 ;
    oWin[i].x=x;
    oWin[i].y=y;
    oWin[i].cr=w;
    oWin[i].cb=h;
    oWin[i].lastx=x;
    oWin[i].lasty=y;
    oWin[i].origw=w;
    oWin[i].origh=h;
    oWin[i].defbg =bg || oWin.bgcolor;
    oWin[i].defbga=bga || oWin.bgcoloron;
    oWin[i].state="reg";

    oWin[i].bg(oWin.bordercolor);
    oWin[i].oWindow.bg(oWin[i].defbg)
    oWin[i].oUp.bg(oWin.bgscroll);
    oWin[i].oDown.bg(oWin.bgscroll);
    oWin[i].oLeft.bg(oWin.bgscroll);
    oWin[i].oRight.bg(oWin.bgscroll);

    oWin[i].Resize=w_resize;
    oWin[i].Close=w_close;
    oWin[i].Maximize=w_maximize;
    oWin[i].Minimize=w_minimize;
    oWin[i].Regular=w_regular;
    oWin[i].ScrollVerticalCheck=w_checkverticalscroll;
    oWin
[i].ScrollHorizontalCheck=w_checkhorizontalscroll;
    oWin[i].ScrollUp=w_scrollup;
    oWin[i].ScrollDown=w_scrolldown;
    oWin[i].ScrollLeft=w_scrollleft;
    oWin[i].ScrollRight=w_scrollright;
    oWin[i].UpdateIndex=w_SetzIndex;

    oWin[i].moveIt(x,y);
    oWin[i].Resize(w,h);

    oWin[i].oWindow.moveIt(oWin.bordersize,oWin.headh);
    oWin[i].showIt();
}

function addWindow(heading,content,hs,x,y,w,h,bg,bga)
{
    var num=oWin.length;
    var dID = getHandle()

    var str='<div id="divWin'+dID+'" class="clWin">\n'
    +'<div class="clLogo"><img alt="DHTMLCentral.com"
src="win_logo.gif" width="19" height="18" alt=""
border="0" align="top"></div>\n'
    +'<div id="divWinHead'+dID+'"
class="clWinHead"> '+heading+'</div>\n'
    +'<div id="divWinButtons'+dID+'"
class="clWinButtons">\n'
    +'<map name="map'+dID+'">\n'
    +'<area shape="rect" coords="26,2,35,11" href="#"
alt="Close" onclick="oWin['+num+'].Close(); return
false">\n'
    +'<area shape="rect" coords="14,2,23,11" href="#"
alt="Maximise" onClick="oWin['+num+'].Maximize(); return
false">\n'
    +'<area shape="rect" coords=" 2,2,11,11" href="#"
alt="Minimise" onClick="oWin['+num+'].Minimize(); return
false">\n'
    +'</map>\n'
    +'<img usemap="#map'+dID+'"
alt="DHTMLCentral.com" src="buttons.gif" width="38"
height="14" alt="" border="0">\n'
    +'</div>\n'
    +'<div id="divWinResize'+dID+'"
class="clWinResize"></div>\n'
    +'<div id="divWindow'+dID+'" class="clWindow">\n'
    +'<div id="divWinText'+dID+'" class="clText">';

    if (content)
    {
        str += content;
        str += endWin();
    }

    document.write(str);

    if (content) create_window(num,hs,x,y,w,h,bg,bga);
}

function endWin()
{
    var num=oWin.length;
    var s='\n</div>\n</div>\n'
        +'<div id="divWinUp' +num+'"
class="clUp"> <a href="#" onclick="return false"
onmouseover="winScroll=1; oWin['+num+'].ScrollDown();"
onmouseout="noScroll()"><img src="arrow_up.gif"
width="12" height="12" alt="^" border="0"></a></div>\n'
        +'<div id="divWinDown' +num+'"
class="clDown"> <a href="#" onclick="return false"
onmouseover="winScroll=1; oWin['+num+'].ScrollUp();"
onmouseout="noScroll()"><img src="arrow_down.gif"
width="12" height="12" alt="v" border="0"></a></div>\n'
        +'<div id="divWinLeft' +num+'"
class="clLeft"> <a href="#" onclick="winScroll=1; oWin
['+num+'].ScrollLeft(); winScroll=0;"
onmouseover="noScroll()" onmouseout="noScroll()"><img
src="arrow_left.gif" width="12" height="12" alt="<"
border="0"></a></div>\n'
        +'<div id="divWinRight' +num+'"
class="clRight"><a href="#" onclick="winScroll=1; oWin
['+num+'].ScrollRight();winScroll=0;" onmouseover="noScroll
()" onmouseout="noScroll()"><img src="arrow_right.gif"
width="12" height="12" alt=">" border="0"></a></div>\n'
    +'</div>'

    return s;
}

function DisplayWidget( id, aMoveSize, objRef )
{
    var cObj;
    var group;
    var f;
    var aMS = (aMoveSize) ? aMoveSize : 'N' ;

    if ( objRef )
    {
        cObj = (typeof objRef == "string") ?
document.getElementById(objRef) : objRef ;
    }
    else
    {
        cObj = (document.body.parentElement)?
document.body.parentElement : document.body.parentNode;
    }

    group = cObj.childNodes
    for (f = 0; f < group.length; f++)
    {
        if (group[f].nodeType == 1 && group
[f].type)
        {
            var Obj = group[f] ;
            if (Obj.type.indexOf("select")!=-
1)
            {
                objLeft = Obj.offsetLeft;
                objTop = Obj.offsetTop;
                objParent =
Obj.offsetParent;
                var w ;
                var wID = -1; // parseInt
( objParent.id.substring(10) ) ;

                for ( w = 0 ; w <
oWin.length && wID == -1 ; w++ )
                {
                    if ( objParent.id
== oWin[w].divHandle )
                    {
                        wID = w;
                    }
                }
                while
(objParent.tagName.toUpperCase() != "BODY")
                {
                    objLeft +=
objParent.offsetLeft;
                    objTop +=
objParent.offsetTop;
                    objParent =
objParent.offsetParent;
                }
                wrect =
[objLeft,objTop,Obj.offsetWidth,Obj.offsetHeight];
                var show = "" ;
                for ( w = 0 ; w <
oWin.length && show.length == 0 ; w++ )
                {
                    if (oWin[w].state!
="min")
                    {
                        trect =
[w==id&&aMS=='M'?oWin[w].x :oWin[w].lastx,

    w==id&&aMS=='M'?oWin[w].y :oWin[w].lasty,

    w==id&&aMS=='S'?oWin[w].cr:oWin[w].origw,

    w==id&&aMS=='S'?oWin[w].cb:oWin[w].origh ] ;
                        if ( oWin
[w].css.zIndex > oWin[wID].css.zIndex && overlap
(wrect,trect) )
                        {

    show="hidden";
                        }
                        if (oWin
[w].state=="max"&&w!=wID) show="hidden";
                    }
                }
                if ( show.length == 0 )
show = "visible"

                Obj.style.visibility=show;
            }
        }

        if (group[f].childNodes.length > 0)
        {
            DisplayWidget( id, aMS, group[f] )
        }
    }
}

function TileVertical()
{
    var i=0;
    var z=1;
    var nCols = oWin.length < 4 ? oWin.length :
Math.ceil(Math.sqrt(oWin.length));
    var nRows = oWin.length < 4 ? 1 : Math.ceil(
oWin.length / nCols ) ;
    var nCount = nCols
    var x=10;
    var y=oWin.starty;
    var w=winpage.x2 / nCols;
    var h=(winpage.y2-y) / nRows ;

    for ( i = 0 ; i < oWin.length ; i++ )
    {
        if ( i == nCount )
        {
            x = 10;
            y += h;


            /* nCols assumes say 3x3 If say 7
adjust as 3,2,2 */
            if ((nRows-z)>0)
                nCols = Math.ceil(
(oWin.length - i) / (nRows - z) ) ;
            else
                nCols = Math.ceil(
(oWin.length - i) ) ;
            z++;
            w = winpage.x2 / nCols ;
            nCount += nCols
        }

        oWin[i].UpdateIndex(100+i);
        oWin[i].state="reg";
        oWin[i].lastx=x; // across
        oWin[i].lasty=y; // down
        oWin[i].origw=w-oWin.between;
        oWin[i].origh=h-oWin.between;

        oWin[i].Resize(oWin[i].origw,oWin
[i].origh);
        oWin[i].moveIt(x,y)
        oWin[i].oResize.showIt()
        oWin[i].showIt();

        x += w;
    }
    DisplayWidget(0)
}

function Cascade()
{
    var x = 10;
    var y = oWin.starty;
    var w = oWin.length ? (oWin[0].origw ? oWin
[0].origw : 320) : 320;
    var h = oWin.length ? (oWin[0].origh ? oWin
[0].origh : 170) : 170;

    for(var i=0;i< oWin.length;i++)
    {
        oWin[i].UpdateIndex(100+i);
        oWin[i].state="reg";
        oWin[i].lastx=x;
        oWin[i].lasty=y;
        oWin[i].origw=w;
        oWin[i].origh=h;
        oWin[i].Resize(w,h);
        oWin[i].moveIt(x,y)
        oWin[i].oResize.showIt()
        oWin[i].showIt();
        x+=oWin.logow;
        y+=oWin.headh;
    }
    DisplayWidget(oWin.length-1)
}

function addrow(array,widths,iTable,color)
{


    var objTable = document.getElementById(
iTable );
    var objTableRow = objTable.insertRow(-1);
    var newCell;

    for ( var c = 0 ; c < array.length ; c++ )
    {
        newCell = objTableRow.insertCell(c);
        newCell.innerHTML = array[c];
        newCell.noWrap = true;
        newCell.style.width = widths[c];
        newCell.style.backgroundColor = color;
    }
}

function getdata()
{
document.manyfields.comment.value= navigator.appName + " "
+ navigator.appVersion;
}

function AddNew()
{
var
nDIV,lDIV,hDIV,bDIV,rDIV,wDIV,tDIV,uDIV,dDIV,eDIV,iDDIV;
var nID = getHandle()
nDIV = document.createElement("DIV")
nDIV.setAttribute("id", "divWin"+nID)
nDIV.setAttribute("className","clWin")

lDIV = document.createElement("DIV")
lDIV.setAttribute("className","clLogo")
lDIV.innerHTML='<img src="win_logo.gif" width="19"
height="18" alt="" border="0" align="top">'
nDIV.appendChild(lDIV)

hDIV = document.createElement("DIV")
hDIV.setAttribute("id", "divWinHead"+nID)
hDIV.setAttribute("className","clWinHead")
hDIV.innerHTML='       &
nbsp;'+'Dynamic Text
Window'

nDIV.appendChild(hDIV)

bDIV = document.createElement("DIV")
bDIV.setAttribute("id", "divWinButtons"+nID)
bDIV.setAttribute("className","clWinButtons")
bDIV.innerHTML='<map name="map'+nID+'"><area shape="rect"
coords="26,2,35,11" href="#" alt="Close" onclick="oWin
['+nID+'].Close(); return false"><area shape="rect"
coords="14,2,23,11" href="#" alt="Maximise" onClick="oWin
['+nID+'].Maximize(); return false"><area shape="rect"
coords=" 2,2,11,11" href="#" alt="Minimise" onClick="oWin
['+nID+'].Minimize(); return false"></map><img
usemap="#map'+nID+'" src="buttons.gif" width="38"
height="14" alt="" border="0">'
nDIV.appendChild(bDIV)

rDIV = document.createElement("DIV")
rDIV.setAttribute("id", "divWinResize"+nID)
rDIV.setAttribute("className","clWinResize")
nDIV.appendChild(rDIV)

wDIV = document.createElement("DIV")
wDIV.setAttribute("id", "divWindow"+nID)
wDIV.setAttribute("className","clWindow")
nDIV.appendChild(wDIV)

tDIV = document.createElement("DIV")
tDIV.setAttribute("id", "divWinText"+nID)
tDIV.setAttribute("className","clText")
wDIV.appendChild(tDIV)

//TEXT

uDIV = document.createElement("DIV")
uDIV.setAttribute("id", "divWinUp"+nID)
uDIV.setAttribute("className","clUp")
uDIV.innerHTML='<a href="#" onclick="return false"
onmouseover="winScroll=1; oWin['+nID+'].ScrollDown();"
onmouseout="noScroll()"><img src="arrow_up.gif"
width="12" height="12" alt="^" border="0"></a>'
nDIV.appendChild(uDIV)

dDIV = document.createElement("DIV")
dDIV.setAttribute("id", "divWinDown"+nID)
dDIV.setAttribute("className","clDown")
dDIV.innerHTML='<a href="#" onclick="return false"
onmouseover="winScroll=1; oWin['+nID+'].ScrollUp();"
onmouseout="noScroll()"><img src="arrow_down.gif"
width="12" height="12" alt="v" border="0"></a>'
nDIV.appendChild(dDIV)

eDIV = document.createElement("DIV")
eDIV.setAttribute("className","clLeft")
eDIV.setAttribute("id", "divWinLeft"+nID)
eDIV.innerHTML='<a href="#" onclick="winScroll=1; oWin
['+nID+'].ScrollLeft(); winScroll=0;"
onmouseover="noScroll()" onmouseout="noScroll()"><img
src="arrow_left.gif" width="12" height="12" alt="<"
border="0"></a>'
nDIV.appendChild(eDIV)

iDIV = document.createElement("DIV")
iDIV.setAttribute("className","clRight")
iDIV.setAttribute("id", "divWinRight"+nID)
iDIV.innerHTML='<a href="#" onclick="winScroll=1; oWin
['+nID+'].ScrollRight();winScroll=0;" onmouseover="noScroll
()" onmouseout="noScroll()"><img src="arrow_right.gif"
width="12" height="12" alt=">" border="0"></a>'
nDIV.appendChild(iDIV)

document.body.appendChild(nDIV)
var hs = ""
create_window(oWin.length,hs)
}

</script>

</head>

<body marginleft="0" marginheight="0">

<script>
w_init();
winpage=new lib_doc_size();

data="<h3>This is content!</h3>So is this.<br><br>More
content is coming right up!<br>More content is coming
right up! More content is coming right up!<br><br><br>More
content is coming right up! More content is coming right
up!"
addWindow("Test window
1",data,"",10,5,320,171,"green","silver")

data="My - content - my - content - my content"
addWindow("Test window 2",data,"",342,5,312,172)
</script>

<script>addWindow("Test window 3")</script>

My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content
My content, my content my content My content, my content
my content

<script>document.write(endWin());create_window
(oWin.length,"",674,5,313,173)</script>

<script>addWindow("Test window 4")</script>
<TABLE ID='TS_t_TH' class = 'tdData' cellspacing=0
border=1 cellpadding=1><TBODY></TBODY></TABLE>
<TABLE ID='TS_t_TD' class = 'tdData' cellspacing=0
border=1 cellpadding=1><TBODY></TBODY></TABLE>
<script>
document.write(endWin());

create_window(oWin.length,"HS",10,195,483,174);

var widths =[81,80,170];

var cols = ["Category", "Description", "Name"];
addrow(cols, widths, 'TS_t_TH', 'lightgrey' ) ;

for (var i=0;i<43;i++)
{
    var nowData = ["Web Site "+i,"Whatever","<a
href='http://www.montegodata.co.uk'>Visual C++
Programmer</a>"];
    addrow( nowData, widths, 'TS_t_TD', i % 2 ==
0 ? 'salmon' : '#A7CCF6' );
}
oWin[oWin.length-1].ScrollVerticalCheck();
oWin[oWin.length-1].ScrollHorizontalCheck();
</script>

<script>addWindow("Test window 5")</script>

<FORM NAME="amainform">
<BR>
<SELECT NAME="achapters" style="z-index:10 ; font-
size:10px; background:salmon; color:black;">
<OPTION VALUE="ac1.html">aChapter 1
<OPTION VALUE="ac2.html">aChapter 2
<OPTION VALUE="ac3.html">aChapter 3&nbsp&nbsp&nbsp
</SELECT>
</FORM>
<script>document.write(endWin());create_window
(oWin.length,"",508,195,483,175);</script>

<script>addWindow("Test window 6")</script>
<FORM NAME="manyfields">
<strong>First Name</strong><INPUT TYPE="TEXT"
NAME="FIRSTNAME">
<BR>
<SELECT NAME="equipment" MULTIPLE SIZE=3>
<OPTION VALUE="monitor">Video Monitor
<OPTION VALUE="modem">Modem
<OPTION VALUE="printer">Printer
<OPTION VALUE="keyboard">Keyboard
</SELECT>
<SELECT NAME="bchapters">
<OPTION VALUE="c1.html">Chapter 1
<OPTION VALUE="c2.html">Chapter 2
<OPTION VALUE="c3.html">Chapter 3
</SELECT>
<BR>
<INPUT TYPE="CHECKBOX" NAME="MUSIC">Music
<INPUT TYPE="CHECKBOX" NAME="SPORT">Sport
<INPUT TYPE="CHECKBOX" NAME="TRAVEL">Travel
<INPUT TYPE="HIDDEN" NAME="DETAILS">
<BR>Enter Password&nbsp&nbsp&nbsp<INPUT TYPE="PASSWORD"
NAME="PASSWORD">
<BR>Radio1&nbsp<INPUT TYPE="RADIO" NAME="myRadio">
<BR>Radio2&nbsp<INPUT TYPE="RADIO" NAME="myRadio">
<BR>Radio3&nbsp<INPUT TYPE="RADIO" NAME="myRadio">
<BR><TEXTAREA NAME="comment" ROWS=10 COLS=40
WRAP="virtual"></TEXTAREA>
<BR><INPUT TYPE="SUBMIT">
<BR><INPUT TYPE="BUTTON" VALUE=" Button "
onClick="getdata()">
</FORM>
<script>document.write(endWin());create_window
(oWin.length,"",10,385,483,176);</script>

<script>
data="<h3>This is content!</h3><li>Entry Number
1</li><li>Entry Number 2</li><ul><li>The quick brown
fox</li><li>jumps over the lazy dog</li></ul>";
addWindow("Test window
7",data,"",508,385,483,177,"green","silver")
</script>

<a href="#" onclick="TileVertical(); return
false">TileVertical() </a>
<a href="#" onclick="Cascade(); return false"> Cascade
() </a>
<a href="#" onclick="AddNew(); return false"> AddNew()
    </a>
</body>
</html

Reply to this Message

JavaScript menu and ListBox control problem

Free Magazines