Categories
JavaScript Tips & Tutorials

JavaScript: Confirmation / Warning before Leaving or Navigating Away from a Page

Things couldn’t be worse when you were half way editing something and accidentally navigated away from the editing page after a whole hour of typing work. Hitting the back button of your browser neither helped, all you had done was gone anyway.

This must be remedied in some way, if you are creating an application that needs the user to input stuff, especially lengthy articles. One approach is to automate draft saving every a few minutes, the other is to warn the user before he or she either intentionally or inadvertently navigate away from the editor page. You can achieve this by a straightforward snippet of JavaScript:

var warning = false;
window.onbeforeunload = function() { 
  if (warning) {
    return 'You have unsaved changes.';
  }
}

The warning variable can be timely altered according to the editing activities by the user. For instance, it is set true if the editing field is changed or does not equal to default value, or if the user triggers the onKeyUp / onChange event of any input fields:

var editor_form = document.getElementById("form_id");
for (var i = 0; i < editor_form.length; i++) {
	editor_form[i].onchange = function() {
		warning = true;
	}
}

This snippet must be put at the end of the page. Also, to avoid the warning when you press the form submit button, add this snippet after that:

document.getElementById("submit_button_id").onclick = function() {
    warning = false;
}
Categories
CSS & HTML Tips PHP Tips & Tutorials

CSS: How to write CSS rules to detect or target Chrome, Safari or Opera browsers only?

It’s easy to target firefox, just write as expected by the standards, at least most of the time. It’s also easy to target IE and any specific versions of them by a few of the famous hacks or the IE conditional comments to selectively include style sheets by version numbers. But how does one write CSS rules and make the browsers to recognize that they are particularly for Chrome, Safari or Opera?

Use PHP to distinguish the browsers.

echo $_SERVER['HTTP_USER_AGENT'];

Put this line in a .php file, upload the file to your server and browse to it by all the different browsers you have. From the server side, $_SERVER['HTTP_USER_AGENT'] contains all the information PHP knows about the source of the request, namely your browser. Now that the server is able to recognize the client browser, you can serve up different versions of a web page by PHP and include different CSS classes according to the browser type:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false) {
	// Chrome user agent string contains both 'Chrome' and 'Safari'
	if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false) {
		echo '<body class="chrome">';
	} else {
		echo '<body class="safari">';
	}
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
	echo '<body class="opera">';
} else {
	echo '<body>';
}

The rest is very simple. Just cascade your styles by additional classes to adapt your design to Safari, Chrome or Opera specifically. You can do a lot more than this by the server side variable $_SERVER['HTTP_USER_AGENT'], such as detecting browser versions and operating systems or writing your own web traffic statistics software.

Categories
Business and Marketing My Personal Reviews WordPress How To

Thesis Theme Review – Don’t just create good products but irresistable ones.

Merely good product is far from enough. To rake in profits in the magnitude vast majority of us can only dream of, you need an irresistible product – just like Thesis Theme. Think of something you’ve purchased that’s been insanely useful, beautiful and user friendly and then double it.

iPhone has proved it all. It converts massive numbers of mobile users and introduces a grand new era of mobile computing. The best part is that it easily compels all the users who now desire more to put everything Apple releases in future on their must-buy list. I can’t think of anything else in the IT world in the past decades that has come up even close. The products have not been released nor announced yet. However, that’s the kind of appeal irresistible products create.