Search bar using CSS

CSS:

#tfheader{
        background-color:#c3dfef;
    }
    #tfnewsearch{
        float:right;
        padding:20px;
    }
    .tftextinput{
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        border:1px solid #0076a3; border-right:0px;
        border-top-left-radius: 5px 5px;
        border-bottom-left-radius: 5px 5px;
    }
    .tfbutton {
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        border: solid 1px #0076a3; border-right:0px;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
        border-top-right-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
    }
    .tfbutton:hover {
        text-decoration: none;
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    }
    /* Fixes submit button height problem in Firefox */
    .tfbutton::-moz-focus-inner {
      border: 0;
    }
    .tfclear{
        clear:both;
    }

HTML:

<!-- HTML for SEARCH BAR -->
    <div id="tfheader">
        <form id="tfnewsearch" method="get" action="http://www.google.com">
                <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
        </form>
    <div class="tfclear"></div>
    </div>

RETRIEVING DATES BETWEEN TWO COLUMNS IN ONE ROW

DATES RETREIVAL USING SERVLET: 

   //Keep this in your servlet and make sure to enter correct driver name, url, username and password

        try

            {

            Date date = null;

            Class.forName(driver name);

            Connection con=DriverManager.getConnection(url, username, password);

            Statement stmt=con.createStatement();

            ResultSet rs=stmt.executeQuery("select sdate,noofleaves from leavetable where empid='001'");

            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");     

           while(rs.next())

           {

             String  da=rs.getString(1);

             int e=Integer.parseInt(rs.getString(2));

             date=(Date)sdf.parse(da);

                for(int i=0;i<e;i++)

                {

                    date.setDate(date.getDate()+1);

                    out.println(date);

                    out.println("<br>");

                }

            }

            } finally {           

            out.close();

        }

}

OUTPUT:

Menu bar using CSS

MENU BAR USING CSS:

CSS:

html{background: #77d5fb;}
body{background: transparent url('top_bg.png') top center no-repeat;
width: 100%; height: 100%;
margin: 0 0;}


#navigation_container {
    margin: 0 auto;
    width: 900px;
}

#navigation li {
        list-style: none;
        display: block;
        float: left;
        margin: 1em 0.8em;
}

#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0;
        line-height: 28px;
}

#navigation li.active a:hover,
#navigation li a:hover {
        margin-top: 2px;
}

#navigation li.active {
        font-style: italic;
}

#navigation li.active a {
}


.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
     
   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
   
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}

.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: 1px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -40px;
   left: -150px;
}


.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        right: -45px;
        top: -107px;
}

.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        top: -149px;
        right: -145px;
}
.l-triangle-top {
    left: 150px;
    top: 50px;
}
.l-triangle-bottom {
    left: 50px;
    top: -12px;
}
.r-triangle-top {}
.r-triangle-bottom {
    top: -169px;
}

HTML:

<html>

    <head>
<!-- put the css into this code and check the output-->
   
</head>

<body>

<!-- container for positioning the banner -->

<div id="navigation_container">

<!-- the left side of the fork effect -->
 
 <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>

<!-- the ribbon body -->

 
 <div class="rectangle">
  
<!-- the navigation links -->
      
        <ul id="navigation">
             <li><a href="#">&#10029; Home</a></li>
          <li><a href="#">&#10029; About</a></li>
          <li><a href="#">&#10029; Services</a></li>
          <li><a href="#">&#10029; Contact</a></li>
        </ul>
  
<!-- end the ribbon body -->
   </div>
  
<!-- the right side of the fork effect -->
   <div class="r-triangle-top"></div>
   <div class="r-triangle-bottom"></div>

<!-- end container -->
</div>

</body>

</html>

OUTPUT: 

create an icon to the browser tab

Create a icon to the browser tab:


<head>
    <title>My Site</title>
    <link rel="shortcut icon" href="images.ico" type="image/x-icon"  />
</head>



output:

Falling images or flowers using jquery

<script>
if(typeof jQuery=='undefined')
{
    document.write('<'+'script');
    document.write(' language="javascript"');
    document.write(' type="text/javascript"');
    document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');
    document.write('</'+'script'+'>')
}
</script>
<script>
    if(!image_urls)
    {
        var image_urls=Array()
    }
    if(!flash_urls)
    {
        var flash_urls=Array()
    }
    image_urls['rain1']="image1.jpg";
    image_urls['rain2']="image2.jpg";
    image_urls['rain3']="image3.jpg";
    image_urls['rain4']="image4.jpg";
    $(document).ready(function()
    {
        var c=$(window).width();
        var d=$(window).height();
        var e=function(a,b)
        {
            return Math.round(a+(Math.random()*(b-a)))
        };
        var f=function(a)
        {
            setTimeout(function()
            {
                a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut

('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-

5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]).css({position:'absolute',left:e

(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;

$(window).resize(function(){c=$(window).width();d=$(window).height()})});
        </script>
<script>
    if(typeof jQuery=='undefined')
    {
        document.write('<'+'script');
        document.write(' language="javascript"');
        document.write(' type="text/javascript"');
        document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');
        document.write('</'+'script'+'>')
    }
</script>
<script>
    $(document).ready(function()
    {
        var a=$('<img>').attr({'src':'image5.jpg','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr

({'href':'http://javause.blogspot.in'}).append(a).appendTo('body')});
</script>



//change image1,2,3,4,5 to your images and see the output

preview of image on browser using JQUERY

To get preview of Image using JQUERY

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200)
};
reader.readAsDataURL(input.files[0]);
}
}
</script>



 <table >
                        <tr><td><img id="img_prev" src="#" height="200" width="150" alt="your image here"/></td>   <td><input type='file' name="a" id="filename" onchange="readURL(this);"/></td></tr>
                    
        </table>



OUTPUT: