Boks kommer ud fra top af browser
Boks med tekst kommer fra top af browserHej.
Jeg har fundet denne ting http://jorenrapini.com/posts/contactform/, som jeg gerne vil have på min hjemmeside. Dog kun med tekst.
Mit problem er bare at denne er i toppen, og jeg vil gerne have den til at være i venstre side af browseren.
Hvordan gør jeg det?
Min html side ser sådan ud:
<!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" />
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
<title>Joren Rapini's Contact Form</title>
</head>
<body>
<div class="container">
<div id="contactFormContainer">
<div id="contactForm">
<div class="loader"></div>
<div class="bar"></div>
<p>VIGTIGT!</p>
<div class="input_boxes">
</div>
</div>
<div class="contact"></div>
</div>
<div id="dummycontent">
<p>TEKST</p>
<a href="#contactFormContainer" class="contact bottomlink"><strong>Contact Me</strong></a>
</div>
</div>
<div id="backgroundPopup"></div>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
min reset.css ser sådan ud:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
min styles ser sådan ud:
body {background:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:20px; color:#545353;}
.container {
width:960px;
margin:0px auto;
position:relative;
z-index:12;
}
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */
#contactFormContainer {
position:absolute;
left:368px;
z-index:1;
}
/* Hides the whole contact form until needed */
#contactForm {
height:289px;width:558px;
border:1px solid #929191;
padding:7px 12px;
color:#fff;
display:none;
}
/* Loading bar that will appear while the ajax magic is happening */
.bar{
display:none;
background:url(../images/ajax-loader.gif) no-repeat center;
margin-top:100px;
height:40px; width:230px;
}
/* Hides the confirmation message until needed */
#messageSent {display:none;}
/* This hides the form validation alert messages until needed */
#contactForm span {
display:none;
font-size:9px;
line-height:10px;
padding-left:6px;
color:#f5c478;
}
/* Some styling for the contact button */
#contactFormContainer .contact {
height:47px; width:211px;
background:url(../images/contact_me.png);
position:absolute;
left:368px; bottom:-44px;
cursor:pointer;
}
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
height:100%; width:100%;
top:0; left:0;
background:#000;
z-index:11;
}
/* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */
#contactForm textarea, #contactForm input {
width:180px;
background:#6d6d6d url(../images/contact_input.png) repeat-x top;
color:#fff;
border:1px solid #8a8a8a;
height:15px;
line-height:14px;
font-size:11px;
padding:2px 2px 0px;
}
#contactForm input {background-position:0px -20px;}
#contactForm textarea {height:114px; font-family:Verdana, Geneva, sans-serif;}
#contactForm .submit {
border:1px solid #aba8a8;
background:#e5e5e5;
text-transform:uppercase;
color:#4d4d4d;
font-weight:bold;
padding:7px 16px 7px 14px;
height:37px; width:124px;
cursor:pointer;
float:left;
margin-top:196px;
}
#contactForm .submit:active {background:#cacaca; }
#contactForm label {padding-left:4px; font-weight:bold;}
#contactForm p {padding-bottom:8px;}
#contactForm .input_boxes {float:left; width:204px;}
#dummycontent {padding-top:100px; height:900px; position:relative;}
.bottomlink {position:absolute; bottom:0;}
Min script.js ser sådan ud:
$(document).ready(function(){
//function for contact form dropdown
function contact() {
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
$("#backgroundPopup").css({"opacity": "0.7"});
$("#backgroundPopup").fadeIn("slow");
}
else{
$("#contactForm").slideUp("slow");
$("#backgroundPopup").fadeOut("slow");
}
}
//run contact form when any contact link is clicked
$(".contact").click(function(){contact()});
//animation for same page links #
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($(this.hash).length) {
$(this).click(function(event) {
var targetOffset = $(this.hash).offset().left;
var target = this.hash;
event.preventDefault();
$('html, body').animate({scrollleft: targetOffset}, 500);
return false;
});
}
}
});
//submission scripts
$('.contactForm').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById('e-mail');
if (!filter.test(email.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.name.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
return false;
}
if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.contactForm').hide();
//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});
//send the ajax request
$.post('mail.php',{name:$('#name').val(),
email:$('#e-mail').val(),
message:$('#message').val()},
//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});
//waits 2000, then closes the form and fades out
setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
//stay on the page
return false;
}
});
//only need force for IE6
$("#backgroundPopup").css({
"height": document.documentElement.clientHeight
});
});
Håber det er til at finde ud af selvom det er så lang en tekst!
