Changeset 30519


Ignore:
Timestamp:
2016-05-09T22:04:34+12:00 (8 years ago)
Author:
davidb
Message:

Breakbar moved from right-hand side to left-hand side. Page turn upgraded to swipe left-to-right after breakbar marker; more carefully prescribed size of window through CGI params so page can be centred in window if opened up full-size, as can happen in Expeditee with embedded browser

Location:
main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/etc/collectionConfig.xml

    r30462 r30519  
    267267               
    268268<style>
    269 #nextpagediv {
     269#nextpagediv,#nextpage-lr-div {
    270270  position: absolute;
    271271  top:0px; left:0px;
    … …  
    276276}
    277277
    278 #prevpagediv {
     278#prevpagediv, #prevpage-lr-div {
    279279  position: absolute;
    280280  top:0px; left:0px;
    … …  
    285285}
    286286
    287 #animedgebleed {
     287#animedgebleed, #animedgebleed-lr {
    288288  position: absolute;
    289289  top:0px; left:0px;

  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/annotate.js

    r30461 r30519  
    271271      //alert("num annotations = " + numAnnotations + " removeMetapos = " + removeMetapos);
    272272
    273       for (var a=0; a<numAnnotations; a++) {
     273      for (var a=1; a<numAnnotations; a++) { // start 'a' at 1 to skip the <!-- filler --> text
    274274          var annotateDiv = annotateDivs[a];
    275275

  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand-main.js

    r30461 r30519  
    118118  // setup page 2 as next page
    119119  var nextPageImg = document.getElementById("nextpageimg");
     120  var nextPageImg_LR = document.getElementById("nextpage-lr-img");
    120121  var nextPageUrl = musicStand.httpnextanim(gs.cgiParams["pagePrefix"],gs.cgiParams["pageSuffix"],musicStand.getPageNum()+1);
    121122
    … …  
    126127  ////}
    127128  nextPageImg.src = nextPageUrl;
     129  nextPageImg_LR.src = nextPageUrl;
    128130
    129131    if (musicStand.getPageNum()>1) {
    … …  
    136138    }
    137139   
    138   // some browsers clear clip rectangle with new image => set it to what we need
     140    // some browsers clear clip rectangle with new image => set it to what we need
     141  var clip_str = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)";
     142   
    139143  var nextpagediv = document.getElementById("nextpagediv");
    140   nextpagediv.style.clip = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)";
     144  nextpagediv.style.clip = clip_str;
     145  var nextpagediv_lr = document.getElementById("nextpage-lr-div");
     146  nextpagediv_lr.style.clip = clip_str;
    141147
    142148  var prevpagediv = document.getElementById("prevpagediv");
    143   prevpagediv.style.clip = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)";
     149  prevpagediv.style.clip = clip_str;
     150  var prevpagediv_lr = document.getElementById("prevpage-lr-div");
     151  prevpagediv_lr.style.clip = clip_str;
    144152
    145153  var animedgebleed = document.getElementById("animedgebleed");
    146   animedgebleed.style.clip = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)";
     154  animedgebleed.style.clip = clip_str;
     155  var animedgebleed_lr = document.getElementById("animedgebleed-lr");
     156  animedgebleed_lr.style.clip = clip_str;
    147157
    148158  // no previous page to set up

  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand-open.js

    r30446 r30519  
    22  var GUITopGap = 135;
    33  var GUIBotGap =  30;
    4   var GUILeftRightGap = 80;
     4  var GUILeftRightGap = 60; // used to be 80
    55
    66  function openMusicStand(docid,pagePrefix,pageSuffix,numPages,maxPageWidth,maxPageHeight)
    … …  
    6464    url += "&numPages="+numPages;
    6565    url += "&pageWidth="+pageWidth+"&pageHeight="+pageHeight;
     66    url += "&pageWidthWithBreakbar="+pageWidth+(GUILeftRightGap/2);
     67    url += "&musicStandWidth="+musicStandWidth+"&musicStandHeight="+musicStandHeight;
    6668    url += "&scaleFactor="+ratio;
    6769
    … …  
    7072    options += ',width='+musicStandWidth+',height='+musicStandHeight;
    7173
     74    //var options = 'toolbar=no, menubar=no, location=no, scrollbars=no, status=yes';
     75    //options += ', width='+musicStandWidth+', height='+musicStandHeight;
     76
     77    // The following worked in MS-Edge
     78    //var options = 'height='+Number(musicStandHeight-340)+', width='+musicStandWidth;
     79    //options += ', status=yes, toolbar=no, menubar=no, location=no';
     80
     81    //var options = "height=600, width=400, status=yes, toolbar=no, menubar=no, location=no";
     82
     83    console.log("Opening new window with options:" + options);
     84     
    7285    window.open(url, 'musicstand', options);
    73 
     86    //window.open(url, null, options);
     87    //window.open("Sample.htm", null, "height=600, width=400, status=yes, toolbar=no, menubar=no, location=no");
     88     
    7489    return false;
    7590  }

  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand.js

    r30461 r30519  
    2222  var topVal    = 0;
    2323  var rightVal  = pageXDim;
    24   var bottomVal = 0;
    25   var leftVal   = 0;
     24  var bleedingEdgeValY = 0;
     25  var bleedingEdgeValX = 0;
     26  var leftVal    = 0;
    2627
    2728  var pageNum = cgiGotoPage;
    … …  
    156157  }
    157158
    158 
    159   pageAnimPrivate = function(direction,pagePrefix,pageSuffix)
    160   {
    161     var imagediv = (direction>0) ? 'nextpagediv' : 'prevpagediv';
    162         var imagelayer = document.getElementById(imagediv)
    163         var bleedlayer = document.getElementById('animedgebleed')
    164 
    165     var deltaY;
    166     var deltaTime;
    167 
    168     if (bottomVal<speedBreak) {
    169       deltaY = 2;
    170       deltaTime = 10;
    171     }
    172     else {
    173       deltaY = 1;
    174       deltaTime = 30;
    175     }
    176 
    177     if(bottomVal < pageYDim) { 
    178         bottomVal += deltaY;
    179         imagelayer.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)"
    180         bleedlayer.style.clip="rect("+topVal+"px "+rightVal+"px "+(bottomVal+2)+"px "+leftVal+"px)"
    181         var callPageAnim = "pageAnimPrivate("+direction+",'"+pagePrefix+"','"+pageSuffix+"')";
    182         pageAnimTimer = setTimeout(callPageAnim,deltaTime)
    183     }
    184     else {
    185 
    186       // finished => update the image that is the current page
    187       var thisimg = document.getElementById('thispageimg')
    188       var nextimg = document.getElementById('nextpageimg')
    189       var previmg = document.getElementById('prevpageimg')
    190      
    191       if (direction>0) {
    192         if (pageNum<totalPageCount) {
    193             pageNum++;
    194         previmg.src = thisimg.src;
    195             thisimg.src = nextimg.src;
    196 
    197         resetValues(); // reset clip rectangles
    198 
    199             var nextSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum+1);
    200             nextimg.src = nextSrc;
    201 
    202             var nextspan = document.getElementById('nextpagespan');
    203 
    204         // update page numbers displayed for next and prev
    205             var nextval = document.getElementById('nextpageval');
    206         if (pageNum<totalPageCount) {
    207             nextval.innerHTML = (pageNum+1);
    208             displayInline('nextpagespan');
    209         }
    210         else {
    211             nextval.innerHTML = "";
    212             displayNone('nextpagespan');
    213         }
    214 
    215             var prevval = document.getElementById('prevpageval');
    216         prevval.innerHTML = (pageNum-1);
    217 
    218         displayInline('prevpagespan');
    219         }
     159   
     160  pageAnimFinishedPrivate = function(direction,pagePrefix,pageSuffix)
     161  {
     162      var thisimg = document.getElementById('thispageimg')
     163
     164      var nextimg = document.getElementById('nextpageimg')
     165      var nextimg_lr = document.getElementById('nextpage-lr-img')
     166
     167      var previmg = document.getElementById('prevpageimg')
     168      var previmg_lr = document.getElementById('prevpage-lr-img')
     169     
     170      if (direction>0) {
     171      if (pageNum<totalPageCount) {
     172          pageNum++;
     173          previmg.src = thisimg.src;
     174          previmg_lr.src = thisimg.src;       
     175          thisimg.src = nextimg.src;
     176
     177          setTimeout(function() {
     178          resetValues(); // reset clip rectangles
     179         
     180          var nextSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum+1);
     181          nextimg.src = nextSrc;
     182          nextimg_lr.src = nextSrc;
     183         
     184          var nextspan = document.getElementById('nextpagespan');
     185         
     186          // update page numbers displayed for next and prev
     187          var nextval = document.getElementById('nextpageval');
     188          if (pageNum<totalPageCount) {
     189              nextval.innerHTML = (pageNum+1);
     190              displayInline('nextpagespan');
     191          }
     192          else {
     193              nextval.innerHTML = "";
     194              displayNone('nextpagespan');
     195          }
     196         
     197          var prevval = document.getElementById('prevpageval');
     198          prevval.innerHTML = (pageNum-1);
     199         
     200          displayInline('prevpagespan');
     201          },700);
    220202      }
    221       else {
    222         // previous page
    223         if (pageNum>0) {
    224             pageNum--;
    225         nextimg.src = thisimg.src;
    226             thisimg.src = previmg.src;
    227 
    228         resetValues(); // reset clip rectangles
    229 
    230             var prevSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum-1);
    231             previmg.src = prevSrc;
    232 
    233         // update page numbers displayed for next and prev
    234             var nextval = document.getElementById('nextpageval');
    235         nextval.innerHTML = (pageNum+1);
    236 
    237         displayInline('nextpagespan');
    238             //var nextspan = document.getElementById('nextpagespan');
    239         //nextspan.style.display = "block";
    240 
    241             var prevspan = document.getElementById('prevpagespan');
    242 
    243             var prevval = document.getElementById('prevpageval');
    244         if (pageNum>1) {
    245             prevval.innerHTML = (pageNum-1);
    246             displayInline('prevpagespan');
    247         }
    248         else {
    249             prevval.innerHTML = "";
    250             displayNone('prevpagespan');
    251         }
    252         }
    253       }
    254 
    255       // update docid member variable (pageNum reflect new page value)
    256           docid = docRoot + "." + pageNum;
    257 
    258 /*
     203      }
     204      else {
     205      // previous page
     206      if (pageNum>0) {
     207          pageNum--;
     208          nextimg.src = thisimg.src;
     209          nextimg_lr.src = thisimg.src;
     210          thisimg.src = previmg.src;
     211
     212          setTimeout(function() {
     213          resetValues(); // reset clip rectangles
     214         
     215          var prevSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum-1);
     216          previmg.src = prevSrc;
     217          previmg_lr.src = prevSrc;
     218         
     219          // update page numbers displayed for next and prev
     220          var nextval = document.getElementById('nextpageval');
     221          nextval.innerHTML = (pageNum+1);
     222         
     223          displayInline('nextpagespan');
     224          //var nextspan = document.getElementById('nextpagespan');
     225          //nextspan.style.display = "block";
     226         
     227          var prevspan = document.getElementById('prevpagespan');
     228         
     229          var prevval = document.getElementById('prevpageval');
     230          if (pageNum>1) {
     231              prevval.innerHTML = (pageNum-1);
     232              displayInline('prevpagespan');
     233          }
     234          else {
     235              prevval.innerHTML = "";
     236              displayNone('prevpagespan');
     237          }
     238          }, 700);
     239      }         
     240      }
     241     
     242      // update docid member variable (pageNum reflect new page value)
     243      docid = docRoot + "." + pageNum;
     244     
     245      /*
    259246      // remove any existing annotations
    260247      annotate.clearAnnotations();
    … …  
    272259
    273260
    274       var username = musicStand.getUsername();
    275       var metaval;
    276 
    277       if (username != null) {
    278           // try of user specific one, if it exists
    279           var metaname = username + "-sliderposTop";
    280           metaval  = gsapi.getLiveMetadata(docid,metaname);
     261      var username = musicStand.getUsername();
     262      var metaval;
     263     
     264      if (username != null) {
     265      // try of user specific one, if it exists
     266      var metaname = username + "-sliderposTop";
     267      metaval  = gsapi.getLiveMetadata(docid,metaname);
    281268          if (metaval == "") {
    282269              // fallback to looking up non-user specific one
    283270              metaval  = gsapi.getLiveMetadata(docid,"sliderposTop");
    284271          }
    285       }
    286       else {
    287               //metaval  = gsapi.getLiveMetadata(docid,"sliderposTop");
    288               metaval  = 700; // ******** hack
    289       }
    290       var sliderposTop = parseInt(metaval);
    291 
    292       updateSlider(sliderposTop);
    293 
     272      }
     273      else {
     274          //metaval  = gsapi.getLiveMetadata(docid,"sliderposTop");
     275          metaval  = 700; // ******** hack
     276      }
     277      var sliderposTop = parseInt(metaval);
     278     
     279      updateSlider(sliderposTop);     
     280  }
     281   
     282  pageAnimPrivate = function(direction,pagePrefix,pageSuffix)
     283  {
     284    var imagediv = (direction>0) ? 'nextpagediv' : 'prevpagediv';
     285        var imagelayer = document.getElementById(imagediv)
     286        var bleedlayer = document.getElementById('animedgebleed')
     287
     288    var deltaY = 3;
     289    var deltaTime = 15;
     290        var callback;
     291     
     292    if (bleedingEdgeValY<speedBreak) {
     293        callback="pageAnimPrivate";
    294294    }
    295   }
    296 
     295    else {
     296        callback="pageAnimLRPrivate";
     297    }
     298
     299    if(bleedingEdgeValY < pageYDim) {   
     300        bleedingEdgeValY += deltaY;
     301        imagelayer.style.clip="rect("+topVal+"px "+rightVal+"px "+bleedingEdgeValY+"px "+leftVal+"px)"
     302        bleedlayer.style.clip="rect("+topVal+"px "+rightVal+"px "+(bleedingEdgeValY+2)+"px "+leftVal+"px)"
     303        var callPageAnim = callback+"("+direction+",'"+pagePrefix+"','"+pageSuffix+"')";
     304        pageAnimTimer = setTimeout(callPageAnim,deltaTime)
     305    }
     306    else {
     307        // finished => update the image that is the current page
     308        pageAnimFinished();
     309    }
     310  }
     311
     312
     313  pageAnimLRPrivate = function(direction,pagePrefix,pageSuffix)
     314  {
     315    var imagediv = (direction>0) ? 'nextpage-lr-div' : 'prevpage-lr-div';
     316        var imagelayer = document.getElementById(imagediv)
     317        var bleedlayer = document.getElementById('animedgebleed-lr')
     318
     319        var deltaX = 2;
     320    var deltaTime = 40; // used to be 30
     321
     322    if(bleedingEdgeValX < pageXDim) {   
     323        bleedingEdgeValX += deltaX;
     324        imagelayer.style.clip="rect("+(bleedingEdgeValY+2)+"px "+bleedingEdgeValX+"px "+pageYDim+"px "+leftVal+"px)"
     325        bleedlayer.style.clip="rect("+(bleedingEdgeValY+2)+"px "+(bleedingEdgeValX+2)+"px "+pageYDim+"px "+leftVal+"px)"
     326        var callPageAnim = "pageAnimLRPrivate("+direction+",'"+pagePrefix+"','"+pageSuffix+"')";
     327        pageAnimTimer = setTimeout(callPageAnim,deltaTime)
     328    }
     329    else {
     330        // finished => update the image that is the current page
     331        pageAnimFinishedPrivate(direction,pagePrefix,pageSuffix);
     332    }
     333  }
     334
     335
     336   
     337
     338   
    297339  cancelPageAnimPrivate = function() {
    298340      clearTimeout(pageAnimTimer);
    … …  
    502544  {
    503545      var nextlayer = document.getElementById('nextpagediv')
     546      var nextlayer_lr = document.getElementById('nextpage-lr-div')
     547
    504548      var prevlayer = document.getElementById('prevpagediv')
     549      var prevlayer_lr = document.getElementById('prevpage-lr-div')
     550
    505551      var bleedlayer = document.getElementById('animedgebleed')
     552      var bleedlayer_lr = document.getElementById('animedgebleed-lr')
    506553
    507554      topVal=0;
    508555      rightVal=pageXDim;
    509       bottomVal=0;
     556      bleedingEdgeValY=0;
     557      bleedingEdgeValX=0;
    510558      leftVal=0
    511559
    512       var startingClip = "rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";
     560      //var startingClip = "rect("+topVal+"px "+rightVal+"px "+bleedingEdgeValY+"px "+leftVal+"px)";
     561      var startingClip = "rect(0px 0px 0px 0px)";
    513562
    514563      nextlayer.style.clip=startingClip;
     564      nextlayer_lr.style.clip=startingClip;
     565
    515566      prevlayer.style.clip=startingClip;
     567      prevlayer_lr.style.clip=startingClip;
     568
    516569      bleedlayer.style.clip=startingClip;
     570      bleedlayer_lr.style.clip=startingClip;
    517571  }
    518572}

  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/transform/pages/document.xsl

    r30463 r30519  
    4848    </gsf:variable>
    4949   
     50    <gsf:variable name="cgiParamMusicStandWidth">
     51      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandWidth']/@value"/>
     52    </gsf:variable>
     53    <gsf:variable name="cgiParamMusicStandHeight">
     54      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandHeight']/@value"/>
     55    </gsf:variable>
    5056    <gsf:variable name="cgiParamPageWidth">
    5157      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidth']/@value"/>
    … …  
    5460      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageHeight']/@value"/>
    5561    </gsf:variable>
     62    <gsf:variable name="cgiParamPageWidthWithBreakbar">
     63      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidthWithBreakbar']/@value"/>
     64    </gsf:variable>
    5665    <gsf:variable name="cgiParamPagePrefix">
    5766      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pagePrefix']/@value"/>
    … …  
    6776    </gsf:variable>
    6877
    69    
    70     <table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}">
     78    <div style="width:{$cgiParamMusicStandWidth}px; margin: 0 auto;"> <!-- start of centering div -->
     79     
     80    <table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}" style="position: relative; left: 30px;">
    7181      <tr>
    7282        <td align="left" width="20%">
    … …  
    118128      </tr>
    119129    </table>
     130
    120131    <table width="100%">
     132      <tbody>
    121133      <tr>
    122         <td/>
    123         <td>
     134        <td><xsl:comment>filler</xsl:comment></td>
     135
     136        <td width="34">
     137          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 34px; height: {$cgiParamPageHeight}px;">
     138        <div style="position: relative; left: 5px; top 0px;">
     139         <div id="sliderbg">
     140          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
     141            <xsl:comment>filler</xsl:comment>
     142          </div>
     143          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
     144            <xsl:comment>filler</xsl:comment>
     145          </div>
     146         </div>
     147
     148         <!--
     149         <div id="sliderpos" style="width:30px; height:11px;">
     150          <img height="11" src="{$httpCollection}/images/brown2-slider-leftmargin.png" width="30"/>
     151          </div>
     152          -->
     153         <div id="sliderpos" style="width:32px; height:27px;">
     154          <img style="position: absolute; top: -15px; left: 5px;" width="32" height="27" src="{$httpCollection}/images/corner-arrow-left-margin.png" />
     155         </div>
     156
     157
     158        </div>
     159        <script language="javascript" type="text/javascript">
     160          <xsl:text disable-output-escaping="yes">var username = musicStand.getUsername();
     161      var metaval;
     162
     163      if (username != null) {
     164          var metaname = username + "-sliderposTop";
     165          metaval = 700; // ***** major hack ****
     166          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],metaname);
     167          //if (metaval == "") {
     168          //    // fallback to looking up non-user specific one
     169          //    metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
     170          //}
     171      }
     172      else {
     173          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
     174          metaval = 700; // ***** major hack ****
     175      }
     176      var sliderposTop = parseInt(metaval);
     177
     178      var speedBreak = musicStand.getSpeedBreak();
     179
     180      if (sliderposTop &gt; 0) {
     181          sliderposTop *= musicStand.getScaleFactor();
     182          speedBreak = sliderposTop;
     183          musicStand.setSpeedBreak(speedBreak);
     184      }
     185
     186      var sliderpos = document.getElementById('sliderpos');
     187      sliderpos.style.top = speedBreak + "px";
     188          sliderpos.style.left = "-8px";
     189      sliderpos.onmousedown = dragSlider;
     190      var sliderbg = document.getElementById('sliderbg');
     191      sliderbg.onmousedown = dragSlider;
     192
     193
     194      var trackabove = document.getElementById('slidertrackabove');
     195      trackabove.style.height = speedBreak + "px";
     196
     197      var trackbelow = document.getElementById('slidertrackbelow');
     198      trackbelow.style.top = speedBreak + "px";
     199      trackbelow.style.height = (gs.cgiParams["pageHeight"] - speedBreak) + "px";
     200          </xsl:text>
     201        </script>
     202          </div>
     203        </td>
     204
     205
     206       
     207        <td style="position: relative;">
    124208          <div id="thispage" style="cursor: e-resize; background: white;        position: relative; left: 0px; top: 0px;        width: {$cgiParamPageWidth}px; height: {gs.cgiparam.PageHeight}px;">
    125209        <a onClick="return false;" onContextMenu="return false;" onMouseDown="return musicStand.nextOrPrevPageEvent(event,gs.cgiParams['d'],'.png')" onMouseUp="return false;">
    … …  
    129213          <img border="0" id="nextpageimg" src=""/>
    130214        </div>
     215        <div id="nextpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
     216          <img border="0" id="nextpage-lr-img" src=""/>
     217        </div>
    131218        <div id="prevpagediv" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
    132219          <img border="0" id="prevpageimg" src=""/>
    133220        </div>
    134         <div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">                             </div>                              <div id="loading">
    135         <table height="100%" width="100%">
    136           <tr>
    137             <td width="45%">                                            </td>                                           <td align="left">
    138             <span id="loadingdots">loading</span>
    139           </td>
     221        <div id="prevpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
     222          <img border="0" id="prevpage-lr-img" src=""/>
     223        </div>
     224        <div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div>
     225        <div id="animedgebleed-lr" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div>
     226       
     227        <div id="loading">
     228          <table height="100%" width="100%">
     229            <tr>
     230              <td width="45%">                                          </td>                                           <td align="left">
     231              <span id="loadingdots">loading</span>
     232            </td>
    140233          </tr>
    141234        </table>
    … …  
    227320         
    228321          <div id="annotateCanvas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 2;" >
    229         <!-- filler -->
    230           </div>
    231         </td>
     322        <xsl:comment>filler</xsl:comment>
     323          </div>
     324        </td>
     325
     326<!--
     327
    232328        <td>
    233329          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 40px; height: {$cgiParamPageHeight}px;">
    234330        <div id="sliderbg">
    235331          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
    236             <!-- filler -->
     332            <xsl:comment>filler</xsl:comment>
    237333          </div>
    238334          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
    239             <!-- filler -->
     335            <xsl:comment>filler</xsl:comment>
    240336          </div>
    241337        </div>
    … …  
    289385          </div>
    290386        </td>
     387
     388-->
     389       
    291390         </tr>
     391         </tbody>
    292392        </table>
    293                      
     393
     394        </div> <!-- end of centering div -->
     395     
    294396      </div>
    295397    </div>
Note: See TracChangeset for help on using the changeset viewer.