Code Snippets

My recent work on image manipulation(image re size) got into trouble.

I used imagick to resize images.

i want to resize a source images into three sizes.

here is the sample code i used

	$image	=	new Imagick($_FILES['pic']['tmp_name']);
	$image->setImageCompression(Imagick::COMPRESSION_JPEG);
	$image->setImageCompressionQuality(100);	
	$image->thumbnailImage(220, 220, true);
	$image->writeImage(DOC_ROOT."/images/pic/$id.jpg");
	$image->thumbnailImage(80, 80, true);
	$image->writeImage(DOC_ROOT."/images/pic/second/$id.jpg");
	$image->thumbnailImage(100, 100, true);
	$image->writeImage(DOC_ROOT."/images/pic/third/$id.jpg");	
	$image->destroy();

with the above code the second image got blurred. after checking for a while my team leader mentioned the fact with how imagick works.

An object is created and it is set to create jpeg files.

The first resize is done. So what happens here is the file from the temp folder is taken and resized into 220 x 220 and is saved in pic folder.
For the second resize instead of using the fresh copy from the temp folder the already resized image of 220×220 is used from the objects memory (not from the pic folder).
So 220×220 is again made a temp copy in the buffer and is resized to 80×80 and is saved in second folder. Now the object has the 80×80 image in its buffer.
So for the third time 80×80 is called from the objects buffer and is resized into 100×100.
Here what the function is doing is it increases 80×80 into 100×100 which makes the image blur.

What i thought was that each time we call the resize function it is using the original copy form the temp folder.

But what the function is doing is it resizes the original copy to 220×200 and it keeps in the temp folder.
so at the first resize the image got resized to 220×220 in the temp folder. and for the second resize it has to use the temp copy which is already resized.

What i thought it would do is make a copy of the original image to the folder we have specified and then it resizes. So what the original file is intact.
This is how i do in my projects using codeigniter but this function resizes the image keeping it all the time in the temp folder.

So every time we call the resize function the file in the temp folder is the one which is manipulated.

First it is in the original size and then it is resized and overwritten to 220×220 in the temp folder.
for the second resize we have only the 220×220 and not the original size.
and this goes for the third resize…. oops…

So what is supposed to be done?

That is have a fresh initialization each time or use it in descending order. that is first resize the image to 220 and then to 100 and then to 80 so it will retain the quality.
If you do it in the mixed order then if you specify a size which is greater than the current image size then you get a blurr output.

I was writing a facebook application.

I had a form when the submit button is clicked i show the authorization dialogue.

What happened was when the user either clicked cancel or accept the dialogue redirected to channel.html instead of closing itself.

This happened in Internet Explorer.

On other browsers when i pressed the cancel button it redirects to http://facebook.com/home.php (i think it is a problem with facebook)

After doing trial and errors i found that i had a non https url also when ever i loaded the page it showed the insecure content alert in internet explorer.

After fixing the urls to https making sure that no url is http in my site that insecure content alert did not appear and i did not get the channel.html

so after fixing the insecure content problem and after authorization of facebook the dialogue closed properly as expected.

so if you guys are struck with this then try to change no https url’s to https and the dialogue works fine.

Besides, if you want another work around which is not completely verified way… here we go…

in the channel.html use javascript code to parse the url.

find where the request has come from and according to that use window.close

for example when i clicked cancel i had the content in the url saying “user cancelled” (this is not the exact word i got but i am just giving an example)

so i can parse to find that word and can close the dialouge according to it.

Like this you can check the url and find a text which appears when ever you cancel or authorize and use it to condition to close the dialouge window.

I wanted to center the divs which are floated left.

I searched the web and found this and it is working for me.

http://stackoverflow.com/questions/1084666/how-can-i-center-the-contents-of-a-div-that-float-left

This is just a copy for my reference even if that content is getting deleted future.

Besides, the following is the code which does the exact trick which is referred in the above stackoverflow url.

http://www.pmob.co.uk/temp/centred-float4.htm

<style type="text/css">
html,body{
	margin:0;
	padding:30px 10px;
	text-align:center;
}
#outer{
	width:780px;
	margin:auto;
	text-align:left;
	border:1px solid #000;
}
#outer{position:relative}
.navwrap{
	float:right;
	position:relative;
	left:-50%;
	text-align:left;
	margin-bottom:2em;
}
.navwrap ul{
	list-style:none; 
	position:relative;
	left:50%;
	margin:0;
	padding:0;
} 
.navwrap li{
	border:1px solid #eff2df;
	float:left;
	margin:0 10px 0 0;
	background:#809900;
}
.navwrap li.last{margin-right:0}
.navwrap li a{
	float:left;
	border:1px solid #4c7300;
	position:relative;
	left:-2px;
	top:-2px;
	background:#eff2df;
	color:#4c7300;
	text-decoration:none;
	padding:6px 10px;
	font-weight:bold;
}
.navwrap li a:hover{
	background:#809900;
	color:#fff;
}
p{clear:both;padding:10px}
h1{text-align:center;margin:1em 0;}
.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}
 
 
 
</style>
<!--[if IE ]>
<style type="text/css">
.navwrap ul{float:left;} 
 
</style>
<![endif]-->

 
<div id="outer">
	<h1>Centred Widthless floats</h1>
	<div class="navwrap">
 
		<ul>
			<li><a href="#">Button 1</a></li>
			<li><a href="#">Button 2's a bit longer</a></li>
			<li><a href="#">This is Button 3</a></li>
			<li><a href="#">B 4</a></li>
			<li><a href="#">Button 5</a></li>
 
			<li class="last"><a href="#">This is Button 6</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
			<li><a href="#">Button 1</a></li>
 
			<li><a href="#">Button 2's a bit longer</a></li>
			<li class="last"><a href="#">This is Button 3</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
 
			<li class="last"><a href="#">Button 1</a></li>
		</ul>
	</div>
	<p>The above navigation is floated using widthless floats and centred using a technique that moves the right floated parent wrapper 50% back towards the left using relative positioning -50%) and then applying a +50% left shift on the inner element also using relative positioning.</p>
	<p> The combined effect of this is to center the navigation within our layout</p>
</div>

I wanted to set percentage width for facebook comments plugin.

I searched the web and i got the following information from stackoverflow.

What i previously had was the following

<div id="fb-root"></div>
<div class="fb-comments" data-href="http://vikku.info/programming/" data-num-posts="100" data-width="500"></div>
</div>

I was trying to set data-num-posts=’100%’ which was not working. and then change the above to the following

<div id="fb-root"></div>
<div class="fb-comments" data-href="http://vikku.info/programming/" data-num-posts="100" data-width="500" width="100%" style="width: 100%;"></div>
</div>

and then added the following style in the style section

/* for facebook width 100% */
iframe.fb_ltr { width:90% !important; }

That’s it. It is working. …

oh… after a few days of working with the above i added a like button. the above style affected the like button and i was wondering how to change the width to 100% without affecting the like button.
Then got this from stackoverflow. So i placed only the following and removed the styles specified above.

remove width=”100%” style=”width: 100%;” from <fb:comments tag and add only the following in the style. voila it works.

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

the above was used from this url http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width

References

http://stackoverflow.com/questions/5305685/facebook-comments-plugin

http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width

Sometimes my server takes a long time to connect.
When i used filezilla recently to update my files filezilla could not connect to my server.
It says connection timed out.

and i opened the settings
Connection -> Under the Timeout option
make it 0 to disable
or you can give any number of seconds like 30 seconds or 60 seconds.
By default i think filezilla sets 20 seconds.

A screen shot to change the connection timeout in filezilla

Sometimes if a target host is unreachable by a socket connection it takes 60 seconds to know that the socket function cannot connect to the destination. This is when i am using fsockopen function to connect to a remote host. So i was wondering there should be a function to timeout according to our preference and found that stream_set_timeout could do that.

 
$fp = fsockopen("www.example.com", 80);
if (!$fp) {
    echo "Unable to open\n";
} else {
 
    fwrite($fp, "GET / HTTP/1.0\r\n\r\n");
    stream_set_timeout($fp, 2);
    $res = fread($fp, 2000);
 
    $info = stream_get_meta_data($fp);
    fclose($fp);
 
    if ($info['timed_out']) {
        echo 'Connection timed out!';
    } else {
        echo $res;
    }
 
}

where the second parameter of stream_set_timeout is in seconds.

…

I was working in a project where each page had a back button. Because of the designers design the back button was created using anchor tag <a> and as a programmer i thought of using the back button like the following in the anchor tag.

<a href='javascript:;' onclick='window.history.back()'>Back</a>

But what had happened when i press the back button after navigating to various pages was i got locked between the last two navigated pages. It kept toggling between the last visited page and the previous page where as it is supposed to go backward step by step.

So let us say i have navigated from page 1 to 10 and now i am in page 10. When i press the back button in page 10 i came to page 9. But when i pressed the back button in page 9 again it took me to page 10 instead of taking me to page 8. So this keeps happening until i changed the code to the following.

<a href='javascript:window.history.back();'>Back</a>

After modifying to the above code all went well. The back button press worked normal which took me from page 10 all the way to page 1 when i kept on pressing the back button.

and besides the given code there was a style applied to the anchor tag and that was just float right.

Is this an issue needed attention which is to be posted in a blog? I don’t think so but thought of talking to the people to see their responses. If people know why this peculiar behaviour then please post a note of a reply or a reference or whatever which could be of assistance to all people.

While using insert into table select * from table there will be a problem that the total fields should match and the datatype should be same. But if there is table a and table b and you want to import table b’s few fields into table a then the above will not work and it will throw an error that total no of fields do not match.

So to import only specific fields then use the following sql in which only the needed fields are specified in the into part and the from part. so insert into table1 column names and select column names form table2.

INSERT INTO tablename (some_column, somecolumn2)
SELECT othercolumn1, othercolumn2 FROM TABLE name WHERE id=somevalue

the where clause is optional.

Reference
http://stackoverflow.com/questions/4421807/sql-flavours-of-insert-into
http://stackoverflow.com/questions/2470924/ignore-some-values-in-insert-into-select-from-sql-stament
Notes to be taken http://stackoverflow.com/questions/1787634/automatically-match-columns-in-insert-into-select-from

The following code will validate the US phone number format. It will not check for open and closing brackets. it will validate the following format xxx-xxx-xxxx.

Besides it will not allow any other characters other than numbers and hypen to be typed. if any other character is typed in then it is removed using the regular expression in the script.

This script was created for an instant purpose and i may expand it so that will have full control on the keypress.

I have called a function whichkey to find the keycode which is a cross browser code. Each browser handles event differently so we need to find the char code number using a cross browser function and here that is whichkey.

<script type="text/javascript">
function mask(e,f){
	var len = f.value.length;
	var key = whichKey(e);
	if(key>47 && key<58)
	{
		if( len==3 )f.value=f.value+'-'
		else if(len==7 )f.value=f.value+'-'
		else f.value=f.value;
	}
	else{
		f.value = f.value.replace(/[^0-9-]/,'')
		f.value = f.value.replace('--','-')
	}
}
 
function whichKey(e) {
	var code;
	if (!e) var e = window.event;
	if (e.keyCode) code = e.keyCode;
	else if (e.which) code = e.which;
	return code
//	return String.fromCharCode(code);
}
 
</script>

<input type="text" name="phone" id="phone" 
onkeydown="mask(event,this)" onkeyup="mask(event,this)" 
maxlength="12" />

….

with the above code you can add your own code to make it more useful to you. I had made a very simple attempt to do a validation.

I got this cross domain ajax script some where and found it is working. You can run this file just directly from your desktop. You don’t have to have the localhost. The code enables a kind of privilege. This worked in firefox and for internet explorer there is another method for their own use. copy paste the code as html and click the get button.

Besides… I would like to have objections if any and comments about this article so that i can update. It is not just an article but a public document to which people can provide info to testify this. Just like that. How the following will be in future

<script type="text/javascript" language="javascript">
 
// Error: uncaught exception: Permission denied to call method XMLHttpRequest.open
 
  var http_request = false;
 
  function makeRequest(url, parameters) {
 
   try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
   } catch (e) {
    alert("Permission UniversalBrowserRead denied.");
   }
 
    http_request = false;
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/xml');
    }
    if (!http_request) {
      alert('Cannot create XMLHTTP instance');
      return false;
    }
    http_request.onreadystatechange = alertContents;
    http_request.open('GET', url + parameters, true);
    http_request.send(null);
  }
 
  function alertContents() {
    if (http_request.readyState == 4) {
      if (http_request.status == 200) {
 
        var string = http_request.responseText;
      alert(string);
 
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
  function updateweather() {
    makeRequest('http://www.wunderground.com/auto/rss_full/global/stations/16239.xml', '');
  }
</script>

<input type="button" name="button" value="GET XML" 
  onclick="javascript:updateweather();">