The OPAC Cart tooltip ("Your cart is empty," "1 item(s) added to your
Cart") currently uses a jQuery plugin to generate a drop shadow.
This works cross-browser, but has a high failure rate with regard
to hiding the shadow consistently, resulting in an orphan shadow
after the tooltip has been hidden. I propose to instead use the
new CSS3 property "box-shadow" (-moz-box-shadow and -webkit-box-
shadow for FireFox and Safari/Chrome). Currently Internet Explorer
does not support this property. I think this is an
acceptable tradeoff for more stable functionality.Patch attached (long lines)
From 9ed6f0eae3dbe34b13519374157898c81a5b4673 Mon Sep 17 00:00:00 2001 From: Owen Leonard <[email protected]> Date: Thu, 25 Feb 2010 09:43:15 -0500 Subject: [PATCH] Use CSS3 box-shadow property for Cart tooltip The OPAC Cart tooltip ("Your cart is empty," "1 item(s) added to your Cart") currently uses a jQuery plugin to generate a drop shadow. This works cross-browser, but has a high failure rate with regard to hiding the shadow consistently, resulting in an orphan shadow after the tooltip has been hidden. I propose to instead use the new CSS3 property "box-shadow" (-moz-box-shadow and -webkit-box- shadow for FireFox and Safari/Chrome). Currently Internet Explorer does not support this property. I think this is an acceptable tradeoff for more stable functionality. --- .../intranet-tmpl/prog/en/css/staff-global.css | 5 +++-- .../prog/en/includes/doc-head-close.inc | 1 - .../en/lib/jquery/plugins/jquery.dropshadow-min.js | 1 - koha-tmpl/opac-tmpl/prog/en/css/opac.css | 4 ++++ .../opac-tmpl/prog/en/includes/doc-head-close.inc | 1 - koha-tmpl/opac-tmpl/prog/en/js/basket.js | 12 +++--------- .../en/lib/jquery/plugins/jquery.dropshadow-min.js | 1 - 7 files changed, 10 insertions(+), 15 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js delete mode 100644 koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css index 190c9da..515f088 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css +++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css @@ -1822,8 +1822,9 @@ h1#xml a { #cartDetails { background-color : #FFF; border: 1px solid #739acf; - border-right-width : 2px; - border-bottom-width : 2px; + -moz-box-shadow: 1px 1px 3px 0 #666; + -webkit-box-shadow: 1px 1px 3px 0 #666; + box-shadow: 1px 1px 3px 0 #666; color : black; display : none; margin : 0; diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc index 845ceeb..1970440 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc @@ -29,7 +29,6 @@ <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/jquery.js"></script> <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/ui.tabs.js"></script> <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.hotkeys.min.js"></script> -<script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.dropshadow-min.js"></script> <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.highlight-3.js"></script> <!-- TMPL_IF NAME="js_libs" --> diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js deleted file mode 100644 index 9b1b1fb..0000000 --- a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js +++ /dev/null @@ -1 +0,0 @@ -(function(B){var A=1;B.fn.dropShadow=function(C){var D=B.extend({left:4,top:4,blur:2,opacity:0.5,color:"black",swap:false},C);var E=B([]);this.not(".dropShadow").each(function(){var N=B(this);var J=[];var G=(D.blur<=0)?0:D.blur;var M=(G==0)?D.opacity:D.opacity/(G*8);var O=(D.swap)?A:A+1;var F=(D.swap)?A+1:A;var P;if(this.id){P=this.id+"_dropShadow"}else{P="ds"+(1+Math.floor(9999*Math.random()))}B.data(this,"shadowId",P);B.data(this,"shadowOptions",C);N.attr("shadowId",P).css("zIndex",O);if(N.css("position")!="absolute"){N.css({position:"relative",zoom:1})}bgColor=N.css("backgroundColor");if(bgColor=="rgba(0, 0, 0, 0)"){bgColor="transparent"}if(bgColor!="transparent"||N.css("backgroundImage")!="none"||this.nodeName=="SELECT"||this.nodeName=="INPUT"||this.nodeName=="TEXTAREA"){J[0]=B("<div></div>").css("background",D.color)}else{J[0]=N.clone().removeAttr("id").removeAttr("name").removeAttr("shadowId").css("color",D.color)}J[0].addClass("dropShadow").css({height:N.outerHeight(),left:G,opacity:M,position:"absolute",top:G,width:N.outerWidth(),zIndex:F});var L=(8*G)+1;for(K=1;K<L;K++){J[K]=J[0].clone()}var K=1;var I=G;while(I>0){J[K].css({left:I*2,top:0});J[K+1].css({left:I*4,top:I*2});J[K+2].css({left:I*2,top:I*4});J[K+3].css({left:0,top:I*2});J[K+4].css({left:I*3,top:I});J[K+5].css({left:I*3,top:I*3});J[K+6].css({left:I,top:I*3});J[K+7].css({left:I,top:I});K+=8;I--}var H=B("<div></div>").attr("id",P).addClass("dropShadow").css({left:N.position().left+D.left-G,marginTop:N.css("marginTop"),marginRight:N.css("marginRight"),marginBottom:N.css("marginBottom"),marginLeft:N.css("marginLeft"),position:"absolute",top:N.position().top+D.top-G,zIndex:F});for(K=0;K<L;K++){H.append(J[K])}N.after(H);E=E.add(H);B(window).resize(function(){try{H.css({left:N.position().left+D.left-G,top:N.position().top+D.top-G})}catch(Q){}});A+=2});return this.pushStack(E)};B.fn.redrawShadow=function(){this.removeShadow();return this.each(function(){var C=B.data(this,"shadowOptions");B(this).dropShadow(C)})};B.fn.removeShadow=function(){return this.each(function(){var C=B(this).shadowId();B("div#"+C).remove()})};B.fn.shadowId=function(){return B.data(this[0],"shadowId")};B(function(){var C="<style type='text/css' media='print'>";C+=".dropShadow{visibility:hidden;}</style>";B("head").append(C)})})(jQuery); \ No newline at end of file diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css index b590473..853bfa5 100644 --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css +++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css @@ -1439,6 +1439,10 @@ div#changelanguage li.yuimenuitem a.yuimenuitemlabel { padding : 10px; text-align : center; width : 180px; + box-shadow: 1px 1px 3px #666; + -moz-box-shadow: 1px 1px 3px #666; + -webkit-box-shadow: 1px 1px 3px #666; + } .yui-panel .hd, .yui-panel .bd, .yui-panel .ft { diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc index a94acd2..fe7e7db 100644 --- a/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc +++ b/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc @@ -20,7 +20,6 @@ <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/jquery.js"></script> <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/ui.tabs.js"></script> <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.hoverIntent.minified.js"></script> -<script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.dropshadow-min.js"></script> <script type="text/javascript" language="javascript" src="<!-- TMPL_VAR NAME="themelang" -->/js/script.js"></script> <!-- TMPL_IF NAME="OPACAmazonCoverImages" --> <script type="text/javascript" language="javascript">//<![CDATA[ diff --git a/koha-tmpl/opac-tmpl/prog/en/js/basket.js b/koha-tmpl/opac-tmpl/prog/en/js/basket.js index 736fdc9..c83e001 100644 --- a/koha-tmpl/opac-tmpl/prog/en/js/basket.js +++ b/koha-tmpl/opac-tmpl/prog/en/js/basket.js @@ -435,9 +435,7 @@ function showCart(){ var left = position.left - buttonOffset; $("#cartDetails").css("position","absolute").css("top",top); $("#cartDetails").css("position","absolute").css("left",left); - $("#cartDetails").fadeIn("fast",function(){ - $("#cartDetails").dropShadow({left: 3, top: 3, blur: 0, color: "#000", opacity: 0.1}); - }); + $("#cartDetails").fadeIn("fast"); } function showLists(){ @@ -449,25 +447,21 @@ function showLists(){ var left = position.left - buttonOffset; $("#listsDetails").css("position","absolute").css("top",top); $("#listsDetails").css("position","absolute").css("left",left); - $("#listsDetails").fadeIn("fast",function(){ - $("#listsDetails").dropShadow({left: 3, top: 3, blur: 0, color: "#000", opacity: 0.1}); - }); + $("#listsDetails").fadeIn("fast"); } function hideCart(){ - $("#cartDetails").removeShadow(); $("#cartDetails").fadeOut("fast"); } function hideLists(){ - $("#listsDetails").removeShadow(); $("#listsDetails").fadeOut("fast"); } $("#cartDetails").ready(function(){ $("#cartDetails,#cartmenulink").click(function(){ hideCart(); }); $("#cartmenulink").click(function(){ openBasket(); return false; }); - $("#cartmenulink").hover(function(){ + $("#cartmenulink").hoverIntent(function(){ showCart(); },function(){ hideCart(); diff --git a/koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js b/koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js deleted file mode 100644 index 9b1b1fb..0000000 --- a/koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js +++ /dev/null @@ -1 +0,0 @@ -(function(B){var A=1;B.fn.dropShadow=function(C){var D=B.extend({left:4,top:4,blur:2,opacity:0.5,color:"black",swap:false},C);var E=B([]);this.not(".dropShadow").each(function(){var N=B(this);var J=[];var G=(D.blur<=0)?0:D.blur;var M=(G==0)?D.opacity:D.opacity/(G*8);var O=(D.swap)?A:A+1;var F=(D.swap)?A+1:A;var P;if(this.id){P=this.id+"_dropShadow"}else{P="ds"+(1+Math.floor(9999*Math.random()))}B.data(this,"shadowId",P);B.data(this,"shadowOptions",C);N.attr("shadowId",P).css("zIndex",O);if(N.css("position")!="absolute"){N.css({position:"relative",zoom:1})}bgColor=N.css("backgroundColor");if(bgColor=="rgba(0, 0, 0, 0)"){bgColor="transparent"}if(bgColor!="transparent"||N.css("backgroundImage")!="none"||this.nodeName=="SELECT"||this.nodeName=="INPUT"||this.nodeName=="TEXTAREA"){J[0]=B("<div></div>").css("background",D.color)}else{J[0]=N.clone().removeAttr("id").removeAttr("name").removeAttr("shadowId").css("color",D.color)}J[0].addClass("dropShadow").css({height:N.outerHeight(),left:G,opacity:M,position:"absolute",top:G,width:N.outerWidth(),zIndex:F});var L=(8*G)+1;for(K=1;K<L;K++){J[K]=J[0].clone()}var K=1;var I=G;while(I>0){J[K].css({left:I*2,top:0});J[K+1].css({left:I*4,top:I*2});J[K+2].css({left:I*2,top:I*4});J[K+3].css({left:0,top:I*2});J[K+4].css({left:I*3,top:I});J[K+5].css({left:I*3,top:I*3});J[K+6].css({left:I,top:I*3});J[K+7].css({left:I,top:I});K+=8;I--}var H=B("<div></div>").attr("id",P).addClass("dropShadow").css({left:N.position().left+D.left-G,marginTop:N.css("marginTop"),marginRight:N.css("marginRight"),marginBottom:N.css("marginBottom"),marginLeft:N.css("marginLeft"),position:"absolute",top:N.position().top+D.top-G,zIndex:F});for(K=0;K<L;K++){H.append(J[K])}N.after(H);E=E.add(H);B(window).resize(function(){try{H.css({left:N.position().left+D.left-G,top:N.position().top+D.top-G})}catch(Q){}});A+=2});return this.pushStack(E)};B.fn.redrawShadow=function(){this.removeShadow();return this.each(function(){var C=B.data(this,"shadowOptions");B(this).dropShadow(C)})};B.fn.removeShadow=function(){return this.each(function(){var C=B(this).shadowId();B("div#"+C).remove()})};B.fn.shadowId=function(){return B.data(this[0],"shadowId")};B(function(){var C="<style type='text/css' media='print'>";C+=".dropShadow{visibility:hidden;}</style>";B("head").append(C)})})(jQuery); \ No newline at end of file -- 1.6.3.3
_______________________________________________ Koha-patches mailing list [email protected] http://lists.koha.org/mailman/listinfo/koha-patches
