sliding form development sample
slider.html
<html>
<head>
<meta name="robots" content="noindex, nofollow">
<!-- include css file here-->
<link rel="stylesheet" href="css/style.css"/>
<!-- below line is used for google font-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<script src="js/slider.js"></script>
</head>
<body>
<!-- advertising div -->
<div class="formget">
<!-- Sliding div starts here -->
<div id="slider" style="right:-342px;">
<div id="sidebar" onclick="open_panel()">
<img src="images/contact.png"/>
</div>
<div id="header">
<h2>Contact Form</h2>
<input type="text" name="dname" value="Your Name"/>
<input type="text" name="demail" value="Your Email"/>
<h4>Query type</h4>
<select>
<option>General</option>
<option>Presales</option>
<option>Technical</option>
<option>Others</option>
</select>
<textarea type="text" value="message">Message</textarea><br/>
<button>Send Message</button>
</div>
</div>
<!-- Sliding div ends here -->
</body>
</html>
style.css
body{
overflow:hidden;
width:960px;
margin:10px auto;
}
p{
border-bottom: 1px dotted #d8d8d8;
padding-bottom: 15px;
font-size:17px;
}
#slider{
width:500px;
top:100px;
position:absolute;
}
#header{
width:260px;
height:520px;
position:absolute;
right:0px;
border:1px solid #d8d8d8;
margin-left:40px;
padding:20px 40px;
border-radius:3px;
box-shadow: 0 0 8px gray;
}
#sidebar{
position:absolute;
top:180px;
left:113px;
box-shadow: 0 0 8px gray;
}
#sidebar1{
position:absolute;
top:180px;
left:113px;
box-shadow: 0 0 8px gray;
}
h3{
font-family: 'Roboto Slab', serif;
}
input[type=text]{
margin-top: 10px;
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
}
h4{
font-size:15px;
}
div#title{
position:absolute;
top:300px;
left:650px;
}
select{
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
}
textarea{
padding:6px;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
margin-top: 10px;
height:80px;
width:100%;
}
button{
background:#2bc1f2;
border: none;
color: #fff;
width: 100%;
font-size: 22px;
font-weight: bolder;
padding: 8px 0 8px 0;
border-radius: 3px;
cursor: pointer;
margin-top:25px;
}
slider.js
function open_panel()
{
slideIt();
var a=document.getElementById("sidebar");
a.setAttribute("id","sidebar1");
a.setAttribute("onclick","close_panel()");
}
function slideIt()
{
var slidingDiv = document.getElementById("slider");
var stopPosition = 0;
if (parseInt(slidingDiv.style.right) < stopPosition )
{
slidingDiv.style.right = parseInt(slidingDiv.style.right) + 2 + "px";
setTimeout(slideIt, 1);
}
}
function close_panel(){
slideIn();
a=document.getElementById("sidebar1");
a.setAttribute("id","sidebar");
a.setAttribute("onclick","open_panel()");
}
function slideIn()
{
var slidingDiv = document.getElementById("slider");
var stopPosition = -342;
if (parseInt(slidingDiv.style.right) > stopPosition )
{
slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
setTimeout(slideIn, 1);
}
}
No comments:
Post a Comment