CSS3 Transition

CSS3 Transition

Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!

//CSS
<style>
.my_class {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.my_class:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
</style>
//HTML
<p><a class="my_class" href="#">Mouse over this example paragraph to <br/>see it rotate 7degrees using a transform transition.</a></p>

Create Image Rotate Slider

Create Image Rotate Slider










CSS Code

 <style>
body{
background:#1f1f1f;
margin:0;
}
#intro .slide, #intro .slide li{
 width:366px;
 height:196px;
 overflow:hidden;
 margin:0;
 padding:0;
 }
#intro{
 border:5px solid #FFFFFF;
 width:366px;
 height:196px;
 margin:20px;
 }
</style>

Javascript Code

 <script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
rotate();
});
this.rotate = function(){

$(".rotate").each(function(){ 
var obj = this;      
var pause = 5000;
var length = $("li",obj).length;
var temp = 0;
var randomize = false;

function getRan(){
 var ran = Math.floor(Math.random()*length) + 1;
 return ran;
};
function show(){
 if (randomize){
  var ran = getRan();
   while (ran == temp){
   ran = getRan();
  };
  temp = ran;
 } else {
  temp = (temp == length) ? 1 : temp+1 ;
 };
 $("li",obj).hide();
 $("li:nth-child(" + temp + ")",obj).fadeIn("slow");
};
show(); setInterval(show,pause);

});
};
</script>

HTML Code

<div id="intro">
<ul class="slide rotate">
 <li><img src="images/img_slide1.jpg" alt="" /></li>
 <li><img src="images/img_slide2.jpg" alt="" /></li>
 <li><img src="images/img_slide3.jpg" alt="" /></li>
</ul>
</div>

Download

http://dl.dropbox.com/u/3293191/r-ednalan/randomize_slider.zip

Create CSS Post Comment Design Form

Create CSS Post Comment Design Form














CSS

<style>
#main{
float:left;
display:inline;
width:567px;
margin-left:50px;
position:relative;
}
form{
margin:1em 0;
border:none;
background:#dfeced;
border:5px solid #c9dfe1;
padding:1em 15px;
}
label{
float:left;
clear:both;
width:105px;
margin-right:20px;
margin-top:5px;
text-align:right;
}
input, textarea{
width:350px;
border:1px solid #ccc;
padding:5px;
vertical-align:middle;
margin:0;
}
textarea{
height:180px;
overflow:auto;
}  
form p{
clear:both;
margin:0;
padding:.25em 0;
} 
button{
border:none;
width:123px;
height:43px;
line-height:43px;
text-align:center;
padding:0;
margin:0;
background:url(images/bg_button.gif) no-repeat 0 0;
color:#fff;
font-weight:bold;
font-size:14px;
cursor:pointer;
vertical-align:middle;
}        
.submit{
height:52px;
margin-left:125px; 
}
</style>

HTML Form

<div id="main">
<h3>Post your comment</h3>
<form id="commentForm" action="/" method="post"> 
  <p>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" size="30" />
  </p>
  <p>
   <label for="email">Email</label>
   <input type="text" name="email" id="email" size="30" />
  </p>
  <p>
   <label for="web">Website</label>
   <input type="text" name="web" id="web" size="30" />
  </p>               
  <p>
   <label for="comment">Comment</label>
   <textarea name="comment" id="comment" rows="10" cols="30"></textarea>
  </p>    
  <p class="submit">
   <button type="submit">Send</button>
  </p> 
</form>
</div>

Demo

http://dl.dropbox.com/u/3293191/r-ednalan/css_post_comment_form.html

IE 5 and 6 png transparent using javascript

IE 5 and 6 png transparent using javascript

<script type="text/javascript" src="js/jquery.js"></script>
this.pngfix = function() {
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 || ie6)) { 
 $("*").each(function(){
  var bgIMG = $(this).css('background-image');
  if(bgIMG.indexOf(".png")!=-1){
   var iebg = bgIMG.split('url("')[1].split('")')[0];
   $(this).css('background-image', 'none');
   $(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='crop')";
  };
 });
}; 
};
this.init = function() {
 pngfix();
};

$(document).ready(function(){ 
 init();
});

CSS Image Round Corners

CSS Image Round Corners

<style>
.thumbnails img
 {
  width: 100px;
  height: 75px;
  border: solid 5px #00A5D0;
  cursor: pointer;
  /* Round select corners */
  -webkit-border-radius: 15px 0;
  -khtml-border-radius: 15px 0; 
  -moz-border-radius: 15px 0;
  border-radius: 15px 0; 
 }
</style>
<div>
<p>Normal</p>
<img src="images/1_thumb.jpg" title="" alt="" width="100" height="75" />
<img src="images/2_thumb.jpg" title="" alt="" width="100" height="75" />
</div>
<div class="thumbnails">
<p>Round corner</p>
<img src="images/1_thumb.jpg" title="" alt="" width="100" height="75" />
<img src="images/2_thumb.jpg" title="" alt="" width="100" height="75" />
</div>

CSS Image button

CSS Image button

<style>
.downloadButton {
   margin-top: 1em;
   display: block;
   background: url(download.gif);
   width: 180px;
   height: 51px;
   cursor: default;
   text-indent: -2000px;
}
.downloadButton:hover {
   background-position: 0 -51px;
}
.downloadButton:active {
   background-position: 0 51px;
}
</style>
<p><a href="#" class="downloadButton">Download</a></p>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/css_image_button.html

Credit Card Validation

Credit Card Validation

Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.


Visit Site

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

CakePHP GROUP BY

CakePHP GROUP BY

$this->Product->find(‘all’,array(‘fields’=>array(‘Product.type’,'MIN(Product.price) as price’), ‘group’=> ‘Product.type’));