software download, web development & design

Footer Toggle Content jquery

2012-01-24T05:07:00.001-08:00

Footer Toggle Content jquery

Download

<style type="text/css">
body   {
   font-size:72%;
   font-family:Arial, Helvetica, sans-serif;
   line-height:1.9em;
   color:#434343;
   background:#FCFCFC;
   }
a:hover   {
   text-decoration:none;
   color:#7B7B7F;
   }
h3    {
   font:2em Arial, Verdana, Helvetica, sans-serif;
   color:#2A313A;
   padding-bottom:20px;
   }
ul, ol   {
   margin:0;
   padding:0 0 20px;
   }
  
ul    {list-style:none;}
  
ul li   {
   margin:0;
   padding:5px 0 5px 21px;
   color:#434343;
   background:url(images/arr.gif) 0 9px no-repeat;
   }
  
ul li a   {
   color:#434343;
   text-decoration:none;
   }

ol li   {
   margin:0 0 0 2em;
   padding:0;
   color:#434343;
   }
.wrap   {
   width:1000px;
   position:relative;
   margin:0 auto;
   z-index:300;
   }
.clear   {clear:both; height:0px;}
#footer_button {
   width: 121px;
   height:22px;
   margin-right:34px;
   float:right;
   cursor: pointer;
   background:url(images/more_info.png) 0 0 no-repeat;
   }

#footer_higher {
   width:100%;
   background: #293139;
   position:relative;
   z-index:100;
   }

#footer_higher #footer_content {
   width: 932px;
   margin: 0 auto;
   display: none;
   }

#footer_higher #footer_content .footbox1 {
   float: left;
   width: 265px;
   margin: 20px 0 30px;
   }
  
#footer_higher #footer_content .footbox2 {
   float: left;
   width: 130px;
   margin: 20px 0 30px 50px;
   }
  
#footer_higher #footer_content .footbox3 {
   float: right;
   width: 260px;
   margin: 20px 0 30px;
   }
  
#footer_higher h3 {
   color:#ffffff;
   font-size:1.5em;
   padding-bottom:5px;
   }
  
#footer_higher .title {
   width:100%;
   position:relative;
   margin-bottom:15px;
   border-bottom:1px solid #191E23;
   }
  
#footer_higher .title:after {
   width:100%;
   content: '';
   position: absolute;
   border-bottom:1px solid #39444F;
   bottom:-2px;
   }
  
#footer_higher li {
   margin:0;
   padding:5px 0;
   background:none;
   border-bottom:1px solid #0D1012;
   }
  
#footer_higher #footer_content .footbox1 li {
   padding-left:20px;
   background:url(images/foot_arr.gif) 0 8px no-repeat;
   }
  
#footer_higher a {
   color:#9A9B9D;
   text-decoration:none;
   }
  
#footer_higher a:hover {
   color:#ffffff;
   text-decoration:none;
   }
  
#FootContact p {margin-bottom:3px; clear:both;}

#FootContact p label {
   width:45px;
   padding-right:5px;
   font-size:0.9em;
   padding-top:2px;
   text-transform:uppercase;
   float:left;
   color:#96999C;
   }

#FootContact input[type=text],
#FootContact textarea {
   padding:3px;
   font:0.95em/0.9em Arial, Helvetica, sans-serif;
   color:#96999C;
   background:#1B2025;
   border-top:1px solid #0D1012;
   border-left:1px solid #0D1012;
   border-bottom:1px solid #394550;
   border-right:1px solid #394550;
   }
  
#FootContact input[type=text] {
   width:199px;
   height:15px;
   }
  
#FootContact input[type=text]:hover,
#FootContact textarea:hover {background:#293139;}
#FootContact input[type=text]:focus,
#FootContact textarea:focus {background:#444A50;}
  
#FootContact input[type=submit] {
   border:1px solid #1A1F24;
   box-shadow:1px 2px 2px #1A1F24;
   -moz-box-shadow:1px 2px 2px #1A1F24;
   -webkit-box-shadow:1px 2px 2px #1A1F24;
   box-shadow:1px 2px 2px #1A1F24;
   text-transform:uppercase;
   background: #444A50;
   }

#FootContact textarea  {
   width:249px;
   height:95px;
   overflow:hidden;
   }

#footer_lower {
   border-top:6px solid #14181B;
   width: 100%;
   color: #434343;
   padding: 25px 0px;
   position:relative;
   z-index:200;
   background:#fff;
   }
  
#footer_lower .valid {
   display:block;
   font-size:0.95em;
   color: #A1A1A1;
   }

#footer_lower #footer_info {
   width: 932px;
   margin: 0 auto;
   }

#footer_lower #copyright {
   width: 610px;
   float: left;
   text-align:left;
   }

#footer_lower #attr {
   width: 300px;
   padding-top:10px;
   float: right;
   font-size:1.3em;
   text-align:right;
   color:#A1A1A1;
   }
  
#footer_lower #attr b {font-weight:normal;}
  
#attr ul  {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   }
  
#attr ul li  {
   margin:0;
   padding:0 3px 0 0;
   float:left;
   background:none;
   }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 jQuery(function($) {
  var slide = false;
  var height = $('#footer_content').height();
  $('#footer_button').click(function() {
   var docHeight = $(document).height();
   var windowHeight = $(window).height();
   var scrollPos = docHeight - windowHeight + height;
   $('#footer_content').animate({ height: "toggle"}, 1000);
   if(slide == false) {
    if($.browser.opera) {
     $('html').animate({scrollTop: scrollPos+'px'}, 1000);
    } else {
     $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
    }
    slide = true;
   } else {
    slide = false;
   }
  });
 });
</script>

<div style="height:900px;"></div>
<div class="wrap">
 <div id="footer_button"></div>
 <div class="clear"></div>
</div>
<div id="footer_higher">
 <div id="footer_content">
  <div class="footbox1">
   <div class="title"><h3>Recent News</h3></div>
   <ul>
    <li><a href="#" title="Donec accumsan lorem ipsum dolor...">Donec accumsan malesuada orcidonec sitmet eros lorem ipsum dolor...</a></li>
    <li><a href="#" title="Amet incon ecteetra magna donec accumsan...">Amet incon ectetuer adipiscing maurse pharetra magna donec accumsan...</a></li>
    <li><a href="#" title="Malesuada orcdo nsec tetuer malesuada...">Malesuada orcdonec umet lorem ipsum dolorconsec tetuer malesuada...</a></li>
   </ul>
  </div>
  <div class="footbox2">
   <div class="title"><h3>Archives</h3></div>
   <ul>
    <li><a href="#" title="June, 2010">June, 2010</a></li>
    <li><a href="#" title="May, 2010">May, 2010</a></li>
    <li><a href="#" title="April, 2010">April, 2010</a></li>
    <li><a href="#" title="March, 2010">March, 2010</a></li>
    <li><a href="#" title="February, 2010">February, 2010</a></li>
    <li><a href="#" title="January, 2010">January, 2010</a></li>
   </ul>
  </div>
  <div class="footbox2">
   <div class="title"><h3>Categories</h3></div>
   <ul>
    <li><a href="#" title="Advertising">Advertising</a></li>
    <li><a href="#" title="News">News</a></li>
    <li><a href="#" title="Web Design">Web Design</a></li>
   </ul>
  </div>
 
  <div class="footbox3">
   <div class="title"><h3>Email Us</h3></div>
   <form action="" id="FootContact">
    <p><label for="fname">Name:</label><input type="text" id="fname" /></p>
    <p><label for="femail">E-mail:</label><input type="text" id="femail" /></p>
    <p><textarea cols="5" rows="3"></textarea></p>
    <p><input type="submit" value="Submit" title="Submit" /></p>
   </form>
  </div>
  <div class="clear"></div>
 </div>
</div>
<div id="footer_lower">
 <div id="footer_info">
  <div id="copyright">
   Copyright © 2012  •  r-ednalan.blogspot.com  •  All rights reserved
   <span class="valid">http://r-ednalan.blogspot.com/</span>
  </div>
  <div id="attr">
   <ul>
    <li><b>Stay Connected</b></li>
   </ul>
  </div>
  <div class="clear"></div>
 </div>
</div>

Toggle Content using jquery

2012-01-23T19:20:00.001-08:00

Toggle Content using jquery

Download

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$(".toggle_content").hide();
$("h3.toggle").toggle(function(){
 $(this).addClass("active");
 }, function () {
 $(this).removeClass("active");
});

$("h3.toggle").click(function(){
 $(this).next(".toggle_content").slideToggle();
});
});
</script>
<style>
.toggle, h3.toggle {
cursor:pointer;
background:url(images/toggle_plus.gif) 98% 5px #d0d0d0 no-repeat;
padding:10px;
line-height:inherit;
margin:20px 0;
width:621px;
border-radius: 5px 5px 5px 5px;
}
.toggle.active {
background:url(images/toggle_minus.gif) 98% 5px #d0d0d0 no-repeat;}
.toggle_content {
margin-left:10px;
padding:15px;
background:#f2f2f2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:20px;
width:602px;
}
.toggle_content .faq_list {
margin:10px 0 0 0;

}
.dropcap1 {
color:#444e69;
display:block;
float:left;
font-size:28px;
line-height:28px;
font-style:italic;
text-shadow:#fff 1px 1px 1px;
font-family:Georgia, "Times New Roman", Times, serif;
}
</style>

<h2>Toggle Content</h2>
<h3 class="toggle box">Frequently asked questions:</h3>
<div class="toggle_content">

                      <div class="faq_list">
                
                          <div class="faq_question">
                              <span class="dropcap1">Q:</span> <strong>Ut enim ad minim veniam, quis nostrud exerc</strong>
                          </div>
                          <div class="faq_answer">
                              <span class="dropcap1" style="padding-left:40px;">A:</span><p style="padding-left:10px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui</p>
                          </div>
                        
                          <div class="faq_question">
                              <span class="dropcap1">Q:</span> <strong>Ut enim ad minim veniam, quis nostrud exerc?</strong>
                          </div>
                          <div class="faq_answer" style="padding-left:40px;">
                              <span class="dropcap1">A:</span><p style="padding-left:10px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui</p>
                          </div>
                        
                          <div class="faq_question">
                              <span class="dropcap1">Q:</span> <strong>Ut enim ad minim veniam, quis nostrud exerc?</strong>
                          </div>
                          <div class="faq_answer" style="padding-left:40px;">
                              <span class="dropcap1">A:</span><p style="padding-left:10px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui</p>
                          </div>
                        
                      </div>
</div>
    
<h3 class="toggle box">Toggle Content 2</h3>
  <div class="toggle_content">
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquiad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui
  </div>

Tab Content Framed Tabs with Jquery tools plugins

2012-01-23T18:36:00.000-08:00

Tab Content Framed Tabs with Jquery tools plugins

Download

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("ul.tabs").tabs("> .tabcontent", {tabs: 'li'});
});
</script>
<style>
.tabFrameBox {
position:relative;
width:622px;
}
.text .tabFrameBox {
width:100%}

.text .tabFrameBox .tabs,
.tabFrameBox .tabs{
float:left;
margin:0 !important;
padding:0;
text-shadow:#fff 0 2px 1px}

.tabFrameBox .tabs li {
font-family: "HattoriHanzoLight", Calibri, sans-serif;
font-size:18px;
list-style:none;
float:left;
display:block;
text-align:center;
background:url(images/framed_tab_bg_right.gif) right 0 no-repeat;
height:39px;
margin:0 3px -1px 0;
line-height:36px}

.tabFrameBox .tabs li a {
display:block;
float:left;
background:url(images/framed_tab_bg_left.gif) left 0 no-repeat;
padding:0 35px;
height:39px;
color:#000;}

.tabFrameBox .tabs .current {
background:url(images/framed_tab_bg_right.gif) right -39px no-repeat;
height:39px;
margin:0 3px -1px 0;}

.tabFrameBox .tabs .current a {
background:url(images/framed_tab_bg_left.gif) left -39px no-repeat;
color:#fff;
text-shadow:#40434c 0 2px 1px}

.tabFrameBox .tabs .current a span {
background:url(images/framed_tab_arrow.gif) center bottom no-repeat;
display:block;
float:left;
height:39px;}

.tabFrameBox .tabcontent {
clear:both;
background:#fff;
border:1px solid #d6d6d6;
line-height:1.5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
padding:10px;
}

</style>
<h2>Framed Tabs:</h2>
                     <div class="tabFrameBox">
                         <ul class="tabs">
                               <li><a href="#tabcontent1"><span>Tab 1</span></a></li>
                               <li><a href="#tabcontent2"><span>Tab 2</span></a></li>
                               <li><a href="#tabcontent3"><span>Tab 3</span></a></li>
                         </ul>
      
                         <div class="tabcontent">
                             <div class="inner">
                          
                             <h3>Tab 1 content</h3>
                             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                          
                             <div class="clear"></div>
                             </div>
                         </div>
                         <div class="tabcontent">
                             <div class="inner">
                             <h3>Tab 2 content</h3>
                             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                             <div class="clear"></div>
                             </div>
                         </div>
                         <div class="tabcontent">
                             <div class="inner">
      <h3>Tab 3 content</h3>
                             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                             <div class="clear"></div>
                             </div>
                         </div>
                     </div>

Tab Content Icons with Jquery tools plugins

2012-01-23T06:50:00.001-08:00

Tab Content Icons with Jquery tools plugins

Download

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("ul.tabs").tabs("> .tabcontent", {tabs: 'li'});
});
</script>

<style>
.tabBox {
position:relative;
background:url(images/tabs_bg.jpg) left top no-repeat;
width:622px;
}

.text .tabBox {
width:100%}

.tabBox .tabs,
.text .tabBox .tabs{
float:right;
height:42px;
background:url(images/tabs_bg.jpg) right top;
margin:0 !important;
padding:0 8px 0 0;
line-height:40px;}

.tabBox .tabs li {
list-style:none;
float:left;
display:block;
text-align:center;
margin:0;}

.tabBox .tabs li a {
display:block;
width:51px;
height:42px;}

.tabBox .tabs .current {
background:url(images/tabs_active_bg.gif) 0 0 no-repeat}

.tabTitle {
float:left;
line-height:40px;}

.tabTitle h3, .col .tabTitle h3 {
font-size:19px;
color:#222;
text-shadow:#fff 0 1px 1px;
line-height:40px;
padding-left:25px;
font-weight:normal;
margin:0 !important}

.tabBox .tabcontent {
clear:both;
background:#fff;
border:1px solid #d6d6d6;
border-top:none;
line-height:1.5em;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;}

.tabcontent .inner {
padding:15px}

.tabcontent p {
margin-bottom:10px !important}

.tabcontent h3 {
color:#2e88c7;
font-size:19px;
margin:10px 0 10px 0}

.tabcontent img {
border:1px solid #dfdfdf}
</style>
<h2>Tabs Contents Icons:</h2>
                      <div class="tabBox">
                          <div class="tabTitle"><h3>Main Title:</h3></div>
                          <ul class="tabs">
                                <li><a href="#tabcontent1"><img src="images/icon_1.png" width="51" height="42" alt="" /></a></li>
                                <li><a href="#tabcontent2"><img src="images/icon_2.png" width="51" height="42" alt="" /></a></li>
                                <li><a href="#tabcontent3"><img src="images/icon_3.png" width="51" height="42" alt="" /></a></li>
                          </ul>
        
                          <div class="tabcontent">
                              <div class="inner">
                              <img src="images/temp_img_1.jpg" alt="" width="230" height="143" class=" frame_left" />
                              <h3>Tab 1 - Title</h3>
                              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                            
                              <div class="clear"></div>
                              </div>
                          </div>
                          <div class="tabcontent">
                              <div class="inner">
                              <h3>Tab 2 - Title</h3>
                              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                              <div class="clear"></div>
                              </div>
                          </div>
                          <div class="tabcontent">
                              <div class="inner">
                              <img src="images/temp_img_3.jpg" alt="" width="230" height="143" class="alignright" />
                              <h3>Tab 3 - Title</h3>
                              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                            
                              <div class="clear"></div>
                              </div>
                          </div>
                      </div>

CSS Info Boxes

2012-01-19T07:14:00.000-08:00

CSS Info Boxes

Download

<style>
.columns-wrapper {
width: 960px;
float: left;
margin-bottom: 30px;
}
.two-columns,.two-columns-2 {
width: 457px;
float: left;
margin-right: 45px;
}
.info_box,.note_box,.tip_box,.error_box,tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
}
.info_box {
background: #ddf3fc url(images/icons/info.png) no-repeat scroll 10px
 14px;
border: 1px solid #8ed9f6;
color: #2e6093;
}
.note_box {
background: #fffadb url(images/icons/note.png) no-repeat scroll 10px
 15px;
border: 1px solid #f5d145;
color: #9e660d;
}
.error_box {
background: #ffdede url(images/icons/error.png) no-repeat scroll 10px
 15px;
border: 1px solid #d97676;
color: #cd0a0a;
}
.tip_box {
background: #eff7d9 url(images/icons/tip.png) no-repeat scroll 10px
 15px;
border: 1px solid #b7db58;
color: #5d791b;
}

</style>
<h2>Info Boxes</h2>
    <div class=" columns-wrapper">
      <div class="two-columns">
        <div class="info_box"><b>Info:</b> Insert your text here</div>
        <div class="error_box"><b>Error:</b> Insert your text here</div>
      </div>
      <div class="two-columns-2">
        <div class="note_box"><b>Note:</b> Insert your text here</div>
        <div class="tip_box"><b>Tip:</b> Insert your text here</div>
      </div>
      <br />
      <br />
    </div>

Create A CSS Style Form

2012-01-17T08:09:00.001-08:00

Create A CSS Style Form

<style>
input {margin:0; padding:0;}
input[type=text], input[type=password], textarea { border:1px solid #e3e3e3; padding:7px; font-size:11px; color:#777; }
input[type=text], input[type=password], textarea, select {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
outline:0 none !important;
}
input[type=text].rounded, input[type=password].rounded, textarea.rounded, select.rounded, input[type=submit].rounded, button.rounded {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
input[type=text]:hover, input[type=password]:hover, textarea:hover { border:1px solid #b4b4b4; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { -moz-box-shadow: 0 0 3px #EB540A;-webkit-box-shadow: 0 0 3px #EB540A; box-shadow: 0 0 3px #EB540A; border: 1px solid #EB540A; }
input[type=submit], button {
background:#EB540A; padding: 4px 14px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5);
text-transform:uppercase; cursor:pointer; border:1px solid #444;
-webkit-box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;
}
input[type=submit]:hover, button:hover { -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset;}
input[type=submit]:active, button:active {-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset;}
.rounded-fields input[type=text], .rounded-fields input[type=password], .rounded-fields textarea, .rounded-fields select, .rounded-fields input[type=submit], .rounded-fields button {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
select {padding:7px; border:1px solid #e3e3e3;}
select:hover { border:1px solid #b4b4b4; }
form > div {margin-bottom:15px;}
form label {color:#454545;}

form.infield > div, form.infield > p {position:relative;}
form.infield label {position:absolute; left:7px; top:5px; font-size:11px; color:#888;}

.form-preset input[type=text], .form-preset input[type=password] {width:240px;}
.form-preset textarea {width:450px;}
</style>


               <h1 class="title">FORM STYLES</h1>
                
                  <form action="#" method="post" class="form-preset">
                   <div>
                           <label for="name2">Text Input (with rounded corners):</label><br>
                           <input type="text" name="name2" class="rounded" id="name2" value="" tabindex="2" />
                      </div>
                      <div>
                           <label for="name">Password Input (with rounded corners):</label><br>
                           <input type="password" name="name2" class="rounded" id="name2" value="tralala" tabindex="2" />
                      </div>
                    
                
                    
                      <div>
                          <label for="select-choice">Select Dropdown Choice (rounded corners):</label><br>
                          <select name="select-choice" id="select-choice" class="rounded">
                              <option value="Choice 1">Choice 1</option>
                              <option value="Choice 2">Choice 2</option>
                              <option value="Choice 3">Choice 3</option>
                          </select>
                      </div>
                    
                    
                      <div>
                          <label for="textarea">Textarea (round corners):</label><br>
                          <textarea cols="40" rows="8" name="textarea" id="textarea" class="rounded">This textarea has .rounded class set to it</textarea>
                      </div>
                   
                      <div>
                       Submit input with .rounded class:<br>
                          <input type="submit" value="Submit" class="rounded" />
                      </div>
                  </form>

CSS Simple Photo gallery

2012-01-17T07:50:00.001-08:00

CSS Simple Photo gallery

<style>
ul.gallery {clear: both; list-style: none outside none; margin: 8px auto; overflow: hidden; padding: 8px 0;}
ul.gallery li {background:#FFFFFF; float: left; margin: 5px; padding: 0; list-style:none; }
ul.gallery li a img {padding:4px; border:1px solid #ededed;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
ul.gallery li a img:hover {-moz-box-shadow: 0 0 5px #EB540A;-webkit-box-shadow: 0 0 5px #EB540A; box-shadow: 0 0 5px #EB540A; border: 1px solid #EB540A;}
</style>
<h2>Photo gallery</h2>
<ul class="gallery">
 <li><a href="#"><img src="photo1.jpg" alt=""></a></li>
 <li><a href=""><img src="photo2.jpg" alt=""></a></li>
 <li><a href=""><img src="photo3.jpg" alt=""></a></li>
</ul>

CSS3 Button

2012-01-17T06:53:00.000-08:00

CSS3 Button

<style>
body { font-family: Arial, Helvetica, tahoma sans-serif; font-size:12px; line-height:1.6; color:#282828; }

.medium-button {
 background: #cccccc;
 background: -moz-linear-gradient(top, #cccccc 0%, #bbbbbb 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#bbbbbb));
 background: -webkit-linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 background: -o-linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 background: -ms-linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#bbbbbb',GradientType=0 );
 background: linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 color: #FFF;
 cursor: pointer;
 font-size: 14px;
 font-weight: bold;
 padding: 8px 20px;
 overflow: visible;
 display: inline-block;
 text-decoration: none !important;
 text-shadow: 0 1px 0 rgba(0,0,0,0.4);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
 -moz-box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
 box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
}
.medium-button:hover {
 color:#fff;
 background: #bbbbbb;
 background: -moz-linear-gradient(top, #bbbbbb 0%, #cccccc 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#cccccc));
 background: -webkit-linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
 background: -o-linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
 background: -ms-linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#cccccc',GradientType=0 );
 background: linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
}
/* Gradient Colors */
.blue {
 background: #2e9fd8;
 background: -moz-linear-gradient(top, #2e9fd8 0%, #0c72a4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e9fd8), color-stop(100%,#0c72a4));
 background: -webkit-linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
 background: -o-linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
 background: -ms-linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e9fd8', endColorstr='#0c72a4',GradientType=0 );
 background: linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
}
a.blue:hover {
 background: #0c72a4;
 background: -moz-linear-gradient(top, #0c72a4 0%, #2e9fd8 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c72a4), color-stop(100%,#2e9fd8));
 background: -webkit-linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
 background: -o-linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
 background: -ms-linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c72a4', endColorstr='#2e9fd8',GradientType=0 );
 background: linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
}
.green {
 background: #b7df63;
 background: -moz-linear-gradient(top, #b7df63 0%, #74ab00 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7df63), color-stop(100%,#74ab00));
 background: -webkit-linear-gradient(top, #b7df63 0%,#74ab00 100%);
 background: -o-linear-gradient(top, #b7df63 0%,#74ab00 100%);
 background: -ms-linear-gradient(top, #b7df63 0%,#74ab00 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7df63', endColorstr='#74ab00',GradientType=0 );
 background: linear-gradient(top, #b7df63 0%,#74ab00 100%);
}
a.green:hover {
 background: #74ab00;
 background: -moz-linear-gradient(top, #74ab00 0%, #b7df63 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#74ab00), color-stop(100%,#b7df63));
 background: -webkit-linear-gradient(top, #74ab00 0%,#b7df63 100%);
 background: -o-linear-gradient(top, #74ab00 0%,#b7df63 100%);
 background: -ms-linear-gradient(top, #74ab00 0%,#b7df63 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74ab00', endColorstr='#b7df63',GradientType=0 );
 background: linear-gradient(top, #74ab00 0%,#b7df63 100%);
}

.medium-button { color:#fff; text-shadow:0 1px 1px rgba(0, 0, 0, 0.4); font-weight:bold; text-transform:uppercase; font-size:12px;}
.yellow {
 background: #ffd700;
 background: -moz-linear-gradient(top, #ffd700 0%, #ffaf00 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd700), color-stop(100%,#ffaf00));
 background: -webkit-linear-gradient(top, #ffd700 0%,#ffaf00 100%);
 background: -o-linear-gradient(top, #ffd700 0%,#ffaf00 100%);
 background: -ms-linear-gradient(top, #ffd700 0%,#ffaf00 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd700', endColorstr='#ffaf00',GradientType=0 );
 background: linear-gradient(top, #ffd700 0%,#ffaf00 100%);
}
a.yellow:hover {
 background: #ffaf00;
 background: -moz-linear-gradient(top, #ffaf00 0%, #ffd700 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf00), color-stop(100%,#ffd700));
 background: -webkit-linear-gradient(top, #ffaf00 0%,#ffd700 100%);
 background: -o-linear-gradient(top, #ffaf00 0%,#ffd700 100%);
 background: -ms-linear-gradient(top, #ffaf00 0%,#ffd700 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf00', endColorstr='#ffd700',GradientType=0 );
 background: linear-gradient(top, #ffaf00 0%,#ffd700 100%);
}
.red{
 background: #d11313;
 background: -moz-linear-gradient(top, #d11313 0%, #a30a0a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d11313), color-stop(100%,#a30a0a));
 background: -webkit-linear-gradient(top, #d11313 0%,#a30a0a 100%);
 background: -o-linear-gradient(top, #d11313 0%,#a30a0a 100%);
 background: -ms-linear-gradient(top, #d11313 0%,#a30a0a 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d11313', endColorstr='#a30a0a',GradientType=0 );
 background: linear-gradient(top, #d11313 0%,#a30a0a 100%);
}
a.red:hover  {
 background: #a30a0a;
 background: -moz-linear-gradient(top, #a30a0a 0%, #d11313 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a30a0a), color-stop(100%,#d11313));
 background: -webkit-linear-gradient(top, #a30a0a 0%,#d11313 100%);
 background: -o-linear-gradient(top, #a30a0a 0%,#d11313 100%);
 background: -ms-linear-gradient(top, #a30a0a 0%,#d11313 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a30a0a', endColorstr='#d11313',GradientType=0 );
 background: linear-gradient(top, #a30a0a 0%,#d11313 100%);
}
</style>

<a href="#" class="medium-button blue">Buy now!!</a>   <a href="#" class="medium-button green">Another action</a>
 <a href="#" class="medium-button yellow">Yellow Button</a>   <a href="#" class="medium-button red">Red Button</a>

Create Toggle contents

2012-01-17T06:29:00.000-08:00

Create Toggle contents

Download

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() { 
 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide();
 //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
 $(".tgg-trigger").click(function(){
  $(this).toggleClass("active").next().slideToggle("slow");
  return false; //Prevent the browser jump to the link anchor
 });
 }); 
</script>
<style>
body { font-family: Arial, Helvetica, tahoma sans-serif; font-size:12px; line-height:1.6; color:#282828; }
.tgg-trigger { padding: 0; margin: 0; width:100%; display:block; background:url(images/acc_style_1_arr_closed.png) no-repeat right center; padding: 0; overflow: hidden; clear: both;  }
.tgg-trigger .active {background:url(images/acc_style_1_arr_opened.png) no-repeat right center;}

#toggle_style {background:#f6f6f6; border:1px solid #dfdfdf; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; width:600px; margin-bottom:25px; }
#toggle_style .tgg-trigger {
 border-bottom:1px solid #dfdfdf; line-height:2.8; font-weight:bold; text-shadow:0 1px 0 #fff; color:#6e6e6e; width:auto;
 background: #fafafa;
 background: -moz-linear-gradient(top, #fafafa 0%, #e6e6e6 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e6e6e6));
 background: -webkit-linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
 background: -o-linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
 background: -ms-linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 );
 background: linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
}
#toggle_style .tgg-trigger span {display:block; padding:0 0 0 30px; background:url(images/arr2.png) no-repeat 8px 13px; }
#toggle_style .tgg-trigger.active { color:#444; }
#toggle_style .tgg-trigger.active span {background:url(images/arr2.png) no-repeat 8px -28px; }
#toggle_style .tgg-item.first .tgg-trigger {
 -webkit-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px; border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px; border-top-right-radius: 4px;
}
#toggle_style .tgg-item.last .tgg-trigger {
 border-bottom:0;
 -webkit-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
 -webkit-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
}
#toggle_style .toggle_container {padding:20px 20px 0; border-bottom:1px solid #dfdfdf; margin:0; }
#toggle_style .tgg-item.last .toggle_container {border-bottom:0; }
</style>



<h3>TOGGLE</h3>
                   <div id="toggle_style">
                       <div class="tgg-item first">
                           <a href="#" class="tgg-trigger"><span>Fusce neque felis</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                       <div class="tgg-item">
                           <a href="#" class="tgg-trigger"><span>Proin tempor neque mi</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                       <div class="tgg-item">
                           <a href="#" class="tgg-trigger"><span>Ligula eleifend posuere</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                       <div class="tgg-item last">
                           <a href="#" class="tgg-trigger"><span>Pretium dignissim elit nec feugiat</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                   </div>

Contact Form Using Jquery-Ajax

2011-12-22T17:54:00.001-08:00

Contact Form Using Jquery-Ajax

Create a jquery ajax form and validate the fields

Download

CSS
body{
font-family:Arial, Tahoma, Verdana;
font-size:12px;
margin:0 auto; padding:0;
color:#FFFFFF;
background-color:#949494;
}
*{
margin:0;
padding:0;
}
*:focus{
outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
   if you want to keep it! */
}
.clr{
clear:both
}
form{
margin:0; padding:0;
}

/* links */
a{
color:#a2a1a1;
text-decoration:underline;
}
a:visited{
color:#a7a6a6;
text-decoration:none;
}
a:hover{
color:#a7a6a6;
text-decoration:none;
}
a img{
border:none
}

/* Custom Message Styling */
.info {
margin: 15px 0;
color: #478BBF;
padding: 8px 10px 8px 37px;
background: #DCEFF5 url(images/info.png) 12px 9px no-repeat;
border: 1px solid #B8E7F5;
}
.success {
margin: 15px 0;
color:#3F9153;
padding:8px 10px 8px 37px;
background:#D7F7DF url(images/success.png) 12px 9px no-repeat;
border:1px solid #A3F7B8
}
.error {
margin: 15px 0;
color: #C24848;
padding: 8px 10px 8px 37px;
background: #FFD6D6 url(images/error.png) 12px 9px no-repeat;
border: 1px solid #FFC2C2;
}
.warning {
margin: 15px 0;
color: #CF9E00;
padding: 8px 10px 8px 37px;
background: #FAF2D7 url(images/warning.png) 12px 9px no-repeat;
border: 1px solid #FAE8AF;
}


#content{
padding:50px 0px 50px 0px;
}
#content_main{
width:560px;
float:left;
padding-left:30px;
}
.title_page{
font-size:36px;
margin-bottom:0;
}
.desc_title{
color:#FFFFFF;
font-size:24px;
}

form{
margin:0;
padding:0;
}
#contact_area{
position:relative;
padding:0px 0 0 0;

}
#contactFormArea{
width:406px;
margin:-20px 0px 20px 0px;
padding:30px 0 0 0;
}
label{
margin-bottom:3px;
}
fieldset{
border:0px;
}
.textfield{
border:1px solid #d5d5d5;
font-size:12px;
width:406px;
padding:7px 5px;
margin:0px 0px 15px 0px;
color:#959494;
}
.input-submit{
background-image:url(images/but-send.jpg);
background-repeat:no-repeat;
border:none;
width:84px;
height:34px;
cursor:pointer;
float:right;
margin-top:10px;
margin-right:-12px\0/;
color:#959494;
font-size:13px;
text-shadow:0px 1px 0px #fff;
}

/* ie7 hack */
*:first-child+html .input-submit{
background-image:url(images/but-send.jpg);
background-repeat:no-repeat;
border:none;
width:84px;
height:34px;
cursor:pointer;
float:right;
margin-top:10px;
margin-right:-12px;
color:#959494;
font-size:13px;
text-shadow:0px 1px 0px #fff;
}

.textarea{
border:1px solid #d5d5d5;
font-size:12px;
overflow:hidden;
width:406px;
padding:6px 5px;
margin:0px 0px 5px 0px;
color:#959494;
font-family:Arial;
}
.loading{
background:url(images/loading-contact.gif) no-repeat;
background-position:0px 3px;
padding-left:25px;
color:#797979;
margin:19px 20px 0px 0px;
float:right;
}
.success-contact{
text-align:center;
color:#3F9153;
margin-bottom:10px;
padding:8px 10px 8px 37px;
background:#D7F7DF url(images/success.png) no-repeat;
background-position:120px 9px;
border:1px solid #A3F7B8;
}

//Javascript
$(document).ready(function() {
$('#buttonsend').click( function() {

var name    = $('#name').val();
var subject = $('#subject').val();
var email   = $('#email').val();
var message = $('#message').val();

$('.loading').fadeIn('fast');

if (name != "" && subject != "" && email != "" && message != "")
 {

  $.ajax(
   {
    url: 'sendemail.php',
    type: 'POST',
    data: "name=" + name + "&subject=" + subject + "&email=" + email + "&message=" + message,
    success: function(result)
    {
     $('.loading').fadeOut('fast');
     if(result == "email_error") {
      $('#email').css({"border":"1px solid #ffb6b6"}).next('.require').text(' !');
     } else {
      $('#name, #subject, #email, #message').val("");
      $('Your message has been sent successfully. Thank you! 
').insertBefore('#contactFormArea');
      $('.success-contact').fadeOut(5000, function(){ $(this).remove(); });
     }
    }
   }
  );
  return false;

 }
else
 {
  $('.loading').fadeOut('fast');
  if( name == "") $('#name').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
  if(subject == "") $('#subject').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
  if(email == "" ) $('#email').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
  if(message == "") $('#message').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
  return false;
 }
});

$('#name, #subject, #email,#message').focus(function(){
 $(this).css({"background":"#ffffff","border":"2px solid #d5d5d5"});
});
  
});

//sendemail.php
<?php
$yourName = 'Test Mail';
$yourEmail = 'info@r-ednalan';
$yourSubject = 'Subject Test';
$referringPage = 'http://r-ednalan.blogspot.com/';
function cleanPosUrl ($str) {
return stripslashes($str);
}
if ( isset($_POST['sendContactEmail']) )
{
$to = $yourEmail;
$subject = $yourSubject.': '.$_POST['posRegard'];
$message = cleanPosUrl($_POST['posText']);
$headers = "From: ".cleanPosUrl($_POST['posName'])." <".$_POST['posEmail'].">\r\n";
$headers .= 'To: '.$yourName.' <'.$yourEmail.'>'."\r\n";
$mailit = mail($to,$subject,$message,$headers);
if ( @$mailit ) {
header('Location: '.$referringPage.'?success=true');
}
else {
header('Location: '.$referringPage.'?error=true');
}
}
?>

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/contact-form.js"></script>
<div id="content">
       <div id="content_main">
       <h1 class="title_page">Contact</h1>
       <h2 class="desc_title">Send us and email</h2>
       <p class="italic-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur excepteur sint occaecat cupidatat non proident,sunt in culpa quilo officia deserunt mollit anim id est laborum.</p>
       <div id="contact_area">                   
           <div id="contactFormArea">
               <form action="#" id="contactform">
                   <fieldset>
                   <label>Name</label><br />
                   <input type="text" name="name" class="textfield" id="name" value="" /><br />
                   <label>Email</label><br />
                   <input type="text" name="email" class="textfield" id="email" value="" /><br />
                   <label>Subject</label><br />
                   <input type="text" name="subject" class="textfield field-nomargin" id="subject" value="" /><br />
                   <label>Message</label><br />
                   <textarea name="message" id="message" class="textarea" cols="2" rows="7"></textarea>                                         
                   <input type="submit" name="submit" class="input-submit" id="buttonsend" value="" />
                       <span class="loading" style="display: none;">Please wait..</span>
                   </fieldset>
               </form>
           </div>
       </div>
       </div>
</div>

Create A CSS Administrator Login Form Design

2011-12-15T06:34:00.000-08:00

Create A CSS Administrator Login Form Design

Demo

Download

CSS Code

#login-form {
margin:106px auto 0px auto;
width:560px;
border:solid 12px #E0E0E0;
background:#E0E0E0;
border-radius:12px;
-moz-border-radius:12px;
webkit-border-radius:12px;
}
#login-form{
border-color:#4BB2C5;
}
#login-inner {
border-radius:5px;
-moz-border-radius:5px;
webkit-border-radius:5px;
background:url('img/ray.png') no-repeat scroll center top #eeeeee;
margin:0 auto;
padding:30px;
width:500px;
}
#login-form label{
color:#111;
display:block;
font-size:1em;
margin-bottom:2px;
font-weight:bold
}
#login-form input.txt {
background:url('img/login_input_bg.png') repeat-x scroll left top #F7FCFF;
border:1px solid #CCC;
color:#25313C;
font-size:1.4em;
width:486px;
padding:4px;
}
#login-form input#login-button{
text-transform:uppercase;
float:right;
margin-top:10px;
color:#DDD;
}
#login-error {
color:red;
padding:6px 0 6px 7px;
float:left;
font-size:12px;
width:330px;
text-align:center;
}
#login-form #wrapper{
height: 50px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-align:center;
width:494px;
margin:0px auto 30px auto;
font-size:1.2em;
background-image: url('img/inner_header.png');
}
#login-form #wrapper p{
padding-top:4px;
margin:0;
text-transform:uppercase;
letter-spacing:2px;
line-height:2.2em;
color:#FFF;
font-weight:bold;
text-shadow:#111 0px 1px 1px
}
div#remember-me{
float:left;
width:300px;
margin-top:16px;
}
div#remember-me a{
color:#000;
padding-right:10px;
font-weight:bold;
font-size:0.75em;
}
#login-bottom{

border-top: 2px dotted #BBB;
padding: 3px;
}
.field-separator{
width:560px;
margin:0px auto 20px auto;
}
input.submit {
background-color: #111;
}
.submit::selection {
background: transparent;
}

input.submit.large {
padding: 8px 14px 9px;
font-size: 14px;
}
input.submit.round {
border:5px;
border-radius:5px;
-moz-border-radius:5px;
webkit-border-radius:5px;
}

HTML Form

<body style="background:#FEFEFE url('img/login_bg.png') repeat-x;">
 <form action="dashboard.html" method="post" id="login-form">
     <div id="login-inner">
         <div id="wrapper">
             <p>Administration Login</p>
         </div>
         <div class="field-separator">
             <label for="login">Login</label>
             <input type="text" name="login" value="" id="login" class="txt" />
         </div>
         <div class="field-separator">
             <label for="password">Password</label>
             <input type="password" name="password" value="" id="password" class="txt" />
         </div>
         <div id="login-bottom">
              <div id="remember-me">
              <a href="#">Remember Me</a>|
                 <a href="#">Forgot Password</a>
          </div>
             <input type="submit" name="enter" value="Enter" class="submit large round" id="login-button" />
             <div style="clear: both"></div>
         </div>
     </div>
 </form>
</body>

Content Jquery Slider

2011-12-14T07:41:00.001-08:00

Content Jquery Slider

Content jquery slider using a easySlider jquery plugins

Download

Simple CSS Vertical Menu

2011-12-14T07:22:00.000-08:00

Simple CSS Vertical Menu

Download

<style type="text/css">
.verticalmenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 200px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.verticalmenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 10px 0;
padding-left: 10px;
text-decoration: none;
}
* html .verticalmenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.verticalmenu li a:visited, .verticalmenu li a:active{
color: white;
}
.verticalmenu li a:hover{
background-image: url(images/glossyback2.gif);
}
</style>
<ul class="verticalmenu">
<li><a href="#" >r-ednalan.blogspot.com</a></li>
<li><a href="#" >CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Web Design</a></li>
</ul>

Content Jquery Slider using easySlider

2011-12-13T02:59:00.000-08:00

Content Jquery Slider using easySlider

Content slider using jquery easyslider plugins

Download Here

Create CSS Vertical Menu

2011-12-11T04:01:00.000-08:00

Create CSS Vertical Menu

<style type="text/css">
.verticalmenu{
width: 190px;
}
.verticalmenu .headerbar{
font: bold 13px Verdana;
color: #000000;
background: #F3CE69 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
border:1px solid #73310A;
}
.verticalmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.verticalmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.verticalmenu ul li a{
font: normal 12px Arial;
color: black;
background: #FFFBEF;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
border:1px solid #73310A;
}
.verticalmenu ul li a:visited{
color: black;
}
.verticalmenu ul li a:hover{ /*hover state CSS*/
color: #D95A16;
background: #DDDDDD;
}
</style>
<div class="verticalmenu">
<h3 class="headerbar">Tutorials</h3>
<ul>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">DATABASES</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">JAVASCRIPT AND AJAX</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">TOOLS AND TIPS</a></li>
<li><a href="#">PYTON</a></li>
</ul>
</div>

Tiny Html (WYSIWYG) Editor: NicEdit

2011-12-10T23:56:00.001-08:00

Tiny Html (WYSIWYG) Editor: NicEdit

NicEdit is a Javascript/AJAX inline content editor that allows easy editing of web ssd/div editable or convert standard textareas to rich text editing.

Website: http://nicedit.com/index.php

Demo: http://nicedit.com/examples.php

Download: http://nicedit.com/index.php

Create a Tabbed Content With jQuery And CSS

2011-12-09T22:55:00.001-08:00

Create a Tabbed Content With jQuery And CSS

Download Code

<style>
body {
background-position:top center;
background-color:#EBE9E1;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_area {
border:2px solid #E6E6E6;
background-color:#F5F4F0;
padding:8px;

border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#EBE9E1;
color:#000000;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #FFFFFF;
background-position:bottom;
}
ul.tabs li a:hover {
background-color:#E4E3DD;
border-color:#FFFFFF;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #EBE9E1;
border-bottom: 1px solid #ffffff;
background-image:url(tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #EBE9E1; 
font-family:Arial, Helvetica, sans-serif;
background-image:url(content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#content_2, #content_3 { display:none; }

.content ul {
margin:0px;
padding:0px 0px 0px 0px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>
 <script src="jquery-1.2.3.min.js"></script>
 <script>
  $(document).ready(function(){
 $("a.tab").click(function () {
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".content").slideUp();
  var content_show = $(this).attr("title");
  $("#"+content_show).slideDown();
 });
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
 <div class="tabbed_area">
 <ul class="tabs">
         <li><a href="#" title="content_1" class="tab active">Popular</a></li>
         <li><a href="#" title="content_2" class="tab">Latest</a></li>
         <li><a href="#" title="content_3" class="tab">Comments</a></li>
     </ul>
     <div id="content_1" class="content">
      <ul>
          <li><a href="">Testing The Elements <small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes <small>January 11, 2010</small></a></li>
          <li><a href="">Image in a post<small>January 11, 2010</small></a></li>
          <li><a href="">Sed tincidunt augue et nibh <small>November 11, 2011</small></a></li>
          <li><a href="">Morbi rhoncus arcu egestas erat <small>December 11, 2011</small></a></li>
          <li><a href="">Web Development <small>December 18, 2011</small></a></li>
  </ul>
     </div>
     <div id="content_2" class="content">
      <ul>
          <li><a href="">Image in a post <small>January 11, 2010</small></a></li>
          <li><a href="">Testing The Elements<small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes<small>January 11, 2010</small></a></li>
          <li><a href="">Lobortis tellus diam <small>January 11, 2010</small></a></li>
          <li><a href="">This is another featured post<small>January 7, 2011</small></a></li>
          <li><a href="">Testing The Elements<small>January 20, 2011</small></a></li>
  </ul>
     </div>
     <div id="content_3" class="content">
      <ul>
          <li><a href="">admin: Looks like the Old Course at St. Andrews!...</a></li>
          <li><a href="">admin: Very nice boxes!...</a></li>
          <li><a href="">admin: And another threaded reply!...</a></li>
          <li><a href="">admin: This is a threaded reply!...</a></li>
          <li><a href="">admin: And this is a third comment with some lorem ipsum!...</a></li>
  </ul>
     </div>
 </div>
</div>

Free PHP – Ajax Poll Script: Zoki Poll

2011-12-09T21:08:00.000-08:00

Free PHP – Ajax Poll Script: Zoki Poll

Zoki Poll is a free PHP – Ajax poll script that stores data in a XML file.

Website: http://www.zokisoft.com/products/zoki-poll

Demo: http://www.zokisoft.com/demo/zoki-poll

CSS Menu

2011-12-09T20:49:00.001-08:00

CSS Menu

Download

<style>
*{
margin:0;
padding:0;
}
#menu_blue{
width:90%;
margin:25px auto;
}
#menu_blue ul{
list-style:none;
}
#menu_blue li{
display:block;
float:left;
}
#menu_blue li a{
background:#e4e8eb url(menu_bg_blue.gif) repeat-x;
border:2px solid #bdc5cd;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu_blue li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu_blue li a:hover{
background:#e46825 url(menu_hover_blue.gif) repeat-x;
border:2px solid #4a88ce;
text-decoration:none;
}
#menu_blue li a:hover span{
color:#636363;
}
.current_blue{
background:#74befd url(menu_hover_blue.gif) repeat-x;
border:2px solid #4a88ce;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 50px;
}
.current_blue span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
</style>
<div id="menu_blue">
<ul>
 <li class="current_blue">Home<br /><span>takes you to<br /> home page</span></li>
 <li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li> 
 <li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li>
 <li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li>
</ul>
</div>

Easily Customizable Tooltips: UniTip

2011-12-09T19:58:00.001-08:00

Easily Customizable Tooltips: UniTip

UniTip is an easy to implement & customize cross-browser tooltip script.

Website: http://labs.unitinteractive.com/unitip.php

PHP Smart Image Resizer Script

2011-12-09T19:53:00.000-08:00

PHP Smart Image Resizer Script

Smart image resizer is a PHP script which makes it very easy to resize & crop images. And, this is done without touching the original image Compatibility: JPG, GIF, PNG

Website: http://shiftingpixel.com/2008/03/03/smart-image-resizer/

Free CSS Drop-Down Menu Framework

2011-12-09T19:30:00.001-08:00

Free CSS Drop-Down Menu Framework

CSS Drop-Down Menu Framework is a free & cross-browser solution to create good looking menus Compatibility: All Major Browsers

Website: http://lwis.net/free-css-drop-down-menu/

Demo: http://lwis.net/free-css-drop-down-menu/dropdown.mtv...

Download: http://free-css-drop-down-menu-framework.googlecode.com/files/free-css-drop-down-menu_v1.2.zip

Multi-Level Accordion Script: TinyAccordion

2011-12-09T19:03:00.001-08:00

Multi-Level Accordion Script: TinyAccordion

Leigeber is presenting a standalone accordion script that has multi-level support.

Website: http://www.leigeber.com/2009/03/accordion/

Demo: http://sandbox.leigeber.com/javascript-accordion/ind...

Instant iPhone Compatible Websites: iWebKit

2011-12-09T07:37:00.000-08:00

Instant iPhone Compatible Websites: iWebKit

iWebKit is an open source toolkit for creating iPhone / iPod compatible websites very easily & quickly.

Demo: http://demo.iwebkit.net/

Download: http://iwebkit.net/downloads

Create Mobile Applications With Just HTML, CSS & jQuery: jQTouch

2011-12-09T05:55:00.001-08:00

Create Mobile Applications With Just HTML, CSS & jQuery: jQTouch

jQTouch is a jQuery plugin for creating mobile applications with just HTML, CSS & JavaScript.

Website: http://www.jqtouch.com/

Demo: http://www.jqtouch.com/preview/demos/main/

Mobile Web Application Framework: WebApp.Net

2011-12-08T07:25:00.000-08:00

Mobile Web Application Framework: WebApp.Net

WebApp.Net is a feature-rich JavaScript framework for building mobile web applications.

Website: http://webapp-net.com/

Demo: http://demo.webapp-net.com/

Awesome Speech Bubbles With Pure CSS3

2011-12-08T06:57:00.000-08:00

Awesome Speech Bubbles With Pure CSS3

Nicolas Gallagher is sharing a creative way on creating good-looking speech bubbles with CSS3.

Website: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

Demo: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

Powerful jQuery Image Zoomer: Cloud Zoom

2011-12-08T05:47:00.000-08:00

Powerful jQuery Image Zoomer: Cloud Zoom

Cloud Zoom is a lightweight (6kb) jQuery image zoom plugin that comes with impressive features.

Website: http://www.professorcloud.com/mainsite/cloud-zoom.htm

Very Simple & Tiny Lightboxing Lightbox_me

2011-12-08T05:35:00.000-08:00

Very Simple & Tiny Lightboxing Lightbox_me

Lightbox_me is a jQuery lightbox plugin that doesn't come with many features but simply enables you to lightbox any element. And, it is only 1kb compressed.

Website: http://buckwilson.me/lightboxme/

jQuery iPhone UI – A Library That Mimics iPhone Interface

2011-12-07T18:43:00.001-08:00

jQuery iPhone UI – A Library That Mimics iPhone Interface

Few days ago, the jQuery team announced that they are working on jQuery Mobile which will probably become quickly popular on creating mobile web apps. for the fans of the library.

Website: http://iphone.hohli.com/

Download: http://code.google.com/p/jquery-iphone-ui/downloads/list

Extensible jQuery WYSIWYG Editor – CLEditor

2011-12-07T08:22:00.000-08:00

Extensible jQuery WYSIWYG Editor – CLEditor

CLEditor is a lightweight jQuery plugin for adding WYSIWYG HTML editors on web pages.

Website: http://premiumsoftware.net/cleditor/

Sweet CSS3 Buttons – BonBon

2011-12-07T08:03:00.001-08:00

Sweet CSS3 Buttons – BonBon

BonBon Buttons attractive buttons that will possibly attract the Web 2.0-type design fans the most.

Website: http://lab.simurai.com/css/buttons/

Create CSS3 Navigations With CSS3 Menu

2011-12-07T07:43:00.000-08:00

Create CSS3 Navigations With CSS3 Menu

CSS3 Menu is a free application for creating navigations using the CSS3 properties and no JavaScript.

Website: http://www.css3menu.com/

CSS3 Gradient Buttons

2011-12-07T06:07:00.001-08:00

CSS3 Gradient Buttons

<style type="text/css">
.gradientbuttons ul{
 padding: 3px 0;
 margin-left: 0;
 margin-top: 1px;
 margin-bottom: 0;
 font: bold 13px Verdana;
 list-style-type: none;
 text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.gradientbuttons li{
 display: inline;
 margin: 0;
}
.gradientbuttons li a{
 text-decoration: none;
 padding: 5px 7px;
 margin-right: 5px;
 border: 1px solid #778;
 color: white;
 border:1px solid gray;
 background: #3282c2;
 border-radius: 8px; /*w3c border radius*/
 box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
 -moz-border-radius: 8px; /* mozilla border radius */
 -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
 background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
 -webkit-border-radius: 8px; /* webkit border radius */
 -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
 background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
</style>
<div class="gradientbuttons">
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">CSS3</a></li>
 <li><a href="#">HTML5</a></li>
 <li><a href="#">Jquery</a></li>
 <li><a href="#">Javascript</a></li>
</ul>
</div>

DHTMLX Touch – A JavaScript Framework for Mobile and Touch Devices

2011-12-07T04:57:00.001-08:00

DHTMLX Touch – A JavaScript Framework for Mobile and Touch Devices

DHTMLX Touch is a JavaScript library which heavily makes use of HTML5, for building mobile web applications.The framework is compatible with multiple devices and applications built with it will work smoothly on iPad, iPhone and Android.

Website: http://www.dhtmlx.com/touch/

Wink Toolkit – A JavaScript Framework For Building Mobile Web Applications

2011-12-06T06:19:00.000-08:00

Wink Toolkit – A JavaScript Framework For Building Mobile Web Applications

Wink Toolkit is a JavaScript framework for creating mobile web applications with less-hassle. Compatibility: iPhone, iPad & Android

Website: http://www.winktoolkit.org/
Download: http://www.winktoolkit.org/downloads/

Android Patterns – An Interaction Patterns Library For The Platform

2011-12-06T05:43:00.000-08:00

Android Patterns – An Interaction Patterns Library For The Platform

Android Patterns is a website which aims to bring a solution to the design-related questions by sharing widely-accepted answers (patterns) for them.

Website: http://www.androidpatterns.com/

ChocolateChip-UI: A Mobile Web App Framework

2011-12-05T06:31:00.001-08:00

ChocolateChip-UI: A Mobile Web App Framework

ChocolateChip-UI is a mobile web app development framework that targets WebKit engines..

Website: http://www.chocolatechip-ui.com/

Download: http://www.chocolatechip-ui.com/downloads.html

CSS3 Buttons

2011-12-05T04:58:00.000-08:00

CSS3 Buttons

This is a collection of CSS3 buttons that use the simplest possible markup.

Website: http://hellohappy.org/css3-buttons/

Download: http://github.com/ubuwaits/css3-buttons

Detect Mobile Browsers Using Any Language

2011-12-04T06:40:00.001-08:00

Detect Mobile Browsers Using Any Language

Detect Mobile Browser is an open source project for easily understanding whether a visitor of a website is using a mobile browser or not.

It provides codes in several scripting languages (PHP,Rails, ASP, JSP, Coldfusion, .htaccess & JavaScript) that can detect the browser.

Website: http://detectmobilebrowser.com/

Image Gallery For Mobile And Touch Devices: PhotoSwipe

2011-12-04T06:30:00.000-08:00

Image Gallery For Mobile And Touch Devices: PhotoSwipe

PhotoSwipe is a free and full-featured image gallery for mobile and touch devices.

Website: http://www.photoswipe.com/

Download: https://github.com/codecomputerlove/PhotoSwipe

leanModal – A Micro jQuery Modal Plugin

2011-12-04T06:01:00.001-08:00

leanModal – A Micro jQuery Modal Plugin

leanModal is a lightweight jQuery plugin for displaying modal boxes with minimum effort.

Website: http://leanmodal.finelysliced.com.au/

ImageMapster – Interactive Image Maps With jQuery

2011-12-03T23:51:00.000-08:00

ImageMapster – Interactive Image Maps With jQuery

ImageMapster is a jQuery plugin that vitalizes the old image maps by adding more capabilities to them.

Website: http://www.outsharked.com/imagemapster/

Demo: http://www.outsharked.com/imagemapster/examples/usa....

Download: https://github.com/jamietre/imagemapster

Create Form Styling with CSS3

2011-11-29T21:23:00.000-08:00

Create Form Styling with CSS3

<style>
form { width: 460px; padding: 20px; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin: 0 auto }
fieldset { position: relative; padding: 10px; padding-top: 0; padding-top: 25px\9; margin-bottom: 30px; background: #F6F6F6; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFFFFF)); background: -moz-linear-gradient(center top, #EFEFEF, #FFFFFF 100%); box-shadow: 3px 3px 10px #ccc; -moz-box-shadow: 3px 3px 10px #ccc; -webkit-box-shadow: 3px 3px 10px #ccc }
legend { padding: 6px 12px; position: absolute; left: 10px; top: -11px; background-color: #4F709F; color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; -webkit-box-shadow: 2px 2px 4px #888; text-shadow: 1px 1px 1px #333 }
label, span { float: left; clear: left; display: block; width: 180px; padding-right: 20px; text-align: right; height: 20px; line-height: 20px }
input, textarea { padding: 3px; float: left; width: 200px; border: 1px solid #d9d9d9 }
.submit { width: 100px; float: right; margin-right: 37px; border: 0; padding: 5px 10px; background: #4F709F; color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; -webkit-box-shadow: 2px 2px 4px #888; margin-bottom: 4px; text-shadow: 1px 1px 1px #333 }
textarea { background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(1%, #EEEEEE), to(#FFFFFF)) }
input:focus, textarea:focus { background: white; border-color: #666 }
p { overflow: hidden; margin-bottom: 10px }
p:first-of-type { padding-top: 25px }
</style>
<form>
  <fieldset>
   <legend>Details</legend>
   <p><label for="name">Name</label><input id="name" type="text" /></p>
   <p><label for="email">Email</label><input id="email" type="email" /></p>
   <p><label for="telephone">Telephone</label><input id="telephone" type="tel" /></p>
   <p><label for="project-details">Additional Details</label><textarea id="project-details" rows="5"></textarea></p>
   <p><input class="submit" type="submit" id="submit" value="Submit Form" /></p>  
  </fieldset>
 </form>

Modal Boxes With MooTools – SimpleModal

2011-11-29T21:10:00.000-08:00

Modal Boxes With MooTools – SimpleModal

SimpleModal is a MooTools plugin for creating modal boxes very easily.

Website: http://simplemodal.plasm.it/

Download: https://github.com/plasm/simplemodal

Horizontal Accordion For jQuery – liteAccordion

2011-11-29T20:53:00.001-08:00

Horizontal Accordion For jQuery – liteAccordion

liteAccordion is a jQuery plugin for creating attractive horizontal accordions on the fly.

Website: http://nicolahibbert.com/demo/liteAccordion/

Download: https://github.com/nikki/liteAccordion

Website Feature Tours With jQuery – Joyride

2011-11-29T20:45:00.001-08:00

Website Feature Tours With jQuery – Joyride

Joyride is a plugin for jQuery that simplifies the process of guiding users to discover the features of a website.

Website: http://www.zurb.com/playground/jquery-joyride-featur...

Download: https://github.com/zurb/joyride

A Set Of Pure CSS Animations – Animate.css

2011-11-29T20:15:00.000-08:00

A Set Of Pure CSS Animations – Animate.css

Animations like fade in/fade out or bounce are used almost everywhere, thanks to the ease that JS frameworks are offering, to create attractive user experiences.

Website: http://daneden.me/animate/

Download: https://github.com/daneden/animate.css

jQuery Image Slider Combined With An Accordion – Slidorion

2011-11-29T06:11:00.000-08:00

jQuery Image Slider Combined With An Accordion – Slidorion

Slidorion is a jQuery image slider plugin that functions in parallel with an accordion displaying the related contents for each slide.

Website: http://www.slidorion.com/

Download: https://github.com/hollandben/Slidorion

Creative, CSS3-Powered And Animated Menus

2011-11-29T04:50:00.001-08:00

Creative, CSS3-Powered And Animated Menus

10 unique examples, all have the same HTML structure but different CSS styles that make use of CSS transitions and animations.

Website: http://tympanus.net/codrops/2011/10/24/creative-css3...

Demo: http://tympanus.net/Tutorials/CreativeCSS3AnimationM...

Calculate The Timespan Between 2 Dates: Countdown.js

2011-11-27T02:26:00.001-08:00

Calculate The Timespan Between 2 Dates: Countdown.js

Countdown.js is a JavaScript library for calculating and displaying the timespan between two dates.

Website: http://countdownjs.org/

Demo: http://countdownjs.org/demo.html

jqPagination – User-Friendly jQuery Pagination Plugin

2011-11-27T02:11:00.000-08:00

jqPagination – User-Friendly jQuery Pagination Plugin

jqPagination is a jQuery plugin for quickly creating a JavaScript-controlled pagination interface and functionality.

Website: http://beneverard.github.com/jqPagination/

Download: https://github.com/beneverard/jqPagination/

Create a CSS Tab

2011-11-25T23:16:00.001-08:00

Create a CSS Tab

Download Here

<style>
* {padding:0; margin:0;}
body {background:url(images/bg.jpg) repeat; font-family:Georgia, "Times New Roman", Times, serif; color:#212713;}
#wrap {width:1000px; margin:auto;}
#contentwrap {background:url(images/contentbg.gif) repeat-y; padding:10px 0 3px 0;}
#menu {background:url(images/contenttop.gif) center bottom no-repeat; height:44px; padding-bottom:11px;}
#contentbtm {background:url(images/cntntbtm.gif) center no-repeat; height:12px;}
ul {list-style:none;}
#menu li {display:inline; font:bold 22px Comfortaa;}
#menu li a {display:block; height:44px; float:left; background:url(images/menu2.gif) right top no-repeat; margin-right:3px; padding-right:10px; color:#dbe7af; text-decoration:none;}
#menu li a span {display:block; background:url(images/menu1.gif) left top no-repeat; padding:7px 20px 0 30px; height:37px;}
#menu li a:hover {background:url(images/menuh2.gif) right top no-repeat; color:#1b2502; text-shadow:#fff 1px 1px 1px;}
#menu li a:hover span {background:url(images/menuh1.gif) left top no-repeat;}
#menu li.active a {background:url(images/menuh2.gif) right top no-repeat; color:#1b2502; text-shadow:#fff 1px 1px 1px;}
#menu li.active a span {background:url(images/menuh1.gif) left top no-repeat;}
#mainpage {padding:0 10px 10px 10px;}
</style>
<div id="wrap">
 <div id="menu">
  <ul>
  <li class="active"><a href="index.html"><span>Home</span></a></li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
 <div id="contentwrap">
  <div id="mainpage">
   Contents
  </div>
 </div>
 <div id="contentbtm"></div>
</div>

Create Contact Form Design

2011-11-21T07:32:00.000-08:00

Create Contact Form Design


<style>
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#222222;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span { display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:25px; background:#f5f5f5;}
#contactform textarea { width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform li.buttons input { padding:3px 0; margin:0; border:0; color:#FFF;}
</style>
<h2>Contact form</h2>
<form action="contact.php" method="post" id="contactform">
            <ol>
              <li>
                <label for="name">First Name<a href="#">*</a><br />
                </label>
                <input name="name" class="text" id="name" />
              </li>
              <li>
                <label for="label2">Your e-mail<a href="#">*</a><br />
                </label>
                <input id="label2" name="name2" class="text" />
              </li>
              <li>
                <label for="email">Company Name<br />
                </label>
                <input id="email" name="email" class="text" />
              </li>
              <li>
                <label for="label">Subject<br />
                </label>
                <input id="label" name="email2" class="text" />
              </li>
              <li>
                <label for="message">Message<a href="#">*</a><br />
                </label>
                <textarea id="message" name="message" rows="6" cols="50"></textarea>
              </li>
              <li class="buttons">
                <input type="image" name="imageField2" id="imageField2" src="images/send.gif" />
              </li>
            </ol>
          </form>

Load Records Using Jquery Json and Mysql

2011-11-20T06:40:00.001-08:00

Load Records Using Jquery Json and Mysql

Table

CREATE TABLE `tbljson` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(255) NOT NULL default '',
`description` varchar(255) NOT NULL default '',
`image` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$("document").ready(function () {
   $.getJSON('json.php?callback=?', function (data) {
       $("#content").html('');
       $.each(data, function (i, item) {
           $("#content").append('<div class="product"><img src="images/' + item.image + '" width="135" height="138"/><div class="title">' + item.title + '</div><div class="description">' + item.description + '</div><div class="clear"></div></div>');
       });
 });
   $("#content").fadeIn(2000);
});
</script>
<style>
.main{
 width:900px;
 margin:0 auto;
}
.product{
 width:300px;
 float:left;
 margin:10px;
 border:1px #dedede solid;
 padding:5px;
 background-image:url(images/corner.jpg);
 background-position:bottom right;
 background-repeat:no-repeat;
}
.product .title{
margin-bottom:6px;}
.product img{
float:left;
margin-right:10px;
border:1px solid #dedede;}
.product .description{font-size:10px; font-family:Geneva, Arial, Helvetica, sans-serif}
</style>
<div class="main">
 <div id="content"><img src="images/ajax-loader.gif" alt="Loading..." /></div>
</div>
<div class="clear"></div>

jason.php

<?php
 include('connect.php'); 
 $sql = "SELECT title, image, description FROM tbljson LIMIT 4"; 
 $result = mysql_query($sql);
  while($row = mysql_fetch_array($result))
  { 
    $rows[] = array(
   "title" => $row['title'],
   "image" => $row['image'],
   "description" => $row['description']);
  }

$json = json_encode($rows);
$callback = $_GET['callback'];
echo $callback.'('. $json . ')'; 
?>

connect.php

<?php
$dbhost       = "localhost";
$dbuser       = "root";
$dbpass       = "ednalan";
$dbname       = "test";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
?>

Dynamic Drag’n Drop With jQuery And PHP

2011-11-08T09:00:00.001-08:00

Dynamic Drag’n Drop With jQuery And PHP

Database Table

CREATE TABLE IF NOT EXISTS `dragdrop` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`text` varchar(255) DEFAULT NULL,
`listorder` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

Records

INSERT INTO `dragdrop` (`id`, `text`, `listorder`) VALUES
(1, 'Ajax', 4),
(2, 'Jquery', 2),
(3, 'PHP', 3),
(4, 'Mysql', 1),
(5, 'Javascript', 7),
(6, 'CSS', 6),
(7, 'HTML', 5);

Index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
ul {
 padding:0px;
 margin: 0px;
}
#response {
 padding:10px;
 background-color:#9F9;
 border:2px solid #396;
 margin-bottom:20px;
}
#list li {
 margin: 0 0 3px;
 padding:8px;
 background-color:#00CCCC;
 color:#fff;
 list-style: none;
 border: #CCCCCC solid 1px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){  
   function slideout(){
 setTimeout(function(){
 $("#response").slideUp("slow", function () {
     });
  
}, 2000);}
 
   $("#response").hide();
 $(function() {
 $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
   
   var order = $(this).sortable("serialize") + '&update=update';
   $.post("updateList.php", order, function(theResponse){
    $("#response").html(theResponse);
    $("#response").slideDown('slow');
    slideout();
   });                
  }         
  });
 });

}); 
</script>
<div id="container" style="width:300px;">
 <div id="list">
 <div id="response"> </div>
   <ul>
     <?php
               include("connect.php");
    $query  = "SELECT id, text FROM dragdrop ORDER BY listorder ASC";
    $result = mysql_query($query);
    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
     
    $id = stripslashes($row['id']);
    $text = stripslashes($row['text']);
     
    ?>
     <li id="arrayorder_<?php echo $id ?>"><?php echo $id?> <?php echo $text; ?>
       <div class="clear"></div>
     </li>
     <?php } ?>
   </ul>
 </div>
</div>

updatelist.php

<?php
include("connect.php");
$array = $_POST['arrayorder'];

if ($_POST['update'] == "update"){
 
 $count = 1;
 foreach ($array as $idval) {
  $query = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval;
  mysql_query($query) or die('Error, insert query failed');
  $count ++; 
 }
 echo 'All saved! refresh the page to see the changes';
}
?>

connect.php

<?php
$dbhost       = "localhost";
$dbuser       = "root";
$dbpass       = "ednalan";
$dbname       = "test";

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
?>

Disable Browser Back Button Using Javascript

2011-10-20T06:17:00.000-07:00

Disable Browser Back Button Using Javascript

<HTML>
<HEAD>
<TITLE>Disable Back Button in Browser </TITLE>
<script type="text/javascript">
 function disableBackButton()
  {
  window.history.forward();
  }
  setTimeout("disableBackButton()", 0);
</script>
</HEAD>
<body onload="disableBackButton()">
<p>This page contains the code to avoid Back button.
</p>
<p>Click here to Goto <a href="noback.html">NoBack Page</a>
</p>
</BODY>
</HTML>

Hover Fading button with jQuery

2011-10-11T07:03:00.000-07:00

Hover Fading button with jQuery

Demo

<style>
a img {
border: 0;
}
ul#img_hover {
list-style: none;
margin: 0 auto; padding: 0;
}
ul#img_hover li {
float: left;
text-align: center;
display: inline;
}
ul#img_hover li a.thumb {
width: 305px;
height: 71px;
cursor: pointer;
}

ul#img_hover li span {
width: 305px;
height: 71px;
overflow: hidden;
display: block;
}

ul#img_hover li a {
text-decoration: none;
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("ul#img_hover li").hover(function() { //On hover...
var thumbOver = jQuery(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag
jQuery(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Fade the image to 0
jQuery(this).find("span").stop().fadeTo('normal', 0 , function() {
 jQuery(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to 1
jQuery(this).find("span").stop().fadeTo('normal', 1).show();
});
});

</script>
<ul id="img_hover">
<li>
<a href="http://r-ednalan.blogspot.com/" class="thumb">
 <span class="slide1"><img src="images/button.png"/></span>
</a>
</li>
</ul>

Float Div Left Side Bar using mootools

2011-10-10T09:18:00.000-07:00

Float Div Left Side Bar using mootools

Download
Download Here

<script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('show1').addEvent('click', function(){
new Fx.Tween('cont').start('width', 361);
new Fx.Tween('show1').start('left', 316);
new Fx.Tween('hide1').start('left', 316);
new Fx.Tween('clickr').start('left', 0);
new Fx.Tween('floatdiv').start('width', 361);
$('show1').setStyle("visibility","hidden");
$('hide1').setStyle("visibility","visible");
});
$('hide1').addEvent('click', function(){    
new Fx.Tween('cont').start('width', 39);
new Fx.Tween('show1').start('left', 0);
new Fx.Tween('hide1').start('left', 0);
new Fx.Tween('clickr').start('left', -400);
new Fx.Tween('floatdiv').start('width', 33);
$('show1').setStyle("visibility","visible");
$('hide1').setStyle("visibility","hidden");
});
})
</script>
<style type="text/css">
#cont { height:465px; width:361px; margin-left:0px; color:#FFF; background-image:url(gethiredgetwiredpromo.png); background-position:right; background-repeat:no-repeat; position:relative; }
#show1 { cursor:pointer; width:28px; height:163px; visibility:hidden; position:absolute; left:316px; margin-top:251px; margin-left:0; background:url(show_03.png);  }
#hide1 { cursor:pointer; width:28px; height:163px; visibility:visible; position:absolute; left:316px; margin-top:251px; margin-left:0; background:url(hide_03.png);  }
#clickr { position:absolute; width:315px; height:436px; margin-top:10px; }
</style>
<div id="floatdiv" style="position:absolute; width:361px; margin-left:0px; left:0; bottom:20px; height:465px; overflow:hidden; z-index:100; ">
<div id="cont">
   <a href="http://r-ednalan.blogspot.com/" target="_blank"><div id="clickr"></div></a>
   <div id="show1"></div>
<div id="hide1"></div>
</div>
</div>
<script type="text/javascript">
floatingMenu.add('floatdiv',
{
   targetLeft: 0,
   targetTop: 0,
   snap: true
});
</script>

Jquery/Ajax Delete Records show loading image

2011-10-06T09:19:00.000-07:00

Jquery/Ajax Delete Records show loading image

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#load').hide();
});
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var id = $(this).attr("id");
var string = 'id='+ id ;

$.ajax({
type: "POST",
url: "delete.php",
data: string,
cache: false,
success: function(){
$('#load').fadeOut();
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
return false;
});
});
</script>
<style>

#load {
position:absolute;
left:225px;
background-image:url(images/loading-bg.png);
background-position:center;
background-repeat:no-repeat;
width:159px;
color:#999;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
height:40px;
font-weight:300;
padding-top:14px;
top: 23px;
}
#hor-minimalist-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
color: #669;
padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
color: #009;
}
.delete {font-size:20px;font-weight:bold;}
</style>

<h3>Jquery/Ajax Delete Records</h3>
<div id="load" align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>

<table id="hor-minimalist-a" summary="Employee Pay Sheet">
<thead>
<tr>
    <th scope="col">Employee</th>
       <th scope="col">Salary</th>
       <th scope="col">Bonus</th>
       <th scope="col">Supervisor</th>
       <th scope="col">Delete</th>
   </tr>
</thead>
<tbody>
<tr class="record">
    <td>Stephen C. Cox</td>
       <td>$300</td>
       <td>$50</td>
       <td>Bob</td>
       <td><a href="#"  id="1" class="delete">x</a></td>
</tr>
<tr class="record">
    <td>Josephin Tan</td>
       <td>$150</td>
       <td>-</td>
       <td>Annie</td>
<td><a href="#"  id="2" class="delete">x</a></td>
   </tr>
</tbody>
</table>

delete.php

<?php

echo $_GET['id'];

?>

Download

Download Here

jQuery drop down menu

2011-10-02T00:52:00.001-07:00

jQuery drop down menu

<style type="text/css">
   #navigation {
    font-family: georgia!important;
    font-size: 18px!important;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
   }
   #navigation li {
     position: relative;
     float: left;
     margin: 0px 1px 0px 0px;
    }
     #navigation li a {
      display: block;
      padding: 5px 35px;
      
      background: #cc0000;
      color: #ffffff;
      text-decoration: none;
     }

   #navigation li ul {
     position: absolute;
     left: 0px;
     top: 0px;
     display: none;
     padding: 0px;
     margin: 0px;
     list-style-type: none;
    }

    #navigation li.over {
     top: 1px;
    }

    #navigation li.over ul {
     padding: 0px!important;
     display: block;
     background: #009bcc;
     
    }
     #navigation li.over ul li {
      float: none;
      margin: 0px!important;
      top: 0px;
     }
     #navigation li.over ul li a {
      font-size: 14px!important;
      white-space: nowrap;
     }
     #navigation li.over ul li a:hover {
      background: #00bbf7;
      color: #000000;
      
     }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
   (function($){
    $.fn.extend({
     dropmenu: function(options) {
      return this.each(function() {
       var obj = $(this);
       $("li ul", obj).each(function(i) {
        $(this).css('top', $(this).parent().outerHeight());
       })

       $("li", obj).hover(
        function () { $(this).addClass('over'); },
        function () { $(this).removeClass('over'); }
       );

      });
     }
    });
   })(jQuery);
   $(document).ready(function() {
     $('#navigation').dropmenu();
   });
  </script>
  <h1>jQuery drop down menu</h1>
  <ul id="navigation">
   <li><a href="">Programming</a>
    <ul>
     <li><a href="">PHP Programming</a></li>
     <li><a href="">JavaScript Programming</a></li>
    </ul>
   </li>
  </ul>

jquery/Ajax php - loading image once file submit

2011-09-06T08:13:00.000-07:00

jquery/Ajax php - loading image once file submit

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $(".save").live("click", function () {

       $("#loading").fadeIn('slow');
  var edit = $(".edit").val();
       var id = $("#idrec").val();
       var data = '?id=' + id + '&text=' + edit;

       $.post("update.php", data, function (response) {
           $("#loading").fadeOut('slow');
   $("#status").html(data);
       });
   });
});
</script>
<style>
form {
 width: 100%;
}
.save{
 margin:0px 0px 0 5px;
}
#loading {
 display:none;
}
</style>
<h2>jquery/Ajax php - loading image once file submit = <img id="loading" src="images/loading.gif"/></h2>
Click the text below to edit it. <span id="status"></span>
<form ><input type="hidden" id="idrec" value="2"/></span><textarea class="edit">jquery/Ajax php - loading image once file submit</textarea> </form>
<a href="#" class="save"><img src="images/save.png" border="0" width="48" height="15"/></a>

update.php

<?php
$text = $_POST['text'];
$id = mysql_escape_string($_POST['id']);
echo stripslashes($text);
?>

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

2011-09-06T07:32:00.001-07:00

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

MOBILE BROWSER SUPPORT

iOS
Symbian S60
Symbian UIQ
Symbian Platform
BlackBerry OS
Android
Windows Mobile
webOS
bada
Maemo
MeeGo

http://jquerymobile.com/

Creating Android Apps with HTML, CSS and Javascript

2011-09-06T07:11:00.000-07:00

Creating Android Apps with HTML, CSS and Javascript

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.

http://www.phonegap.com/

jQuery/Ajax, PHP and Mysql Autosuggest

2011-08-31T23:30:00.000-07:00

jQuery/Ajax, PHP and Mysql Autosuggest

Table countries
CREATE TABLE IF NOT EXISTS `countries` (
`id` int(6) NOT NULL AUTO_INCREMENT,
`country` varchar(250) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ;

Download

Download link

index.html

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

<script>

function suggest(inputString){

		if(inputString.length == 0) {

			$('#suggestions').fadeOut();

		} else {

		$('#country').addClass('load');

			$.post("data.php", {queryString: ""+inputString+""}, function(data){

				if(data.length >0) {

					$('#suggestions').fadeIn();

					$('#suggestionsList').html(data);

					$('#country').removeClass('load');

				}

			});

		}

	}

	function fill(thisValue) {

		$('#country').val(thisValue);

		setTimeout("$('#suggestions').fadeOut();", 600);

	}



</script>



<style>

#country {

	width:200px;

	padding:3px;

	font-size:110%;

	vertical-align:middle;

}

.suggestionsBox {

	width: 200px;

	color: #fff;

	

	margin:0;

	padding:0;

	background:#86BAC7;

	top:0;

	left:0;

}

.suggestionList {

	margin: 0px;

	padding: 0px;

}

.suggestionList ul li {

	list-style:none;

	margin: 0px;

	padding: 6px;

	border-bottom:1px dotted #98BE56;

	cursor: pointer;

}

.suggestionList ul li:hover {

	background-color: #006E89;

	color:#000;

}

ul {

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

	font-size:11px;

	color:#FFF;

	padding:0;

	margin:0;

}



.load{

background-image:url(loader.gif);

background-position:right;

background-repeat:no-repeat;

}



#suggest {

	position:relative;

}

.sf_active{

	border:2px #8BB544 solid;

	background:#fff;

	color:#333;

}

</style>



<form id="form" action="#">

 <div id="suggest">Start to type a country: <br />

   <input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" class=" sf_active" />

   <div class="suggestionsBox" id="suggestions" style="display: none;">

     <div class="suggestionList" id="suggestionsList">   </div>

   </div>

</div>

</form>

data.php

<?php

  	$link = mysql_connect('localhost', 'root', 'ednalan');

	if (!$link) {

		die('Could not connect: ' . mysql_error());

	}

	mysql_select_db("test");

	if(isset($_POST['queryString'])) {

			$queryString = $_POST['queryString'];

			if(strlen($queryString) >0) {

				$query = mysql_query("SELECT country FROM countries WHERE country LIKE '$queryString%' LIMIT 10");

				if($query) {

				echo '<ul>';

					while ($result = mysql_fetch_array($query)) {

	         			echo '<li onClick="fill(\''.addslashes($result["country"]).'\');">'.$result["country"].'</li>';

	         		}

				echo '</ul>';

					

				} else {

					echo 'OOPS we had a problem :(';

				}

			} else {

			}

		} else {

			echo 'There should be no direct access to this script!';

		}

	

?>

Create a Jquery/Ajax, php, mysql - style suggestion search

2011-08-29T06:40:00.000-07:00

Create a Jquery/Ajax, php, mysql - Style suggestion search

Database table

CREATE TABLE IF NOT EXISTS `search` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`img` varchar(255) NOT NULL,
`desc` text NOT NULL,
`url` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Download

Download suggestion_search.zip

Jquery/ajax code

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

<script>

function find(textboxString) {

	if(textboxString.length == 0) {

		$('#resultbox').fadeOut(); // Hide the resultbox box

	} else {

		$.post("data.php", {queryString: ""+textboxString+""}, function(data) { // Do an AJAX call

			$('#resultbox').fadeIn(); // Show the resultbox box

			$('#resultbox').html(data); // Fill the resultbox box

		});

	}

	// Fade out the resultbox box when not active

	 $("input").blur(function(){

	 	$('#resultbox').fadeOut();

	 });

	 // Safely inject CSS3 and give the search results a shadow

	var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard

		'-webkit-box-shadow' : '#888 5px 10px 10px', // Safari

		'-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+

	$("#resultbox").css(cssObj);

}

</script>

CSS Style

<style>

	body, div, img, p { padding:0; margin:0; }

	a img { border:0 }



	/* HTML ELEMENTS */

	body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }



	/* COMMON CLASSES */

	.break { clear:both; }

	#searchwrapper {

		width:310px; /*follow your image's size*/

		height:40px;/*follow your image's size*/

		background-image:url(searchbox.jpg);

		background-repeat:no-repeat; /*important*/

		padding:0px;

		margin:0px;

		position:relative; /*important*/

	}

	#searchwrapper form { display:inline ; }

	.searchbox {

		border:0px; /*important*/

		background-color:transparent; /*important*/

		position:absolute; /*important*/

		top:5px;

		left:9px;

		width:256px;

		height:28px;

		color:#FFFFFF;

	}

	

	/* SEARCHRESULTS */

	#dbresults { border-width:1px; border-color:#919191; border-style:solid; width:310px;

		font-size:10px; margin-top:20px; -moz-box-shadow:0px 0px 3px #aaa;

		-webkit-box-shadow:0px 0px 3px #aaa;

		box-shadow:0px 0px 3px #aaa;

		-moz-border-radius:5px;

		-webkit-border-radius:5px;

		border-radius:5px;

		padding-top:42px;	

	}

	#dbresults a { display:block; background-color:#D8D6D6; clear:left; height:56px; text-decoration:none; }

	#dbresults a:hover { background-color:#b7b7b7; color:#ffffff; }

	#dbresults a img { float:left; padding:5px 10px; }

	#dbresults a span { color:#555555; }

	#dbresults a:hover span { color:#f1f1f1; }

</style>

index.html

<div style="margin-left:50px">

	<div><h2>What are you looking for?</h2></div>

	<form id="searchwrapper">

		<div>

			<input type="text" size="30" class="searchbox" value="" id="textboxString" onkeyup="find(this.value);" />

		</div>

		<div id="resultbox"></div>

	</form>

</div>

data.php code

<p id="dbresults">

<?php

	$db = new mysqli('localhost', 'root', 'ednalan', 'test');

	if(!$db) {

		echo 'ERROR: Could not connect to the database.';

	} else {

		// Is there a posted query string?

		if(isset($_POST['queryString'])) {

			$queryString = $db->real_escape_string($_POST['queryString']);

			

			// Is the string length greater than 0?

			if(strlen($queryString) >0) {

				$query = $db->query("SELECT * FROM searchs WHERE name LIKE '%" . $queryString . "%' ORDER BY name LIMIT 5");

				if($query) {

					while ($result = $query ->fetch_object()) {

						echo '<a href="'.$result->url.'">';

	         			echo '<img src="search_images/'.$result->img.'" alt="" />';

	         			$description = $result->desc;

	         			if(strlen($description) > 80) {

	         				$description = substr($description, 0, 80) . "...";

	         			}

	         			echo '<span>'.$description.'</span></a>';

	         		}

	         	} else {

					echo 'ERROR: There was a problem with the query.';

				}

			} else {

				// Dont do anything.

			} // There is a queryString.

		} else {

			echo 'There should be no direct access to this script!';

		}

	}

?>

</p>

Create a jquery simple accordion

2011-08-26T23:16:00.000-07:00

Create a jquery simple accordion

Download

Download Link


<style>

body {

	font: 10px normal Arial, Helvetica, sans-serif;

	margin: 0;

	padding: 0;

	line-height: 1.7em;

}

*, * focus {

	outline: none;

	margin: 0;

	padding: 0;

}

.wrapper {

	width: 500px;

	margin: 0 auto;

}

h2.accordiontrigger {

	padding: 0;	margin: 0 0 5px 0;

	background: url(accordion_files/01.gif) no-repeat;

	height: 46px;	line-height: 46px;

	width: 500px;

	font-size: 2em;

	font-weight: normal;

	float: left;

}

h2.accordiontrigger a {

	color: #fff;

	text-decoration: none;

	display: block;

	padding: 0 0 0 50px;

}

h2.accordiontrigger a:hover {

	color: #ccc;

}

h2.active {background-position: left bottom;}

.container {

	margin: 0 0 5px; padding: 0;

	overflow: hidden;

	font-size: 1.2em;

	width: 500px;

	clear: both;

	background: #f0f0f0;

	border: 1px solid #d6d6d6;

	-webkit-border-bottom-right-radius: 5px;

	-webkit-border-bottom-left-radius: 5px;

	-moz-border-radius-bottomright: 5px;

	-moz-border-radius-bottomleft: 5px;

	border-bottom-right-radius: 5px;

	border-bottom-left-radius: 5px;

}

.container .block {

	padding: 20px;

}

.container .block p {

	padding: 5px 0;

	margin: 5px 0;

}

.container h3 {

	font: 2.5em normal Georgia, "Times New Roman", Times, serif;

	margin: 0 0 10px;

	padding: 0 0 5px 0;

	border-bottom: 1px dashed #ccc;

}

.container img {

	float: left;

	margin: 10px 15px 15px 0;

	padding: 5px;

	background: #ddd;

	border: 1px solid #ccc;

}

</style>

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

<script type="text/javascript">

$(document).ready(function(){

	$('.container').hide();

	$('.accordiontrigger:first').addClass('active').next().show(); //"active" class to first trigger, when click show next container

	$('.accordiontrigger').click(function(){ //On Click

		if( $(this).next().is(':hidden') ) { //next container is closed

			$('.accordiontrigger').removeClass('active').next().slideUp(); //Remove all .accordiontrigger classes and slide up the immediate next container

			$(this).toggleClass('active').next().slideDown(); //Add .accordiontrigger class to clicked trigger and slide down the immediate next container

		}

		return false; //Prevent the browser jump to the link anchor

	});

});

</script>



<div class="wrapper">

	<h2 class="accordiontrigger"><a href="">Praesent duis vel similis usitas</a></h2>

	<div class="container">

		<div class="block">

			<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>

		</div>

	</div>

	<h2 class="accordiontrigger"><a href="">hos olim odio olim indoles</a></h2>

	<div class="container">

		<div class="block">

			<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>

		</div>

	</div>	

	<h2 class="accordiontrigger"><a href="">Euismod, v blandit, jumentum</a></h2>

	<div class="container">

		<div class="block">

			<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, v blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>

		</div>

	</div>

</div>

Delete Row from Table by clicking it using jQuery

2011-08-18T06:48:00.000-07:00

Delete Row from Table by clicking it using jQuery


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

<h2>Delete Row using jQuery</h2>

<style>

#hor-minimalist-a

{

	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

	font-size: 12px;

	background: #fff;

	margin: 45px;

	width: 480px;

	border-collapse: collapse;

	text-align: left;

}

#hor-minimalist-a th

{

	font-size: 14px;

	font-weight: normal;

	color: #039;

	padding: 10px 8px;

	border-bottom: 2px solid #6678b1;

}

#hor-minimalist-a td

{

	color: #669;

	padding: 9px 8px 0px 8px;

}

#hor-minimalist-a tbody tr:hover td

{

	color: #009;

	

}

</style>	

<table id="hor-minimalist-a">

    <thead>

    	<tr>

        	<th scope="col">Employee</th>

            <th scope="col">Salary</th>

            <th scope="col">Bonus</th>

            <th scope="col">Supervisor</th>

        </tr>

    </thead>

    <tbody>

    	<tr>

        	<td>Stephen C. Cox</td>

            <td>$300</td>

            <td>$50</td>

            <td>Bob</td>

        </tr>

        <tr>

        	<td>Josephin Tan</td>

            <td>$150</td>

            <td>-</td>

            <td>Annie</td>

        </tr>

        <tr>

        	<td>Joyce Ming</td>

            <td>$200</td>

            <td>$35</td>

            <td>Andy</td>

        </tr>

        <tr>

        	<td>James A. Pentel</td>

            <td>$175</td>

            <td>$25</td>

            <td>Annie</td>

        </tr>

    </tbody>

</table>	

<script>

$(document).ready(function(){

	$("#hor-minimalist-a tr").hover(function(){

		$(this).css("background-color","#E8EDFF");

	}, function(){

		$(this).css("background-color","#FEFEFE");

	})

	$("#hor-minimalist-a tr").click(function(){

		$(this).css("background-color","#B9C9FE");

		$(this).fadeOut(400, function(){

			$(this).remove();

		});

	});



});

</script>

jQuery Ajax PHP Delete Records Confirmation

2011-08-17T08:20:00.000-07:00

jQuery Ajax PHP Delete Records Confirmation

Download

http://dl.dropbox.com/u/7106563/r-ednalan/Delete_Records_Confirmation.zip

Jquery Ajax

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

<script type="text/javascript">

$(function() {

$(".delbutton").click(function(){

var element = $(this);

//Find the id of the link that was clicked

var del_id = element.attr("id");

//Built a url to send

var info = 'id=' + del_id;

if(confirm("Sure you want to delete this update? There is NO undo!"))

{

	$.ajax({

	   type: "GET",

	   url: "delete.php",

	   data: info,

	   success: function(){

	   }

	});

 $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")

	.animate({ opacity: "hide" }, "slow");

}

return false;

});

});

</script>

CSS Code

<style>

#rounded-corner

{

	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

	font-size: 12px;

	margin: 45px;

	width: 480px;

	text-align: left;

	border-collapse: collapse;

}

#rounded-corner thead th.rounded-company

{

	background: #b9c9fe url('table-images/left.png') left -1px no-repeat;

}

#rounded-corner thead th.rounded-q4

{

	background: #b9c9fe url('table-images/right.png') right -1px no-repeat;

}

#rounded-corner th

{

	padding: 8px;

	font-weight: normal;

	font-size: 13px;

	color: #039;

	background: #b9c9fe;

}

#rounded-corner td

{

	padding: 8px;

	background: #e8edff;

	border-top: 1px solid #fff;

	color: #669;

}

#rounded-corner tfoot td.rounded-foot-left

{

	background: #e8edff url('table-images/botleft.png') left bottom no-repeat;

}

#rounded-corner tfoot td.rounded-foot-right

{

	background: #e8edff url('table-images/botright.png') right bottom no-repeat;

}

#rounded-corner tbody tr:hover td

{

	background: #d0dafd;

}

</style>

index.php

<table id="rounded-corner" border="0">

 <thead>

 	<tr>

     	<th scope="col" class="rounded-company">Company</th>

         <th scope="col" class="rounded-q1">Q1</th>

         <th scope="col" class="rounded-q2">Q2</th>

         <th scope="col" class="rounded-q3">Q3</th>

         <th scope="col" class="rounded-q3">Q4</th>

         <th scope="col" class="rounded-q4" width="15px;"></th>

     </tr>

 </thead>

     <tfoot>

 	<tr>

     	<td colspan="5" class="rounded-foot-left"><em></em></td>

     	<td class="rounded-foot-right"> </td>

     </tr>

 </tfoot>

 <tbody>

		<?php

			

		 include("dbconfig.php");

		 $query4="select * from table order by id desc";

			$result4 = mysql_query($query4);

			while($row=mysql_fetch_array($result4))

			{

			$message=stripslashes($row["company"]);			

		?>

 	<tr class="record">

     	<td><?php echo $message; ?></td>

         <td>20.3</td>

         <td>30.5</td>

         <td>23.5</td>

         <td>40.3</td>

         <td><a href="#" id="<?php echo $row["id"]; ?>" class="delbutton"><img src="publish_x.png"/></a></td>

     </tr>

		<?php

		}

		?>

 </tbody>

</table>

delete.php

<?php

include("dbconfig.php");

if($_GET['id'])

{

$id=$_GET['id'];

$sql = "delete from messages where id='$id'";

mysql_query( $sql);

}

?>

dbconfig.php

<?php

$mysql_hostname = "localhost";

$mysql_user = "root";

$mysql_password = "ednalan";

$mysql_database = "test";



$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");

mysql_select_db($mysql_database, $bd) or die("Could not select database");

?>

Create a Sliding tab contents tab jquery

2011-08-15T22:42:00.000-07:00

Create a Sliding tab contents tab jquery

Demo

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

   <style>

*{

		margin:0px;

		padding:0px;

	}

	body{

		color:#444444;

		font-size:13px;

		background: #f2f2f2;

		font-family:"Century Gothic", Helvetica, sans-serif;

	}

	#content{

		text-align:center;

		height:100%;

		margin-left:20px;

		margin-top:20px;

	}

	#wrapper{

		-moz-box-shadow:0px 0px 3px #aaa;

		-webkit-box-shadow:0px 0px 3px #aaa;

		box-shadow:0px 0px 3px #aaa;

		-moz-border-radius:5px;

		-webkit-border-radius:5px;

		border-radius:5px;

		border:2px solid #fff;

		background-color:#FFFFFF;

		width:520px;

		overflow:hidden;

	}

	#slides{

		width:600px;

		/*height:320px;*/

		overflow:hidden;

	}

	.slides_contents{

		float:left;

		width:600px;

		/*height:320px;*/

	}

	#navigation{

		height:45px;

		background-color:#EBEBEB;

		border-top:1px solid #fff;

		-moz-border-radius:0px 0px 5px 5px;

		-webkit-border-bottom-left-radius:5px;

		-webkit-border-bottom-right-radius:5px;

		border-bottom-left-radius:5px;

		border-bottom-right-radius:5px;

	}

	#navigation ul{

		list-style:none;

		float:left;

		margin-left:22px;

	}

	#navigation ul li{

		float:left;

		border-right:1px solid #ccc;

		border-left:1px solid #ccc;

		position:relative;

		margin:0px 2px;

	}

	#navigation ul li a{

		display:block;

		height:45px;

		background-color:#444;

		color:#777;

		outline:none;

		font-weight:bold;

		text-decoration:none;

		line-height:45px;

		padding:0px 20px;

		border-right:1px solid #fff;

		border-left:1px solid #fff;

		background:#FBFBFB;

		background:

			-webkit-gradient(

			linear,

			left bottom,

			left top,

			color-stop(0.09, rgb(240,240,240)),

			color-stop(0.55, rgb(227,227,227)),

			color-stop(0.78, rgb(240,240,240))

			);

		background:

			-moz-linear-gradient(

			center bottom,

			rgb(240,240,240) 9%,

			rgb(227,227,227) 55%,

			rgb(240,240,240) 78%

			)

	}

	#navigation ul li a:hover,

	#navigation ul li.selected a{

		background:#d8d8d8;

		color:#666;

		text-shadow:1px 1px 1px #fff;

	}

	#slides form fieldset{

		border:none;

		padding-bottom:20px;

	}

	#slides form legend{

		text-align:left;

		background-color:#EBEBEB;

		color:#2D3B40;

		font-size:24px;

		text-shadow:1px 1px 1px #fff;

		font-weight:bold;

		float:left;

		width:100%;

		padding:5px 0px 5px 10px;

		margin:10px 0px;

		border-bottom:1px solid #949494;

		border-top:1px solid #828282;

	}

	#slides form p{

		float:left;

		clear:both;

		margin:5px 0px;

		border:0px solid #fff;

		width:100%;

	}

	#slides form p label{

		width:160px;

		float:left;

		text-align:right;

		margin-right:15px;

		line-height:26px;

		color:#666;

		text-shadow:1px 1px 1px #fff;

		font-weight:bold;

	}

	#slides form input{

		background: #ffffff;

		border: 1px solid #ddd;

		-moz-border-radius: 3px;

		-webkit-border-radius: 3px;

		border-radius: 3px;

		outline: none;

		padding: 5px;

		width: 200px;

		float:left;

	}

	#slides form input:focus{

		-moz-box-shadow:0px 0px 3px #aaa;

		-webkit-box-shadow:0px 0px 3px #aaa;

		box-shadow:0px 0px 3px #aaa;

		background-color:#FFFEEF;

	}

	#slides form button {

		border:none;

		outline:none;

		-moz-border-radius: 10px;

		-webkit-border-radius: 10px;

		border-radius: 10px;

		color: #ffffff;

		display: block;

		cursor:pointer;

		margin: 0px auto;

		clear:both;

		padding: 5px 20px;

		text-shadow: 0 1px 1px #777;

		font-weight:bold;

		font-family:"Century Gothic", Helvetica, sans-serif;

		font-size:18px;

		-moz-box-shadow:0px 0px 3px #aaa;

		-webkit-box-shadow:0px 0px 3px #aaa;

		box-shadow:0px 0px 3px #aaa;

		background:#969B9F;

	}

	#slides form button:hover {

		background:#7F9DB9;

		color:#666;

		text-shadow:1px 1px 1px #fff;

	}

	#slides form .submitbutton {

		width:650px;

	}

</style>

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

	<script type="text/javascript">

	$(function() {

	var fieldsetCount = $('#formElem').children().length; //number of fieldsets

	var current 	= 1; //current position of fieldset

	var slidesWidth	= 0; //widths of each one of the fieldsets

var widths 		= new Array();

	$('#slides .slides_contents').each(function(i){

    var $slides_contents = $(this);

		widths[i]  		= slidesWidth;

    slidesWidth	 	+= $slides_contents.width();

});

	$('#slides').width(slidesWidth);

	$('#formElem').children(':first').find(':input:first').focus();	 //to avoid problems in IE, focus the first input of the form

$('#navigation a').bind('click',function(e){

		var $this	= $(this);

		var prev	= current;

		$this.closest('ul').find('li').removeClass('selected');

    $this.parent().addClass('selected');

		current = $this.parent().index() + 1;

    $('#slides').stop().animate({

        marginLeft: '-' + widths[current-1] + 'px'

    });

    e.preventDefault();

});

});

	</script>

    <div id="content">

        <div id="wrapper">

            <div id="slides">

                <form id="formElem" name="formElem" action="" method="post">

                    <fieldset class="slides_contents">

                        <legend>Account</legend>

                        <p>

                            <label for="username">User name</label>

                            <input id="username" name="username" />

                        </p>

							<p>

                            <label for="name">Name</label>

                            <input id="name" name="name" />

                        </p>

                        <p>

                            <label for="email">Email</label>

                            <input id="email" name="email" placeholder="ednalan@yahoo.com" type="email" AUTOCOMPLETE=OFF />

                        </p>

                        <p>

                            <label for="password">Password</label>

                            <input id="password" name="password" type="password" AUTOCOMPLETE=OFF />

                        </p>

							<p class="submitbutton">

                            <button type="submit">Submit</button>

                        </p>

                    </fieldset>

                    <fieldset class="slides_contents">

                        <legend>Profile</legend>

							<div style="text-align:left;width:500px;margin:10px 10px 10px 10px;">

								Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum.

								Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>

								Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>

								Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>

								orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.

							</div>

                    </fieldset>

                </form>

            </div>

            <div id="navigation" >

                <ul>

                    <li class="selected">

                        <a href="#">Account</a>

                    </li>

                    <li>

                        <a href="#">Profile</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

Sample JavaScript Onload Functions Sample using google map code

2011-08-13T08:28:00.000-07:00

Sample JavaScript Onload Functions Sample using google map code

<html>

<head>

  <title>Google Maps API Sample</title>

  <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>

  <script type="text/javascript">

  var map = null;

  var geocoder = null;

  window.onload=initialize; //JavaScript Onload Functions

  function initialize() {

    if (GBrowserIsCompatible()) {

      map = new GMap2(document.getElementById("map_canvas"));

      map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      geocoder = new GClientGeocoder();

    }

	  var address = '1600 Amphitheatre Pky, Mountain View, CA';

    if (geocoder) {

      geocoder.getLatLng(

        address,

        function(point) {

          if (!point) {

            alert(address + " not found");

          } else {

            map.setCenter(point, 13);

            var marker = new GMarker(point);

            map.addOverlay(marker);

            marker.openInfoWindowHtml(address);

          }

        }

      );

    }

  }

  </script>

</head>

<body>

  <div id="map_canvas" style="width: 500px; height: 300px"></div>

</body>

</html>

Placeholder Text using HTML5

2011-08-06T22:28:00.000-07:00

Placeholder Text using HTML5

Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused

<style>
body {
 font: 90%/150% Arial, Helvetica, sans-serif;
 color: #666;
 width: 700px;
 margin: 30px auto;
}
a {
 color: #000;
 text-decoration: none;
}
a:hover {
 color: #F60;
}
p {
 margin: 0 0 2em;
}
h1, h2, h3 {
 line-height: 110%;
}
h1 {
 font: bold 80% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 margin: 0 0 2px;
 color: #999;
}
h2 {
 margin: 0 0 8px;
}
h3 {
 border-top: solid 2px #ccc;
 margin: 40px 0 15px;
 padding-top: 10px;
}
form p {
 margin: 0 0 15px;
}
input,
textarea,
input[type=search] {
 background: #f4f4f4;
 border: solid 1px #a3a3a3;
 padding: 5px 10px;
 font: 15px "Times New Roman", Times, serif;
 -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
 -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
 box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-appearance: none; /* reset webkit search style */
}
/* input:focus */
input[type=text]:focus,
textarea:focus,
input[type=search]:focus {
 background: #fff;
 border-color: #333;
 outline: none; /* remove outline */
}
/* field width */
input[type=text], input[type="search"] {
 width: 200px;
}
textarea {
 width: 400px;
 height: 250px;
}
/* placeholder */
.placeholder {
 color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
 color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
 color: #bbb;
}
</style>

</head>

<form class="form" method="post">
 <p><input type="text" placeholder="Your name please"></p>
 <p><input type="text" placeholder="Enter your email"></p>
 <p><textarea placeholder="Write your comments here"></textarea></p>
 <p><input type="submit" name="submit" value="Submit"></p>
</form>

Create a modal box jquery

2011-07-29T21:47:00.001-07:00

Create a modal box jquery

A code tutorial how to create a modal box using jquery and a css login form

Demo

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

Download

http://dl.dropbox.com/u/7106563/r-ednalan/modalbox/modal_login.zip

<html>
<head>
<title>Modal Login Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="jQuery" />
<meta name="keywords" content="jquery, css3"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:"Myriad Pro",Arial, Helvetica, sans-serif;
overflow-x:hidden;
}
.overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
}
.modal{
position:absolute;
top:25%;
width:450px;
height:300px;
margin-left:-250px;
z-index:9999;
color:#fff;
text-shadow:1px 1px 1px #000;
border:1px solid #303030;
background-color:#212121;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
.modal h2{
font-weight:100;
padding:5px 0px 5px 5px;
margin:5px;
background-color:#111;
border:1px solid #272727;
}
.modal h2 img{
float:left;
width:28px;
margin-right:10px;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}

span.close{
background:#000 url(images/close.png) no-repeat center center;
cursor:pointer;
height:25px;
width:25px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.5;
}
span.close:hover{
opacity:1.0;
}
.contents {
padding:10px 10px 10px 45px;
}
.button{
display: inline-block;
float:right;
padding: 4px 10px;
background-color: #1951A5;
color:#fff;
margin:20px;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
.button:active{
margin-top:21px;
}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:10 0 10px 0;}
p{font-size: 16px;color: #dedede;margin-top:10px;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;padding-left:5px;}

</style>

<body>
<div id="overlay" class="overlay" style="display:none;"></div>
<div id="modal" class="modal" style="display:none;">
<span class="close"></span>
<h2><img src="images/security.png"/>Login</h2>
<div class="contents">
<h1>Login[Quick Form Processing]</h1>
<form action="" method="POST">
<p><label style="display: block;">Username:</label><input class="text" type="text" name="username" /></p>
<p><label style="display: block;">Password:</label><input class="text" type="password" name="password" /></p>
<p><button class="button" name="login" type="submit">Login</button></p>
</form>
<p><a href="#">Forgot password?</a></p>
</div>
</div>
<div id="popupmodal" style="text-align:center;margin:100px 0px 20px 0px"><a href="#"><h1>Click here to popup Login Modal</h1></a></div>
<script type="text/javascript">
    $(function() {
$('#popupmodal a').bind('click',function(e){
var $this = $(this);
$('#overlay').show();
if(!$('#modal').is(':visible'))
$('#modal').css('left','-260px')
   .show()
   .stop()
    .animate({'left':'50%'}, 600);
e.preventDefault(); //default click prevented
});
//clicking on the cross hides the dialog
$('#modal .close').bind('click',function(){
$('#modal').stop()
   .animate({'left':'150%'}, 600, function(){
  $(this).hide();
  $('#overlay').hide();
   });
});
    });
</script>
</body>
</html>

Read XML with jQuery/Ajax

2011-07-26T08:49:00.000-07:00

Read XML with jQuery/Ajax

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function () {
$.ajax({
    type: "GET",
    url: "music.xml",
    dataType: "xml",
    success: function_Parsxml
});
});
function function_Parsxml(xml) {
$('#load').fadeOut();
$(xml).find("mostplayedsongs").each(function () {

    $(".main").append('<div class="song"><div class="title">' + $(this).find("Title").text() + '</div> <div class="Artist">' + $(this).find("Artist").text() + '</div></div>');
    $(".song").fadeIn(1000);
});
}
</script>
<style>
.main{
width:100%;
margin:0 auto;
height:130px;
}
.song{
width:208px;
float:left;
margin:10px;
border:1px #dedede solid;
padding:5px;
display:none;
}
.title{
margin-bottom:6px;}
.Artist{font-size:12px; color:#999; margin-top:4px;}
.loader{
height:11px;
}
</style>

<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>

music.xml

<?xml version="1.0" encoding="utf-8" ?>
<musictype>
<mostplayedsongs>
<Title>Sexyback</Title>
<Artist>Timberlake, Justin</Artist>
</mostplayedsongs>
<mostplayedsongs>
<Title>Wonderful Tonight</Title>
<Artist>Clapton, Eric</Artist>
</mostplayedsongs>
<mostplayedsongs>
<Title> Amazed</Title>
<Artist>Lonestar</Artist>
</mostplayedsongs>

</musictype>

Create a jquery sliding menu

2011-07-26T07:29:00.000-07:00

Create a jquery sliding menu

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function () {
 $('.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
 });
});
</script>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#button {
height: 32px;
width: 184px;
margin: auto;
cursor:hand;
}

ul, li {
margin:0;
padding:0;
list-style:none;
}

.menu_class {
background-image: url(button.png);
background-repeat: no-repeat;
height: 32px;
width: 184px;
border:1px solid #1c1c1c;
}
.menu_class h2{
color:#FFFFFF;
margin:5px 10px 10px 30px;
}

.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;

}

.the_menu li {
background-color: #302f2f;
}

.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
text-shadow: #222d2f -1px -1px 0;
border-top: 1px solid #1c1c1c;
border-bottom: 1px solid #1c1c1c;
}

.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #0F6AA6;
}

</style>
<div id="button"><div class="menu_class"><h2>--- Select ---</h2></div>
<ul class="the_menu">
<li><a href="#">www.google.com</a></li>
<li><a href="#">www.yahoo.com.ph</a></li>
<li><a href="#">www.r-ednalan.blogspot.com</a></li>
<li><a href="#">www.bing.com</a></li>
<li><a href="#">www.facebook.com</a></li>
</ul>
</div>

Download

http://dl.dropbox.com/u/7106563/r-ednalan/slidemenu.zip

Simple jquery Demonstration show hide Toggle slide fade

2011-07-25T08:07:00.000-07:00

Simple jquery Demonstration show hide Toggle slide fade

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function showSlidingDiv(){
$("#slidingDiv").animate({"height": "toggle"}, { duration: 1000 });
}

$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});

// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});

$('#slick-down').click(function() {
$('#slickbox').slideDown('slow');
return false;
});
$('#slick-up').click(function() {
$('#slickbox').slideUp('slow');
return false;
});
$('#slick-slidetoggle').click(function() {
$('#slickbox').slideToggle('slow');
return false;
});
$('#slick-fadeIn').click(function() {
$('#slickbox').fadeIn('slow');
return false;
});
$('#slick-fadeOut').click(function() {
$('#slickbox').fadeOut('slow');
return false;
});
});
</script>
<style>
#slidingDiv {
display: none;
height:300px;
background-color: #99CCFF;
padding:20px;
width:20%;
}
#slickbox {
display: none;
height:100px;
background-color: #99CCFF;
padding:20px;
width:20%;
}
</style>
<a href="#" onClick="showSlidingDiv(); return false;">Show/hide - Sliding Div</a><br />
<div id="slidingDiv">
Fill this space with really interesting content that you can <a href="#" onClick="showSlidingDiv(); return false;">hide</a>
</div>

<p>
<a href="#" id="slick-show">Show the box</a>
<a href="#" id="slick-hide">Hide the box</a>
<a href="#" id="slick-toggle">Toggle the box</a>
</p>
<div id="slickbox">This is the box that will be shown and hidden and toggled at your whim. :)</div>

<p>
<a href="#" id="slick-down">Slide the box down</a>
<a href="#" id="slick-up">Slide the box up</a>
<a href="#" id="slick-slidetoggle">Slide toggle the box</a>
</p>
<p>
<a href="#" id="slick-fadeIn">Fade In</a>
<a href="#" id="slick-fadeOut">Fade Out</a>
</p>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/jquery-show-hide.html

Create a modal box jquery ajax php mysql

2011-07-21T08:36:00.000-07:00

Create a modal box jquery ajax php mysql

This is a code tutorial how to create a modal box using jquery and jquery ajax and php mysql login form

Javascript code

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top',  winH/3-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

//jquery ajax
$("#login_form").submit(function() {
var unameval = $("#username").val();
var pwordval = $("#password").val();
$("#flash").show();
$("#flash").fadeIn("slow",0.25).html('<img src="ajax-loading.gif" align="absmiddle"> <span class="loading">Loading...</span>');
$.post("login.php", { username: unameval,
password: pwordval }, function(data) {
$("#status").html(data);
});
$("#flash").hide();
return false;
});

});

</script>

CSS Code

<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#969393;
display:none;
}
.window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
.note-box {
width:300px;
height:260px;
color:#818181;
background: #FFFFFF;
border: 2px solid #ccc;
padding:10px;
font-family: Georgia;
font-size: 14px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:0 0 4px 0;}
p{font-size: 20px;color: #000000;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;padding-left:5px;}
.highlight-1, .highlight-2, .highlight-3 { font-size: 14px;color: #000000; -moz-border-radius : 4px; -webkit-border-radius : 4px; padding : 5px 10px;}
.highlight-1 { background : #fce9e9;border : 1px #eac7c7 solid; }
.highlight-2 {background : #fcfae9;border : 1px #e9e6c7 solid; }
.highlight-3 {background : #edfce9;border : 1px #cceac4 solid;}
.ptour_crtbtn{border:1px outset #ccc;padding:5px 2px 4px;color:#fff;min-width: 100px;text-align: center;cursor:pointer;background:#729e01;background:-webkit-gradient(linear, left top, left bottom,from(#a3d030),to(#729e01));background:-moz-linear-gradient(top,#a3d030,#729e01);background:-o-linear-gradient(top,#a3d030,#729e01);background:linear-gradient(top,#a3d030,#729e01);-moz-border-radius:7px; -webkit-border-radius:7px;
}
.fail {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url(delete00.png);
background-repeat: no-repeat;
padding:5px;
padding-left:30px;
}
</style>

HTML Code

<div style="text-align:center"><a href="#modalboxlogin" name="modal"><h1>Click here to open modal login form</h1></a></div>
<div id="modalboxlogin" class="window note-box">
    <div id="flash" align="left"  ></div>
<div id="status"></div>
<form id="login_form" action="" method="POST">
<p><label style="display: block;">Email:</label><input class="text" type="text" id="username" name="username" /></p>
<p><label style="display: block;">Password:</label><input class="text" type="password" id="password" name="password" /></p>
<p style="text-align:right"><button class="ptour_crtbtn" name="login" type="submit">Login</button></p>
</form>
<p style="text-align:right"><a href="#" class="close"><img src="closelabel.gif"/></a></p>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>

<?php
$mysql_host     = 'localhost';
$mysql_username = 'root';
$mysql_password = 'ednalan';
#connect to the database
mysql_connect("$mysql_host","$mysql_username","$mysql_password");
mysql_select_db("dbednalan");
#A function to secure SQL queries in the script.
function sql_secure($string) {
if (get_magic_quotes_gpc()) {
$string = stripslashes($string);
}
$string = mysql_real_escape_string($string);
return $string;
}
$username = sql_secure($_POST['username']);
$password = sql_secure($_POST['password']);
#check details are of required lenght.
if (strlen($password) <= 3 || strlen($username) <= 3)
{
//echo "Username or Password Must Be Over 3 Characters";
}
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$query = mysql_query($sql);
$num_rows = mysql_num_rows($query);
#if user exists set some cookies.
if ($num_rows == '1'){
page_redirect("http://r-ednalan.blogspot.com/");
}else {
echo "<div class=\"fail\">Login failed, Please try again</div>";
}

?>

Download

http://dl.dropbox.com/u/7106563/r-ednalan/modalboxlogin_jquery-php-mysql.zip

Create a jquery tab

2011-07-19T08:24:00.000-07:00

Create a jquery tab
A tutorial how to create a tab manipulated using jQuery

The Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<style type="text/css">

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
#tabs ul li.active a {
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}
#container {
width:40%;
background: #494949;
color:#FFFFFF;
}
#container p{
padding:15px;
}
#container h3{
padding:15px;
}
</style>
<div id="container">
<div id="tabs">
<ul class="solidblockmenu">
<li><a href="#tab-1">This is Tab 1</a></li>
 <li><a href="#tab-2">Tab Two</a></li>
 <li><a href="#tab-3">Tab Three</a></li>
 <li><a href="#tab-4">Tab Four</a></li>
</ul>

<div id="tab-1">
 <h3>This is a really simple tabbed interface</h3>
 <p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
 </p>
</div>
<div id="tab-2">
 <h3>Tab 2</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-3">
 <h3>Tab 3</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-4">
 <h3>Tab 4</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>

</div>
</div>

Download

http://dl.dropbox.com/u/7106563/r-ednalan/jquerytab.zip

Create a Confirmation Message Effect Delay Message like twitter

2011-07-18T07:56:00.000-07:00

Create a Confirmation Message Effect Delay Message like twitter

//index.html
<style>
body {
font: normal 85% arial,verdana,tahoma,sans-serif;
color: #000;
margin: 10;
padding: 10;
background: #d3f3f5;
}
#errorMessage, #confirmationMessage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
font: normal 1.4em arial;
line-height: 70px;
text-align: center;
color: #000;
background: #fff;
border-bottom: 1px solid #ddd;
filter:alpha(opacity=92);
-moz-opacity: 0.92;
opacity: 0.92;
display: none; /* LEAVE THIS IN*/
}
fieldset {
width: 490px;
margin: 0;
padding: 20px;
background: #f4f4f4;
border: 1px solid #ddd;
}
label {
display: block;
font: bold 1.0em arial,verdana,tahoma,sans-serif;
color: #000;
margin: 0 20px 10px 0;
padding: 0;
clear: left;
}
.textfield, .textarea {
width: 200px;
font: normal 1.0em arial,verdana,tahoma,sans-serif;
color: #000;
margin: 0 0 20px 0;
padding: 5px 6px;
background: #fff;
border: 1px solid #ddd;
}
.textarea {
width: 470px;
height: 110px;
}
.textfield:focus, .textarea:focus {
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function()
{
$(".jquerySubmit").click(function(){
$('#confirmationMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
});
});
</script>
<div id="confirmationMessage">
Thank you. Your message has been sent
</div>

<form method="post" action="">
<fieldset>
<label>Name:</label>
<input type="text" name="Name" class="textfield" />
<label>Comments:</label>
<textarea name="Comments" class="textarea"></textarea>
<a href="#" class="jquerySubmit">SUBMIT </a>
</fieldset>
</form>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/create-effect-delay-message-like.html

Create a jquery slideToggle

2011-07-18T06:54:00.000-07:00

Create a jquery slideToggle

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".flip").click(function(){   
  $(".panel").slideToggle("slow"); //The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
 });
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
width:30%;
}
div.panel
{
height:120px;
display:none;
width:30%;
}
</style>

<div class="panel">
<p>lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel,</p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut Donec ipsum</p>
</div>
<p class="flip">Show/Hide Panel</p>

Create a JavaScript All Check Radio Buttons

2011-07-15T08:16:00.000-07:00

Create a JavaScript All Check Radio Buttons

<script>
 function checkall(formname,checkname,thestate){
 var el_collection=eval("document.forms."+formname+"."+checkname)
 for (c=0;c<el_collection.length;c++)
 el_collection[c].checked=thestate
 }
</script>
<form name="test">
<input type="checkbox" name="v1"> Peter<br />
<input type="checkbox" name="v1"> Jane<br />
<input type="checkbox" name="v1"> George<br />
<input type="checkbox" name="v1"> Ednalan<br />
</form>
<a href="javascript:checkall('test','v1',true)">Check All</a><br />
<a href="javascript:checkall('test','v1',false)">Uncheck All</a>

Disable button Terms and Conditions

2011-07-14T09:58:00.000-07:00

Disable button Terms and Conditions

<script language=javascript>
function apply()
{
 document.frm.sub.disabled=true;
 if(document.frm.chk.checked==true)
 {
   document.frm.sub.disabled=false;
 }
 if(document.frm.chk.checked==false)
 {
   document.frm.sub.enabled=false;
 }
}
</script>

<form name="frm">
<table style="border:solid green 1px">
<tr><td align=center>I agree Terms and Conditions<input type="checkbox" name="chk" onClick="apply()"></td></tr>
<tr><td align=center><input type="button" name="sub" value="submit" disabled></td></tr>
</table>
</form>

Create Javascript Popup page

2011-07-13T07:48:00.000-07:00

Create Javascript Popup page

<script language="JavaScript" type="text/JavaScript">
  function popup(url,w,h,name,resizable,toolbar,left,top)
   { 
    var features ="location=no,menubars=no,"+"width=550," +"height=550,"+"resizable=yes," +"scrollbars=yes," + "status=yes," + "titlebar=no," +"toolbar="+toolbar+"," +"left="+left+"," +"top="+top; 
    var win = window.open(url,name,features);
   }
</script>
<div>
 By clicking Next, you are indicating that you have read and agree to the 
 <a href="javascript:popup('popuppage.html')" title="Privacy Policy" rel="bookmark">Privacy Policy</a>
</div>

Create a Javascript show hide contents

2011-07-13T07:23:00.001-07:00

Create a Javascript show hide contents

//css
  <style>
   .bigbold {
    font-weight: bold;
    font-size: 25px;
   }
   .heading
   {
    background-color: #8FAFBF;
    text-align: center;
    font-weight: bold;
    height: 30px;
   }
  </style>

//javascript  
     <script>
  function showhideit(id,hid)
  {
   curstatus = document.getElementById(id).style.display;
   if(curstatus == "none")
   {
    document.getElementById(id).style.display = 'inline';
    document.getElementById(hid + '1').innerHTML = ' -';
    document.getElementById(hid + '2').innerHTML = '- ';
   }
   else
   {
    document.getElementById(id).style.display = 'none';
    document.getElementById(hid + '1').innerHTML = ' +';
    document.getElementById(hid + '2').innerHTML = '+ ';
   }
  }
</script>

//HTML
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tr class="heading" style="cursor: pointer;" onclick="showhideit('information','info')">
  <td width="100" align="left" class="bigbold" id="info1"> +</td>
   <td align="center"><b>CLICK TO SHOW INFORMATION</b></td>
   <td width="100" align="right" class="bigbold" id="info2">+ </td>
</tr>
<tr>
   <td colspan="3" width="100">
   <div style="display:none;" id="information">
    PHP Loops
    Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
    In PHP, we have the following looping statements:
    while - loops through a block of code while a specified condition is true
    do...while - loops through a block of code once, and then repeats the loop as long as a specified condition is true
    for - loops through a block of code a specified number of times
    foreach - loops through a block of code for each element in an array
   </div>
  </td>
</tr>
</table>

Demo

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

Javascript show hide toggle

2011-07-13T07:09:00.000-07:00

Javascript show hide toggle

<script type="text/javascript">
function toggle(obj){
var el = document.getElementById(obj);
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = 'inline';
}
}
</script>
<a href="#test1" onclick="toggle('table1');">Toggle 01 </a><br />
<table id="table1" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>
<br/>
<a href="#test2" onclick="toggle('table2');">Toggle 02</a><br />
<table id="table2" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>

Demo

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

Javascript One Function to Count and Limit Multiple Form Text Areas

2011-07-13T06:52:00.001-07:00

Javascript One Function to Count and Limit Multiple Form Text Areas

Javascript

<SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
//  End -->
</script>

HTML Form

<form name="myForm"
action=""
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>

<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>

<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>

Check Availability username with jquery-ajax, php mysql

2011-07-05T06:35:00.001-07:00

Check Availability username with jquery-ajax, php mysql

Javascript code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(document).ready(function()
{
$("#username").change(function()
{
var username = $("#username").val();
var msgbox = $("#status");
if(username.length > 3)
{
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking...');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ username,
success: function(msg){
$("#status").ajaxComplete(function(event, request){
if(msg == 'OK')
{
  $("#username").removeClass("red");
  $("#username").addClass("green");
    msgbox.html('<img src="yes.png" align="absmiddle"> <font color="Green"> Available </font>  ');
}
else
{
   $("#username").removeClass("green");
$("#username").addClass("red");
msgbox.html(msg);
}
});
}

});

}
else
{
$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Enter valid User Name</font>');
}
return false;
});
});
</SCRIPT>

CSS Code

<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}
input
{
font-size:16px;
width:190px;
height:25px;
border:solid 1px #333333;
padding:4px;
}

</style>

HTML Code

<div>
<input type="text" name="username" id="username" /><span id="status"></span>
</div>

PHP Code

<?php
//check.php
$host = "localhost";
$username = "root";
$password = "ednalan";
$databasename = "test";
$connect = mysql_connect($host, $username, $password) or die("Opps some thing went wrong");
mysql_select_db($databasename, $connect) or die("Opps some thing went wrong");
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql_check = mysql_query("SELECT id FROM users WHERE username='$username'");
if(mysql_num_rows($sql_check))
{
echo '<font color="#cc0000"><STRONG>'.$username.'</STRONG> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>

Create Contact Form (CSS, JQuery & AJAX)

2011-07-01T18:25:00.000-07:00

Create Contact Form (CSS, JQuery & AJAX)

Demonstration how to create a css form contact form and jquery ajax

Javascript Code

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">                                     
$(document).ready(function(){
$("form").submit(function(){
 var str = $("form").serialize();
    $.ajax({
    type: "POST",
    url: "contacts.php",
    data: str,
    success: function(msg){
  $("#note").ajaxComplete(function(event, request, settings){
  if(msg == 'OK')
  {
   result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
   $("#fields").hide();
  }
  else
  {
   result = msg;
  }
   $(this).html(result);
  });

 }
  });
 return false;
});
});
</script>

CSS Code

<style>
.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}

.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
body{
 background:#fbf9ee;
    font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
 color:#333;

    }
#main{
 float:left;
 display:inline;
 width:610px;
 margin-left:2px;
 padding-bottom:1em;
 }                
 form{
  margin:1.5em 0;
  padding-top:.5em;
  }
 fieldset{
  margin:0;
  padding:0;
  border:none;
  }  
 legend{
  display:none;
  }  
 label{
  float:left;
  width:120px;
  }
 input, textarea{
  width:250px;
  border:1px solid #dbd3b6;
  padding:5px;
  }  
 textarea{
  height:120px;
  overflow:auto;
  }     
 form p{
  clear:both; 
  margin:0;
  padding:8px 0;
  }
 button{
  border:none;
  padding:5px 15px;
  margin:0;
  float:left;
  background:#2c728a;
  color:#fff;
  font-weight:bold;
  font-size:15px;
  cursor:pointer;
  margin-left:120px;
  }         
</style>

HTML Form

<div id="main">
<h2>Contact Form (JQuery & AJAX)</h2>
  <div id="note"></div>
  <form action="javascript:alert('success!');">  
   <fieldset><legend>Contact form</legend>
    <p>
     <label for="name">Name</label>
     <input type="text" name="name" size="30" />
    </p>
    <p>
     <label for="email">Email</label>
     <input type="text" name="email" size="30" />
    </p>
    <label for="subject">Subject</label>
     <input type="text" name="subject" size="30" />
    </p>             
    <p>
     <label for="message">Message</label>
     <textarea name="message" rows="10" cols="30"></textarea>
    </p>       
    <p class="submit">
     <button type="submit" name="submit">Send Message</button>
    </p>    
   </fieldset>
      
  </form>

 </div>

PHP Code


//contacts.php
<?php
// To
define("WEBMASTER_EMAIL", 'ednalan@gmail.com');
// Reply To
define("REPLY_TO", 'kenshin@gmail.com');
function ValidateEmail($email)
{
 $regex = "([a-z0-9_\.\-]+)". # name
 "@". # at
 "([a-z0-9\.\-]+){2,255}". # domain & possibly subdomains
 "\.". # period
 "([a-z]+){2,10}"; # domain extension 
 $eregi = eregi_replace($regex, '', $email);
 return empty($eregi) ? true : false;
}
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post)
{
 $name = stripslashes($_POST['name']);
 $email = trim($_POST['email']);
 $subject = stripslashes($_POST['subject']);
 $message = htmlspecialchars($_POST['message']);
 $error = '';
 // Check name
 if(!$name)
 {
  $error .= 'Please enter your name.<br />';
 }
 // Check email
 if(!$email)
 {
  $error .= 'Please enter an e-mail address.<br />';
 }
 if($email && !ValidateEmail($email))
 {
  $error .= 'Please enter a valid e-mail address.<br />';
 }
 // Check message (length)
 if(!$message || strlen($message) < 15)
 {
  $error .= "Please enter your message. It should have at least 15 characters.<br />";
 }
 
 if(!$error)
 {
  $mail = mail(WEBMASTER_EMAIL, $subject, $message,
   "From: ".$email."\r\n"
  ."Reply-To: ".REPLY_TO."\r\n"
  ."X-Mailer: PHP/" . phpversion());
  if($mail)
  {
   echo 'OK';
  }
 }
 else{
  echo '<div class="notification_error">'.$error.'</div>';
 }
}
?>

Create a bubble tooltip using javascript

2011-07-01T08:44:00.001-07:00

Create a bubble tooltip using javascript

This demo demonstrates how the balloon tooltip works. Roll your mouse over the links.

CSS Code

<style>
a{
 color: #D60808;
 text-decoration:none;
}
a:hover{
 border-bottom:1px dotted #317082;
 color: #307082;
}
#bubble_tooltip{
width:147px;
position:absolute;
display:none;
}
#bubble_tooltip .bubble_top{
background-image: url('images/bubble_top.gif');
background-repeat:no-repeat;
height:16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('images/bubble_middle.gif');
background-repeat:repeat-y;
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
position:relative;
top:-8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('images/bubble_bottom.gif');
background-repeat:no-repeat;
background-repeat:no-repeat;
height:44px;
position:relative;
top:-6px;
}
</style>

Javascript code

<script>
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}

function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';

}
</script>

HTML Code

<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
<a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip. This is the content of the tooltip.');return false" onmouseout="hideToolTip()"><h2>Roll over me</h2></a> </p>

Demo

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

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

CSS3 Transition

2011-06-30T10:20:00.000-07:00

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

2011-06-30T08:35:00.001-07:00

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

2011-06-29T09:34:00.000-07:00

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

Create Contact Us Form Validate fields using javascript

2011-06-29T07:53:00.000-07:00

Create Contact Us Form Validate fields using javascript

//CSS
<style>
#main{
float:left;
display:inline;
width:470px;
margin-left:55px;
}
form{
 margin:1em 0;
 }
fieldset{
 border:none;
 margin:0;
 background:#f1f1f1;
 border:5px solid #e7e7e7;
 padding:1em 15px; 
 } 
legend{
 display:none;
 } 
label{
 float:left;
 clear:both;
 width:120px;
 margin-right:10px;
 margin-top:5px;
 text-align:right;
 }
input, textarea{
 width:250px;
 border:1px solid #ccc;
 padding:5px;
 margin:5px 0;
 } 
textarea{
 height:80px;
 overflow:auto;
 }    
form p{
 clear:both;
 margin:0;
 }
form h3{
 margin:1em 0 .5em 0;
 font-size:25px;
 }  
button{
 border:none;
 width:171px;
 height:33px;
 line-height:33px;
 text-align:center; 
 padding:0;
 margin:0;
 margin-left:15px;
 background:url(images/bg_button.gif) no-repeat 0 0;
 color:#555;
 font-weight:bold;
 font-size:14px;
 cursor:pointer; 
 }        
.submit{
 text-align:right;
 height:52px;
 margin:1em 0;   
 }
span.error{
 display:block;
 color:#a50000;
 font-weight:bold;
 margin-left:130px;
 }

</style>

Javascript

//Javascript
<script type="text/javascript" src="js/jquery.js"></script>
<script>
this.form = function(){
this.validate = function(name, email, message){
$("span.error").remove();
var valid = true;
//name
if(name == "") {
 error($("#name"),"Please tell us your name.")
 valid = false;
};
//email
if(!checkEmail(email)) {
 error($("#email"),"We need a valid email address.")
 valid = false;
}; 
//messgae
if(message == "") {
 error($("#message"),"Please write a message.")
 valid = false;
};   
return valid;
};

this.checkEmail = function(str){
 var regEx = /^[^@]+@[^@]+.[a-z]{2,}$/;
 return (str.search(regEx) != -1);
};

this.error = function(obj,text){
var parent = $(obj).parent();
parent.append("<span class=\"error\">"+ text +"</span>");
$("span.error",parent).hide().show("fast");
};

$("#contactForm button").click(function(){              
var name = $("#name").val();
var email = $("#email").val();  
var message = $("#message").val();    
if(validate(name, email, message)) return true;
return false;
});
};
this.init = function() {
form();
};

$(document).ready(function(){
init();
});
</script>

HTML Form

//HTML form
<div id="main">
 <h2>Contact us</h2>
 <p>Nunc volutpat nisi nec leo. Fusce accumsan, mi ac posuere rhoncus,
 arcu orci tristique leo, vitae consequat.</p>
 <form id="contactForm" action="/" method="post">
  <fieldset><legend>Contact form</legend>
   <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="message">Message</label>
    <textarea name="message" id="message" rows="10" cols="30"></textarea>
   </p>          
  </fieldset>
  <p class="submit">
   <button type="submit">Send</button>
  </p>      
 </form>
</div>

Downlaod

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

IE 5 and 6 png transparent using javascript

2011-06-28T08:11:00.000-07:00

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

Poshy Tip

2011-06-28T06:45:00.000-07:00

Poshy Tip

Poshy Tip is a tooltip plugin that allows easily creating stylish tooltips and also includes the most useful features for such a script.

Visit Site

http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

Sweet Menu

2011-06-28T00:19:00.000-07:00

Sweet Menu

Sweet Menu takes an ordinary unordered list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system. Simply include the jQuery library, the Sweet Menu plugin, and make a simple jQuery call and you are on your way to a sweet looking menu!

Visit Site

http://adambecker.info/playground/sweet-menu

Demo

http://playground.adambecker.info/sweet-menu/

Rocking and Rolling Rounded Menu with jQuery

2011-06-27T23:38:00.001-07:00

Rocking and Rolling Rounded Menu with jQuery

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box

Visit Site

http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/

Demo

http://tympanus.net/Tutorials/RockingRollingMenu/

Download

http://tympanus.net/Tutorials/RockingRollingMenu/RockingRollingMenu.zip

NavDock

2011-06-27T21:35:00.000-07:00

NavDock

NavDock is a simple dock style menu icon.

Visit Site

http://dipi-graphics.com/labs/6/NavDock-jQuery-Plugin.html

Rotate Through Tabbed Content

2011-06-27T20:51:00.000-07:00

Rotate Through Tabbed Content

While tabbed boxes like the one we’ve built are a great way to fit a large amount of content in a small space, they do have one drawback: many users never click through the tabs to see what all is offered, meaning they only ever see the content on the first tab. This tutorial gives solution to this problem by automatically rotate through the tabs.

This solution has two benefits: first, the movement is more likely to catch the users’ eyes, increasing the chances they’ll notice the tabbed box in the first place. Second, it allows your users to see all the content your box contains instead of just the first tab.

Visit Site

http://www.cssnewbie.com/advanced-jquery-tabbed-box-techniques/

Code

http://www.cssnewbie.com/example/tabbed-box/advanced.html

jQPanView

2011-06-27T20:18:00.001-07:00

jQPanView

Creates a image like div with the image as background with ability to pan it with mouse.

Visit Site

http://projects.sevir.org/storage/jpanview/index.html