Ignore:
Timestamp:
2015-03-20T20:52:09+13:00 (9 years ago)
Author:
davidb
Message:

Some additional work on resizing, and style added for slider to be more tightly located with the slider itself.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • other-projects/nz-flag-design/trunk/main-form/choose-palette.html

    r29792 r29804  
    1515
    1616    <link rel="shortcut icon" href="lib-slider/nzflag-icon64.png"/>
     17<!--
     18    <style>
     19        .ui-slider-track {
     20            background-color: #ECECEC;
     21        }
     22        .ui-slider-handle {
     23            background-color: #a05a2c; /* used to be #E7924B; */
     24        }
     25    </style>
     26-->
     27
    1728  </head>
    1829  <body>
    … …  
    3849          <div class="dialog" id="dialog" title="Colour Palette Selection Panel" widthXX="800px">
    3950        <h2 style="position: relative; display: inline-block;">
    40           Click on a palette circle to select it, and change its colour using the colour picker to the right
     51          Click on a palette circle to select it, and change its colour using the colour picker that appears.
    4152        </h2>       
    4253        <a style="font-size: medium; padding-left: 10px;"
    … …  
    102113    // => make height purely a percentage of height
    103114        var la_y_dim = $(window).height();
    104         var svg_y_dim = 0.5 * la_y_dim;
     115        var svg_y_dim = 0.45 * la_y_dim;
    105116    $('#svg-palette').css("height",svg_y_dim+"px");
    106117
    … …  
    236247
    237248    $(window).resize(function() {
    238         console.log("choose-palette resize()");
    239         console.log("position top = " + $('#svg-palette').position().top);
    240         console.log("offset top = " + $('#svg-palette').offset().top);
    241 
    242         var la_y_dim = $(window).height() - $('#svg-palette').offset().top;
    243         var svg_y_dim = 0.65 * la_y_dim;
     249        //console.log("choose-palette resize()");
     250        //console.log("position top = " + $('#svg-palette').position().top);
     251        //console.log("offset top = " + $('#svg-palette').offset().top);
     252
     253    var palette_top = $('#svg-palette').offset().top;
     254
     255        var la_y_dim = $(window).height() - palette_top;
     256        var svg_y_dim = (palette_top==0) ? 0.45 * la_y_dim : 0.65 * la_y_dim;
     257
    244258    $('#svg-palette').css("height",svg_y_dim+"px");                   
    245259    });
    … …  
    534548        </div> <!-- end of palette -->
    535549
     550    <style>
     551        .ui-slider-track {
     552            background-color: #ECECEC;
     553        }
     554        .ui-slider-handle {
     555            background-color: #a05a2c; /* used to be #E7924B; */
     556        }
     557    </style>
    536558
    537559        <p>Use slider to change the number of colours that will be used in your flag:</p>
Note: See TracChangeset for help on using the changeset viewer.