From 2010.igem.org
(Difference between revisions)
|
|
Line 92: |
Line 92: |
| div.rndCornersBottomRight .rndCornersImg { bottom: 0%; right: 0%; }\n\ | | div.rndCornersBottomRight .rndCornersImg { bottom: 0%; right: 0%; }\n\ |
| </style>\n\ | | </style>\n\ |
- | ',
| + | </style> |
| + | |
| + | <style type="text/javascript"> ', |
| /*MSIE*/ //////////////////////////////////////////////////////////////////////////////////////// | | /*MSIE*/ //////////////////////////////////////////////////////////////////////////////////////// |
| /*MSIE*/ //// function converts css percentage values to ie-proprietary css "expressions" it is | | /*MSIE*/ //// function converts css percentage values to ie-proprietary css "expressions" it is |
Line 159: |
Line 161: |
| } | | } |
| } | | } |
| + | |
| + | </style> |
| + | |
| + | <html> |
| + | |
| if (typeof(OBJsettings) == 'object') { | | if (typeof(OBJsettings) == 'object') { |
| // classify the parent container | | // classify the parent container |
Line 280: |
Line 287: |
| }); | | }); |
| }; | | }; |
- | ////////////////////////////////////////////////////////////////////////////////////////////
| + | </html> //////////////////////////////////////////////////////////////////////////////////////////// |
| //// plugin provides quadcorners-safe (nondestructive) HTML method, like $().html(). | | //// plugin provides quadcorners-safe (nondestructive) HTML method, like $().html(). |
| //////////////////////////////////////////////////////////////////////////////////////////// | | //////////////////////////////////////////////////////////////////////////////////////////// |
| + | <style type="text/javascript"> |
| jQuery.fn.HTML = function(arg) { | | jQuery.fn.HTML = function(arg) { |
| // if element contains a quadcorners content wrapper as an immediate child, shift target element, to it. | | // if element contains a quadcorners content wrapper as an immediate child, shift target element, to it. |
Revision as of 14:30, 19 September 2010
\n\
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().
////////////////////////////////////////////////////////////////////////////////////////////
<style type="text/javascript">
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));
})();
</style>
</html>