CLICK HERE FOR DOWNLOAD
follow the instruction on this site.....
Nirav Panchal
Web designer..
Tuesday, December 21, 2010
Styling File input code for File Upload
To give an image to file upload input type just copy this link to your browser and paste and follow this link...
CLICK HERE FOR DOWNLOAD
follow the instruction on this site.....
CLICK HERE FOR DOWNLOAD
follow the instruction on this site.....
Monday, December 20, 2010
Grediant for all browser including ie7......
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
Thursday, October 28, 2010
My Favourite Dialogue. ........ on which i believe most............
Itni shidaat se main tumhe paane ki koshish ki hai,
hi har zaare ne mujhe tumse milane ki saazish ki hai.
Kehte hain ki ...... Agar kisi cheez ko dil se chaaho to puri kayanat usey tumse milane ki koshish mein lag jaati hai.
Aaj aap sabh ne mujhe meri chaahat se milaeya, thank you, thank you very much. Main aap sab ka shukar guzaar hoon.
Ki aapne mere kwabon ko yakeen mein badal diya, itna ki I feel like the King of thee World.
Aur aaj, is baat ka bhi yakeen ho gaya, ki humari filmon ki tarah humari zindagi mein bhi end mein sab theek ho jaata hai.
Happys Endings. Aur agar, aur agar theek na ho to woh the end nahin hai dosto, picture abhi baaki hai.
hi har zaare ne mujhe tumse milane ki saazish ki hai.
Kehte hain ki ...... Agar kisi cheez ko dil se chaaho to puri kayanat usey tumse milane ki koshish mein lag jaati hai.
Aaj aap sabh ne mujhe meri chaahat se milaeya, thank you, thank you very much. Main aap sab ka shukar guzaar hoon.
Ki aapne mere kwabon ko yakeen mein badal diya, itna ki I feel like the King of thee World.
Aur aaj, is baat ka bhi yakeen ho gaya, ki humari filmon ki tarah humari zindagi mein bhi end mein sab theek ho jaata hai.
Happys Endings. Aur agar, aur agar theek na ho to woh the end nahin hai dosto, picture abhi baaki hai.
Wednesday, September 22, 2010
Display Current time live...... With Javascript
<html>
<head>
<script type="text/javascript">
var timer = null
function start(){
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>
</head>
<body onload="start()">
<form>
<input type="text" name="display" size="20">
</form>
</body>
</html>
<head>
<script type="text/javascript">
var timer = null
function start(){
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>
</head>
<body onload="start()">
<form>
<input type="text" name="display" size="20">
</form>
</body>
</html>
Friday, September 17, 2010
Change Image On Mouse Over With JavaScript
<script language="javascript" type="text/javascript">
function changeImgOver()
{
document.getElementById("facebook").src = "images/facebook_over.png";
}
function changeImgOut()
{
document.getElementById("facebook").src = "images/facebook_img.png";
}
</script>
/* Image code */
<div class="facebook_img" onmouseout="changeImgOut();" onmouseover="changeImgOver();"><a href="#"><img id="facebook" src="images/facebook_img.png" alt="facebook" border="0" /></a></div>
function changeImgOver()
{
document.getElementById("facebook").src = "images/facebook_over.png";
}
function changeImgOut()
{
document.getElementById("facebook").src = "images/facebook_img.png";
}
</script>
/* Image code */
<div class="facebook_img" onmouseout="changeImgOut();" onmouseover="changeImgOver();"><a href="#"><img id="facebook" src="images/facebook_img.png" alt="facebook" border="0" /></a></div>
Thursday, September 16, 2010
Image Opacity Change on mouse over Just like a javascript
<img src="images/1.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Transparency Background with all browser Compatibility
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
JavaScript for Show & Hide Div...... Good Working
<script type="text/javascript">
function showHide(id)
{
if(document.getElementById(id).style.display == "block")
{
document.getElementById(id).style.display = "none";
}
else
{
document.getElementById(id).style.display = "block";
}
}
</script>
Put this code where you want to Show & Hide DIV.
<a href="#" onclick="showHide(1);">Portfolio</a>
<div style="display:none;" id="1" class="menu_in"></div
function showHide(id)
{
if(document.getElementById(id).style.display == "block")
{
document.getElementById(id).style.display = "none";
}
else
{
document.getElementById(id).style.display = "block";
}
}
</script>
Put this code where you want to Show & Hide DIV.
<a href="#" onclick="showHide(1);">Portfolio</a>
<div style="display:none;" id="1" class="menu_in"></div
Sunday, September 12, 2010
Javascript for textbox auto value Display
This code is used to display auto
value of the textbox when there is no text
entered in it.....
<input style="" name="text" size="45" value="Search"
onfocus="if(this.value=='Search')this.value='';
this.style.color='black';" onblur="if(this.value=='')
{ this.value = 'Search'; this.style.color='';}" type="text">
Include One HTML file to another HTML File
To Include one HTML file to another HTML page.. this code is very Hwlpful to include some same data of the design.... pls check it.. its really works.......
<IFRAME SRC="top_menu.html" WIDTH=950 HEIGHT="115" frameborder="0" scrolling="no">
</IFRAME>
<IFRAME SRC="top_menu.html" WIDTH=950 HEIGHT="115" frameborder="0" scrolling="no">
</IFRAME>
Saturday, August 21, 2010
greadient button over effect
.grad_button {
color: #000; width: 145px; height: 30px;
border: solid 1px #999; text-align:center; padding: 5px 0px 0px 0px; margin: 10px 0px 0px 160px; cursor: pointer; font-family:Arial, Helvetica, sans-serif; font-size: 16px; text-decoration:none; font-weight:bold;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dfdfdf));
background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dfdfdf');
}
.grad_button a {
color: #fef4e9; width: 145px; height: 30px;
border: solid 1px #999; text-align:center; padding: 5px 0px 0px 0px; cursor: pointer; text-decoration:none;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dfdfdf));
background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dfdfdf');
}
.grad_button:hover {
background: #f47c20; color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#59cbe5), to(#3ab3d1));
background: -moz-linear-gradient(top, #59cbe5, #3ab3d1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59cbe5', endColorstr='#3ab3d1');
}
color: #000; width: 145px; height: 30px;
border: solid 1px #999; text-align:center; padding: 5px 0px 0px 0px; margin: 10px 0px 0px 160px; cursor: pointer; font-family:Arial, Helvetica, sans-serif; font-size: 16px; text-decoration:none; font-weight:bold;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dfdfdf));
background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dfdfdf');
}
.grad_button a {
color: #fef4e9; width: 145px; height: 30px;
border: solid 1px #999; text-align:center; padding: 5px 0px 0px 0px; cursor: pointer; text-decoration:none;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dfdfdf));
background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dfdfdf');
}
.grad_button:hover {
background: #f47c20; color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#59cbe5), to(#3ab3d1));
background: -moz-linear-gradient(top, #59cbe5, #3ab3d1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59cbe5', endColorstr='#3ab3d1');
}
Button over Effect
#pillmenu ul {
float:right;
padding:0;
margin:0;
list-style: none;
}
#pillmenu li {
float: left;
margin:0 0 0 4px; list-style: none;
}
#pillmenu li a {
float:left;
cursor:pointer; text-decoration:none;
background: transparent url(images/t_menu_btn.png) no-repeat top right;
}
#pillmenu li a span {
float:left;
color: #444;
font-size:11px;
font-weight:700;
font-family: Arial, Verdana, Tahoma, sans-serif;
text-decoration: none;
text-transform:uppercase;
text-shadow:1px 1px #dbdbdb;
height:50px;
line-height:26px;
padding: 0 10px;
margin:0;
background: transparent url(images/t_menu_btn_l.png) no-repeat top left;
}
#pillmenu li a:hover,#pillmenu li#current a{
text-decoration: none;
background: transparent url(images/t_menu_btn.png) no-repeat bottom right;
}
#pillmenu li a:hover span,#pillmenu li#current a span {
color:#fff;
text-shadow:none;
background: transparent url(images/t_menu_btn_l.png) no-repeat bottom left;
}
<div id="pillmenu"> <li><a href="#"><span>nirav panchal</span></a></li></div>
float:right;
padding:0;
margin:0;
list-style: none;
}
#pillmenu li {
float: left;
margin:0 0 0 4px; list-style: none;
}
#pillmenu li a {
float:left;
cursor:pointer; text-decoration:none;
background: transparent url(images/t_menu_btn.png) no-repeat top right;
}
#pillmenu li a span {
float:left;
color: #444;
font-size:11px;
font-weight:700;
font-family: Arial, Verdana, Tahoma, sans-serif;
text-decoration: none;
text-transform:uppercase;
text-shadow:1px 1px #dbdbdb;
height:50px;
line-height:26px;
padding: 0 10px;
margin:0;
background: transparent url(images/t_menu_btn_l.png) no-repeat top left;
}
#pillmenu li a:hover,#pillmenu li#current a{
text-decoration: none;
background: transparent url(images/t_menu_btn.png) no-repeat bottom right;
}
#pillmenu li a:hover span,#pillmenu li#current a span {
color:#fff;
text-shadow:none;
background: transparent url(images/t_menu_btn_l.png) no-repeat bottom left;
}
And Put This code to your HTML DIV
<div id="pillmenu"> <li><a href="#"><span>nirav panchal</span></a></li></div>
CSS 3 working in all Browser
.inset {background: transparent; width:40%;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff;}
.inset p {padding-bottom:0.5em;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}
.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
/* HTML Code */
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Inset Borders</h1>
<p>Rounded corners with </p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff;}
.inset p {padding-bottom:0.5em;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}
.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
/* HTML Code */
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Inset Borders</h1>
<p>Rounded corners with </p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
Subscribe to:
Posts (Atom)