From 2010.igem.org
(Difference between revisions)
|
|
Line 1: |
Line 1: |
| <html> | | <html> |
| + | <style type="text/css"> |
| <!--jquerycorner--> | | <!--jquerycorner--> |
| // TODO: alter variable/property naming so that less string manipulation is required. | | // TODO: alter variable/property naming so that less string manipulation is required. |
Line 308: |
Line 309: |
| | | |
| | | |
- | | + | </style> |
| </html> | | </html> |
Revision as of 14:25, 19 September 2010
\n\
',
/*MSIE*/ ////////////////////////////////////////////////////////////////////////////////////////
/*MSIE*/ //// function converts css percentage values to ie-proprietary css "expressions" it is
/*MSIE*/ //// necessary because standards-challenged browsers (ie6) don't support height by
/*MSIE*/ //// percentage, but do by "expression". pass it a css string and it then converts it,
/*MSIE*/ //// if the rendering engine is ie6. For standards-capable browsers, it just passes
/*MSIE*/ //// the unedited css on. Yet another example of MSIE littering the web with crap code.
/*MSIE*/ ////////////////////////////////////////////////////////////////////////////////////////
/*MSIE*/ procStyles : function(STRstyle) {
/*MSIE*/ // if MSIE6, then process
/*MSIE*/ if (jQuery.browser.msie && jQuery.browser.version == '6.0') {
/*MSIE*/ // regex to id percentage values in the styling strings
/*MSIE*/ var RGXcentVal = /\d{1,3}\%{1}/g;
/*MSIE*/ // split stying into arrays split by percentage values
/*MSIE*/ var ARRcentVals = STRstyle.match(RGXcentVal);
/*MSIE*/ var ARRcutCents = STRstyle.split(RGXcentVal);
/*MSIE*/ if(ARRcentVals) {
/*MSIE*/ // create an empty string to build new styling into
/*MSIE*/ var STRnewStyle = '';
/*MSIE*/ // loop through percent values, convert to expressions and reassemble arrays into new styling string
/*MSIE*/ for (var i=0; i0) ? 'expression(this.parentNode.'+offsetProp+'*0.' + NUMthisVal + ' + \'px\')' : '0px';
/*MSIE*/ STRnewStyle += ARRcutCents[i] + ARRcentVals[i];
/*MSIE*/ }
/*MSIE*/ // add remaining string length to new styling string?
/*MSIE*/ if (ARRcutCents.length > ARRcentVals.length) { STRnewStyle += ARRcutCents[ARRcutCents.length-1]; }
/*MSIE*/ // substitute new styling string for old styling
/*MSIE*/ STRstyle = STRnewStyle;
/*MSIE*/ }
/*MSIE*/ }
/*MSIE*/ // return the appropriate stying string.
/*MSIE*/ return STRstyle;
/*MSIE*/ }
};
////////////////////////////////////////////////////////////////////////////////////////////
//// plugin for adding/removing quadcorner markup/styling and settings
////////////////////////////////////////////////////////////////////////////////////////////
jQuery.fn.setQuadBg = function(OBJsettings) {
DOMparentObj = this;
var ARRcornerClasses = ['rndCornersTopLeft', 'rndCornersTopRight', 'rndCornersBottomLeft', 'rndCornersBottomRight'];
var STRcornerMarkup = '';
var STRcontWrapMarkup = '';
if (OBJsettings == 'remove') {
var wrapperDom = DOMparentObj.find('div.rndCornersContentWrapper');
if (wrapperDom.length) {
// move actual content elements to original parent (unwrap)
wrapperDom.children().each(function(){
jQuery(this).remove().appendTo(DOMparentObj);
});
// remove all IMMEDIATE injected markup (don't screw up nested elements, alter only the target).
DOMparentObj.children().each(function() {
var thisChild = jQuery(this);
if (
thisChild.hasClass('rndCornersContentWrapper') ||
thisChild.hasClass('rndCornersTopLeft') ||
thisChild.hasClass('rndCornersTopRight') ||
thisChild.hasClass('rndCornersBottomLeft') ||
thisChild.hasClass('rndCornersBottomRight')
) {
thisChild.remove();
}
});
}
}
if (typeof(OBJsettings) == 'object') {
// classify the parent container
DOMparentObj.addClass('railCornerParentContainer');
// unless otherwise indicated, remove the backup background image.
if (!OBJsettings.keepBg) { DOMparentObj.css('backgroundImage', 'none'); }
// wrap the original content in its own div
DOMparentObj.contents().wrapAll(STRcontWrapMarkup);
/*MSIE*/ // do we neeed special handholding for ie6 png support
/*MSIE*/ var helpIeNotSuck = (jQuery.browser.msie && jQuery.browser.version == '6.0');
for (var i=0; i
', STRthisClass);
/*MSIE*/ if (helpIeNotSuck && thisImgIsPng) {
/*MSIE*/ STRthisCornerMarkup = STRthisCornerMarkup.replace('','
');
/*MSIE*/ STRthisCornerMarkup = STRthisCornerMarkup.replace('', 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + OBJsettings.img + '\', sizingMethod=\'image\');');
/*MSIE*/ } else {
STRthisCornerMarkup = STRthisCornerMarkup.replace('', '');
STRthisCornerMarkup = STRthisCornerMarkup.replace('', thisImg);
/*MSIE*/ }
// perform offfset enforcement if specified
var STRthisStyle = '';
if (OBJsettings.biasL || OBJsettings.biasT) {
// assert horizontal bias
if(OBJsettings.biasL) {
if (/Left$/.test(STRthisClass)) {
STRthisStyle += 'width:'+OBJsettings.biasL+'%;left:'+0+'%;';
} else {
STRthisStyle += 'width:'+(100-parseInt(OBJsettings.biasL))+'%;left:'+OBJsettings.biasL+'%;';
}
}
// assert horizontal bias
if(OBJsettings.biasT) {
if (/^rndCornersTop/.test(STRthisClass)) {
STRthisStyle += 'height:'+OBJsettings.biasT+'%;top:'+0+'%;';
} else {
STRthisStyle += 'height:'+(100-parseInt(OBJsettings.biasT))+'%;top:'+OBJsettings.biasT+'%;';
}
}
}
STRthisCornerMarkup = STRthisCornerMarkup.replace('', quadBg.procStyles(STRthisStyle));
STRthisCornerMarkup = STRthisCornerMarkup.replace(' style=""', '');
// prepend element
DOMparentObj.prepend(STRthisCornerMarkup);
}
/*MSIE*/ // post process png images for IE
/*MSIE*/ if (helpIeNotSuck) {
/*MSIE*/ var setImgSize = function(imgSrc) {
/*MSIE*/ var imgFile = imgSrc.match(/[^\/]+\.\w+$/);
/*MSIE*/ var loaderImg = document.createElement('img');
/*MSIE*/ loaderImg.onload = function() {
/*MSIE*/ jQuery('img.rndCornersImg[srcjQuery='+imgFile+']').each(function(){
/*MSIE*/ jQuery(this).css({width: this.offsetWidth + 'px', height: this.offsetHeight + 'px', visibility: 'visible'});
/*MSIE*/ jQuery(this).attr('src', quadBg.STRblankGifSrc);
/*MSIE*/ });
/*MSIE*/ this.parentNode.removeChild(this);
/*MSIE*/ };
/*MSIE*/ loaderImg = document.getElementsByTagName('body')[0].appendChild(loaderImg);
/*MSIE*/ loaderImg.style.visibility = 'hidden';
/*MSIE*/ loaderImg.src = imgSrc;
/*MSIE*/ };
/*MSIE*/ setImgSize(OBJsettings.img);
/*MSIE*/ }
}
// return jquery
return DOMparentObj;
};
////////////////////////////////////////////////////////////////////////////////////////////
//// plugin applies quadcorner markup/styling via CSS (within "this" context).
////////////////////////////////////////////////////////////////////////////////////////////
jQuery.fn.applyCssQuadBg = function() {
this.find('*').each(function(){
// decorate iterated element
var element = $(this);
// determine if element has CSS background, containing the querystring keyword
var hasQuadBg = (
(
element.css('background') &&
/[\?\&]qcImg\=/.test(element.css('background'))
) || (
element.css('background-image') &&
/[\?\&]qcImg\=/.test(element.css('background-image'))
)
);
// if the element styling indicates a corner image, apply it appropriately
if (hasQuadBg) {
// get the complete css propery string applicable. longhand trunmps shorthand
var cssStr = element.css('background-image') || element.css('background');
// strip the css string down to the url property alone
var imgStr = cssStr.split('url(')[1].split(')')[0].replace('"','').replace('\'','');
// get the base image location
var baseImg = imgStr.split('#')[0].split('?')[0];
// construct object to pass constructor info on to the processing function.
var cnrSpecs = {};
// get the default image
cnrSpecs.img = imgStr.split(/[\?\&]qcImg\=/)[1].split('&')[0];
// get the top left image override, if there is one.
cnrSpecs.imgTL = (/[\?\&]qcImgTL\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgTL\=[^\&]+/)[0].split('=')[1] : null;
// get the top right image override, if there is one.
cnrSpecs.imgTR = (/[\?\&]qcImgTR\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgTR\=[^\&]+/)[0].split('=')[1] : null;
// get the bottom right image override, if there is one.
cnrSpecs.imgBR = (/[\?\&]qcImgBR\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgBR\=[^\&]+/)[0].split('=')[1] : null;
// get the bottom left image override, if there is one.
cnrSpecs.imgBL = (/[\?\&]qcImgTL\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgTL\=[^\&]+/)[0].split('=')[1] : null;
// get left biasing
cnrSpecs.biasL = (/[\?\&](qcBiasL|qcBiasR)\=\d+/.test(imgStr)) ? ((/[\?\&]qcBiasL\=\d+/.test(imgStr)) ? imgStr.match(/[\?\&]qcBiasL\=\d+/)[0].split('=')[1] : 100 - imgStr.match(/[\?\&]qcBiasR\=\d+/)[0].split('=')[1]) : null;
// get top biasing
cnrSpecs.biasT = (/[\?\&](qcBiasT|qcBiasB)\=\d+/.test(imgStr)) ? ((/[\?\&]qcBiasT\=\d+/.test(imgStr)) ? imgStr.match(/[\?\&]qcBiasT\=\d+/)[0].split('=')[1] : 100 - imgStr.match(/[\?\&]qcBiasB\=\d+/)[0].split('=')[1]) : null;
// detemerine whether or not to keep the original background styling
cnrSpecs.keepBg = !!(/[\?\&]qcKeepBg\=true/.test(imgStr));
// process all image properties for correct pathing
for (var i in cnrSpecs) { if (i.indexOf('img') != -1 && cnrSpecs[i]) { cnrSpecs[i] = (/^\.\/|^\./.test(cnrSpecs[i])) ? cnrSpecs[i] : (baseImg.substring(0, baseImg.lastIndexOf('/'))+'/'+cnrSpecs[i]); } }
}
element.setQuadBg(cnrSpecs);
});
};
////////////////////////////////////////////////////////////////////////////////////////////
//// plugin provides quadcorners-safe (nondestructive) HTML method, like $().html().
////////////////////////////////////////////////////////////////////////////////////////////
jQuery.fn.HTML = function(arg) {
// if element contains a quadcorners content wrapper as an immediate child, shift target element, to it.
var target = (this.children('div.rndCornersContentWrapper').length) ? $(this.children('div.rndCornersContentWrapper')[0]) : this;
// if new HTML has been specified, make sure it gets processed for any quadCorner styling automatically.
if (arg) {
// first - insert the innerhtml.
target.html(arg);
// second, apply quadCorners throughout element contents (on a delay or styling is ignored).
setTimeout(
function() {
target.applyCssQuadBg();
},
10
);
}
// finally, return the completed markup.
return target.html(arg);
};
jQuery(document).ready(function() { jQuery('body').applyCssQuadBg(); });
////////////////////////////////////////////////////////////////////////////////////////////
//// write in supporting inline styles.
////////////////////////////////////////////////////////////////////////////////////////////
/*MSIE*/ document.write(quadBg.procStyles(quadBg.STRinlineStyling));
})();