I made this afternoon a date-picker in JS only using mootools.

I was prety impressed by the result, yet it’s not completly finnished.

But if any of you non existing readers are interested, here is a screenshot.

the date-picker

Today I’ve found perfectionism. I’ve found the most beautiful ajax navigation-system I’ve ever seen before. I’ve found a page that fades in and out, and scrolls you to all the right places smoother than the skin of a newborn baby. Today I’ve found peace, ’cause I now know that the web is in good hands. If you don’t believe me, go see for yourself. Check out the all new Xeoncross.com. I don’t have any more to say. I’m just stunned. You gott’a do the talking at this one folks.

Later.

I’ve just finished creating a popup class for alxandr.mydyn.net and it’s by far the best popup-class I’ve ever made. Each popup is a div that’s assigned to the page, they all have close-buttons, they all are movable, and when you select one of them it comes on top of the other ones. Take a look at this imake:

alxandr.mydyn.net popup

The code for this baby looks like this:

window.popups = new Array();
window.availiblePopup = function()
{
	for(var i = 0; i < window.popups.length; i++)
	{
		if(window.popups[i].popUp.get('opacity') == 0)
		{
			return window.popups[i];
		}
	}
	return new popup();
}
window.highestPopup = 1;
window.popup = new Class({
	Implements: Events,
	initialize: function()
	{
		this.popUp = new Element('div', {
			styles: {
				position: 'absolute',
				border: '5px solid #001366',
				padding: 0,
				'background-color': '#000'
			},
			opacity: 0
		});
		var topTable = new Element('table', {
			cellpaddin: 0,
			cellspacing: 0
		});
		this.popUp.grab(topTable);
		var titleRow = $(topTable.insertRow(0));
		var titleCell = $(titleRow.insertCell(0));
		titleCell.set('styles', {
			'text-align': 'left',
			padding: '2px',
			'text-transform': 'uppercase',
			'background-color': '#001366',
			color: '#ff7800'
		});
		var titleTable = new Element('table', {
			styles: {
				width: '100%'
			}
		});
		titleCell.grab(titleTable);
		var titleTable_row = $(titleTable.insertRow(0));
		this.titleView = $(titleTable_row.insertCell(0));
		this.popUp.addEvent('mousedown', function() {
			this.set('styles', {
				'z-index': window.highestPopup++
			});
		});
		var closerCell = $(titleTable_row.insertCell(1));
		closerCell.set('styles', {
			'text-align': 'right'
		});
		var textRow = $(topTable.insertRow(1));
		this.textView = $(textRow.insertCell(0));
		this.textView.set('styles', {
			padding: '20px'
		});
		this.closer = new Element('span', {
			text: 'X',
			styles: {
				color: '#fff',
				cursor: 'pointer'
			},
			events: {
				mouseover: function() {
					this.set('styles', {
						color: "#f00"
					});
				},
				mouseleave: function() {
					this.set('styles', {
						color: "#fff"
					});
				},
				click: function() {
					this.retrieve('popup').hide();
				}
			}
		});
		closerCell.grab(this.closer);
		this.closer.store('popup', this);
		this.drager = new Drag(this.popUp, {
			handle: this.titleView
		});
		this.popUp.inject(document.body);
		window.popups.push(this);
	},
	show: function(text, title)
	{
		this.titleView.set('text', title);
		this.textView.empty();
		this.textView.set('text', text);
		return this.trueShow();
	},
	showHtml: function(html, title)
	{
		this.titleView.set('text', title);
		this.textView.set('html', text);
		return this.trueShow();
	},
	showPredefined: function(title)
	{
		this.titleView.set('text', title);
		return this.trueShow();
	},
	predefine: function(item)
	{
		this.textView.empty();
		this.textView.grab(item);
		return this;
	},
	trueShow: function()
	{
		this.popUp.set('styles', {
			'z-index': window.highestPopup++
		});
		if(this.popUp.get('opacity') == 0)
		{
			this.resetPossition();
			this.popUp.fade(0.85);
		}
		return this;
	},
	close: function()
	{
		this.popUp.fade('out');
		this.exit();
		return this;
	},
	hide: function()
	{
		return this.close();
	},
	flashOut: function()
	{
		this.popUp.tween('border', '5px solid #440', '5px solid #001366');
		this.hide.delay(1000, this);
		return this;
	},
	flash: function(text, title, func, resetPos)
	{
		this.remove();
		this.show(text, title);
		if(resetPos)
		{
			this.resetPossition();
		}
		this.flashOut.delay(800, this);
		if(func && $type(func) == "function")
		{
			func.delay(3000);
		}
		return this;
	},
	resetPossition: function()
	{
		this.popUp.set('styles', {
			top: (window.getSize().y / 2) - (this.popUp.getSize().y / 2) + window.getScroll().y,
			left: (window.getSize().x / 2) - (this.popUp.getSize().x / 2) + window.getScroll().x
		});
		return this;
	},
	remove: function()
	{
		this.popUp.set('opacity', 0);
		this.exit();
		return this;
	},
	exit: function()
	{
		this.onExit();
	},
	onExit: function()
	{
		this.fireEvent('exit');
	}
});

I know, I know. It’s ugly. But I’ll clean up the code a bit later. As of now you who might want to use it; go ahead. It’s getting to late for me to describe anything except that you’ll need mootools in order for this code to work.

Later

I’ve just tried out the codeigniter framework and I’ve just fallen in love with it. Totally fallen in love. It’s just amazing! I can’t figure out how the url works, but it just does, and I don’t care about how anymore. I’ve started using it at my homepage (alxandr.mydyn.net), and I’m going to explore it as much as I can before school starts again. You’ll probably see some action on my homepage over the next week if you pay attention to it. As of now a small “About”-page has been setup. But more is to come, you can be sure about that. After some time I’ll probably also move this blog over to that page. Creating a blog from scratch is not somthing that is done overnight, but it’s something that I want to do. I don’t know when, I don’t even know if I’ll ever be finished, but I have to start somewhere. And I know some guys I might ask for help when I might need that. But I need to get back to my work at my homepage.

Later.

So at last I’ve finished varebilspesialisten.no (or at least I think it’s finished, and that’s a start, isn’t it?). I have no idea of how long I’ve been working on this project now. When it’s all up and on line I’ll give y’all the address, but you’ll probably won’t be able to understand any of it anyway ’cause it’s in Norwegian. Anyway, it’s passed midnight here so I think I’ll get to bed as fast as possible. Long day tomorrow. This’ll be the first day in many that I’m in bed before 2am. Anyway, once everything is up and running I’ll get to my homepage. Just need to figure out what I want to do with it first. And maybe I want some free time after varebilspesialisten.no. I’ll see about that later. I’ll keep you posted.

Later

My home page alxandr.mydyn.net is somewhat up and running again. As of now the page is only saying “Under constructions…” and I know that isn’t much thrilling at all, but I’ll change that after some time. Though the layout has been made, and I’ve made a couple of classes (php) witch I make use of. The menu has also been javascripted. It’s not much yet, but it’s a start. Before I continue much further I need to figure out what I actually am to do with the page after all. I was wondering if I was to integrate the blog in the page itself, but I’ll see about that later. Feel free to take a look over at alxandr.mydyn.net.

Later

As of now Varebilspesialisten.no looks like this:

Varebilspesialisten.no's design

The page is more or less compleatly AJAX made and all effects is made with javascript and not with flash. I’ve used the mootools-engine quiet much.

After a few months working on varebilspeisalisten.no I’m feeling that it’s about finished now. I have a few more things to make sure works as it is supposed to. As of now I’ve made a all javascript and php environment with a simple to use interface and a nice looking design. The page has some nice features with for example the image-uploader. Once things is finished I’ll start publishing peaces of the code for everyone to use as they see fit.