var Math = {
	Add: function(Number1, Number2) {
		///
		///		Addition function.
		///
		/// Return the total of two number (n1 + n2).
 
		Code here.
	},
	Sub: function(Number1, Number2) {
		///
		///		Substract function.
		///
		/// Return the total of two number (n1 – n2).
 
		Code here.
	},
	...
}

To call your function, you can simply call it by doing “alert(Math.Add(12,12));”. It is also possible to create object where you need to do a new to instantiate it. To learn more about the JSON, you can go on http://msdn.microsoft.com/en-us/library/bb299886.aspx.
If you want to instantiate an object that does some init stuff, I strongly suggest using something like the following:

var Math = function {
	init stuff here
	...
	Create function directly inside the function (anonymous type)
	function Sub(Number1, Number2) {
		///
		///		Substract function.
		///
		/// Return the total of two number (n1 – n2).
 
		Code here.
	}
}
function Math.prototype.Add (Number1, Number2) {
		///
		///		Addition function.
		///
		/// Return the total of two number (n1 + n2).
 
		Code here.
	}

It actually looks more like a class that you need to instantiate. By example to use the previous code, you need to do:

var myMathObj = new Math();
var addResult = myMathObj.Add(10,14);
var subResult = myMathObj.Sub(15,10);

Here’s a link to a good tutorial about the prototype: http://www.javascriptkit.com/javatutors/proto.shtml.

When I work I actually have a source control (Team Foundation Server) application inside my Visual Studio 2008. I wanted to have some JavaScript file to be compressed when I was publishing my application on the web server. To do so, I actually added a new JavaScript file containing nothing to the solution under my script folder and I checked in my stuff. After that, I also added my JSTrim somewhere in the project with it’s config file.

After I went inside the project properties (right click on the project/properties). I went inside the build event (Post Build event command line) and added those lines:

cd $(SolutionDir)Web\Script\
attrib -r myCompiledJS.js
JSTrim.exe -m high --config JSTrim.config
attrib +r myCompiledJS.js

The $(SolutionDir) is actually a system variable or macro, so that you can export those settings on different computer without having problems. The Web\Script\ is the folder inside your solution where you can find your JSTrim.exe. The attrib -r myCompiledJS.js is actually a windows command line executable that allow you to remove the read-only and then put it back using the +r feature. Any Windows system or dos system should be able to run that line. Concerning the JSTrim possible attributes, I suggest you to do JSTrim -h to get all parameter information.

So, by adding those lines inside the post-build, whenever you have a successfull build, it will regenerate the compiled JavaScript file. What I personally do, I use the compiler current mode (debug, release, etc.) to use the proper JavaScript file. When I’m in debug mode, I always keep the non compiled JS files and when I publish or run as “Release” I use those compiled files. The major reason to do that is because you may want to debug your JavaScript more easily.

If you have any question, ask them

The content of the IFrame content load after the current page is loaded or after the “src” attribute change. So we are not able to have the IFrame content height or width until the data is rendered. It exist an event handler called “onload” that trigger once the content is loaded, but it is not possible to get the content body height, in fact it will alway’s return 0. By googling, I’ve found a lot of solutions, but none of them was working properly or at least working like I wanted. Because of that, I’ve written my own solution.

My solution is to use a “setTimeout” until the IFrame content is fully rendered on the page and after that, we are able to get the iframe content height and set it to the IFrame itself. In the following solution I actually use JQuery. If you need to convert it to normal JavaScript, it should be pretty easy.

Write this into your HTML:

1
2

<iframe id="iframeId" name="iframeId" onload="sizeIFrame(this.id)" style="width:100%">
</iframe>

Write this in your javascript (header or JS file):

1
2
3
4
5
6
7
8
9
10
11
12

function sizeIFrame(frameId) {
	var myIFrame = $("#" + frameId);
	var innerDoc = (myIFrame.get(0).contentDocument) ? myIFrame.get(0).contentDocument : myIFrame.get(0).contentWindow.document;
 
	try {// will throw an exception if the body is not fully loaded.
		myIFrame.height(innerDoc.body.scrollHeight + 35);
	} catch (e) { }
 
	if (innerDoc.body && innerDoc.body.scrollHeight == 0) {
		setTimeout(function() { sizeIFrame(frameId); }, 100);
	}
}

If you are having any problem please leave a comment.

This solution have only been tested on Internet Explorer 6/7

Here’s how internet explorer define the setInterval() function:

1

var iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])

You can find how to work with it by going on the this site msdn.microsoft.com.

Inside Firefox, you can actually instead of the third parameter, submit 1 or more parameter that will be used when calling back your function. By going on Mozilla specification page, you can find how to set interval on Mozilla browsers.

1
2

intervalID = window.setInterval(func, delay[, param1, param2, ...]);
intervalID = window.setInterval(code, delay);

Resolution
If you want to be able to send your function the proper parameter, the best way is be doing an inner function parameter calling the function you want to call. What does that mean? It means that you will be able to call a function using your context variables.

Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var myIntervalId = null;
 
function myFunction(a, b, c){
	var xyz = 3;
	// some code
 
	// Set the interval with an anonymous method calling your application method.
	myIntervalId = setInterval(
		function(){ 
			intervalFunction(xyz, 12); 
		}, 1000);
 
	return myIntervalId;
}
 
function intervalFunction(param_1, param_2){
	if (param_1 != 0){
		clearInterval(myIntervalId); // Stop the interval
		// some code here
	}
	param_1 = param_1 -1;
	// Some code here
	alert(param_1);
}
 
myFunction(1,2,3); // Do the call to a function;

In this small example with almost no code, you will actually wait 3 seconds and after it will stop the counter and do what you want to do. Also, between those interval, you will receive a pop-up saying how much time you have left before the countdown stop.

This is nothing extraordinary, but if you plan on using interval using context parameters, be aware that you should do this instead of anything else.

Example of doing a little animation with 3 divs (the 3 boxes under the code):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

	$(document).ready(function(){
		$("#beat1").heartBeat(
			{
			delayBetweenAnimation:2000,  
			delay:1000 
			});
		setTimeout(function(){
			$("#beat2").heartBeat(
				{
				delayBetweenAnimation:2000,  
				delay:1000 
				});
		}, 200);
		setTimeout(function(){
			$("#beat3").heartBeat(
				{
				delayBetweenAnimation:2000,  
				delay:1000 
				});
		}, 500);
	});

My 3 divs are made like this:

1
2
3
4
5

<div>
	<div id="beat1" style="float:left;margin-left:5px;background-color:#AABBCC; width:10px; height:10px;"></div>
	<div id="beat2" style="float:left;margin-left:5px;background-color:#AABBCC; width:20px; height:20px;"></div>
	<div id="beat3" style="float:left;margin-left:5px;background-color:#AABBCC; width:30px; height:30px;"></div>
</div>

Note that, you can use class or whatever you want inside the selector instead of the id (I recommend it).

Heart Beat 0.1

Description:
This plugin is used to enhence the actual checkbox in pages. Depending on OS and Theme, people actually have different check box look and feel. The one in Windows XP is actually looking good, but compared to Vista, Vista is even more beautiful. I wanted to create a more standard check box that you can use everywhere (code behind, etc.).

Sample:

1
2
3
4
5
6
7

$(document).ready(function(){
 $("#cbwt1")
  .CheckboxMod({
      ImageUrlChecked: 'http://nordz.sauleil.com/wp-includes/images/nordz/CBMod/checked.jpg', 
      ImageUrlUnchecked: 'http://nordz.sauleil.com/wp-includes/images/nordz/CBMod/unchecked.jpg'
   });
});

To know more about that plugin, you can go in JQuery Plugins section.

Download Checkbox Modfier Version 0.2