Wack Mac newline character in utf-8

Written by james on February 4, 2010 — Leave a Comment

So I had a user come to me with with an error with my WYSIWYG editor in our online website builder. He would save his content, which he had pasted from OSX’s TextEdit program, then try to apply that content to his website. I have a PHP function which escapes new lines and single quotes to make it compatible with inserting the content into a textarea for editing. But, I had missed the Unicode (UTF-8) “line separator” (0xE2 0x80 0xA8), so Javascript was throwing the “Unterminated String Literal” error. Anyway, after much angst, death, pain, hurting, and unfruitful googling, my co-worker found that UTF-8 has the “line separator” character. He also found other weird newline characters for UTF-8. Here is a list of the newline characters:

  • “line separator”
  • “page separator”
  • “next line”

Here is a link to a Wikipedia Article about it.

To fix the problem, I updated my JavaScript escape function to include this new character. You can see the new function below:

1
2
3
4
5

function jsesc($escString){
	$find = array( "'", '’', "\n", "\r", chr(226).chr(128).chr(168), chr(226).chr(128).chr(169), chr(194).chr(133));
	$replace = array( "\\'", "\\'", "\\n ", "\\n", "\\n", "\\n", "\\n");
	return str_replace($find, $replace, stripslashes($escString));
}
Posted in PHP | Tagged , , , ,

Number Formatter for Javascript with Prototype

Written by james on January 30, 2010 — 3 Comments

So i had to fix a ROI calculator on a client’s website today. Whoever added the content used some script they found that was using jQuery, which of course was totally screwed by Prototype…..soooo, I decided to convert the script to use prototype. One part of the script was using jQuery’s number format plugin. I then delved into extending javscript’s native Math object to have a format number function.

You can see a demo here: Number Format Demo. It has some options for adding commas to the whole number, number of decimal places to show, format for currency, and more….

Download: numberFormat.js

I finally ended up with this slick code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Object.extend(Math, {
	formatNumber:function(n, options){
		var options = Object.extend({
			decimals:0,
			currency:false,
			currencySymbol: '$ ',
			formatWhole:true,
			wholeDelimiter:',',
			decimalDelimiter:'.'
		},options);
 
		var nArr = new Array();
		nArr = String(n).split('.');
 
		var whole = (typeof nArr[0]!='undefined')?nArr[0]:'0';
		if(options.formatWhole){
			var exp = /(\d+)(\d{3})/;
			while (exp.test(whole)) {
				whole = whole.replace(exp, '$1' + options.wholeDelimiter + '$2');
			}
		}
 
		if(typeof nArr[1]!='undefined'){
			var remainder = nArr[1];
		}else{
			var remainder = '';
			for(var i=0;i<options.decimals;i++){remainder += '0'}
		}
 
		var pfix = options.currency?options.currencySymbol:'';
 
		if(options.decimals<=0) return pfix + whole;
 
		var a = new Array();
		for(var i = 0; i < options.decimals; i++){
			if(remainder.charAt(i) != '') a[i] = remainder.charAt(i);
			else a[i] = '0';
		}
 
		return pfix + whole + options.decimalDelimiter + a.join("");
	}
});

To use the object extension, try this:

1
2
3
4
5
6
7
8

Math.formatNumber('4204204.420',{
	decimals:2,
	currency:true,
	currencySymbol:'$ ',
	formatWhole:true,
	wholeDelimiter:',',
	decimalDelimiter:'.'
});
Posted in javascript | Tagged , , ,

resize iframe to content height

Written by james on January 25, 2010 — Leave a Comment

So I was fooling with an iframed forum today and had to figure out how to make the iframe resize to the height of its content, just to keep things pretty.  This can be done rather easily with a little javascript.

View Demo

Step 1:

Create your iframe and attach a function to the document.

1
2
3
4
5
6

<iframe id="forum-iframe1" width="100%" frameborder="0" src="mypage.html"></iframe>
<script>
window.resizeiframe1 = function(height){
document.getElementById('forum-iframe1').style.height=(height+40)+'px';
}
</script>

Step 2:

Add code to iframed page (mypage.html) to get the document’s height and send it back to the resize function attached to the iframe’s parent document once the iframe is loaded.

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

<html>
<head>
<script type="text/javascript">
function getHeight(){
	var height = (document.documentElement.clientHeight || document.body.clientHeight);
	window.parent.resizeiframe1(height);
}
</script>
</head>
<body id="iframe-body" onload="getHeight()">
<table height="500"><tr><td>my content here</td></tr></table>
</body>
</html>

Alternatively, if you use a javascript framework, such as prototype, its even easier. Here is my example using prototype:

Step 1:

Create your iframe and attach a function to the document.

1
2
3
4
5
6

<iframe id="forum-iframe2" width="100%" frameborder="0" src="mypage-prototype.html"></iframe>
<script>
window.resizeiframe2 = function(height){
$('forum-iframe2').setStyle({'height':(height+40)+'px'});
}
</script>

Step 2:

Add code to iframed page (mypage.html) to get the document’s height and send it back to the resize function attached to the iframe’s parent document once the iframe is loaded.

1
2
3
4
5
6
7
8

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body id="iframe-body" onload="window.parent.resizeiframe2($('iframe-body').getHeight());">
<table height="500"><tr><td>my content here</td></tr></table>
</body>
</html>
Posted in javascript | Tagged ,

finally doing something for myself

Written by james on January 23, 2010 — Leave a Comment

Ok…so I finally got off my ass and decided to make a new site for myself.  Now I have to post all these little things that I solve for myself on a daily basis at work.  Hopefully I can do at least one post a day…..maybe even get some of my experiments and projects up so they can be shared with the world.

I have been leeching off the web development community for far too long without contributing something back…so here you go world =)

Posted in randoms | Tagged
Newer Entries »