Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Tuesday, May 6, 2014
Ajax Stylish Captcha and Contact Form using JQuery and PHP.


Captcha is main component of just about any style in addition to when it is ajax centered and then it looks amazing. Desire you can like this in addition to post me personally the nourish returning. Thank you!

1

JQUERY CODE
   1: // <![CDATA[    

   2: $(document).ready(function() { 

   3:  

   4:  $('#Send').click(function() {  

   5:     

   6:         // name validation

   7:         

   8:         var nameVal = $("#name").val();

   9:         if(nameVal == '') {

  10:             

  11:             $("#name_error").html('');

  12:             $("#name").after('<label class="error" id="name_error">Please enter your name.</label>');

  13:             return false

  14:         }

  15:         else

  16:         {

  17:             $("#name_error").html('');

  18:         }

  19:         

  20:         /// email validation

  21:         

  22:         var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

  23:         var emailaddressVal = $("#email").val();

  24:         

  25:         if(emailaddressVal == '') {

  26:             $("#email_error").html('');

  27:             $("#email").after('<label class="error" id="email_error">Please enter your email address.</label>');

  28:             return false

  29:         }

  30:         else if(!emailReg.test(emailaddressVal)) {

  31:             $("#email_error").html('');

  32:             $("#email").after('<label class="error" id="email_error">Enter a valid email address.</label>');

  33:             return false

  34:          

  35:         }

  36:         else

  37:         {

  38:             $("#email_error").html('');

  39:         }

  40:     

  41:         $.post("post.php?"+$("#MYFORM").serialize(), {

  42:     

  43:         }, function(response){

  44:         

  45:         if(response==1)

  46:         {

  47:             $("#after_submit").html('');

  48:             $("#Send").after('<label class="success" id="after_submit">Your message has been submitted.</label>');

  49:             change_captcha();

  50:             clear_form();

  51:         }

  52:         else

  53:         {

  54:             $("#after_submit").html('');

  55:             $("#Send").after('<label class="error" id="after_submit">Error ! invalid captcha code .</label>');

  56:         }

  57:         

  58:         

  59:     });

  60:             

  61:     return false;

  62:  });

  63:  

  64:  // refresh captcha

  65:  $('img#refresh').click(function() {  

  66:         

  67:         change_captcha();

  68:  });

  69:  

  70:  function change_captcha()

  71:  {

  72:     document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();

  73:  }

  74:  

  75:  function clear_form()

  76:  {

  77:     $("#name").val('');

  78:     $("#email").val('');

  79:     $("#message").val('');

  80:  }

  81: });



CSS CODE


   1: body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px}

   2: #wrap{

   3:     border:solid #CCCCCC 1px;

   4:     width:203px;

   5:     -webkit-border-radius: 10px;

   6:     float:left;

   7:     -moz-border-radius: 10px;

   8:     border-radius: 10px;

   9:     padding:3px;

  10:     margin-top:3px;

  11:     margin-left:80px;

  12: }

  13:  

  14: .error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:200px;}

  15:  

  16: .success{ color:#009900; font-size:12px; margin:4px; font-style:italic; width:200px;}

  17:  

  18: img#refresh{

  19:     float:left;

  20:     margin-top:30px;

  21:     margin-left:4px;

  22:     cursor:pointer;

  23: }

  24:  

  25: #name,#email{float:left;margin-bottom:3px; height:20px; border:#CCCCCC 1px solid;}

  26:  

  27: #message{ width:260px; height:100px;float:left;margin-bottom:3px; border:#CCCCCC 1px solid;}

  28:  

  29: label{ float:left; color:#666666; width:80px;}

  30:  

  31: #Send{ border:#CC0000 solid 1px; float:left; background:#CC0000; color:#FFFFFF; padding:5px;}



HTML CODE


   1: <form action="#" name="MYFORM" id="MYFORM">

   2:     <label>Name</label>

   3:     <input name="name" size="30" type="text" id="name">

   4:     <br clear="all" />

   5:     <label>Email</label>

   6:     <input name="email" size="30" type="text" id="email">

   7:     <br clear="all" />

   8:     <label>Message</label>

   9:     <textarea id="message" name="message"></textarea>

  10:     <br clear="all" />

  11:     

  12:     <div id="wrap" align="center">

  13:         <img src="get_captcha.php" alt="" id="captcha" />

  14:         

  15:         <br clear="all" />

  16:         <input name="code" type="text" id="code">

  17:     </div>

  18:     <img src="refresh.jpg" width="25" alt="" id="refresh" />

  19:         

  20:     <br clear="all" /><br clear="all" />

  21:     <label>&nbsp;</label>

  22:     <input value="Send" type="submit" id="Send">

  23: </form>







DEMO & DOWNLOAD





Add this widget to your website for $10. Please contact us : info@9pixle.com
Read more
Apple Slideshow Gallery - JQUERY

When speaking about style, there is a single firm that is certainly difficult to search with no. The apple company prices style – as being a new product or service, some sort of extravagant directory or even their own web page – there is always something in order to respect.

This specific 7 days, we have been producing a great Apple-like slideshow gallery, exactly like the a single that they employ on the web page in order to showcase their own items. It's going to be entirely front-end dependent, not any PHP or even data source expected.

Thus just download this instance supply value along with go on together with the 1st step.
1

HTML CODE (index.html)

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

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5: <title>Apple Slideshow Gallery</title>

   6:  

   7: <link rel="stylesheet" type="text/css" href="demo.css" />

   8:  

   9: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   1:  


   2: <script type="text/javascript" src="script.js">

</script>

  10:  

  11: <!--[if lte IE 7]>

  12: <style type="text/css">

  13: ul li{

  14:     display:inline;

  15:     /*float:left;*/

  16: }

  17: </style>

  18: <![endif]-->

  19:  

  20: </head>

  21:  

  22: <body>

  23:  

  24: <div id="main">

  25:  

  26:   <h1>Apple Slideshow Gallery</h1>

  27:   

  28:  <div id="gallery">

  29:     

  30:     <div id="slides">

  31:     

  32:     <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>

  33:     <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>

  34:     <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>

  35:     <div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

  36:       

  37:     </div>

  38:     

  39:     <div id="menu">

  40:     

  41:     <ul>

  42:         <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>

  43:     </ul>

  44:     

  45:     

  46:     </div>

  47:     

  48:   </div>

  49:     

  50: </div>

  51: </body>

  52: </html>



CSS CODE (demo.css)


   1: body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{

   2:     /* Page reset */

   3:     margin:0px;

   4:     padding:0px;

   5: }

   6:  

   7: body{

   8:     /* Setting default text color, background and a font stack */

   9:     color:#444444;

  10:     font-size:13px;

  11:     background: #f2f2f2;

  12:     font-family:Arial, Helvetica, sans-serif;

  13: }

  14:  

  15: /* Gallery styles */

  16:  

  17: #gallery{

  18:     /* CSS3 Box Shadow */

  19:     -moz-box-shadow:0 0 3px #AAAAAA;

  20:     -webkit-box-shadow:0 0 3px #AAAAAA;

  21:     box-shadow:0 0 3px #AAAAAA;

  22:     

  23:     /* CSS3 Rounded Corners */

  24:     

  25:     -moz-border-radius-bottomleft:4px;

  26:     -webkit-border-bottom-left-radius:4px;

  27:     border-bottom-left-radius:4px;

  28:     

  29:     -moz-border-radius-bottomright:4px;

  30:     -webkit-border-bottom-right-radius:4px;

  31:     border-bottom-right-radius:4px;

  32:     

  33:     border:1px solid white;

  34:     

  35:     background:url(img/panel.jpg) repeat-x bottom center #ffffff;

  36:     

  37:     /* The width of the gallery */

  38:     width:920px;

  39:     overflow:hidden;

  40: }

  41:  

  42: #slides{

  43:     /* This is the slide area */

  44:     height:400px;

  45:     

  46:     /* jQuery changes the width later on to the sum of the widths of all the slides. */

  47:     width:920px;

  48:     overflow:hidden;

  49: }

  50:  

  51: .slide{

  52:     float:left;

  53: }

  54:  

  55: #menu{

  56:     /* This is the container for the thumbnails */

  57:     height:45px;

  58: }

  59:  

  60: ul{

  61:     margin:0px;

  62:     padding:0px;

  63: }

  64:  

  65: li{

  66:     /* Every thumbnail is a li element */

  67:     width:60px;

  68:     display:inline-block;

  69:     list-style:none;

  70:     height:45px;

  71:     overflow:hidden;

  72: }

  73:  

  74: li.inact:hover{

  75:     /* The inactive state, highlighted on mouse over */

  76:     background:url(img/pic_bg.png) repeat;

  77: }

  78:  

  79: li.act,li.act:hover{

  80:     /* The active state of the thumb */

  81:     background:url(img/active_bg.png) no-repeat;

  82: }

  83:  

  84: li.act a{

  85:     cursor:default;

  86: }

  87:  

  88: .fbar{

  89:     /* The left-most vertical bar, next to the first thumbnail */

  90:     width:2px;

  91:     background:url(img/divider.png) no-repeat right;

  92: }

  93:  

  94: li a{

  95:     display:block;

  96:     background:url(img/divider.png) no-repeat right;

  97:     height:35px;

  98:     padding-top:10px;

  99: }

 100:  

 101: a img{

 102:     border:none;

 103: }

 104:  

 105:  

 106: /* The styles below are only necessary for the demo page */

 107:  

 108: h1{

 109:     font-family:"Myriad Pro",Arial,Helvetica,sans-serif;

 110:     font-size:36px;

 111:     font-weight:normal;

 112:     margin-bottom:15px;

 113: }

 114:  

 115: h2{

 116:     font-family:"Myriad Pro",Arial,Helvetica,sans-serif;

 117:     font-size:12px;

 118:     font-weight:normal;

 119:     position:absolute;

 120:     right:0;

 121:     text-transform:uppercase;

 122:     top:15px;

 123: }

 124:  

 125: #main{

 126:     /* The main container */

 127:     margin:15px auto;

 128:     text-align:center;

 129:     width:920px;

 130:     position:relative;

 131: }

 132:  

 133: a, a:visited {

 134:     color:#0196e3;

 135:     text-decoration:none;

 136:     outline:none;

 137: }

 138:  

 139: a:hover{

 140:     text-decoration:underline;

 141: }

 142:  

 143: p{

 144:     padding:10px;

 145:     text-align:center;

 146: }



JavaScript Code (script.js)


   1: $(document).ready(function(){

   2:     /* This code is executed after the DOM has been completely loaded */

   3:     

   4:     var totWidth=0;

   5:     var positions = new Array();

   6:     

   7:     $('#slides .slide').each(function(i){

   8:         

   9:         /* Traverse through all the slides and store their accumulative widths in totWidth */

  10:         

  11:         positions[i]= totWidth;

  12:         totWidth += $(this).width();

  13:         

  14:         /* The positions array contains each slide's commulutative offset from the left part of the container */

  15:         

  16:         if(!$(this).width())

  17:         {

  18:             alert("Please, fill in width & height for all your images!");

  19:             return false;

  20:         }

  21:         

  22:     });

  23:     

  24:     $('#slides').width(totWidth);

  25:  

  26:     /* Change the cotnainer div's width to the exact width of all the slides combined */

  27:  

  28:     $('#menu ul li a').click(function(e,keepScroll){

  29:  

  30:             /* On a thumbnail click */

  31:  

  32:             $('li.menuItem').removeClass('act').addClass('inact');

  33:             $(this).parent().addClass('act');

  34:             

  35:             var pos = $(this).parent().prevAll('.menuItem').length;

  36:             

  37:             $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

  38:             /* Start the sliding animation */

  39:             

  40:             e.preventDefault();

  41:             /* Prevent the default action of the link */

  42:             

  43:             

  44:             // Stopping the auto-advance if an icon has been clicked:

  45:             if(!keepScroll) clearInterval(itvl);

  46:     });

  47:     

  48:     $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');

  49:     /* On page load, mark the first thumbnail as active */

  50:     

  51:     

  52:     

  53:     /*****

  54:      *

  55:      *    Enabling auto-advance.

  56:      *

  57:      ****/

  58:      

  59:     var current=1;

  60:     function autoAdvance()

  61:     {

  62:         if(current==-1) return false;

  63:         

  64:         $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] will be passed as the keepScroll parameter of the click function on line 28

  65:         current++;

  66:     }

  67:  

  68:     // The number of seconds that the slider will auto-advance in:

  69:     

  70:     var changeEvery = 10;

  71:  

  72:     var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

  73:  

  74:     /* End of customizations */

  75: });



DEMO



DOWNLOAD




Add this widget to your website for $10. Please contact us : info@9pixle.com

Read more
Subscribe to: Posts (Atom)

Thank you for visiting 9pixle.