Password field shows password as default value in Mozilla in Cakephp

Here a peculiar problem i face while creating a user settings page in Cakephp , At FireFox browser, password field shows a default value as password after page got loaded or even if i click at that element.
$this->Form->password('User.password',array('id'=>'password','class'=>'pass'));
every time page gets loaded it shows ******* in password field , default is password text in password field, so to overcome this problem i used a Trick as follows..

echo $this->Form->input('users_check',array('id'=>'pass_input','label'=>false,'div'=>false));
echo $this->Form->password('users_passnew',array('id'=>'pass_password'));
i create a password element and a input element now, as there is an plain input field it will not show any default Asterisk. and when user click on to that input control the following Jquery will run and will hide the input field and show the actual password field.
<script>
$(document).ready(function(){

$('#pass_password').hide(); //hide the password element when page is ready
       $('#pass_input').focus(function(){ 
      $('#pass_input').hide(); //hide the input field
     $('#pass_password').show(); //show the password field
     $('#pass_password').focus();
      });
});

</script>

Send Mail in CakePHP

Following are the steps to send Email in CakePHP. we are using Email component of cake
The first thing you need to do is include the "EmailComponent".

class CommentsController extends AppController  
{  
    var $components = array('Email');  
} 
Now, to send an email, you need two things: email templates (for content) and layouts. Basically, email layout has the same purpose as regular layout - to wrap your content. And templates are where your content will go. This example assumes you're sending an email in both HTML and plain text format.

Location of your layouts and templates are as follows:
/app/views/layouts/email/html/default.ctp
/app/views/layouts/email/text/default.ctp
/app/views/elements/email/html/my_template.ctp
/app/views/elements/email/text/my_template.ctp

..Layout
// /app/views/layouts/email/html/default.ctp
<div> 
<?php echo $content_for_layout; ?>  
<br />  
Thanks & regards
admin
</div>


..Template file
// /app/views/elements/email/html/my_template.ctp  

<p>Dear <?php echo $email_user; ?>,  
<br /><br />  
i will be there, this is my message.  
</p> 
Now, all that remains is to glue all that up with your controller, setting up EmailComponent properties and variables. Setting variables for email templates works the same as setting variables for your view.

$this->Email->reset();  
$this->Email->sendAs = 'both'; // both = html + plain text  
$this->Email->to = 'sam@yahoo.com';  
$this->Email->from = 'admin@example.com';  
$this->Email->replyTo = 'admin@example.com';  
$this->Email->subject = 'your amazing subject here';  
$this->Email->template = 'my_template';  
// of course, if you have multiple layouts, you can change that too  
//$this->Email->layout = 'my_second_layout';  
// this would require you to have my_second_layout  
// ~/app/views/layouts/email/html/my_second_layout.ctp  
// ~/app/views/layouts/email/text/my_second_layout.ctp  
// set some variables for your templates  
$this->set('email_user', $user);   
// uncomment this to debug EmailComponent instead of sending  
//$this->Email->_debug = true;  
$this->Email->send();  

FaceBook f-connect in cakephp

<span class="facebook">
<a href="<?php echo $this->webroot.'users/facebook_login?first=1';?>">Facebook</a> 
<a href="<?php echo $this->webroot.'users/facebook_login?first=1';?>">
        <img src="<?php echo $this->webroot;?>img/fconnect.png" /></a>
</span>
now code at User controller

/* This function is used to handel fconnect code..when ever a user clicks on fconnect icon at example.com site
the link will redirct it to this function.. where 3 steps will performed
1) if url parameter had 'first' option then redirect to facebook for Authorization code with client_id passed in params
2) It will allow user to enter FaceBook username password and Allow button to click, if cliked it will send Auth Code back,
   redirect url which we collect in 'code' section..then again redirect to FB with Authcode,client_id,secret_key to get
Token_key.
3) on sucessfully getting Token Key again send a request to FB with TokenKey at (c)....
which will return the name,email and other info of that logged in user.
*/
//http://example.com/users/facebook_login
function facebook_login(){
$appId='191645377665635';
$app_secret='b13d9660bcaa0005624f18df4139820';
              //** above API you get after registering the example.com at Facebook to get API key
$cookie=true;
$query="";
if(isset($_SERVER['REQUEST_URI'])){
$str=$_SERVER['REQUEST_URI']; //** get browser URL
$output=parse_url($str);
if(isset($output['query']))
$query=$output['query']; //parameters at url
if(isset($output['first']))
$query=$output['first'];
if(!empty($query)){
$temp=explode("=",$query);
if($temp[0]=="first"){
//*** First Step ************* (a)
$url="http://example.com/users/facebook_login"; 
                                 //callback function should be same in any case,else will show Error in verifcation
$dialog_url="https://www.facebook.com/dialog/oauth?client_id=".$appId."&redirect_uri=".urlencode($url).
"&scope=email,read_stream,offline_access";
echo("<script> top.location.href='".$dialog_url."'</script>");
}
if($temp[0]=="code"){
//** Second Step ************ (b)
$code=$temp[1];
$url="http://example.com/users/facebook_login"; 
                                //callback function should be same in any case,else will show Error in verifcation
$token_url = "https://graph.facebook.com/oauth/access_token?client_id=".$appId.
"&client_secret=".$app_secret."&code=".$code."&redirect_uri=".urlencode($url);
$response = file_get_contents($token_url);
$params = null;
parse_str($response, $params);
$access_token=$params['access_token'];
if(isset($access_token)){
//*** Third Step  ********* (c)
$graph_url = "https://graph.facebook.com/me?access_token=".$access_token;
$user = json_decode(file_get_contents($graph_url));
//print_r($user);
$uname=$user->name; 
$email=$user->email; // ** dipankar@gmail.com - myfacebook mail-id
$gender=$user->gender;
//as we get $uname here now we can write DB quries and other code below.....
}

}
}
}
exit();
}

Multi column index in MySQL

Multi column index is a useful feature to optimize searches. MySQL allows to create an index either on single column or on multi columns of the table however single column index and multi column(combination of columns) index behavior differs. To understand the behavior of single column index and multi column index, we will walk through the following examples. I assume after this we will be able to decide when to use multi column index. To continue, let's create a table named "buyers" to take it as an example.

CREATE TABLE buyers(
 buyer_id INT NOT NULL AUTO_INCREMENT,
 first_name CHAR(19) NOT NULL,
 last_name CHAR(19) NOT NULL,
 zip CHAR(5) NOT NULL,
 state_code CHAR(2) NOT NULL,
 PRIMARY KEY (buyer_id)
 );

Suppose, there are four Tariqs (three Iqbals, one Mehmood), three from 92082 zip, and one from another zip 99088 (Tariq Mehmood).
Now our requirement is to get the buyer_id for buyers with a specific first_name, last_name, and zip. For example, we want to find the buyer_id for Tariq Iqbal, zip 92082 so we write the following query to the desired record.

SELECT buyer_id FROM buyers WHERE first_name='Tariq'  AND last_name='Iqbal' AND zip=92082;

As per our above query and structure of examplory defined table "buyers", MySQL will scan all the table three times to find the requested record. Of course this may take considerable time to find out wanted record particularly when the table has records in millions in it.
Since we want to ask MySQL to avoid a full table scan, therefore we would like to take advantage of indexes to get them in use. First option is to create an index on each column (so called "single column index") viz first_name, last_name, or zip. Let's we put the index on each column like below so that MySQL should skip to scan all table three times.

ALTER TABLE buyers ADD INDEX idx_firstname (first_name);
ALTER TABLE buyers ADD INDEX idx_last_name (last_name);
ALTER TABLE buyers ADD INDEX idx_zip (zip);

In this case at the first instance MySQL will use the idx_firstname index to limit the records to those where first_name=’Tariq’. At the next step, using this "temporary result set" MySQL will apply other indexes conditions individually i.e. last_name='Iqbal' and zip=92082. First it eliminates those whose last_name is not Iqbal. And then it eliminates those who are not from zip 92082. MySQL has now applied all conditions and can return the results after more than one sorting.
Of course, the above is more efficient than forcing MySQL to do a full table scan, but we are still forcing MySQL to scan significantly more rows than it needs to.
Now here's where the multi column index comes into use. If we add a single index on the three columns, we can get the correct set in a single pass! However, here is the code we use to add multi column index (index on combination of columns.

ALTER TABLE buyers ADD INDEX idx_flname_zip(first_name,last_name,zip);

Since the MySQL keeps the index files in an organized versions, MySQL can jump directly to the correct first_name, then move to the correct last_name, and finally go directly to the correct zip. Therefore, MySQL has found the correct rows without having to scan a single row of the data file!

Thus creating three single-column indexes on (first_name), (last_name), and (zip) is completely different from one "multi column index" on (first_name, last_name, zip). While running a query, MySQL can only use one index. So, if we have three single column indexes instead of multi column index(first_name, last_name, zip), MySQL will attempt to pick the most restrictive one, but the most restrictive single column index will be significantly less restrictive than our multi column index.

Point to note about Multi Column Index.

With the multi column index (first_name, last_name, zip) then queries can only use the index if you have a WHERE clause that partially matches the index from left to right. Check below.

1. [SELECT * FROM buyers WHERE first_name=? AND last_name=? AND zip=?] will use the index. 

2. [SELECT * FROM buyers WHERE last_name=? AND first_name=? AND zip=?] can't use the index.

How to catch TAB key press with JavaScript in Firefox,Safari,Opare & IE

<html>
<head>
<script type="text/javascript">
var obj;
var TAB = 9;
function catchTAB(evt,elem)
{
  obj = elem;
  var keyCode;
  if ("which" in evt)
  {// NN4 & FF &amp; Opera
    keyCode=evt.which;
  } else if ("keyCode" in evt)
  {// Safari & IE4+
    keyCode=evt.keyCode;
  } else if ("keyCode" in window.event)
  {// IE4+
    keyCode=window.event.keyCode;
  } else if ("which" in window.event)
  {
    keyCode=evt.which;
  } else  {    alert("the browser don't support");  }


  if (keyCode == TAB)
  {
    obj.value = obj.value + "\t";
    alert("TAB was pressed");
    setTimeout("obj.focus()",1);// the focus is set back to the text input
  }
}
</script>
</head>
<body>
<input type="text" onkeydown="catchTAB(event,this);">
</body>
</html>

To Change FILE input button style

There is a Big Mess while changing style of FILE input button in HTML through CSS. below is a trick to do that. i had put File input button below a normal html button with opacity 0 so that File button hides beneath the normal button and on click of the normal button file input gets clicked. also adjust the Left:15px of file button to make it exact below the normal button.


<style>
#upload_button {    
     -moz-box-sizing: content-box;
    border-radius: 11px 11px 11px 11px;
    background-color: #F2F2F2;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-size: 11px !important;
    line-height: 10px;    
    text-decoration: none;
    padding: 0px 14px;
    text-align: center;
    width: 72px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #BBBBBB;
    color: #464646;
   font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
#upload_button #my_files {  
 -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  position: absolute; 
  left:15px;
  width:100px;
}
#upload_button #pseudobutton{
  inherit: none;
  background-color:#F2F2F2;   
  width:69px;
  height: 19px;
  font-size:10px;
  /*position: absolute;*/
  border:none;  
 }
</style>

<div id="upload_button" >
<input type="button" id="pseudobutton" value="Open File">
<input type="file" name="my_files" id="my_files">
</div>

To Stick Footer to Bottom of page

Many times it requires to forcefully stick footer to bottom of page if content of web page is less this makes footer to appear at middle or top bottom section of page which is odd. so to make forcefully stick footer at bottom even if content of page varies , the following are the steps.

<html></body>
<div id="main">
    <div id="container">
      <div id="header">
              this is header, with logo and all
      </div>
      <div id="content">
              This is page content with less or variable text ,forms, images etc
       </div>
     </div>

     <div id="footer">
            this is footer...
     </div>
</div>  <!-- #main ends --->
</body>
</html>

Here #main is the div which encloses all the content of a page , inside main there is 2 div one is #container and other is #footer , we will concentrate on height and position of #main,#container and #footer div. the rest inner div header and content can be optional you can put any number of div's inside #container.

<style><!-- css -->

html,body{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    color:#333;   
    height:100%; 
        /* this is important to give height to html and body */
    margin:0px;
    padding:0px;
}

#main{
    min-height:100%;
        /* important thing to give min height so that footer can go to bottom */
    position:relative;                
        /* Position relative so that , in footer we can give position absolute */
    float:left;
    height:auto ! important;       /* for cross browser compatible */
    height:100%;                 /* have to give height 100% */
    width: 100%;
}

#container {
    float: left;
    margin: 1px 2px 20px 14px;     
        /*  you can give any margin according to your need */
    padding-bottom: 34px;             
        /* only important thing the padding-bottom should be equal to footer height */
    width: auto;
}

#footer{
    bottom: 0 ! important;   
        /* this will stuck footer to bottom of page */
    clear: both;
    color: #FFFFFF;
    height: 34px;             
        /* height of footer , same as padding-bottom of container */
    position: absolute;    
        /* position to settle down the footer */
    width: 100%;
}
</style>

CSS Selectors

Below are examples of all of the CSS selectors For their precise definition please refer to the CSS specifications.

Universal

*	elements in the default namespace
|*	elements in no namespace
ns|*	elements in the namespace with prefix ns
*|*	elements in any or no namespace

Type

div	div elements in the default namespace
|div	div elements in no namespace
ns|div	div elements in the namespace with prefix ns
*|div	div elements in any namespace or in none

Descendant

div p	p elements that are within a div element
* p	p elements that are within any element (ie. not the root element)

Child

div > p	p elements that are the direct children of div elements
p > *	any elements that are the direct children of p elements

Direct Sibling

div + p	p elements that directly follow div elements
p + *	any elements that directly follow p elements

Indirect Sibling

div ~ p	p elements anywhere after div elements
p ~ *	any elements anywhere after p elements

Attribute

*[href]	elements with an href attribute
*[align="right"]	elements with an align attribute of right
*[href^="http:"]	elements with an href attribute beginning with http:
*[href$=foo]	elements with an href attribute ending with foo
*[href*=foo]	elements with an href attribute containing foo
*[words~=foo]	elements with a words attribute containing the word foo
*[lang|=en]	elements with a lang attribute equal to or beginning with en

Class

p.intro

p elements with a class attribute containing the word intro

ID

p#intro

p elements with an id attribute of intro

Link

:link	elements that represent links
a[href^="mailto:"]:link	elements that link to an email address

Lang

:lang(en)	elements whose specified language is English
q:lang(fr-CA)	quotes whose specified language is French (Canadian)

Contains

p:contains("synergy")

paragraphs containing the text "synergy"

Root

:root	the root element of the document
html:root	html root elements
:root > *	children of the root element

Empty

div:empty

every empty div element

Not

*:not(p)	every element except p elements
div:not(:empty)	every non-empty div element
a:not([href])	every a element without a href attribute

First Child

div > :first-child

the first child of a div element

Last Child

div > :last-child

the last child of a div element

Only Child

div > :only-child

the only child of a div element

First of Type

div > p:first-of-type

the first p element child of a div element

Last of Type

div > p:last-of-type

the last p element child of a div element

Only of Type

div > p:only-of-type

the only p element child of a div element

Nth Child

div > :nth-child(3)	the third child of a div element
div > :nth-child(even)	every even child of a div element
div > :nth-child(odd)	every odd child of a div element
div > :nth-child(3n)	every third child of a div element

Nth Last Child

div > :nth-last-child(3)	the third last child of a div element
div > :nth-last-child(even)	every even last child of a div element
div > :nth-last-child(odd)	every odd last child of a div element
div > :nth-last-child(3n)	every third last child of a div element

Nth of Type

div > p:nth-of-type(3)	the third p element child of a div element
div > p:nth-of-type(even)	every even p element child of a div element
div > p:nth-of-type(odd)	every odd p element child of a div element
div > p:nth-of-type(3n)	every third p element child of a div element

Nth Last of Type

div > p:nth-last-of-type(3)	the third last p element child of a div element
div > p:nth-last-of-type(even)	every even last p element child of a div element
div > p:nth-last-of-type(odd)	every odd last p element child of a div element
div > p:nth-last-of-type(3n)	every third last p element child of a div element

Pseudo-elements

::before	This pseudo-element can be used with the content property to add generated content not present in the original document. For example, p::before can be used to insert text at the beginning of every paragraph element.
::after	This pseudo-element can be used with the content property to add generated content not present in the original document. For example, p::after can be used to insert text at the end of every paragraph element.
::marker	This pseudo-element is for applying style to list item markers.
::first-letter	This pseudo-element is for applying style to the first letter of an element.
::footnote-call	This pseudo-element is for applying style to footnote calls, the numeric anchors in the main text that refer to footnotes.
::footnote-marker	This pseudo-element is for applying style to footnote markers, the numeric markers placed in front of the footnote text.

reference from  

http://www.princexml.com/doc/7.0/selectors/