Aurigma Image Uploader 4.6 Dual
Changing Background Colors for Panes
See Also

Let's assume that you want to give the user quick instructions how to use Image Uploader. It is quite hard to explain to an untrained user what the folder pane is and what the upload pane is. To make it easier, you need to mark the panes of Image Uploader in some way, so that you could refer to them in your instructions.

The most obvious way for the user would be marking each pane with some color like on the screenshot below. In this case the instructions would look like these:

1. Find a necessary folder in the red pane.
2. Select necessary files in the green pane.
3. Drag them to the blue pane.

To color the panes just add the corresponding properties when initializing Image Uploader object as in the code sample below.

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">

    var iu = new ImageUploaderWriter("ImageUploader", 770, 500);

    // ...Other params...

    iu.addParam("TreePaneBackgroundColor", "#FF1493");
    iu.addParam("FolderPaneBackgroundColor", "#90EE90");
    iu.addParam("UploadPaneBackgroundColor", "#ADD8E6");

    // ...Other params...

    iu.writeHtml();

    </script>

Note
Color values should be provided either as HTML color codes (hex values), or as names ("white," "red," and so on).

You may also add extra borders around panes as on the screenshot above. The idea is extremely simple. Just put Image Uploader into a table and wrap it with cells of necessary colors. The only problem is to synchronize cell widths and heights when the panes are resized after moving splitters. To handle it correctly you can use the PaneResize event of Image Uploader. Add the event handler, which recalculates cell sizes and applies necessary changes. The complete listing may look as follows.

JavaScript | Copy Code
--- | ---
    <html>
        <head>
            <title>Aurigma Image Uploader</title>
            <style type="text/css">
            .color1{
                background-color:#FF3300;
            }
            .color2{
                background-color:#67CB33;
            }
            .color3{
                background-color:#0082D6;
            }
            .colorSeparator{
            background-color:gray;
            }
            </style>
        </head>
        <body>
            <table cellpadding="0" cellspacing="0" border="0" width="790" ID="Table1">
                <tr>
                    <td class="color1" width="10" height="10">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                    <td class="color1">
                        <img src="Images/spacer.gif" width="220" height="10" id="ImgHor1">
                    </td>
                    <td class="colorSeparator" width="6" height="10">
                        <img src="Images/spacer.gif" width="6" height="10">
                    </td>
                    <td class="color2">
                        <img src="Images/spacer.gif" width="546" height="10" id="ImgHor2">
                    </td>
                    <td class="color2" width="10" height="10">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                </tr>
                <tr>
                    <td class="color1">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                    <td colspan="3">
                        <script type="text/javascript" src="iuembed.js"></script>
                        <script type="text/javascript">

                        //Resize frame element on pane resize
                        function ImageUploader_PaneResize() {
                        document.getElementById("ImgHor1").width =
                            getImageUploader("ImageUploader").getTreePaneWidth();
                        document.getElementById("ImgHor2").width = getImageUploader("ImageUploader").width -
                            getImageUploader("ImageUploader").getTreePaneWidth() - 6;
                        document.getElementById("ImgVer1").height =
                            getImageUploader("ImageUploader").getFolderPaneHeight();
                        }

                        var iu = new ImageUploaderWriter("ImageUploader", 770, 500);

                        iu.addParam("Layout", "ThreePanes");
                        iu.addParam("FolderView", "Thumbnails");
                        iu.addParam("UploadView", "Thumbnails");

                        iu.addParam("UploadThumbnail1FitMode", "fit");
                        iu.addParam("UploadThumbnail1Width", "120");
                        iu.addParam("UploadThumbnail1Height", "120");
                        iu.addParam("UploadThumbnail1JpegQuality", "60");

                        iu.addParam("BackgroundColor", "#FFFFFF");
                        iu.addParam("TreePaneBackgroundColor", "#FF1493");
                        iu.addParam("FolderPaneBackgroundColor", "#90EE90");
                        iu.addParam("UploadPaneBackgroundColor", "#ADD8E6");

                        iu.addParam("ShowStatusPane", "false");
                        iu.addParam("ShowDebugWindow", "true");
                        iu.addParam("Action", "Default.asp");
                        iu.addParam("RedirectUrl", "PictureGallery.asp");
                        iu.addParam("TreePaneWidth", "220");
                        iu.addEventListener("PaneResize", "ImageUploader_PaneResize");

                        iu.writeHtml();

                        </script>
                    </td>
                    <td class="color3" valign="top">
                        <table cellpadding="0" cellspacing="0" border="0" width="10" ID="Table2">
                            <tr>
                                <td class="color2" width="10">
                                    <img src="Images/spacer.gif" width="10" height="300" id="ImgVer1">
                                </td>
                            </tr>
                            <tr>
                                <td class="colorSeparator" width="10" height="6">
                                    <img src="Images/spacer.gif" width="10" height="6">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="color1" width="10" height="10">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                    <td class="color1">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                    <td class="colorSeparator" width="6" height="10">
                        <img src="Images/spacer.gif" width="6" height="10">
                    </td>
                    <td class="color3">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                    <td class="color3" width="10" height="10">
                        <img src="Images/spacer.gif" width="10" height="10">
                    </td>
                </tr>
            </table>
        </body>
    </html>

# See Also

##### Reference

TreePaneBackgroundColor Property
FolderPaneBackgroundColor Property
UploadPaneBackgroundColor Property
PaneBackgroundColor Property
BackgroundColor Property
PaneResize Event