Feeback en el Top Right de la pagina web
Publicado por Informatico (2 intervenciones) el 23/01/2015 20:04:31
Amigos necesito un favor por mas que intento no puedo hacer que el feedback este en otro lugar por que deja de funcionar el script. Me podrias ayudar aqui estan los codigos
y el CSS
El JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="section">
<!-- The arrow span is floated to the right --><h6><span class="arrow up"></span></h6>
<p> </p>
<form id="c_form" name="contact">
<div>
<label> </label>
<p>Nombre</p>
<p>
<input name="name" type="text" class="c_input" id="c_name" placeholder="Escriba su nombre" size="30"/>
</p>
<p>Email:</p>
<p>
<input name="email" type="text" class="c_input" id="c_mail" placeholder="Escriba su e-mail" size="30"/>
</p>
<p> Télefono:</p>
<p>
<input name="telefono" type="text" class="c_input" id="c_telefono" placeholder="Escriba su télefono" size="30"/>
</p>
<p>Monto a solicitar:
<input name="monto" type="text" class="c_input" id="c_monto" placeholder="¿Cuanto es el monto deseado?" size="30"/>
</p>
</div>
<label> </label>
<p>Mensaje:</p>
<p>
<textarea name="mensaje" cols="30" rows="5" class="c_input" id="c_msg" placeholder="Escriba su mensaje" size="30"></textarea>
</p>
<p> </p>
<p>
<!-- boton enviar --></p>
<div id="c_btns">
<input name="send" onClick="cargaSendMail()" type="button" value="Enviar" class="btn-b" id="c_enviar">
</div>
</form>
<p class="message"></p>
<div class= "formulario" id="contactform">
<!-- bloque confirmacion de envio oculto --><div id="c_information" class="hide">
<p></p>
</div>
<!-- inicio formulario --><!-- fin formulario -->
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
y el CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
*{
margin:0; padding:0;}#feedback{
background-color: #FFFFFF;
width: 310px; height: 420px; position:; top: 0; right: 0;z-index: 10000;
position: fixed;}#feedback .section{
background:url('img/bg.png') repeat-x top left;
border-bottom:none;
padding:10px 25px 25px;}#feedback .color-1{ background-color:#585757;}
#feedback .color-2{ background-color:#585757;}
#feedback .color-3{ background-color:#585757;}
#feedback .color-4{ background-color:#585757;}
#feedback .color-5{ background-color:#585757;}
#feedback h6{
background: url("img/feedback.png");
height: 38px; cursor: pointer; }-moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
.formulario{ position: absolute;}.c_error{color: #F9070B;
}El JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
$(document).ready(function(){
// Caching the feedback object:
var feedback = $('#feedback');
$('#feedback h6').click(function(){
// We are storing the values of the animated
// properties in a separate object:
var anim = {
mb : 200, // Margin Bottom
pt : 15 // Padding Top
};var el = $(this).find('.arrow');
if(el.hasClass('right')){
anim = {
mb : 0,
pt : 10 }; } // The first animation moves the form up or down, and the second one
// moves the "Feedback heading" so it fits in the minimized version
feedback.stop().animate({marginBottom: anim.mb});
feedback.find('.section').stop().animate({paddingBottom:anim.pt},function(){
el.toggleClass('right');
});
});
$('#feedback a.submit').live('click',function(){
var button = $(this);
var textarea = feedback.find('textarea');
// We use the working class not only for styling the submit button,
// but also as kind of a "lock" to prevent multiple submissions.
if(button.hasClass('working') || textarea.val().length < 5){
return false;
} // Locking the form and changing the button style:
button.addClass('working');
$.ajax({
url : submitURL,
type : 'post',
data : { message : textarea.val()},
complete : function(xhr){
var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = 'Your path to submit.php is incorrect.';
} // Hiding the button and the textarea, after which
// we are showing the received response from submit.php
button.fadeOut();
textarea.fadeOut(function(){
var span = $('<span>',{
className : 'response',
html : text})
.hide()
.appendTo(feedback.find('.section'))
.show();
}).val('');
}});
return false;
});
});
// JavaScript Document
function cargaSendMail(){
$("#c_enviar").attr("disabled", true);
$(".c_error").remove();
var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_.]+[A-za-z]$/;
var filter2=/^[0123456789]$/;
var s_email = $('#c_mail').val();
var s_name = $('#c_name').val();
var s_msg = $('#c_msg').val();
var s_telefono = $('#c_telefono').val();
var s_monto = $('#c_monto').val();
if (filter.test(s_email)){
sendMail = "true";
} else{
$('#c_mail').after("<span class='c_error' id='c_error_mail'>*</span>");
//aplicamos color de borde si el se encontro algun error en el envio
$('#contactform').css("border-color","#e74c3c");
sendMail = "false";
}if (s_name.length == 0 ){
$('#c_name').after( "<span class='c_error' id='c_error_name'>*</span>" );
sendMail = "false";
}if (s_telefono.length == 0 ){
$('#c_telefono').after( "<span class='c_error' id='c_error_name'>*</span>" );
sendMail = "false";
}if (s_monto.length == 0 ){
$('#c_monto').after( "<span class='c_error' id='c_error_monto'>*</span>" );
sendMail = "false";
}if (s_msg.length == 0 ){
$('#c_msg').after( "<span class='c_error' id='c_error_msg'></span>" );
sendMail = "false";
}if(sendMail == "true"){
var datos = {
"nombre" : $('#c_name').val(),
"email" : $('#c_mail').val(),
"mensaje" : $('#c_msg').val(),
"telefono" : $('#c_telefono').val(),
"monto" : $('#c_monto').val()
};$.ajax({
data: datos,
// hacemos referencia al archivo contacto.php
url: 'formulario.php',
type: 'post',
beforeSend: function () {
//aplicamos color de borde si el envio es exitoso
$('#contactform').css("border-color","#25A25A");
$("#c_enviar").val("Enviando...");
},
success: function (response) {
$('form')[0].reset();
$("#c_enviar").val("Enviar");
$("#c_information p").html(response);
$("#c_information").fadeIn('slow');
$("#c_enviar").removeAttr("disabled");
}});
} else{
$("#c_enviar").removeAttr("disabled");
}}Valora esta pregunta
0
