Mercurial > hg > digilib-old
changeset 686:86c4174977f1 jquery
trying to work around IE bugs, debugging for IE
| author | hertzhaft |
|---|---|
| date | Wed, 26 Jan 2011 18:37:03 +0100 |
| parents | 6ec8c8ae02c7 |
| children | 97c01b911754 |
| files | client/digitallibrary/jquery/jquery-test-embedded.html client/digitallibrary/jquery/jquery.digilib.js |
| diffstat | 2 files changed, 89 insertions(+), 29 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html Wed Jan 26 15:37:39 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-embedded.html Wed Jan 26 18:37:03 2011 +0100 @@ -9,7 +9,6 @@ } div.digilib { - float: left; padding: 10px; width: 220px; } @@ -47,7 +46,32 @@ display: none; z-index: 1000; } + + td { + vertical-align: top; + } + + #debug { + background-color: beige; + position: absolute; + top: 400px; + padding: 0px 10px; + font-family: Arial; + font-size: 9pt; + } + + div._log { + color: grey; + } + div._debug { + color: darkgreen; + } + + div._error { + color: red; + } + </style> <script type="text/javascript" src="jquery-1.4.4.js"></script> @@ -73,19 +97,34 @@ </head> <body> - - <div id="digilib-1" class="digilib single"> - <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/&pn=1" /> - </div> - <div id="digilib-2" class="digilib"> - <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/ferrara" /> - </div> - <div id="digilib-3" class="digilib"> - <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/weide" /> - </div> - <div id="digilib-4" class="digilib"> - <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/HansHolbein-NikolausKratzer" /> - </div> + <table> + <tr> + <td> + <div id="digilib-1" class="digilib single"> + <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/&pn=1" /> + </div> + </td> + + <td> + <div id="digilib-2" class="digilib"> + <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/ferrara" /> + </div> + </td> + + <td> + <div id="digilib-3" class="digilib"> + <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/weide" /> + </div> + </td> + + <td> + <div id="digilib-4" class="digilib"> + <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/HansHolbein-NikolausKratzer" /> + </div> + </td> + </tr> + </table> + <div id="debug">DEBUG</div> </body> </html>
--- a/client/digitallibrary/jquery/jquery.digilib.js Wed Jan 26 15:37:39 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Wed Jan 26 18:37:03 2011 +0100 @@ -6,9 +6,28 @@ // fallback for console.log calls if (typeof(console) === 'undefined') { var console = { - log : function(){}, - debug : function(){}, - error : function(){} + log : function(){ + var $debug = $('#debug'); + if (!$debug) return; + var args = Array.prototype.slice.call(arguments); + var argstr = args.join(' '); + $debug.append('<div class="_log">' + argstr + '</div>'); + }, + debug : function(){ + // debug for MSIE etc + var $debug = $('#debug'); + if (!$debug) return; + var args = Array.prototype.slice.call(arguments); + var argstr = args.join(' '); + $debug.append('<div class="_debug">' + argstr + '</div>'); + }, + error : function(){ + var $debug = $('#debug'); + if (!$debug) return; + var args = Array.prototype.slice.call(arguments); + var argstr = args.join(' '); + $debug.append('<div class="_error">' + argstr + '</div>'); + } }; } @@ -634,32 +653,34 @@ var setupScalerDiv = function (data) { var settings = data.settings; var $elem = data.$elem; - var $img; + var $img, scalerUrl; + // fullscreen if (settings.interactionMode === 'fullscreen') { - // fullscreen var imgSize = getFullscreenImgSize($elem); // fitwidth/height omits destination height/width if (data.dlOpts['fitheight'] == null) { settings.dw = imgSize.width; - } + }; if (data.dlOpts['fitwidth'] == null) { settings.dh = imgSize.height; - } + }; $img = $('<img/>'); - var scalerUrl = getScalerUrl(data); - $img.attr('src', scalerUrl); + scalerUrl = getScalerUrl(data); + // embedded mode -- try to keep img tag } else { - // embedded mode -- try to keep img tag $img = $elem.find('img'); if ($img.length > 0) { - console.debug("img detach:",$img); + console.debug("img detach:", $img); + scalerUrl = $img.attr('src'); $img.detach(); } else { $img = $('<img/>'); - var scalerUrl = getScalerUrl(data); - $img.attr('src', scalerUrl); - } + scalerUrl = getScalerUrl(data); + }; } + // setup image load handler before setting the src attribute (IE bug) + $img.load(scalerImgLoadedHandler(data)); + $img.attr('src', scalerUrl); // create new html $elem.empty(); // TODO: should we keep stuff for customization? var $scaler = $('<div class="scaler"/>'); @@ -668,7 +689,6 @@ $img.addClass('pic'); data.$scaler = $scaler; data.$img = $img; - $img.load(scalerImgLoadedHandler(data)); }; // creates HTML structure for buttons in elem @@ -845,6 +865,7 @@ // create Transform from current area and picsize data.imgTrafo = getImgTrafo($img, data.zoomArea, data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir); + console.debug("imgTrafo=", data.imgTrafo); // display marks renderMarks(data); //digilib.showArrows(); // show arrow overlays for zoom navigation