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...
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!
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