html type design?

[Techno]

Hi there.

I wanted to kind of jazz up the UI I have for an asp.net site I am doing.

When a user clicks on a link on the page, is it possible for it to show a dropping down type table where it has some other elements in that table? (textboxes).

you know.. for example when you click on the "search" link at the top of this page, a little textbox drops down so you can enter some text, press enter to perform a search based on that value.

CSS?

Is it also possible to display as smoothly as possible, the % of file transfered when uploading a file from client to server in asp.net?

thanks!

[alex_read]

(1) You could use either a DIV object in IE browsers or Window (I think it is) in Netscape browsers to have a an extra "layer" over your viewed webpage. I.e. the search box in this webpage is probably done like this. With absolute positioning, the div/window is placed off screen, i.e. at co-ordinates of -20,-20, then, using javascript probably, the window is positioned under the search link using javascript (moving the co-ordinates so the div/window appears on screen & becomes visible).

Alternatively, you could probably look into ASP.Net user controls and/or the ASP.Net panel control to accomplish the same sort of thing using them rather than a div/window object. You might be able to set the zindex on the style property of either of these to position it infront of the main content of the webpage.

[Magiaus]

Newer Netscape browsers no longer have layers that died back in 4.somedamnversion div is the way to go, or for that matter just use your table........

this may help. I did a Find replace on the names to remove some extended naming I had.....

    var Browser;
    var HasSniffed = false;
    function SniffBrowser()
    {
        HasSniffed = false;
        Browser = new Object();
        if(document.images)
        {
            Browser.isCSS = (document.body && document.body.style) ? true : false;
            Browser.isW3C = (Browser.isCSS && document.getElementById) ? true : false;
            Browser.isIE4 = (Browser.isCSS && document.all) ? true : false;
            Browser.isNN4 = (document.layers) ? true : false;
            Browser.isIE6 = (document.compactMode && document.compactMode.indexOf("CSS1") >= 0) ? true : false;
        }
        else
        {
            Browser = null;
        }
    }

    function CheckSniffed(){if(!HasSniffed) SniffBrowser();}
    function SeekLayer(doc, name)
    {
        CheckSniffed();
        
        var o = null;
        for(var i = 0; i < doc.layers.length; i++)
        {
            if(doc.layers[i].name == name)
            {
                o = doc.layers[i];
                break;
            }
            
            if(doc.layers[i].length > 0)
            {
                o = SeekLayer(document.layers[i].document, name);
                if(o != null && o.name == name)
                {
                    break;
                }
            }
            
        }
        return o;
    }
    function GetRawObject(id)
    {
        CheckSniffed();
        var b = Browser;
        var o = null;
        if(typeof(id) == "string")
        {
            if(b.isW3C)
            {
                o = document.getElementById(id);
            }
            else if(b.isIE4)
            {
                o = document.all(id);
            }
            else if(b.isNN4)
            {
                o = SeekLayer(document, id);
            }
        }
        return o;
    }

    function GetObj(id)
    {
        CheckSniffed();
        var b = Browser;
        var o = GetRawObject(id);
        
        if(o && b.isCSS)
        {
            o = o.style;
        }
        return o;
    }

    function GetFieldValue(id)
    {
        var o = GetRawObject(id);
        if(o)
        {
            if(o.value)
            {
                return o.value;
            }
        }
    }

    function SetFieldValue(id, nvalue)
    {
        var o = GetRawObject(id);
        if(o)
        {
            o.value = nvalue;
        }
    }

    function SetText(id, text)
    {
        if(Browser.isCSS)
        {
            var o = GetRawObject(id);
            if(o && o.innerText)
            {
                o.innerText = text;
            }
        }
    }

    function GetText(id)
    {
        if(Browser.isCSS)
        {
            var o = GetRawObject(id);
            if(o && o.innerText)
            {
                return o.innerText;
            }
        }
    }

    function GetTop(id)
    {
        var o = GetRawObject(id);
        var ret = 0;
        CheckSniffed();
        var b = Browser;

        if(document.defaultView)
        {
            var style = document.defaultView;
            var cssDecl = style.getComputedStyle(o, '')
            ret = cssDecl.getPropertyValue("top");
        }
        else if(o.currentStyle)
        {
            ret = o.currentStyle.top;
        }
        else if(o.style)
        {
            ret = o.style.top;
        }
        else if(b.isNN4)
        {
            ret = o.top;
        }
        return parseInt(ret);
    }

    function GetLeft(id)
    {
        var o = GetRawObject(id);
        var ret = 0;
        CheckSniffed();
        var b = Browser;

        if(document.defaultView)
        {
            var style = document.defaultView;
            var cssDecl = style.getComputedStyle(o, '')
            ret = cssDecl.getPropertyValue("left");
        }
        else if(o.currentStyle)
        {
            ret = o.currentStyle.left;
        }
        else if(o.style)
        {
            ret = o.style.left;
        }
        else if(b.isNN4)
        {
            ret = o.left;
        }
        return parseInt(ret);
    }

    function GetWidth(id)
    {
        var o = GetRawObject(id);
        var ret = 0;

        if(o.offsetWidth)
        {
            ret = o.offsetWidth;
        }
        else if(o.clip && o.clip.width)
        {
            ret = o.clip.width;
        }
        else if(o.style && o.style.pixelWidth)
        {
            ret = o.style.pixelWidth;
        }
        return parseInt(ret);
    }

    function GetHeight(id)
    {
        var o = GetRawObject(id);
        var ret = 0;

        if(o.offsetHeight)
        {
            ret = o.offsetHeight;
        }
        else if(o.clip && o.clip.height)
        {
            ret = o.clip.height;
        }
        else if(o.style && o.style.pixelHeight)
        {
            ret = o.style.pixelHeight;
        }
        return parseInt(ret);
    }    
            
    function MoveTo(id, x, y)
    {
        CheckSniffed();
        var b = Browser;
        
        var o = GetObj(id);
        
        if(b.isCSS)
        {
            var units = (typeof(o.left) == 'string') ? 'px' : 0;
            o.left = x + units;
            o.top = y + units;
        }
        else if(b.isNN4)
        {
            o.moveTo(x, y);
        }
    }
    
    
    function SetPos(id, pos)
    {
        var o = GetObj(id);
        o.position = pos;                
    }