centring float left elements

HTML No Comments »

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>

facebook comments set 100% percent width for facebook comments

Facebook No Comments »

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

how to change or disable connection timeout in filezilla

ZCategory No Comments »

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

Filezilla change connection timeout

php set socket time out for fsockopen, set time out for fsockopen

PHP Socket No Comments »

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.

why javascript history.back() toggles between two pages

JavaScript No Comments »

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. :)

insert into tablea select fields from tableb for specific values only

MYSQL No Comments »

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

US phone number validation by adding hypen automatically using javascript

JavaScript No Comments »

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.

ajax cross domain xmlhttprequest in firefox

Ajax No Comments »

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();">

Microsoft Windows Network The network is not present or not started

Windows Tips No Comments »

Make sure that the cable is not loose. if possible check the network card.
and if it is still so then you have to check the network service.

Click start -> run -> type services.msc

Locate Workstation.

Which will be the last in the list of services.

Make sure it is running else start the service.

I am using kaspersky antivirus. When i close it sometimes it asks whether to close the open network connection and i use to give yes.

It closes gtalk and other open connection which i was not aware.

May be it would have stopped the network service also.

So when i checked using services.msc it has been stopped but not sure whether it is because of anti virus.

Anyway, i started it and i could browse the local area network computers.

Matching newline in multiline text without using DOT but with an alternate char class

Regular Expression No Comments »

The Character class \w matches any word character, and \W matches anything that isn’t a word character.

So, [\w\W] matches anything, including a newline

for example removing c style comments

/\*[\w\W]*?\*/

another example is getting all text within a div

<div class="\&quot;validtext_erea\&quot;">([\w\W]*?)&lt;\/div&gt;</div>

Usually we use it as (.*?) but this matches all characters except newline.

So the alternate char class w is used to find all chars and non chars.

The question mark is used to include laziness because the * chars is greedy.

Reference
http://www.adobe.com/devnet/dreamweaver/articles/regular_expressions_pt2.html
See this for more modifiers
http://www.regular-expressions.info/modifiers.html
For a long time i have been looking for this
http://www.regular-expressions.info/dot.html

WP Theme & Icons by N.Design Studio
Entries RSS Google+