スライディング コンタクト フォームの位置を変更したい。ネットでチュートリアルを見たことがありますが、右に配置されています。クリックすると左にスライドします。
チュートリアルのデモはこちら
したがって、右側に配置する代わりに..画面の右下に再配置したい。左にスライドする代わりに、ボタンをクリックすると上にスライドします。jQuery はまだあまり得意ではありません。ヘルプ
コードは次のとおりです。
HTML:::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Feedback Form Demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- Files For mRova Feedback Form [Dependency: jQuery] -->
<script src="mrova-feedback-form.js" type="text/javascript"></script>
<link rel="stylesheet" href="mrova-feedback-form.css" type="text/css"/>
<!-- END -->
<!-- Just For Demo -->
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #f2f2f2;
font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
text-align: center;
margin-top: 40px;
color: #333;
}
</style>
<!-- END -->
</head>
<body>
<h1>Free Feedback Form</h1>
<!--Feedback Form HTML START -->
<div id="mrova-feedback">
<div id="mrova-contact-thankyou" style="display: none;"> Thank you. We'hv received your feedback. </div>
<div id="mrova-form">
<form id="mrova-contactform" action="#" method="post">
<ul >
<li>
<label for="mrova-name">Your Name*</label>
<input type="text" name="mrova-name" class="required" id="mrova-name" value="">
</li>
<li>
<label for="mrova-email">Email*</label>
<input type="text" name="mrova-email" class="required" id="mrova-email" value="">
</li>
<li>
<label for="mrova-message">Message*</label>
<textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea>
</li>
</ul>
<input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
</form>
</div>
<div id="mrova-img-control"></div>
</div>
<!-- Feedback Form HTML END -->
</body>
</html>
CSS::
label {
display: block;
padding-bottom: 5px;
margin-top: 20px;
}
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
right: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-contactform ul {
margin: 0;
padding: 0;
}
#mrova-contactform input, #mrova-contactform textarea {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}
#mrova-contactform ul li {
list-style: none;
padding-bottom: 20px;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
left: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
#mrova-contactform #mrova-sendbutton {
width: 60px;
background: #db4f4a;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border: none;
}
JS:::
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
});
};
$.fn.toggleClick = function(){
var functions = arguments ;
return this.click(function(){
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length ;
$(this).data('iteration', iteration);
});
};
})(jQuery);
$(window).load(function() {
//cache
$img_control = $("#mrova-img-control");
$mrova_feedback = $('#mrova-feedback');
$mrova_contactform = $('#mrova-contactform');
//setback to block state and vertical align to center
$mrova_feedback.vAlign()
.css({'display':'block','height':$mrova_feedback.outerHeight()});
//Aligning feedback button to center with the parent div
$img_control.vAlign()
//animate the form
.toggleClick(function(){
$mrova_feedback.animate({'right':'-2px'},1000);
}, function(){
$mrova_feedback.animate({'right':'-'+$mrova_feedback.outerWidth()},1000);
});
//Form handling
$('#mrova-sendbutton').click( function() {
var url = 'send.php';
var error = 0;
$('.required', $mrova_contactform).each(function(i) {
if($(this).val() === '') {
error++;
}
});
// each
if(error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
$str = $mrova_contactform.serialize();
//submit the form
$.ajax({
type : "GET",
url : url,
data : $str,
success : function(data) {
if(data == 'success') {
// show thank you
$('#mrova-contact-thankyou').show();
$mrova_contactform.hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
});