Hey!
Remember the splash thing I asked for help before?
First of all, big thanks to <dont remember name> for the email to that guy.. he has been of GREAT help! So tell him thanks next time you talk to him!!
Anyways, this js works fine:
javascript Code:
function toggle() {
var content = $('content');
var width = content.getStyle('width').toInt();
if(width != 400) {
expand();
}
else {
contract();
}
}
function expand() {
var img1 = $('img1'), img2 = $('img2'), content = $('content');
var fx = new Fx.Styles(content, {
duration: 1000,
wait: false,
transition: Fx.Transitions.Cubic.easeOut,
onStart: function() {
content.setHTML('<center><p style="top: 50%;">Loading...</p></center>');
img1.setProperties({
'src': 'img/splash-open-left.png',
'onclick': ' '
});
img2.setProperty('src', 'img/splash-open-right.png');
},
onComplete: function() {
new Ajax('/test.html', {
method: 'get',
update: $('content'),
onFailure: content.setHTML('<center><p style="top: 50%;">Could not load file.</p></center>')
}).request();
}
});
fx.start({
'width': 400
});
}
function contract() {
var img1 = $('img1'), img2 = $('img2'), content = $('content');
var fx = new Fx.Styles(content, {
duration: 500,
wait: false,
transition: Fx.Transitions.Cubic.easeOut,
onStart: function() {
content.setHTML(' ');
},
onComplete: function() {
img1.setProperties({
'src': 'img/splash-close-left.png',
'onclick': 'toggle();'
});
img2.setProperty('src', 'img/splash-close-right.png');
}
});
fx.start({
'width': 0
});
}
html Code:
<div id="splash">
<img id="img1" onclick="toggle();" src="img/splash-close-left.png" border="0" style="float: left; margin-top: 1px;"/><div id="content"></div><img id="img2" onclick="toggle();" src="img/splash-close-right.png" border="0" style="float: left;"/>
</div>
So, actually, the Ajax part doesn't work.. I've asked on mootools.net forum, and they said that it could be something with my xmlhttprequest on localhost and mm... :-P
Anyways, this code is obviously really hard to read, and really.. ugly. I wanted to start learning more about classes, so I tried to convert it to a class(mostly for the experience, but also for improoved readability).
I don't know how many of you are familiar with classes in javascript, and coding with mootools, of you who're on this forum, since it's mostly for PHP.
But I thought I'd post it here anyways, so this is my class:
javascript Code:
var Splash = new Class({
Implements: Options,
options: {
content: $('content'),
img1: $('img1'),
img1_closed: '',
img1_opened: '',
img2: $('img2'),
img2_closed: '',
img2_opened: '',
maxWidth: 400,
expandLoadingText: '',
ajaxUrl: '',
expandDuration: 1000,
expandEffect: Fx.Transitions.Cubic.easeOut,
contractDuration: 500,
contractEffect: Fx.Transitions.Cubic.easeOut
},
initialize: function(options) {
this.setOptions(options);
},
toggle: function() {
var width = this.options.content.getStyle('width').toInt();
if(width < this.options.maxWidth) {
this.expand();
}
else {
this.contract();
}
},
expand: function() {
var fx = new Fx.Styles(this.options.content, {
duration: this.options.expandDuration,
wait: false,
transition: this.options.expandEffect,
onStart: this.expandStart(),
onComplete: this.loadAjax()
});
fx.start({
width: this.options.maxWidth
});
},
expandStart: function() {
this.options.content.setHTML(this.options.expandLoadingText);
this.options.img1.setProperties({
src: this.options.img1_opened,
onclick: ' '
});
this.options.img2.setProperty(src, this.options.img2_opened);
},
loadAjax: function() {
//var fx = this.options.content.effect('opacity', {duration: 300, transition: Fx.Transitions.linear, wait:true});
new Ajax(this.options.ajaxUrl, {
//onRequest: function() {fx.start(0)},
//onComplete: function() {window.setTimeout(fx.start(1),10000);},
onFailure: this.options.content.setHTML('Could not load Ajax.'),
method: 'get',
update: this.options.content
}).request();
},
contract: function() {
var fx = new Fx.Styles(this.options.content, {
duration: this.options.contractDuration,
wait: false,
transition: this.options.contractEffect,
onStart: this.options.content.setHTML(' '),
onComplete: function() {
this.options.img1.setProperties({
src: this.options.img1_closed,
onclick: 'splash.toggle();'
});
this.options.img2.setProperty(src, this.options.img2_closed);
}
});
fx.start({
width: 0
});
}
});
I gotta say, classes in javascript are actually really fun! :-D
And I added this:
javascript Code:
var options = {
img1_closed: 'img/splash-close-left.png',
img1_opened: 'img/splash-open-left.png',
img2_closed: 'img/splash-close-right.png',
img2_opened: 'img/splash-open-right.png',
expandLoadingText: 'Loading Ajax..',
ajaxUrl: 'test.html'
}
var splash = new Splash(options);
html Code:
<div id="splash">
<img id="img1" onclick="splash.toggle();" src="img/splash-close-left.png" border="0" style="float: left; margin-top: 1px;"/><div id="content"></div><img id="img2" onclick="splash.toggle();" src="img/splash-close-right.png" border="0" style="float: left;"/>
</div>
But it doesn't work, so my guess is that's a minor typo, but anyways, thought I'd post it here for feedback.
This is my first class in javascript, so bare with me..
Thanks in advance!
Edit: Here's how it should work
Splash
And here's same page, but using the class
Splash