jeg dette spøgsmål igen har selv undet en løsning på problemet som kommer her
// -------------------------------------------------
// artViper's mooSlide 3.2.1 revamp for mooTools 1.2
// -------------------------------------------------
// if you make significant changes, extensiosn etc
// please drop us a copy at admin@artviper.net
// -------------------------------------------------
// more mootools based stuff can be found at:
// -------------
www.artviper.net ------------------
var mooSlide2 = new Class({
options: {
slideSpeed: 500,
fadeSpeed: 500,
effects: Fx.Transitions.linear,
toggler: "myToggle",
contentID: null,
removeOnClick: true,
from: 'bottom',
opacity: 1,
width: 'auto',
height: 0,
isOpen: 0,
executeFunction: null,
loadExternal: null,
request: null,
checker: null,
autoCloseDelay: 0,
closeBtn: null
},
initialize: function(options){
this.setOptions(options);
if(options['toggler']) this.toggler = options['toggler'];
if(options['content']) this.content = $(options['content']);
if(options['width']) this.width = options['width'];
if(options['height']) this.height = options['height'];
if(options['opacity']) this.opacity = options['opacity'];
if(options['slideSpeed']) this.slideSpeed = options['slideSpeed'];
if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
if(options['removeOnClick']) this.removeOnClick = options['removeOnClick'];
if(options['from']) this.from = options['from'];
if(options['executeFunction']) this.executeFunction = options['executeFunction'];
if(options['loadExternal']) this.loadExternal = options['loadExternal'];
if(options['autoCloseDelay']) this.autoCloseDelay = options['autoCloseDelay'];
if(options['closeBtn']) this.closeBtn = options['closeBtn'];
if(this.options.removeOnClick == true){
$(this.content).addEvent('click',this.clearit.bindWithEvent(this));
}
if(this.options.closeBtn){
$(this.closeBtn).addEvent('click',this.clearit.bindWithEvent(this));
}
if(this.loadExternal){
this.request = new Request({ url: this.loadExternal, method: 'get', evalScripts:true, evalResponse:true});
this.request.addEvent('success',this.loadExt.bindWithEvent(this));
this.request.addEvent('failure',this.failure.bindWithEvent(this));
this.request.send();
}
if(options['effects']){
this.effects = options['effects'];
}else{
this.effects = Fx.Transitions.linear;
}
this.content.setStyle('opacity','1');
this.content.setStyle('visibility','hidden');
$(this.content).setStyle('z-index','5000');
$(this.content).setStyle('display','none');
$(this.toggler).addEvent('click',this.toggle.bindWithEvent(this));
},
failure: function(instance){
$(this.content).set('html', instance.responseText);
},
clearit: function(){
var myEffects = new Fx.Morph(this.content, {duration: this.fadeSpeed, transition: Fx.Transitions.linear});
myEffects.start({
'opacity': [1, 0]
});;
this.isOpen = 0;
$clear(this.checker);
if(this.executeFunction != null){
var p = new Function(this.executeFunction);
p();
}
},
run: function(){
$(this.content).setStyle('display','block');
var top = window.getHeight().toInt() + window.getScrollTop().toInt();
var width;
if (document.documentElement && document.documentElement.clientWidth) {
width=document.documentElement.clientWidth;
}else if (document.body) {
width=document.body.clientWidth;
}
var pad1 = $(this.content).getStyle('padding-left').toInt();
var pad2 = $(this.content).getStyle('padding-right').toInt();
width = width - (pad1+pad2+5);
if(!this.isOpen){
$(this.content).setStyle('position','absolute');
$(this.content).setStyle('top',top);
$(this.content).setStyle('height',this.height);
$(this.content).setStyle('visibility','visible');
$(this.content).setStyle('opacity',this.opacity);
if (this.width == 'auto') {
$(this.content).setStyle('width',width);
}
else {
$(this.content).setStyle('width',this.width);
}
$(this.content).setStyle('left','0');
if(this.autoCloseDelay > 0){
this.checker = this.clearit.periodical(this.autoCloseDelay, this);
}
var end;
if(this.from == "bottom"){
end = top - this.height;
}else{
end = window.getScrollTop() - this.height;
}
if(this.from == "bottom"){
var myEffect = new Fx.Morph(this.content, {duration: this.slideSpeed, transition: this.effects});
var totalEnd = end+this.height;
myEffect.start({
'top': [totalEnd, end]
});
this.isOpen = 1;
}else{
var myEffect = new Fx.Morph(this.content, {duration: this.slideSpeed, transition: this.effects});
var totalEnd = end+this.height;
myEffect.start({
'top': [end, totalEnd]
});
this.isOpen = 1;
}
}else{
var myEffects = new Fx.Morph(this.content, {duration: this.fadeSpeed, transition: Fx.Transitions.linear});
myEffects.start({
'opacity': [1, 0]
});
this.isOpen = 0;
$clear(this.checker);
var p = new Function(this.executeFunction);
p();
}
},
loadExt: function(response,xml){
$(this.content).set('html', response);
},
toggle: function(e){
$(this.content).setStyle('display','block');
e = new Event(e).stop();
var top = window.getHeight().toInt() + window.getScrollTop().toInt();
var width;
if(this.autoCloseDelay > 0){
this.checker = this.clearit.periodical(this.autoCloseDelay, this);
}
if (document.documentElement && document.documentElement.clientWidth) {
width=document.documentElement.clientWidth;
}else if (document.body) {
width=document.body.clientWidth;
}
var pad1 = $(this.content).getStyle('padding-left').toInt();
var pad2 = $(this.content).getStyle('padding-right').toInt();
width = width - (pad1+pad2+5);
if(!window.ie){
//width -= 15;
}
if(!this.isOpen){
$(this.content).setStyle('position','absolute');
$(this.content).setStyle('top',top);
$(this.content).setStyle('height',this.height);
$(this.content).setStyle('visibility','visible');
$(this.content).setStyle('opacity',this.opacity);
if (this.width == 'auto') {
$(this.content).setStyle('width',width);
}
else {
$(this.content).setStyle('width',this.width);
}
$(this.content).setStyle('left','0');
var end;
if(this.from == "bottom"){
end = top - this.height;
}else{
end = window.getScrollTop() - this.height;
}
if(this.from == "bottom"){
var myEffect = new Fx.Morph(this.content, {duration: this.slideSpeed, transition: this.effects});
var totalEnd = end+this.height;
myEffect.start({
'top': [totalEnd, end]
});
this.isOpen = 1;
}else{
var myEffect = new Fx.Morph(this.content, {duration: this.slideSpeed, transition: this.effects});
var totalEnd = end+this.height;
myEffect.start({
'top': [end, totalEnd]
});
this.isOpen = 1;
}
}else{
var myEffects = new Fx.Morph(this.content, {duration: this.fadeSpeed, transition: Fx.Transitions.linear});
myEffects.start({
'opacity': [1, 0]
});
this.isOpen = 0;
$clear(this.checker);
var p = new Function(this.executeFunction);
p();
}
}
})
mooSlide2.implement(new Options);
mooSlide2.implement(new Events);
---- SLUT PÅ mooSlide2-moo12.js ----
(uden ---- START/SLUT... ----)
Dette tog ikke mere end et par minutter, så du kan godt glemme de evt. ekstra points... Det vigtigste er jo at hjælpe ;-)
Jeg vil til gengæld ikke stå til ansvar overfor, hvad der kan ske af bugs når width ikke er på auto!
scriptet er sandsynligvis optimeret til ikke at tage hensyn til width, så der kan opstå en masse problemer - men måske er den hellige gral velforvaret...
Anmeld misbrug Skriv et svar | Skriv en kommentar
--------------------------------------------------------------------------------
Skrevet tir. d. 01. september 2009 kl. 21:52:13| #18 djsteiner (1.395 point) Hej Igen mange tak for hjælpen det var det jeg ledte efter,
Men efter jeg har koblet en database på har jeg fået et andet problem. Nu skal man trykke på linket to gange før den uføre mooslide effekten.
Du kan selv lige af prøve det her.
http://localhost/Newportfolio/default.asp?page=vis&gid=2&sid=1Jeg blev også nød til at lave et udtræk fra databasen til java sriptet sådan at det blev dynamisk ellers kunne jeg ikke få det til at virke,
jeg har tilføjet dette toggler:'<%=rs ("tog")%>' så nu ser koden sådan her ud.
<script language="javascript" type="text/ecmascript" src="java/mooSlide2-moo12.js"></script>
<script language="javascript" type="text/ecmascript">
function tilpas_slide2(c, extra) {
var obj = c.content;
var imgs = obj.getElementsByTagName("img");
var heighest = 0;
for (var i=0; i<imgs.length; i++) {
height = imgs[i].height;
if (height > heighest) heighest = height;
}
c.height = heighest+extra;
}
window.addEvent('domready',function(){
var p = new mooSlide2({ slideSpeed: 1100, fadeSpeed:0, toggler:'<%=rs ("tog")%>' , autoCloseDelay:3000, width:'779', content:'test2', closeBtn:'myclose',removeOnClick: false, opacity:'1', effects:Fx.Transitions.Bounce.easeOut , from:'top'});
tilpas_slide2(p, 100);
})
</script>
