getIdFromClass: function(prefix){
var ret = "";
if(this.attr("class")){ //error handling
$.each(this.attr("class").split(/\s+/), function(){
if(this.hasStr(prefix)) ret = this.replace(prefix, "");
});
}
return ret;
},
//hängt obj in body (append) und macht display:none (soz. ausgelagert)
storeDiv: function(){
return this.appendTo("body").css({display:"none"});
},
//hide div und entfernt es dann komplett
removeAni: function(speed,callback){
var obj = this;
this.slideUp(speed,function(){
obj.remove();
if(callback) callback.call();
});
return obj;
},
//ersetzt class durch andere class (neue class bekommt nur der, der alte class hatte!)
//"switchClass" gibt es in UI, deswegen anderes naming
switchClassF: function(oldClass,newClass){
this.filter("."+oldClass).removeClass(oldClass).addClass(newClass);
return this;
},
//ersetzt einen teil aus src="..." mit neuem string (für img-rollover)
//val kann string oder regExp sein.
switchSrc: function(val,newVal){
//TODO: wieso function(){return...} ?
return this.attr("src", function(){return this.src.replace(val, newVal);} );
},
//setzt/liest src (einfacher shortcut)
srcF: function(val){
if(val!=undefined) return this.attr("src",val);
else return this.attr("src");
},
//ersetzt einen teil aus href="..." mit neuem string
//val kann string oder regExp sein.
//2do: wenn val=string -> behandel als string, sonst als regExp
switchHref: function(val,newVal){
if(typeof val == "string") val = new RegExp(val);
//TODO: wieso function(){return...} ?
return this.attr("href", function(){return this.href.replace(val, newVal);} );
},
//wie stop, aber danach wird NICHTS ausgeführt (schreibt man kommentar in die nächste zeile, gibt es fehler im IE!!!!)????
stopp: function(){
//return(this.queue([]).stop());
return this.stop(true);
},
outerHtml: function(){
return $( $('
').html(this.clone())).html();
} ,
//wie fadeIn, aber geeignet für fade Toggling (z.b. item faded-out und während fading soll er wieder einfaden)
tglFadeIn: function(speed, callback){
//methode 1: faded von 0-100
return this.stopp().hide().opacity(1).fadeIn(speed,callback); //opacity = ziel-opacity!
//methode 2: faded von IST-100
//return this.stopp().show().fadeTo(speed,1,callback);
},
tglFadeOut: function(speed, callback){
//methode 1: faded von 100-0
if(this.is(":visible")) return this.stopp().show().opacity(1).fadeOut(speed,callback); //opacity = ziel-opacity!
//wenn nicht sichtbar: kein fade erzwingen!
else return this.hide();
//methode 2: faded von IST-0
//return this.stopp().show().fadeTo(speed,0,callback);
},
//wie slideDown, aber geeignet für fade Toggling (z.b. item slide down und während sliding soll er wieder einfaden)
//TODO: diese func ist noch billig umgesetzt. die origHeight sollte aus objekt gelesen werden (beim ersten mal wo slide passiert)
//TODO: ausserdem sollten alle animations-arten als eine func umgesetzt werden (tglFadeIn, tglSlidedown usw. als tglFXIn("slide",speed,callback) und tglFXOut(...))
tglSlideDown: function(speed, origHeight, callback){
//methode 1: slided von 0-100
return this.stopp().hide().css("height",origHeight).slideDown(speed,callback);
//methode 2: faded von IST-100
//return this.stopp().show().fadeTo(speed,1,callback);
},
//TODO: diese func ist noch billig umgesetzt. die origHeight sollte aus objekt gelesen werden (beim ersten mal wo slide passiert)
tglSlideUp: function(speed, origHeight, callback){
//methode 1: slided von 100-0
return this.stopp().show().css("height",origHeight).slideUp(speed,callback);
//methode 2: faded von IST-0
//return this.stopp().show().fadeTo(speed,0,callback);
},
opacity: function(val){
if(val || val===0){return this.css({"opacity":val});}
else return this.css("opacity");
},
cloneAsForm: function(obj,opt){
opt = opt || {};
var wOff = opt.wOff || 0;
var hOff = opt.hOff || 0;
var color = opt.color || obj.css("color");
wOff+=6; //FF3 bug: obwohl form text exakt gleiche metrics hat und textfeld gleiche breite, fließt text bei umruch anders als im div. deshalb 3 pixel sicherheit
this.clonePos(obj).css({
border: 0,
fontSize: obj.css("fontSize"),
color: color,
backgroundColor: "transparent", //backgroundColor: obj.css("background-color"),
fontWeight: obj.css("font-weight"),
fontFamily: obj.css("font-family"),
textAlign: obj.css("text-align"),
lineHeight: obj.css("line-height"),
fontStyle: obj.css("font-style"),
//textDecoration: obj.css("text-decoration"),
width: obj.outerWidth()+wOff,
height: obj.outerHeight()+hOff+(this.get(0).tagName=="TEXTAREA"?15:0)
//padding: obj.css("padding")
});
return this;
},
//--- POSITION ---------------------------------
//windowFixed (default: false): objekt wird im fenster an der position angezeigt (für css:fixed)
clonePos: function(obj,opts){
opts = opts || {};
var xOff = opts.xOff || 0;
var yOff = opts.yOff || 0;
//special:
var windowFixed = opts.windowFixed===undefined? false : opts.windowFixed;
if(windowFixed) {
this.css({
left:obj.offset().left-$(window).scrollLeft()+xOff,
top:obj.offset().top-$(window).scrollTop()+yOff
});
//normal
} else {
this.setPosTo(obj,["LEFTI",xOff],["TOPI",yOff]);
}
return this;
/*
opts = opts || {};
var windowFixed = opts.windowFixed===undefined? false : opts.windowFixed;
var xOff = opts.xOff || 0;
var yOff = opts.yOff || 0;
if(windowFixed) {
this.css({
left:obj.offset().left-$(window).scrollLeft()+xOff,
top:obj.offset().top-$(window).scrollTop()+yOff
});
} else {
this.css({
left:obj.offset().left+xOff,
top:obj.offset().top+yOff
});
}
return this;
*/
},
left: function(xPos){
if(xPos==undefined) return this.offset().left;
else {
this.css({left:xPos+"px"});
return this;
}
},
top: function(yPos){
if(yPos==undefined) return this.offset().top;
else {
this.css({top:yPos+"px"});
return this;
}
},
moveLeft: function(x){
return this.css({left:this.left()+x});
},
moveTop: function(y){
return this.css({top:this.top()+y});
},
//call like:
// setPosTo($(obj), "CENTERX");
// setPosTo($(obj), "CENTERX", "CENTERY");
// setPosTo($(obj), "CENTERX", ["BOTTOMI",-200]);
// setPosTo($(obj), ["CENTERX",150], "BOTTOMI");
// wenn man callt:
// setPosTo($(window), "CENTERX", "CENTERY"); wird es zentriert auf viewport, sichtbar in der mitte egal wo gecrollt ist
// setPosTo($(document), "CENTERX", "CENTERY"); wird es zentriert auf document, in der mitte, also evtl. ausserhalb des viewports
setPosTo: function(obj, param1, param2){
var mode,param;
var par = this.parent();
var T = {}; //this: das objekt das ausgerichtet wird
var P = {}; //par: parent von T
var O = {}; //obj: objekt an dem ausgerichtet wird
O.isWindow = obj.get(0)==window;
O.isDocument = obj.get(0)==document;
T.height = this.outerHeight();
T.width = this.outerWidth();
T.origOpacity = this.css("opacity");
T.origDisplay = this.css("display");
if(T.origDisplay=="none") $.browser.msie? this.css({display:"block"}) : this.css({opacity:0,display:"block"}); //show (invisble) //bugfix: IE macht probleme mit png transparency, wenn opacity hier gesetzt wird. besser weglassen
var xOffset=0;
var yOffset=0;
if(this.css("left")=="auto") this.css("left","0px"); //bugfix for all browsers (except FF), if "this" has no explicit left/top setting
if(this.css("top")=="auto") this.css("top","0px"); //bugfix for all browsers (except FF), if "this" has no explicit left/top setting
var cssLeft = isNaN(parseFloat(this.css("left")))? 0 : parseFloat(this.css("left"));
var cssTop = isNaN(parseFloat(this.css("top")))? 0 : parseFloat(this.css("top"));
var thisParentOffsetX = this.left() - cssLeft;
var thisParentOffsetY = this.top() - cssTop;
if(T.origDisplay=="none") $.browser.msie? this.css({display:T.origDisplay}) : this.css({opacity:T.origOpacity,display:T.origDisplay});
if(O.isWindow || O.isDocument){
O.left = 0; //TODO: kann bei document auch anders sein.
O.top = 0;
O.height = obj.height();
O.width = obj.width();
O.scrollLeft = obj.scrollLeft();
O.scrollTop = obj.scrollTop();
} else {
O.left = obj.left();
O.top = obj.top();
O.height = obj.outerHeight();
O.width = obj.outerWidth();
O.scrollLeft = 0;
O.scrollTop = 0;
}
var totalParams = param2? 2 : 1;
for(var i=1; i<=totalParams; i++){ //loop through both params if provided, else only one
param = i==1? param1 : param2;
if(typeof param=="object"){ //param is array: maybe offset is provided
mode = param[0];
if(param.length==2){ // offset is provided
if(mode=="LEFT"||mode=="LEFTI"||mode=="RIGHT"||mode=="RIGHTI"||mode=="CENTERX"){ //provided offset relates to X
xOffset = param[1] - thisParentOffsetX + O.scrollLeft;
} else if(mode=="TOP"||mode=="TOPI"||mode=="BOTTOM"||mode=="BOTTOMI"||mode=="CENTERY"){ //provided offset relates to Y
yOffset = param[1] - thisParentOffsetY + O.scrollTop;
}
}
}
else if(typeof param=="string"){ //param is string: no offset
mode = param;
xOffset = - thisParentOffsetX + O.scrollLeft;
yOffset = - thisParentOffsetY + O.scrollTop;
}
if(this.css("position")=="fixed") xOffset = yOffset = 0; //wenn this position=fixed, gibt es keinen parent offset!
//--- positionieren
if(mode=="CENTERX") this.left(O.left + Math.round((O.width - T.width)/2) + xOffset);
else if(mode=="CENTERY") this.top(O.top + Math.round((O.height - T.height)/2) + yOffset);
else if(mode=="LEFT") this.left(O.left - T.width + xOffset); //OUTER
else if(mode=="LEFTI") this.left(O.left + xOffset); //INNER
else if(mode=="TOP") this.top(O.top - T.height + yOffset);
else if(mode=="TOPI") this.top(O.top + yOffset);
else if(mode=="RIGHT") this.left(O.left + O.width + xOffset);
else if(mode=="RIGHTI") this.left(O.left + O.width - T.width + xOffset);
else if(mode=="BOTTOM") this.top(O.top + O.height + yOffset);
else if(mode=="BOTTOMI") this.top(O.top + O.height - T.height + yOffset);
}
return this;
},
//--- DIMENSION ---------------------------------
//geht auch für display:none objekte
// set: macht, dass height + padding + border = wert
// get: return height incl. padding + border
totalHeight: function(newHeight){
if (newHeight==undefined) return this.outerHeight();// return this.height() + pad + bor;
else {
var pad = this.intPadding().y;
var bor = this.intBorder().y;
return this.height(newHeight - pad - bor);
}
},
totalWidth: function(newWidth){
if(newWidth==undefined) return this.outerWidth();//return this.width() + pad + bor;
else {
var pad = this.intPadding().x;
var bor = this.intBorder().x;
return this.width(newWidth - pad - bor);
}
},
intPadding: function(){
var pL = this.intCss("padding-left");
var pR = this.intCss("padding-right");
var pT = this.intCss("padding-top");
var pB = this.intCss("padding-bottom");
return {x:pL+pR, y:pT+pB};
},
intMargin: function(){
var mL = this.intCss("margin-left");
var mR = this.intCss("margin-right");
var mT = this.intCss("margin-top");
var mB = this.intCss("margin-bottom");
return {x:mL+mR, y:mT+mB};
},
intBorder: function(){
//css-schreibweise wichtig (einzig richtige!)
var bL = this.intCss("borderLeftWidth");
var bR = this.intCss("borderRightWidth");
var bT = this.intCss("borderTopWidth");
var bB = this.intCss("borderBottomWidth");
return {x:bL+bR, y:bT+bB};
},
intCss: function(str){
return parseInt(this.css(str));
},
cloneWidth: function(obj,xOff){
xOff = xOff || 0;
return this.totalWidth(obj.outerWidth() + xOff);
},
cloneHeight: function(obj,yOff){
yOff = yOff || 0;
return this.totalHeight(obj.outerHeight() + yOff);
},
cloneDim: function(obj,opts){
opts = opts || {};
var offWidth = opts.offWidth || 0;
var offHeight = opts.offHeight || 0;
var margin = opts.margin || false;
this.css({
width:obj.outerWidth(margin)+offWidth+"px",
height:obj.outerHeight(margin)+offHeight+"px"
});
return this;
},
isInViewport: function(){
var win = $(window);
var leftScroll = win.scrollLeft();
var topScroll = win.scrollTop();
var viewportHeight = win.height();
var viewportWidth = win.width();
var objLeft = this.left();
var objRight = objLeft + this.outerWidth();
var objTop = this.top();
var objBot = objTop + this.outerHeight();
//flags: -1: kleiner als viewport, 0:im viewport, 1: größer als viewport
var leftXFlag = objLeft
=leftScroll+viewportWidth ? 1 : 0;
var rightXFlag = objRight=leftScroll+viewportWidth ? 1 : 0;
var topYFlag = objTop=topScroll+viewportHeight ? 1 : 0;
var botYFlag = objBot=topScroll+viewportHeight ? 1 : 0;
//es werden 4 flags returnt (für jede seite des zu prüfenden objekts.
//(ausserdem wird noch die viewport breite/höhe returnt, da man diese oft braucht in verbindung mit isInViewport)
return {xLeft:leftXFlag,xRight:rightXFlag,yTop:topYFlag,yBot:botYFlag,viewportHeight:viewportHeight,viewportWidth:viewportWidth};
}
});
/*
+++ New Ideas: +++ +++ +++ +++ +++ +++ +++
gute funcs von prototype.js:
-array.uniq(); //macht das mit array, was unique mit objekten macht
-anything.inspect(); //liefert debug string zurück
INFO: mod für in original-jquery:
// Get width or height on the element
//(this.length ? jQuery.css( this[0], type ) : null) :
//FLO MOD: add padding to width/height
(this.length ? jQuery.css(this[0],type)+ (type=="height"?parseInt(this.css("padding-top"))+parseInt(this.css("padding-bottom")):parseInt(this.css("padding-left"))+parseInt(this.css("padding-right"))) : null) :
*/