Box in a locked position

[Total: 0    Average: 0/5]

This script allow to easily create a box that will always remain visible in a defined position (top-right actually…

Body Code:

        <SCRIPT LANGUAGE="JavaScript">
            var avCollections={
                Panels: []
            };

            var avConstants={
                BorderLeft: "1px solid buttonhighlight",
                BorderTop: "1px solid buttonhighlight",
                BorderRight: "1px solid buttonshadow",
                BorderBottom: "1px solid buttonshadow",
                BackgroundColor: "buttonface",
                TextColor: "black"
            };

            var avTemplates={
                Header01: '<DIV ID="',
                Header02: '" ONMOUSEENTER="avHandlers.Expand(this);" ONMOUSELEAVE="avHandlers.Collapse(this);" STYLE="position: absolute; top: 0px; left: 0px; border-left: 1px solid buttonhighlight; border-top: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; background-color: buttonface; color: black; font-family: Verdana, Arial, Helvetica; font-size: 8pt; padding: 2px; overflow: hidden; width: ',
                Header03: '; height: ',
                Header04: ';">',
                Footer01: '</DIV>'
            };

            var avHandlers={
                GetPanelObject: function(_el)
                {
                    for(var i=0;i<avCollections.Panels.length;i++)
                    {
                        if(avCollections.Panels[i].id==_el.id)
                            return avCollections.Panels[i];
                    }
                    return null;
                },
                EnsurePosition: function()
                {
                    var i;
                    var el;
                    for(i=0;i<avCollections.Panels.length;i++)
                    {
                        el=document.getElementById(avCollections.Panels[i].id);
                        el.style.left=document.body.clientWidth-el.offsetWidth+document.body.scrollLeft;
                        el.style.top=document.body.scrollTop;
                    }
                },
                Expand: function(_el)
                {
                    var pnl=avHandlers.GetPanelObject(_el);
                    if(_el.scrollHeight>parseInt(_el.style.height)+1)
                        _el.style.height=_el.scrollHeight+2;
                    if(_el.scrollWidth>parseInt(_el.style.width)+1)
                        _el.style.width=_el.scrollWidth+2;

                    if(parseInt(_el.style.height)>pnl.maxheight)
                        _el.style.height=pnl.maxheight;
                    if(parseInt(_el.style.width)>pnl.maxwidth)
                        _el.style.width=pnl.maxwidth;

                    _el.style.overflow="auto";

                    avHandlers.EnsurePosition();

                },
                Collapse: function(_el)
                {
                    var pnl=avHandlers.GetPanelObject(_el);
                    _el.style.height=pnl.defheight;
                    _el.style.width=pnl.defwidth;
                    _el.style.overflow="hidden";

                    avHandlers.EnsurePosition();
                }
            };


            function avPanel(_id, _defwidth, _defheight, _maxwidth, _maxheight)
            {
                this.id=_id;
                this.defwidth=_defwidth;
                this.defheight=_defheight;
                this.maxwidth=_maxwidth;
                this.maxheight=_maxheight;
                this.innerHTML="";
                avCollections.Panels[avCollections.Panels.length]=this;
            }

            avPanel.prototype.AddHTML=function(_html)
            {
                this.innerHTML+=_html;
            }

            avPanel.prototype.Render=function()
            {
                var str="";
                str+=avTemplates.Header01;
                str+=this.id;
                str+=avTemplates.Header02;
                str+=this.defwidth;
                str+=avTemplates.Header03;
                str+=this.defheight;
                str+=avTemplates.Header04;
                str+=this.innerHTML;
                str+=avTemplates.Footer01;

                return str;
            }


            ///////////////////////////////////////////////////////
            if ( window.onresize != null )
            {
                var avoldOnresize = window.onresize;
                window.onresize = function ( e )
                {
                    avoldOnresize( e );
                    avHandlers.EnsurePosition();
                };
            }
            else
            {
                window.onresize = avHandlers.EnsurePosition;
            }

            ///////////////////////////////////////////////////////
            if ( window.onload != null )
            {
                var avoldOnload = window.onload;
                window.onload = function ( e )
                {
                    avoldOnload( e );
                    avHandlers.EnsurePosition();
                };
            }
            else
            {
                window.onload = avHandlers.EnsurePosition;
            }

            ///////////////////////////////////////////////////////
            if ( window.onscroll != null )
            {
                var avoldOnscroll = window.onscroll;
                window.onscroll = function ( e )
                {
                    avoldOnscroll( e );
                    avHandlers.EnsurePosition();
                };
            }
            else
            {
                window.onscroll = avHandlers.EnsurePosition;
            }

        </SCRIPT>
        <SCRIPT>
            var pnl=new avPanel("myPanel", 200, 100, 300, 200);
            pnl.AddHTML("some text some text some text some text some text<BR>a<BR>b<BR>c<BR>d<BR>e<BR>f<BR>some text<BR>a<BR>b<BR>c<BR>d<BR>e<BR>f");
            document.write(pnl.Render());
        </SCRIPT>
        <TABLE WIDTH="600" BGCOLOR="yellow">
            <TR>
                <TD>&nbsp;</TD>
            </TR>
        </TABLE>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        Some text
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>
        <BR>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *