Automatically Delay to open pop up

<style type="text/css">
.hide{
    display:none;
}
.clo {
   background:url(images/wrong_icon.png) no-repeat;
    display: block;
    height: 42px;
    position: absolute;
    right: -17px;
    top: 0;
    width: 42px;
    z-index: 2147483647;
}

.show {
    background-color: white;
    border: 5px solid orange;
    display: block;
    left: 37%;
    padding: 13px;
    position: absolute;
    top: 26%;
    width: 25%;
}


.image {
 display: inline;
    width: 35%;
}
form{
    clear: both;
    margin: 0 auto;
    padding: 10px 0;
    width: 70%;
   
}
</style>

<script type="text/javascript" language="javascript">

window.onload=function() 
{
setTimeout(func1, 2000);  //sets a timer which calls function func1 after 2,000 milliseconds = 2 secs.
   
};
function func1()
{
document.getElementById("my_div").className="show";
}
</script>


<div>main page</div>
<div id="my_div" class="hide">
<a href="#" class="clo" onclick="document.getElementById('my_div').style.display='none';"></a>
 <h3>Subscribe</h3>
     <div class="image" ><img src="images/email.png"></div>
      <div style="display: inline-block;width: 65%;">Subscribe to our newsletter to get the latest scoop right to your inbox.</div>
    <form action="#" method="post">
      <input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus>
      <button type="submit" class="subscribe-submit">Subscribe</button>
    </form>
 <p style="text-align:center;">
 &copy; 2014&ndash;2015 <a href="https://fawzulhameed.wordpress.com/" target="_blank">Fawzulhameed</a>
 </p>
</div>

Hidden feild validation using javascript and hide and show radio button based

<form name="form"  action="" method="post">
<input   type='radio'  value="rawmaterial" name='material'  class="dynamic_class">Transfer
    <input   type='radio'  value="salaryaccount" name='material'  class="dynamic_class">cheque
   
    <div id="tran">
<div class="form-group input-group">
 <span class="input-group-addon">transfer id</span>
    <input type="text" name="transfer_id" id="transfer_id" class="form-control"> </div> </div>
   
    <div id="transs">
   <div class="form-group input-group">
 <span class="input-group-addon">cheque number</span>
    <input type="text" name="cheque_no" id="cheque_no" class="form-control">  </div> </div>
     <button type='submit' name="submit" onclick="validate(event, this.form);" value="validate">submit</button>
    </form>
   
   
   <script>function validate(e, form) {
     
         var material = form.querySelectorAll('input[name="material"]:checked');
          var transfer_id=document.forms["form"]["transfer_id"].value
         var cheque_no=document.forms["form"]["cheque_no"].value
      
  if (!material.length ) {
        alert('please select fundsource or material source');
        e.preventDefault();
        return false;
    }
   
    if (form.material[0].checked != '' && !transfer_id.length ) {
        alert('please select transfer_id');
        e.preventDefault();
        return false;
    }
   
    if (form.material[1].checked != '' && !cheque_no.length)
   
      { alert('please select cheque no');
        e.preventDefault();
        return false;
    }
   

}</script>
<style> #tran{ display: none; }#transs{ display: none; }</style>
<script src="http://code.jquery.com/jquery.js"></script>
 <script>
 $(function(){
        $(".dynamic_class").click(function(){
          if($(this).val() === "rawmaterial")
            $("#tran").show("fast");

         if($(this).val() === "salaryaccount")
            $("#transs").show("fast");
             if($(this).val() === "rawmaterial")
             $("#transs").hide("fast");
              if($(this).val() === "salaryaccount")
             $("#tran").hide("fast");
           
           
        });
      });</script>

demo:
       

Transfer cheque

transfer id

cheque number

dropdown list height limit using javascript

<div class="form-group input-group">

   <span class="input-group-addon"  style="padding: 9px;"> Select a order no</span>
 <select name='order' class="form-control" onmousedown="if(this.options.length>5){this.size=4;}" onchange="this.size=0;" onblur="this.size=0;"
  style="padding: 3px;
    position: absolute;
    width: 160px;">
 <option value='1' >1</option>
<option value='2' >2</option>
<option value='3' >3</option>
<option value='4' >4</option>
<option value='5' >5</option>
<option value='6' >6</option>
<option value='7' >7</option>
<option value='8' >8</option>  </select>

demo:

Select a order no 1 2 3 4 5 6 7 8

send html, php email with all attachement like pdf,image...

    <?php
    function mail_attachment($filename, $path, $mailto, $from_mail, $from_name, $replyto, $subject, $message) {
    $file = $path.$filename;
    $file_size = filesize($file);
    $handle = fopen($file, "r");
    $content = fread($handle, $file_size);
    fclose($handle);
    $content = chunk_split(base64_encode($content));
    $uid = md5(uniqid(time()));
    $name = basename($file);
    $header = "From: ".$from_name." <".$from_mail.">\r\n";
    $header .= "Reply-To: ".$replyto."\r\n";
    $header .= "MIME-Version: 1.0\r\n";
    $header .= "Content-Type: multipart/mixed; boundary=\"".$uid."\"\r\n\r\n";
    $header .= "This is a multi-part message in MIME format.\r\n";
    $header .= "--".$uid."\r\n";
    $header .= "Content-type:text/html; charset=iso-8859-1\r\n";
    $header .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
    $header .= $message."\r\n\r\n";
    $header .= "--".$uid."\r\n";
    $header .= "Content-Type: application/octet-stream; name=\"".$filename."\"\r\n"; // use different content types here
    $header .= "Content-Transfer-Encoding: base64\r\n";
    $header .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n";
    $header .= $content."\r\n\r\n";
    $header .= "--".$uid."--";
    if (mail($mailto, $subject, "", $header)) {
    echo "mail send ... OK"; // or use booleans here
    } else {
    echo "mail send ... ERROR!";
    }
    }

    $my_file = "1418109533.pdf";
    $my_path = $_SERVER['DOCUMENT_ROOT']."/shirdibaba/images/";
    $my_name = "Olaf Lederer";
    $my_mail = "my@mail.com";
    $my_replyto = "my_reply_to@mail.net";
    $my_subject = "This is a mail with attachment.";
    $my_message = "Hallo,\r\ndo you like this script? <h2>I hope it will help.</h2>\r\n\r\ngr. Olaf";
    mail_attachment($my_file, $my_path, "mhsatham8@gmail.com", $my_mail, $my_name, $my_replyto, $my_subject, $my_message);
    ?>
    

datepicker date to date based on from date

 <label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
    $("#from").datepicker({
  maxDate:+0,
   changeMonth: true,
   dateFormat: 'dd/mm/y',
   numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
 
        }
    });
    $("#to").datepicker({
  maxDate:+0,
        changeMonth: true,
  dateFormat: 'dd/mm/y',
        numberOfMonths: 1,
        onClose: function (selectedDate) {
        }
    });
});</script>

 Demo:


From to