/** * jQMinMax http://davecardwell.co.uk/javascript/jquery/plugins/jquery-minmax/ * * @author Dave Cardwell * @version 0.1 * * @projectDescription Add min-/max- height & width support. * * Built on the shoulders of giants: * * John Resig - http://jquery.com/ * * * Copyright (c) 2006 Dave Cardwell, licensed under the MIT License: * * http://www.opensource.org/licenses/mit-license.php */ new function() { $.minmax = { active: false, native: false }; $(document).ready(function() { // Create a div to test for native minmax support. var test = document.createElement('div'); $(test).css({ 'width': '1px', 'min-width': '2px' }); $('body').append(test); // In compliant browsers, the min-width of 2px should overwrite the // width of 1px. $.minmax.native = ( test.offsetWidth && test.offsetWidth == 2 ); // Tidy up. $(test).remove(); // Go no further if minmax is supported natively. if( $.minmax.native ) return; // Use jQMinMax. $.minmax.active = true; // Set up the minmax jQuery expressions. $.minmax.expressions(); // Use the plugin on all elements where a min/max CSS style is set. $(':minmax').minmax(); }); /** * Set up the minmax jQuery expressions. * * @example $.minmax.expressions(); * * @name $.minmax.expressions * @cat jQMinMax */ $.minmax.expressions = function() { // p for 'properties'. var p = new Array( 'min-width', 'min-height', 'max-width', 'max-height' ); // This will hold the components of an uber selector for grabbing // anything with a minmax value. var minmax = new Array(); for( var i = 0; i < p.length; i++ ) { // Build the expression. var expr = "$.css(a,'" + p[i] + "')!='0px'&&" + "$.css(a,'" + p[i] + "')!='auto'&&" + "$.css(a,'" + p[i] + "')!=window.undefined"; // max-width / max-height can also have the value 'none'. if( p[i].charAt(2) == 'x' ) expr += "&&$.css(a,'" + p[i] + "')!='none'"; // Add the expression to jQuery. $.expr[':'][ p[i] ] = expr; // Add the expression to the ':minmax' expression. minmax[i] = '(' + expr + ')'; } // Build and add the ':minmax' expression. $.expr[':']['minmax'] = minmax.join('||'); }; /** * Check the given elements for height/width values that fall outside * their min/max constraints and update them appropriately. * * @example $('#foo').minmax(); * * @name $.fn.minmax(); * @cat jQMinMax */ $.fn.minmax = function() { return $(this).each(function() { // Get the min/max constraints of the current element. var constraint = { 'min-width': calculate( this, 'min-width' ), 'max-width': calculate( this, 'max-width' ), 'min-height': calculate( this, 'min-height' ), 'max-height': calculate( this, 'max-height' ) }; // Determine its current width and height. var width = this.offsetWidth; var height = this.offsetHeight; var newWidth = width; var newHeight = height; // If the element is wider than its max-width... if( constraint['max-width'] != window.undefined && newWidth > constraint['max-width'] ) newWidth = constraint['max-width']; // If the element is/is now thinner than its min-width... if( constraint['min-width'] != window.undefined && newWidth < constraint['min-width'] ) newWidth = constraint['min-width']; // If the element is taller than its max-height... if( constraint['max-height'] != window.undefined && newHeight > constraint['max-height'] ) newHeight = constraint['max-height']; // If the element is/is now shorter than its min-height... if( constraint['min-height'] != window.undefined && newHeight < constraint['min-height'] ) newHeight = constraint['min-height']; // Update the proportions of the current element as required. if( newWidth != width ) $(this).css( 'width', newWidth ); if( newHeight != height ) $(this).css( 'height', newHeight ); }); }; // Calculate the computed numeric value of a CSS length value. function calculate( obj, p ) { var raw = $(obj).css( p ); // Nothing in, nothing out. if( raw == window.undefined || raw == 'auto' ) return window.undefined; var result; // Is it a percentage value? result = raw.match(/^\+?(\d*(?:\.\d+)?)%$/); if( result ) { return Math.round( Number( ( /width$/.test(p) ? $(obj).parent().get(0).offsetWidth : $(obj).parent().get(0).offsetHeight ) * result[1] / 100 ) ); } // Is it a straight pixel value? result = raw.match(/^\+?(\d*(?:\.\d+)?)(?:px)?$/); if( result ) { return Number( result[1] ); } // Garbage in, nothing out. return window.undefined; } }(); // ---------------------------------------------------------------------------- if(!window.CanvasRenderingContext2D){(function(){var I=Math,i=I.round,L=I.sin,M=I.cos,m=10,A=m/2,Q={init:function(a){var b=a||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var c=this;b.attachEvent("onreadystatechange",function(){c.r(b)})}},r:function(a){if(a.readyState=="complete"){if(!a.namespaces["s"]){a.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var b=a.createStyleSheet();b.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}"; var c=a.getElementsByTagName("canvas");for(var d=0;d"){var d="/"+a.tagName,e;while((e=a.nextSibling)&&e.tagName!=d){e.removeNode()}if(e){e.removeNode()}}a.parentNode.replaceChild(c,a);return c},initElement:function(a){a=this.q(a);a.getContext=function(){if(this.l){return this.l}return this.l=new K(this)};a.attachEvent("onpropertychange",V);a.attachEvent("onresize", W);var b=a.attributes;if(b.width&&b.width.specified){a.style.width=b.width.nodeValue+"px"}else{a.width=a.clientWidth}if(b.height&&b.height.specified){a.style.height=b.height.nodeValue+"px"}else{a.height=a.clientHeight}return a}};function V(a){var b=a.srcElement;switch(a.propertyName){case "width":b.style.width=b.attributes.width.nodeValue+"px";b.getContext().clearRect();break;case "height":b.style.height=b.attributes.height.nodeValue+"px";b.getContext().clearRect();break}}function W(a){var b=a.srcElement; if(b.firstChild){b.firstChild.style.width=b.clientWidth+"px";b.firstChild.style.height=b.clientHeight+"px"}}Q.init();var R=[];for(var E=0;E<16;E++){for(var F=0;F<16;F++){R[E*16+F]=E.toString(16)+F.toString(16)}}function J(){return[[1,0,0],[0,1,0],[0,0,1]]}function G(a,b){var c=J();for(var d=0;d<3;d++){for(var e=0;e<3;e++){var g=0;for(var h=0;h<3;h++){g+=a[d][h]*b[h][e]}c[d][e]=g}}return c}function N(a,b){b.fillStyle=a.fillStyle;b.lineCap=a.lineCap;b.lineJoin=a.lineJoin;b.lineWidth=a.lineWidth;b.miterLimit= a.miterLimit;b.shadowBlur=a.shadowBlur;b.shadowColor=a.shadowColor;b.shadowOffsetX=a.shadowOffsetX;b.shadowOffsetY=a.shadowOffsetY;b.strokeStyle=a.strokeStyle;b.d=a.d;b.e=a.e}function O(a){var b,c=1;a=String(a);if(a.substring(0,3)=="rgb"){var d=a.indexOf("(",3),e=a.indexOf(")",d+1),g=a.substring(d+1,e).split(",");b="#";for(var h=0;h<3;h++){b+=R[Number(g[h])]}if(g.length==4&&a.substr(3,1)=="a"){c=g[3]}}else{b=a}return[b,c]}function S(a){switch(a){case "butt":return"flat";case "round":return"round"; case "square":default:return"square"}}function K(a){this.a=J();this.m=[];this.k=[];this.c=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=m*1;this.globalAlpha=1;this.canvas=a;var b=a.ownerDocument.createElement("div");b.style.width=a.clientWidth+"px";b.style.height=a.clientHeight+"px";b.style.overflow="hidden";b.style.position="absolute";a.appendChild(b);this.j=b;this.d=1;this.e=1}var j=K.prototype;j.clearRect=function(){this.j.innerHTML= "";this.c=[]};j.beginPath=function(){this.c=[]};j.moveTo=function(a,b){this.c.push({type:"moveTo",x:a,y:b});this.f=a;this.g=b};j.lineTo=function(a,b){this.c.push({type:"lineTo",x:a,y:b});this.f=a;this.g=b};j.bezierCurveTo=function(a,b,c,d,e,g){this.c.push({type:"bezierCurveTo",cp1x:a,cp1y:b,cp2x:c,cp2y:d,x:e,y:g});this.f=e;this.g=g};j.quadraticCurveTo=function(a,b,c,d){var e=this.f+0.6666666666666666*(a-this.f),g=this.g+0.6666666666666666*(b-this.g),h=e+(c-this.f)/3,l=g+(d-this.g)/3;this.bezierCurveTo(e, g,h,l,c,d)};j.arc=function(a,b,c,d,e,g){c*=m;var h=g?"at":"wa",l=a+M(d)*c-A,n=b+L(d)*c-A,o=a+M(e)*c-A,f=b+L(e)*c-A;if(l==o&&!g){l+=0.125}this.c.push({type:h,x:a,y:b,radius:c,xStart:l,yStart:n,xEnd:o,yEnd:f})};j.rect=function(a,b,c,d){this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath()};j.strokeRect=function(a,b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.stroke()};j.fillRect=function(a, b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.fill()};j.createLinearGradient=function(a,b,c,d){var e=new H("gradient");return e};j.createRadialGradient=function(a,b,c,d,e,g){var h=new H("gradientradial");h.n=c;h.o=g;h.i.x=a;h.i.y=b;return h};j.drawImage=function(a,b){var c,d,e,g,h,l,n,o,f=a.runtimeStyle.width,k=a.runtimeStyle.height;a.runtimeStyle.width="auto";a.runtimeStyle.height="auto";var q=a.width,r=a.height;a.runtimeStyle.width= f;a.runtimeStyle.height=k;if(arguments.length==3){c=arguments[1];d=arguments[2];h=(l=0);n=(e=q);o=(g=r)}else if(arguments.length==5){c=arguments[1];d=arguments[2];e=arguments[3];g=arguments[4];h=(l=0);n=q;o=r}else if(arguments.length==9){h=arguments[1];l=arguments[2];n=arguments[3];o=arguments[4];c=arguments[5];d=arguments[6];e=arguments[7];g=arguments[8]}else{throw"Invalid number of arguments";}var s=this.b(c,d),t=[],v=10,w=10;t.push(" ','","");this.j.insertAdjacentHTML("BeforeEnd",t.join(""))};j.stroke=function(a){var b=[],c=O(a?this.fillStyle:this.strokeStyle),d=c[0],e=c[1]*this.globalAlpha,g=10,h=10;b.push("n.x){n.x=k.x}if(l.y== null||k.yn.y){n.y=k.y}}}b.push(' ">');if(typeof this.fillStyle=="object"){var v={x:"50%",y:"50%"},w=n.x-l.x,x=n.y-l.y,p=w>x?w:x;v.x=i(this.fillStyle.i.x/w*100+50)+"%";v.y=i(this.fillStyle.i.y/x*100+50)+"%";var y=[];if(this.fillStyle.p=="gradientradial"){var z=this.fillStyle.n/p*100,B=this.fillStyle.o/p*100-z}else{var z=0,B=100}var C={offset:null,color:null},D={offset:null,color:null};this.fillStyle.h.sort(function(T,U){return T.offset-U.offset});for(var o=0;oC.offset||C.offset==null){C.offset=u.offset;C.color=u.color}if(u.offset')}else if(a){b.push('')}else{b.push("')}b.push("");this.j.insertAdjacentHTML("beforeEnd",b.join(""));this.c=[]};j.fill=function(){this.stroke(true)};j.closePath=function(){this.c.push({type:"close"})};j.b=function(a,b){return{x:m*(a*this.a[0][0]+b*this.a[1][0]+this.a[2][0])-A,y:m*(a*this.a[0][1]+b*this.a[1][1]+this.a[2][1])-A}};j.save=function(){var a={};N(this,a); this.k.push(a);this.m.push(this.a);this.a=G(J(),this.a)};j.restore=function(){N(this.k.pop(),this);this.a=this.m.pop()};j.translate=function(a,b){var c=[[1,0,0],[0,1,0],[a,b,1]];this.a=G(c,this.a)};j.rotate=function(a){var b=M(a),c=L(a),d=[[b,c,0],[-c,b,0],[0,0,1]];this.a=G(d,this.a)};j.scale=function(a,b){this.d*=a;this.e*=b;var c=[[a,0,0],[0,b,0],[0,0,1]];this.a=G(c,this.a)};j.clip=function(){};j.arcTo=function(){};j.createPattern=function(){return new P};function H(a){this.p=a;this.n=0;this.o= 0;this.h=[];this.i={x:0,y:0}}H.prototype.addColorStop=function(a,b){b=O(b);this.h.push({offset:1-a,color:b})};function P(){}G_vmlCanvasManager=Q;CanvasRenderingContext2D=K;CanvasGradient=H;CanvasPattern=P})()}; // --------------------------------------------------------------------------- // jquery-roundcorners-canvas // www.meerbox.nl (function($){ var _corner = function(options) { // no native canvas support, or its msie and excanvas.js not loaded var testcanvas = document.createElement("canvas"); if (typeof G_vmlCanvasManager == 'undefined' && $.browser.msie) { return this.each(function() {}); } // get lowest number from array var asNum = function(a, b) { return a-b; }; var getMin = function(a) { var b = a.concat(); return b.sort(asNum)[0]; }; // get CSS value as integer var getCSSint = function(el, prop) { return parseInt($.css(el.jquery?el[0]:el,prop))||0; }; // draw the round corner in Canvas object var drawRoundCornerCanvasShape = function(canvas,radius,r_type,bg_color,border_width,border_color) { // change rgba(1,2,3,0.9) to rgb(1,2,3) var reg = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/; var bits = reg.exec(bg_color); if (bits) { channels = new Array(parseInt(bits[1]),parseInt(bits[2]),parseInt(bits[3])); bg_color = 'rgb('+channels[0]+', '+channels[1]+', '+channels[2]+')'; } var border_width = parseInt(border_width); var ctx = canvas.getContext('2d'); if (radius == 1) { ctx.fillStyle = bg_color; ctx.fillRect(0,0,1,1); return; } if (r_type == 'tl') { var steps = new Array(0,0,radius,0,radius,0,0,radius,0,0); } else if (r_type == 'tr') { var steps = new Array(radius,0,radius,radius,radius,0,0,0,0,0); } else if (r_type == 'bl') { var steps = new Array(0,radius,radius,radius,0,radius,0,0,0,radius); } else if (r_type == 'br') { var steps = new Array(radius,radius,radius,0,radius,0,0,radius,radius,radius); } ctx.fillStyle = bg_color; ctx.beginPath(); ctx.moveTo(steps[0],steps[1]); ctx.lineTo(steps[2], steps[3]); if(r_type == 'br') ctx.bezierCurveTo(steps[4], steps[5], radius, radius, steps[6], steps[7]); else ctx.bezierCurveTo(steps[4], steps[5], 0, 0, steps[6], steps[7]); ctx.lineTo(steps[8], steps[9]); ctx.fill(); // draw border if (border_width > 0 && border_width < radius) { // offset caused by border var offset = border_width/2; if (r_type == 'tl') { var steps = new Array(radius-offset,offset,radius-offset,offset,offset,radius-offset); var curve_to = new Array(0,0); } else if (r_type == 'tr') { var steps = new Array(radius-offset,radius-offset,radius-offset,offset,offset,offset); var curve_to = new Array(0,0); } else if (r_type == 'bl') { var steps = new Array(radius-offset,radius-offset,offset,radius-offset,offset,offset,offset,radius-offset); var curve_to = new Array(0,0); } else if (r_type == 'br') { var steps = new Array(radius-offset,offset,radius-offset,offset,offset,radius-offset,radius-offset,radius-offset); var curve_to = new Array(radius, radius); } ctx.strokeStyle = border_color; ctx.lineWidth = border_width; ctx.beginPath(); // go to corner to begin curve ctx.moveTo(steps[0], steps[1]); // curve from righttop to leftbottom (for the tl canvas) ctx.bezierCurveTo(steps[2], steps[3], curve_to[0], curve_to[1], steps[4], steps[5]); ctx.stroke(); } }; var creatCanvas = function(p,radius) { var elm = document.createElement('canvas'); elm.setAttribute("height", radius); elm.setAttribute("width", radius); elm.style.display = "block"; elm.style.position = "absolute"; elm.className = "cornercanvas"; elm = p.appendChild(elm); // if G_vmlCanvasManager in defined the browser (ie only) has loaded excanvas.js if (!elm.getContext && typeof G_vmlCanvasManager != 'undefined') { var elm = G_vmlCanvasManager.initElement(elm); } return elm; }; // interpret the (string) argument var o = (options || "").toLowerCase(); var radius = parseInt((o.match(/(\d+)px/)||[])[1]) || null; // corner width var bg_color = ((o.match(/(#[0-9a-f]+)/)||[])[1]); // strip color if (radius == null) { radius = "auto"; } var edges = { T:0, B:1 }; var opts = { tl: /top|tl/.test(o), tr: /top|tr/.test(o), bl: /bottom|bl/.test(o), br: /bottom|br/.test(o) }; if ( !opts.tl && !opts.tr && !opts.bl && !opts.br) { opts = { tl:1, tr:1, bl:1, br:1 }; } return this.each(function() { var elm = $(this); // give the element 'haslayout' if ($.browser.msie) { this.style.zoom = 1; } // the size of the corner is not defined... var widthheight_smallest = getMin(new Array(getCSSint(this,'height'),getCSSint(this,'width'))); if (radius == "auto") { radius = widthheight_smallest/4; if (radius > 10) { radius = 10; } } // the size of the corner can't be to high if (widthheight_smallest < radius) { radius = (widthheight_smallest/2); } // remove old canvas objects elm.children("canvas.cornercanvas").remove(); // some css thats required in order to position the canvas elements if (elm.css('position') == 'static') { elm.css('position','relative'); // only needed for ie6 and (ie7 in Quirks mode) , CSS1Compat == Strict mode } else if (elm.css('position') == 'fixed' && $.browser.msie && !(document.compatMode == 'CSS1Compat' && typeof document.body.style.maxHeight != "undefined")) { elm.css('position','absolute'); } elm.css('overflow','visible'); // get border width var border_t = getCSSint(this, 'borderTopWidth'); var border_r = getCSSint(this, 'borderRightWidth'); var border_b = getCSSint(this, 'borderBottomWidth'); var border_l = getCSSint(this, 'borderLeftWidth'); // get the lowest borderwidth of the corners in use var bordersWidth = new Array(); if (opts.tl || opts.tr) { bordersWidth.push(border_t); } if (opts.br || opts.tr) { bordersWidth.push(border_r); } if (opts.br || opts.bl) { bordersWidth.push(border_b); } if (opts.bl || opts.tl) { bordersWidth.push(border_l); } borderswidth_smallest = getMin(bordersWidth); // creat the canvas elements and position them var p_top = 0-border_t; var p_right = 0-border_r; var p_bottom = 0-border_b; var p_left = 0-border_l; if (opts.tl) { var tl = $(creatCanvas(this,radius)).css({left:p_left,top:p_top}).get(0); } if (opts.tr) { var tr = $(creatCanvas(this,radius)).css({right:p_right,top:p_top}).get(0); } if (opts.bl) { var bl = $(creatCanvas(this,radius)).css({left:p_left,bottom:p_bottom}).get(0); } if (opts.br) { var br = $(creatCanvas(this,radius)).css({right:p_right,bottom:p_bottom}).get(0); } // get the background color of parent element if (bg_color == undefined) { var current_p = elm.parent(); var bg = current_p.css('background-color'); while((bg == "transparent" || bg == "rgba(0, 0, 0, 0)") && current_p.get(0).tagName.toLowerCase() != "html") { bg = current_p.css('background-color'); current_p = current_p.parent(); } } else { bg = bg_color; } if (bg == "transparent" || bg == "rgba(0, 0, 0, 0)") { bg = "#ffffff"; } if (opts.tl) { drawRoundCornerCanvasShape(tl,radius,'tl',bg,borderswidth_smallest,elm.css('borderTopColor')); } if (opts.tr) { drawRoundCornerCanvasShape(tr,radius,'tr',bg,borderswidth_smallest,elm.css('borderTopColor')); } if (opts.bl) { drawRoundCornerCanvasShape(bl,radius,'bl',bg,borderswidth_smallest,elm.css('borderBottomColor')); } if (opts.br) { drawRoundCornerCanvasShape(br,radius,'br',bg,borderswidth_smallest,elm.css('borderBottomColor')); } elm.addClass('roundCornersParent'); }); }; if ($.browser.msie && typeof G_vmlCanvasManager == 'undefined') { var corner_buffer = new Array(); var corner_buffer_args = new Array(); $.fn.corner = function(options){ corner_buffer[corner_buffer.length] = this; corner_buffer_args[corner_buffer_args.length] = options; return this.each(function(){}); }; // load excanvas.pack.js document.execCommand("BackgroundImageCache", false, true); var elm = $("script[@src*=jquery.corner.]"); if (elm.length == 1) { var jc_src = elm.attr('src'); var pathArray = jc_src.split('/'); pathArray.pop(); var base = pathArray.join('/') || '.'; var excanvasjs = base+'/excanvas.pack.js'; $.getScript(excanvasjs,function(){ execbuffer(); }); } var execbuffer = function() { // set back function $.fn.corner = _corner; // execute buffer and set back function for(var i=0;i