[JS] ScriptUI CS6

Hi Roy,

Ignoring the Tabbed bit, the basic way of making a scrollable panel is like this.

With a bit of thought you should be able to adjust it to your needs.

Regards

Trevor

P.s. Maybe you can change the name of the post to a bit of a more informative one

// By Trevor http://forums.adobe.com/thread/1229123?tstart=0
var w = new Window ("dialog","My Scrollable Panel",[100,100,400,400]),
       p1= w.add('panel',[0,50,300,250]),
       p2= p1.add('panel',[0,0,280,800]),
       s = p1.add('scrollbar', [280,0,300,170]);
for (var n = 0; n < 20; n++) p2.add('edittext',[0,n*30,280,20+n*30], "Hi Roy #"+n );
s.onChanging = function () {p2.location.y = s.value*(p1.bounds[3]-p1.bounds[1])/100 - s.value*(p2.bounds[3]-p2.bounds[1])/100};
w.show();

Nice one, Trevor. I have messed around with rewriting labels and the contents of edittext items. The advantage of that is that it involves little arithmetic, but your solution looks very nice.

Peter

Hi Peter

Glad that I got your attention

For aesthetics this is really quite nice.

Not to be scared of the arithmetic, it's the computer who has to make the calculations.

I have been working a lot on an advanced SUI and look forward to showing it of to you soon.

I have both your SUI and your Grep guides open on my computer practically from one restart to the next.

Regards

Trevor

P.s. Now that I have written this, some bright spark can figure our how to make a horizontally scrolling panel

// By Trevor http://forums.adobe.com/thread/1229123?tstart=0
var w = new Window ("dialog","My Scrollable Panel",[100,100,430,400]),
       padding = 5,
       innerPanelHeight = 800,
       outerPanelHeight = 200;
if ($.os.match(/Windows/i))
    {
        var  scrollbar = w.add('scrollbar', [275, 50 + padding , 296, 50+ outerPanelHeight -padding]),
                outerPanel = w.add('panel',[10, 50, 300, 50 + outerPanelHeight]);
    }
else // Mac
    {
        var  outerPanel = w.add('panel',[10, 50, 300 , 50 + outerPanelHeight]),
                scrollbar = w.add('scrollbar', [275, 50 + padding , 296, 50 + outerPanelHeight -padding]);
    }
var innerPanel = outerPanel.add('panel',[0, 0, 350, innerPanelHeight]);
scrollbar.jumpdelta = 100 * outerPanelHeight / innerPanelHeight; // Make size of bar whatdoyoucallit (drag thing) propotional to the size of the windows
scrollbar.visible = (scrollbar.jumpdelta < 100) ? 1 : 0;
for (var n = 0; n < 20; n++) innerPanel.add('edittext',[50,15+n*30,200,35+n*30], "Hi Peter #"+n );
innerPanel.location.x -= padding;
innerPanel.location.y -= padding;
scrollbar.onChanging = function () {innerPanel.location.y = scrollbar.value*(outerPanel.bounds[3]-outerPanel.bounds[1])/100 - scrollbar.value*(innerPanel.bounds[3]-innerPanel.bounds[1])/100 - padding *(1-scrollbar.value/100) };
w.show();

> look forward to showing it off to you soon

All ear and eyes!

Hi Trevor,

Peter's guides are opened on many desktops, I am sure

You inspired me for practice. Do you mean "horizontal scrollbar" alike this:

// based on Trevor's code and Peter's guide
var w = new Window ("dialog","Trevor's Scrollable Panel",[100,100,430,400]),
    padding = 5,
    innerPanelWidth = 800,
    outerPanelWidth = 300,
    outerPanelHeight = 280,
    outerPanel = w.add('panel',[10, 50, outerPanelWidth, outerPanelHeight]),
    scrollbar = outerPanel.add('scrollbar', [0, 0, 285, 20]),
    innerPanel = outerPanel.add('panel',[0, 0, innerPanelWidth, outerPanelHeight]);
    scrollbar.visible = true;    //(scrollbar.jumpdelta < 100) ? 1 : 0;
    for (var n = 1; n < 7; n++) {
        innerPanel.add('edittext',[50,10+n*30,255,35+n*30], "Hi Trevor #"+ n );
        innerPanel.add('edittext',[305,10+n*30,505,35+n*30], "Hi Trevor #"+ Number(n + 6) );
        innerPanel.add('edittext',[555,10+n*30,755,35+n*30], "Hi Trevor #"+ Number(n +12) );
        }

    scrollbar.onChanging = function () {
        innerPanel.location.x = 
            scrollbar.value*(outerPanel.bounds[2]-outerPanel.bounds[0])/100 - 
            scrollbar.value*(innerPanel.bounds[2]-innerPanel.bounds[0])/100 - 
            padding *(1-scrollbar.value/100) };
    w.show();

Hi all,

I made an easy to use scrollable panel function.

There is one significant change from the methodology used above.  That is the use of maximumSize, without using this the size of the inner panel is limited to the size of the screen.

Enjoy,

Trevor

// By Trevor http://forums.adobe.com/thread/1229123?tstart=0

function addScrollablePanel (toTheParent,
                                            locationX,
                                            locationY,
                                            outerPanelWidth,
                                            outerPanelHeight,
                                            innerPanelWidth /* leave blank if not scrolling horizontally*/,
                                            innerPanelHeight /* leave blank if  not scrolling vertically*/, 
                                            barThickness /* optional */)
    {
        var  padding = 2, innerPanel, outerPanel, scrollbarH, scrollbarV;
        innerPanelWidth || innerPanelWidth = outerPanelWidth; // if the optinal variables are not defined then define them
        innerPanelHeight || innerPanelHeight = outerPanelHeight;
        barThickness || barThickness = 15;
        innerPanelWidth += padding;
        innerPanelHeight += padding;
        scrollbarH = (innerPanelWidth != outerPanelWidth + padding);
        scrollbarV = (innerPanelHeight != outerPanelHeight + padding);
        if ($.os.match(/Windows/i))
            {
                 scrollbarV && scrollbarV = toTheParent.add('scrollbar', [locationX + outerPanelWidth - barThickness -  padding, locationY + padding , locationX + outerPanelWidth  -  padding, locationY + outerPanelHeight  - padding - (scrollbarH && barThickness)]);
                 scrollbarH && scrollbarH = toTheParent.add('scrollbar', [locationX + padding, locationY + outerPanelHeight - padding -barThickness,  locationX + outerPanelWidth - padding - (scrollbarV && barThickness), locationY + outerPanelHeight - padding]);
                 scrollbarH && scrollbarV && toTheParent.add('statictext', [locationX + outerPanelWidth - barThickness - padding , locationY + outerPanelHeight - barThickness - padding, locationX + outerPanelWidth - padding, locationY + outerPanelHeight - padding]); // fill the gap between the scrollbarbuttons
                 outerPanel = toTheParent.add('panel',[locationX, locationY, locationX + outerPanelWidth, locationY + outerPanelHeight]);
            }
        else // Mac
            {
                outerPanel = toTheParent.add('panel',[locationX, locationY, locationX + outerPanelWidth, locationY + outerPanelHeight]);
                scrollbarV && scrollbarV = toTheParent.add('scrollbar', [locationX + outerPanelWidth - barThickness -  padding, locationY + padding , locationX + outerPanelWidth  -  padding, locationY + outerPanelHeight  - padding - (scrollbarH && barThickness)]);
                scrollbarH && scrollbarH = toTheParent.add('scrollbar', [locationX + padding, locationY + outerPanelHeight - padding ,  locationX + outerPanelWidth - padding - (scrollbarV && barThickness), locationY + outerPanelHeight - padding - barThickness]);
                scrollbarH && scrollbarV && toTheParent.add('statictext', [locationX + outerPanelWidth - barThickness - padding , locationY + outerPanelHeight - barThickness - padding, locationX + outerPanelWidth - padding, locationY + outerPanelHeight - padding]);               
            }
        innerPanel = outerPanel.add('panel'); // set the bounds after setting the maximumSize
        innerPanel.maximumSize = [innerPanelWidth * 2, innerPanelHeight * 2]; // This needs to be set to at lest the required size otherwise the panel size is limmited to the screen size
        innerPanel.bounds = [0, 0, innerPanelWidth, innerPanelHeight]; // now we can set the size :-)
        scrollbarV && scrollbarV.jumpdelta = 100 * outerPanelHeight / innerPanelHeight; // Make size of bar whatdoyoucallit (drag thing) propotional to the size of the windows
        scrollbarH && scrollbarH.jumpdelta = 100 * outerPanelWidth / innerPanelWidth; // Make size of bar whatdoyoucallit (drag thing) propotional to the size of the windows
        scrollbarV && scrollbarV.onChanging = function () {innerPanel.location.y = scrollbarV.value*(outerPanelHeight)/100 - scrollbarV.value*(innerPanelHeight)/100 - padding *(1-scrollbarV.value/100) };
        scrollbarH && scrollbarH.onChanging = function () {innerPanel.location.x = scrollbarH.value*(outerPanelWidth)/100 - scrollbarH.value*(innerPanelWidth)/100 - padding *(1-scrollbarH.value/100) };
        innerPanel.location.x -= padding;
        innerPanel.location.y -= padding;
        return innerPanel;
}

function hiJareck (toTheParent, accross, down, n, nn)
    {
        accross || accross = 1;
        down || down = 1;
        /*        if (!accross >1) accross = 1;
        if (!down >1) down = 1;*/
        for (n = 0; n < down; n++) for (nn = 0; nn < accross; nn++) toTheParent.add('edittext',[20+nn * 140,15+n*30, 130 + nn * 140 ,35+n*30], "Hi Jareck #"+ (n+1) + " #"  + (nn+1) );
    }

/* ****************** USAGE ********************* */

var w = new Window ("dialog","My Horizontally Scrollable Panel",[100, 100, 900 , 600]);
horizontalScrollablePanel = addScrollablePanel (w, 20, 20, 250, 70, 3700, false, 20);
horizontalScrollablePanel2 = addScrollablePanel (w, 20, 100, 250, 70, 1000, false, 20);
verticalScrollablePanel = addScrollablePanel (w, 300, 20, 200, 150, false, 1000, 20);
verticalScrollablePanel2 = addScrollablePanel (w, 510, 20, 200, 150, false, 1000, 40);
vertAndHorzScrollablePanel = addScrollablePanel (w, 250, 190, 310, 210, 3520, 820);
hiJareck(horizontalScrollablePanel, 26, 1);
hiJareck(horizontalScrollablePanel2, 7, 1);
hiJareck(verticalScrollablePanel, 1, 30);
hiJareck(verticalScrollablePanel2, 1, 30);
hiJareck(vertAndHorzScrollablePanel, 25, 25);
w.show();