JavaScript

Since I opened the lab, few people asked to me how it works.

Today I’m going to answer that and also I will release the code that makes the lab possible.

The lab is a really simple script:

1. Reads from a given path all the files and paths that are inside.
2. The list is shorted by date of creation (in this way we have the newest script in the top).
3. We only display the folders that have a readme.txt file inside.
4. If inside the folder there’s a screenshot or a .zip or index.php or index.html we show this options.

Of course right now only works with HTML and PHP, but for me is enough.

For a new script to appear in the list must be have this requirements:

/folderExample/
readme.txt (mandatory, you can ad as many new fields as you wish)
screenshot.png (optional)
index.php or index.html (example for the running script, optional)
folderExample.zip (download for the script, optional)

Improvements that I have in mind:

• Pagination
• RSS

Version: 0.1
Author: Chema Garrido
License: GPL v3

Demo in lab.neo22s.com
Download

Three useful functions for JavaScript.

They are not the best since you need to have X and Y as global variables, but it works.

var x,y;//GLOBAL
function returnInnerDimensions(){//returns screen size X,Y
	if (self.innerHeight){ // all except Explorer
		x = self.innerWidth;
		y = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight){// Explorer 6 Strict Mode
		x = document.documentElement.clientWidth;
		y = document.documentElement.clientHeight;
	}
	else if (document.body){ // other Explorers
		x = document.body.clientWidth;
		y = document.body.clientHeight;
	}
}
 
function returnScrollOffset(){//return how much we scrolled already
	if (self.pageYOffset){ // all except Explorer
		x = self.pageXOffset;
		y = self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop){// Explorer 6 Strict
		x = document.documentElement.scrollLeft;
		y = document.documentElement.scrollTop;
	}
	else if (document.body){ // all other Explorers
		x = document.body.scrollLeft;
		y = document.body.scrollTop;
	}
}
 
function returnPageDimensions(){//returns the page size, max X and max Y
	var sh = document.body.scrollHeight;
	var oh= document.body.offsetHeight
	if (sh > oh){ // all but Explorer Mac
		x = document.body.scrollWidth;
		y = document.body.scrollHeight;
	}
	else {// Explorer Mac;would also work in Explorer 6 Strict, Mozilla and Safari
		x = document.body.offsetWidth;
		y = document.body.offsetHeight;
	}
}

Works in ie5,ie6,ie7,ie8, Firefox, Chrome, Safari. That I could try ;)

Easy tip of the day xD

You want to have a modal of confirmation before an action?

Here you have the way of doing this:

<a href="http://neo22s.com" onclick="return confirm('Are you sure you want to continue?');" >neo22s.com</a>

Try the confirm modal

Of course it works at any other HTML tag.

Still in many web pages they use the annoying pop up style that you don’t know where they are going, you can’t follow that pop up either search engines…

Normal pop up:

<a onclick="window.open('http://neo22s.com','popup','width=300,height=400')" href="#">Bad link</a>

Bad link

Why is so wrong:

• You can’t follow where the heck the link is going
• Search engines can’t either
• Not possible to open the link in a new Tab
• You need to have JavaScript enabled
• Is difficult to add it to favorites
• Doesn’t follow the standards

Good way following pop up:

<a href="http://neo22s.com" onclick="window.open(this.href, this.target,'width=300,height=400');return false;">Like this you can follow me!</a>

Like this you can follow me!

All of this comes from a client that ask me today why he couldn’t open that link of his webpage in a new tab…