Useful commands: November 2011

Tuesday, November 29, 2011

Drop down Box Selected

<select id="mySelect" multiple="multiple">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>

<script type="text/javascript">
$(document).ready(function() {
if (!$("#mySelect option:selected").length)
$("#mySelect option[value='3']").attr('selected', 'selected');
});
</script>

How to get Current year with javascript

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date + "-" + m_names[curr_month]
+ "-" + curr_year);

Monday, November 28, 2011

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 '';
} else {
echo '';
}
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
echo '';
} else {
echo '';
}

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.

Howto recover gnome-panel

disappeared Application Menu, Places Menu and System Menu in ubuntu / debian Linux

Reseting Gnome Settings

If your gnome-panel corrupt , Application Menu, Places Menu and System Menu and some other menu items will disappear.
How to recover it

Boot the system upto Login Window. Press Ctrl + Alt+F1

Now You will get a Text based login screen

login with your username and password

now you will get a $ prompt.

Type the following Command

$ rm -rf .gnome .gnome2 .gconf .gconfd

Now Press Ctrl + Alt+F7

and login Gnome. Every thing appear in the menu bar.

Thursday, November 17, 2011

Rotate image using canvas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rotate()</title>

<style type="text/css" media="screen">
img, canvas { border: 1px solid black; }
</style>

<script type="text/javascript">

function rotate(p_deg) {
if(document.getElementById('canvas')) {
/*
Ok!: Firefox 2, Safari 3, Opera 9.5b2
No: Opera 9.27
*/
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
switch(p_deg) {
default :
case 0 :
canvas.setAttribute('width', image.width);
canvas.setAttribute('height', image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, 0);
break;
case 90 :
canvas.setAttribute('width', image.height);
canvas.setAttribute('height', image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, -image.height);
//alert(image.height);
break;
case 180 :
canvas.setAttribute('width', image.width);
canvas.setAttribute('height', image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, -image.height);
break;
case 270 :
case -90 :
canvas.setAttribute('width', image.height);
canvas.setAttribute('height', image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, 0);
break;
};

} else {
/*
Ok!: MSIE 6 et 7
*/
var image = document.getElementById('image');
switch(p_deg) {
default :
case 0 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
break;
case 90 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
break;
case 180 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
break;
case 270 :
case -90 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
break;
};

};
};

window.onload = function() {
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
image.style.visibility = 'hidden';
image.style.position = 'absolute';
} else {
canvas.parentNode.removeChild(canvas);
};

rotate(0);
};

</script>

</head>

<body>

<p>
rotate:
<input type="button" value="0? onclick="rotate(0);" />
<input type="button" value="90? onclick="rotate(90);" />
<input type="button" value="180? onclick="rotate(180);" />
<input type="button" value="-90? onclick="rotate(-90);" />
</p>

<p>
<img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt=""/>
<canvas id="canvas"></canvas>
</p>

</body>
</html>