Click here to Skip to main content
15,886,806 members
Articles / Web Development / HTML

JavaScript UI Control Suite using TypeScript

Rate me:
Please Sign up or sign in to vote.
3.20/5 (4 votes)
7 Dec 2014CPOL12 min read 40.3K   387   32  
A usable suite of JavaScript UI controls written with TypeScript.
// This method will return the width of a scrollbar.
function JSControls_getScrollerWidth()
{
    // Outer scrolling div
    var scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';

    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    var inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);

    // Append the scrolling div to the doc 
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    var wNoScroll = inn.offsetWidth;

    // Add the scrollbar
    scr.style.overflow = 'auto';

    // Width of the inner div width scrollbar
    var wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
    document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

public SelectedValue(): string
{			
    var items: NodeList = this.BaseElement.getElementsByTagName('label');     	
    for (var index = 0; index < items.length; index++)
        if (items[index] instanceof HTMLLabelElement)
            if ((<HTMLLabelElement>items[index]).getAttribute('selected'))
                return (<HTMLLabelElement>items[index]).getAttribute('value');
        	
    return null;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
For over 25 years I have worked in the Information Systems field as both a full-time employee and an independent contractor for a variety of companies.

I have extensive professional experience with numerous programming languages and technologies including C#, JavaScript, SQL, VB.NET, and ASP.NET as well as a working knowledge of a great variety of others. I also have an advanced understanding of the concepts behind these technologies including Object-Oriented Programming, Relational Data, Functional Programming, MVC and MVVM.

Some of my more recent work has been designing and building web applications primarily with JavaScript in conjunction with many of the JavaScript libraries/frameworks including jQuery, KnockoutJS and Bootstrap and consuming both JSON and REST services.

In nearly all of the work I have been involved with in the past ten years I have played a lead role in the design as well as the development of the work. More recently I have managed a team of software developers at a local mid-size company.

Comments and Discussions