This code allows me to open a contact for divs width. I want the side button to open and close the divs width one after the other. It opens then closes perfectly once, but the second time it just opens and closes immediately. Also, the css code must not be right because in Safari the button does not push over along with the side of the div form. Does anyone know where to go from here?
Here is a link to the example
www.neuegraphics.com/londes
css:
@charset “UTF-8”;
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
color:#fff;
}
h1{
color:#afffa2;
}
#wrapper{
width:100%;
height:100%;
min-height:850px;
background-color:#ccc;
}
#openForm{
width:10px;
height:850px;
float:right;
overflow:hidden;
}
#container{
width:350px;
height:850px;
background-image:url(…/images/ContactBKG.jpg);
background-repeat:no-repeat;
float:left;
}
#openBtn{
position:fixed;
width:43px;
height:75px;
background-image:url(…/images/contactTAB.png);
top:426px;
margin-left:-43px;
float:left;
cursor:pointer;
}
.title{
margin-left:25px;
}
#form{
margin-left:25px;
width:300px;
height:100%;
}
.shaddow{
box-shadow: 0px 7px 10px #000;
}
input {
height:50px;
border-radius:15px;
moz-border-radius:15px;
}
#row{
width:300px;
height:75px;
}
.cell {
clear:both;
}
.celltitle {
float:left;
color:fff;
font-size:18px;
}
HTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Untitled Document</title>
<link href=“css/contactForm.css” rel=“stylesheet” type=“text/css” />
<script type=“text/javascript” src=“js/jsMin.js”></script>
</head>
<body>
<div id=“wrapper”>
<div id=“openForm”>
<div id="container">
<h1 class="title">Contact Us</h1>
<div id="form">
<form action="" method="post" name="contact-us">
<div id="row">
<div class="celltitle">Name</div>
<div class="cell"><input name="" type="text" size="42" /></div>
</form>
</div>
</div>
<a><div id="openBtn"> </div></a>
</div>
</div>
<script>
$(document).ready(function(){
$x = 1;
$y = 0;
if($x > $y) {
$('#openBtn').click(function(){
$('#openForm').animate({width:'350px'}, 500);
$y = 3;
$x +=1;
//this method increases the height to 393px
if ($x > 1) {
$(this).click(function(){
$('#openForm').animate({width:'10px'}, 500);
});
}
});
}
});
</script>
</body>
</html>
