Code Mamba

If you have a and you want to avoid the ‘confirm form resubmission’ message on refresh you can check theese advices:
If you’re able to change the POST variables to GET variables, you can use the idea from this script:

if(isset($_POST['query']))
{
	header
	(
		'Location: ?controller=currentPage&post1='
		.$_POST['post1'].'&post2='.$_POST['post2']
	); // and so on...
	exit;
}

If you can’t convert your variables, but your view does not depend on the posted data you can use the idea from this script:

	processPostData();
	header('Location: ?controller=currentPage');
	exit;

This will redirect you to ‘?controller=currentPage’ after processing the POST data and if you refresh the page you will stay on ‘?controller=currentPage’, but you will not get the ‘confirm form resubmission’ message, because you have no post data on the redirected page.
If you can’t convert your variables and your view depends on the posted data you can try and send only flag variables. You can use the idea from this script:

	if(processPostData() == isValid())
	{
		header('Location: ?controller=currentPage&flag=1');
	}
	else
	{
		header('Location: ?controller=currentPage&flag=0');
	}
	exit;

If none of theese works, just be creative or leave me a message here!

If you’re using xampplite and you Apache service does not start, you might want to check your error.log.
You can find it in PATH_TO_YOUR_XAMPPxamppliteapachelogserror.log
The common reason is, that a certain port, needed by Apache is not free.
For example it might be 443, 80, etc… In my case Port 443 was taken from my VMWare workstation.

If you’re using box-shadow as a CSS property in your Internet Explorer 9 and the box-shadow does not show you might want to check if:
You’re using the right syntaxys – you can check if the property appears in the developers window (F12) for the current element.
If this does not help you might want to know, that box-shadow is supported for Internet Explorer 9+, so if you are using

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

in your page with Internet Explorer 9 or if you are using Internet Explorer 8 (or lower) box-shadow will not work.
If you want a similar effect in Internet Explorer 8 read this article.

Internet Explorer 8 does not support box-shadow property.
If you want a similar effect in Internet Explorer 8 you can use the combination of Internet Explorer-only filters:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);

Here’s how to combine them:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);

Here’s our test code:

<div id="test"></div>

and here are our stylesheets for Internet Explorer 8 and Internet Explorer 9:

	#test
	{
		width:100px;
		height:100px;
		border:1px solid black;
		box-shadow:0 0 1.0em hsla(0, 0%, 0%, 0.3);
		/* IE 9 */
	}

	#test
	{
		width:100px;
		height:100px;
		border:1px solid black;
		filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);
		/* IE 8 */
	}

and here’s how it looks in Internet Explorer 8 and in Internet Explorer 9:

You might want to try and play with the Strength property of the filters.

To use a variable from your page you need a reference to the current window. This is how to refer the current window:

this.browserbot.getUserWindow();

For example:

echo javascript{this.browserbot.getUserWindow().test}

will result:

[info] echo: TEST_VARIABLE_GOES_HERE

where your sourcecode is:

<script type="text/javascript">
    var test = 'TEST_VARIABLE_GOES_HERE';
</script>

In this tutorial we’ll make a 4 digit html input. We’ll use a standard input with a ‘postcode’ class:

<input type="text" class="postcode" />

In the end of the document, or in a

$(document).ready(function(){});

block we’ll bind a function to the keydown event for each element:

$('.postcode').each(function(){
	$(this).bind('keydown',function(e){
		//... code goes here
	});
});

Now we’ll get the event code and we’will filter it:

var codelen = 4;
var code = (e.keyCode ? e.keyCode : e.which);
if(
	!((code >= 48 && code <= 57 && $(this).val().length < codelen)
	|| (code >= 96 && code <= 105 && $(this).val().length < codelen)
	|| code == 8 || code == 116 || code == 46
	|| (code >= 35 && code <= 40)
	)
)
{
	e.preventDefault();
}

With this filter we allow any button from 0 to 9 including those in the num pad if the characters in this input are less then codelen.
We also allow the buttons backspace, delete and F5 (8,116,46).
We also allow all the arrows + Home and End buttons.
Every other event is prevented. The full code is:

$('.postcode').each(function(){
	$(this).bind('keydown',function(e){
		var codelen = 4;
		var code = (e.keyCode ? e.keyCode : e.which);
		if(
			!((code >= 48 && code <= 57 && $(this).val().length < codelen)//0-9
			|| (code >= 96 && code <= 105 && $(this).val().length < codelen)//0-9
			|| code == 8 || code == 116 || code == 46//bs del f5
			|| (code >= 35 && code <= 40)//arrows, home, end
			)
		)
		{
			e.preventDefault();
		}
	});
});

When you start a new project a very important thing to do is to start using a CSS reseter.
The goal the reseter is to reduce browser inconsistencies in things like default margins and font sizes of headings, line heights and more.
In most of my projects I’m using this CSS reseter and I’m quite pleased with it, so I want to share it:

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,
sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,
li,fieldset,form,label,legend,time,audio,
video,table,caption,tbody,tfoot,thead,tr,
th,td,article,aside,canvas,details,embed,
mark,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary
{margin:0;padding:0;border:0;font-size:100%;
font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}table{border-spacing:0;}
blockquote,q{quotes:none;}ol,ul{list-style:none;}
blockquote:before,blockquote:after,q:before,
q:after{content:'';content:none;}

As many of you know we can open a window in javascript using:

window.open("some-page.htm","window-name","width=450,height=450");

The first argument is the URL of the new window, the second one is the window name and the third one is a list of comma-separated items.
Now how to move the new window? window.open returns an object. We have to catch that object and then use it. Here’s how to move the window to the top left corner:

newWin = window.open("some-page.htm","window-name","width=450,height=450");
newWin.moveTo(0,0);

Here’s how to center the window:

var width = 500;
var height = 600;
newWin = window.open("some-page.htm","window-name","width="+width+",height="+height);
newWin.moveTo(screen.width/2-width/2,screen.height/2-height/2);

First you have to create your client script. We’ll include the jQuery librry and we’ll create a standard ajax request:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$.ajax({
		error: function(jqXHR,textStatus,errorThrown){alert(textStatus+' '+errorThrown)},
		url: "http://www.yourdomain.com/json.php",
		success: function(data){alert(data)},
		dataType: 'json',
		data: {}
	});
</script>

Now you will most likely get the following error:

	Origin http://www.yourdomain.com is not allowed by Access-Control-Allow-Origin.

So it’s time to set your server the right way:
If your are using something like this:

	<?php
		echo json_encode(array('a','r','r','a','y'));
	?>

it will not work. You have to specify Access-Control-Allow-Origin access. You can enable it for one site, or you can give access to all websites. Here’s how to do it:

	<?php
		header('Access-Control-Allow-Origin: *');
		echo json_encode(array('a','r','r','a','y'));
	?>

and the result is:

In MySQL you can select a record set with a limit and an offset and then return the count(*) of all the records without running the same query like this:

SELECT SQL_CALC_FOUND_ROWS
  Id, Name
FROM my_table
WHERE
  Name LIKE '%prashant%'
LIMIT 0, 10;
SELECT FOUND_ROWS();

In PostgreSQL there is no such thing, so you have to be creative. What we’ll do is:
1. Create a temp table with all the required data.
2. Select the data from the temp table with the limit and the offset.
3. Select the count(*) from the temp table.
4. Select everything else you need from the temp table.
5. Drop the temp table.
Why and when is this a good idea.
When your query has many limitaons like a full-text-search clause:

...WHERE textsearchable_index_col @@@ q...

or when your data is a join from many tables – you don’t have to join the tables many times – for the data, for the count(*), and for everything else.
Here’s the example:

select * into tmp_tbl from tbl where [limitations];
select * from tmp_tbl offset 10 limit 10;
select count(*) from tmp_tbl;
drop table tmp_tbl;