arraybreak
Erfahrenes Mitglied
Tag All,
ich habe gerade ein Kontakt Formular dass sich im Vordergrund öffnet, das Problem dabei ist das er irgend wie eine feste Position hat und lässt sich beim Scrollen nicht mitfahren, in meinem Falle ist es Problematisch da dieses Fenster beim mir eine große Höhe hat (ca.840px)
Ich mit meinem 24 Zoll Bildschirm sehe ich den ganzen Formular aber nicht die Nutzer die z.b. einen Laptop haben, bei ihnen wird es nur zur Hälfte angezeigt und er lässt sich nicht scrollen.
Hier der Code:
Habe schon vieles probiert aber irgend komme ich nicht auf die Lösung.
Gruß arraybreak
ich habe gerade ein Kontakt Formular dass sich im Vordergrund öffnet, das Problem dabei ist das er irgend wie eine feste Position hat und lässt sich beim Scrollen nicht mitfahren, in meinem Falle ist es Problematisch da dieses Fenster beim mir eine große Höhe hat (ca.840px)
Ich mit meinem 24 Zoll Bildschirm sehe ich den ganzen Formular aber nicht die Nutzer die z.b. einen Laptop haben, bei ihnen wird es nur zur Hälfte angezeigt und er lässt sich nicht scrollen.
Hier der Code:
PHP:
jQuery(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.contact, #contact-form a.contact, #contact-form .custom-button').click(function (e) {
e.preventDefault();
// load the contact form using ajax
$.get("/contact/contact_partner.php", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Schliessen' class='modal-close'>x</a>",
position: ["2%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
});
},
open: function (dialog) {
// add padding to the buttons in firefox/mozilla
if ($.browser.mozilla) {
$('#contact-container .contact-button').css({
'padding-bottom': '2px'
});
}
// input field font size
if ($.browser.safari) {
$('#contact-container .contact-input').css({
'font-size': '.9em'
});
}
// dynamically determine height
var h = 840;
if ($('#contact-subject').length) {
h += 26;
}
if ($('#contact-cc').length) {
h += 22;
}
var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Loading...');
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#contact-container .contact-content').animate({
height: h
}, function () {
$('#contact-container .contact-title').html(title);
$('#contact-container form').fadeIn(200, function () {
$('#contact-container #contact-name').focus();
$('#contact-container .contact-cc').click(function () {
var cc = $('#contact-container #contact-cc');
cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
});
// fix png's for IE 6
if ($.browser.msie && $.browser.version < 7) {
$('#contact-container .contact-button').each(function () {
if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
var src = RegExp.$1;
$(this).css({
backgroundImage: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
});
}
});
}
});
});
});
});
});
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
// validate form
if (contact.validate()) {
var msg = $('#contact-container .contact-message');
msg.fadeOut(function () {
msg.removeClass('contact-error').empty();
});
$('#contact-container .contact-title').html('Senden...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: '80px'
}, function () {
$('#contact-container .contact-loading').fadeIn(200, function () {
$.ajax({
url: '/contact/contact_partner.php',
data: $('#contact-container form').serialize() + '&action=send',
type: 'post',
cache: false,
dataType: 'html',
success: function (data) {
$('#contact-container .contact-loading').fadeOut(200, function () {
$('#contact-container .contact-title').html('Vielen Dank!');
msg.html(data).fadeIn(200);
});
},
error: contact.error
});
});
});
}
else {
if ($('#contact-container .contact-message:visible').length > 0) {
var msg = $('#contact-container .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#contact-container .contact-message').animate({
height: '30px'
}, contact.showError);
}
}
});
},
close: function (dialog) {
$('#contact-container .contact-message').fadeOut();
$('#contact-container .contact-title').html('auf Wiedersehen...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: 40
}, function () {
dialog.data.fadeOut(200, function () {
dialog.container.fadeOut(200, function () {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
});
});
});
},
error: function (xhr) {
alert(xhr.statusText);
},
validate: function () {
contact.message = '';
if (!$('#contact-container #contact-name').val()) {
contact.message += 'Name ist erforderlich. ';
}
if (!$('#contact-container #contact-strasse').val()) {
contact.message += 'Strasse ist erforderlich. ';
}
if (!$('#contact-container #contact-stadt').val()) {
contact.message += 'Stadt ist erforderlich. ';
}
if (!$('#contact-container #contact-plz').val()) {
contact.message += 'PLZ ist erforderlich. ';
}
if (!$('#contact-container #contact-land').val()) {
contact.message += 'Land ist erforderlich. ';
}
if (!$('#contact-container #contact-gb').val()) {
contact.message += 'Geburtsdatum ist erforderlich. ';
}
if (!$('#contact-container #contact-ausbildung').val()) {
contact.message += 'Ausbildung ist erforderlich. ';
}
if (!$('#contact-container #contact-bf-erfahrung').val()) {
contact.message += 'Berufserfahrung ist erforderlich. ';
}
if (!$('#contact-container #contact-aktaetigkeit').val()) {
contact.message += 'akt. Tätigkeit ist erforderlich. ';
}
if (!$('#contact-container #contact-telefon').val()) {
contact.message += 'Telefon ist erforderlich. ';
}
var email = $('#contact-container #contact-email').val();
if (!email) {
contact.message += 'Email ist erforderlich. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'E-Mail ist ungültig. ';
}
}
if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validateEmail: function (email) {
var at = email.lastIndexOf("@");
// Make sure the at (@) sybmol exists and
// it is not the first or last character
if (at < 1 || (at + 1) === email.length)
return false;
// Make sure there aren't multiple periods together
if (/(\.{2,})/.test(email))
return false;
// Break up the local and domain portions
var local = email.substring(0, at);
var domain = email.substring(at + 1);
// Check lengths
if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
return false;
// Make sure local and domain don't start with or end with a period
if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
return false;
// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!/^"(.+)"$/.test(local)) {
// It's a dot-string address...check for valid characters
if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
return false;
}
// Make sure domain contains only valid characters and at least one period
if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
return false;
return true;
},
showError: function () {
$('#contact-container .contact-message')
.html($('<div class="contact-error"></div>').append(contact.message))
.fadeIn(200);
}
};
contact.init();
});Habe schon vieles probiert aber irgend komme ich nicht auf die Lösung.
Gruß arraybreak
