Hi, I'm working on a full one page website, and everytime I reload the page, it does not show the very top, but always some part down the bottom. Does anyone know how can I make it reload from the top? (It's like it always scrolled down whenever i reload).
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Reloading One Page Website
- Thread starter d4rklamp
- Start date
- Sort by reaction score
Sorry my bad. Here's the HTML & CSS code:
<div id="contact-form" class="clearfix">
<h1>Get In Touch!</h1>
<h2></h2>
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! I will get back to you ASAP!</p>
<form method="post" action="process.php">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Holla!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div> <!-- End of contact form -->
CSS
/* Contact Form */
#contact-form {
background: url(../img/bg_contactbox.jpg);
width:465px;
padding:20px;
margin: 50px auto;
position:relative;
}
#contact-form h1 {
font-size:42px;
color: #FFF;
}
#contact-form h2 {
margin-bottom:15px;
font-style:italic;
font-weight:normal;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
font-size:15px;
color: #FFF;
margin-bottom:2px;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
width: 100%;
border: 1px solid #CEE1E8;
margin-bottom:20px;
padding:4px;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
border: 1px solid #AFCDD8;
background-color: #EBF2F4;
}
#contact-form textarea {
height:150px;
resize: none;
}
#contact-form label {
display:block;
}
#contact-form .required {
font-weight:bold;
color:#F00;
}
#contact-form #submit-button {
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
-moz-border-radius:8px;
}
#contact-form #submit-button:hover {
background-color: #A6CFDD;
}
#contact-form #submit-button:active {
position:relative;
top:1px;
}
#contact-form #loading {
width:32px;
height:32px;
background-image:url(../img/loading.gif);
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
#errors {
border:solid 1px #E58E8E;
padding:10px;
margin:25px 0px;
display:block;
width:437px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
display:none;
}
#errors li {
padding:2px;
list-style:none;
}
#errors li:before {
content: ' - ';
}
#errors #info {
font-weight:bold;
}
#errors #info:before {
content: '';
}
#success {
border:solid 1px #83D186;
padding:25px 10px;
margin:25px 0px;
display:block;
width:437px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
font-weight:bold;
display:none;
}
#errors.visible, #success.visible {
display:block;
}
#req-field-desc {
font-style:italic;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
color:#CCC;
font-style:italic;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
color:#CCC;
font-style:italic;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text {
color:#CCC;
font-style:italic;
}
I pasted the contact form codes as, I found out that removing those codes make my website reload normally again. There must be something wrong with these codes but I can't seem to be able to figure it out. Any help would be much appreciated!
<div id="contact-form" class="clearfix">
<h1>Get In Touch!</h1>
<h2></h2>
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! I will get back to you ASAP!</p>
<form method="post" action="process.php">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Holla!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div> <!-- End of contact form -->
CSS
/* Contact Form */
#contact-form {
background: url(../img/bg_contactbox.jpg);
width:465px;
padding:20px;
margin: 50px auto;
position:relative;
}
#contact-form h1 {
font-size:42px;
color: #FFF;
}
#contact-form h2 {
margin-bottom:15px;
font-style:italic;
font-weight:normal;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
font-size:15px;
color: #FFF;
margin-bottom:2px;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
width: 100%;
border: 1px solid #CEE1E8;
margin-bottom:20px;
padding:4px;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
border: 1px solid #AFCDD8;
background-color: #EBF2F4;
}
#contact-form textarea {
height:150px;
resize: none;
}
#contact-form label {
display:block;
}
#contact-form .required {
font-weight:bold;
color:#F00;
}
#contact-form #submit-button {
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
-moz-border-radius:8px;
}
#contact-form #submit-button:hover {
background-color: #A6CFDD;
}
#contact-form #submit-button:active {
position:relative;
top:1px;
}
#contact-form #loading {
width:32px;
height:32px;
background-image:url(../img/loading.gif);
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
#errors {
border:solid 1px #E58E8E;
padding:10px;
margin:25px 0px;
display:block;
width:437px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
display:none;
}
#errors li {
padding:2px;
list-style:none;
}
#errors li:before {
content: ' - ';
}
#errors #info {
font-weight:bold;
}
#errors #info:before {
content: '';
}
#success {
border:solid 1px #83D186;
padding:25px 10px;
margin:25px 0px;
display:block;
width:437px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
font-weight:bold;
display:none;
}
#errors.visible, #success.visible {
display:block;
}
#req-field-desc {
font-style:italic;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
color:#CCC;
font-style:italic;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
color:#CCC;
font-style:italic;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text {
color:#CCC;
font-style:italic;
}
I pasted the contact form codes as, I found out that removing those codes make my website reload normally again. There must be something wrong with these codes but I can't seem to be able to figure it out. Any help would be much appreciated!
960design
macrumors 68040
Real quick guess ( haven't tested yet )
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
border: 1px solid #AFCDD8;
background-color: #EBF2F4;
}
giving an element focus will scroll your page to the focus point, your form in this case.
If your form is 'below the fold' it will push the header off the top
just thinking
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
border: 1px solid #AFCDD8;
background-color: #EBF2F4;
}
giving an element focus will scroll your page to the focus point, your form in this case.
If your form is 'below the fold' it will push the header off the top
just thinking
I tried removing it, but in vain. I think the focus only affects how the text box looks like when its clicked. I tried disabling all the contact form css, and leaving only the html codes. It still scroll to the contact box, so I guess its in the HTML code. Any more help please?
960design
macrumors 68040
My mistake! You are completely correct. :focus changes the element when it gains focus. Trying to dodge a hurricane here, trying to save boat, mind is a little :unfocused. 🙂
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
There is a lot wrong here, but we are not concerned with coding to standards we just need it fixed.
Try removing the autofocus="autofocus". I need to see if you have any javascript doing anything weird, if the process.php returns anything crazy like filling a div tag full of info, then your autofocus pulling the page down.
still thinking
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
There is a lot wrong here, but we are not concerned with coding to standards we just need it fixed.
Try removing the autofocus="autofocus". I need to see if you have any javascript doing anything weird, if the process.php returns anything crazy like filling a div tag full of info, then your autofocus pulling the page down.
still thinking
bpaluzzi
macrumors 6502a
It's most likely the autofocus that is causing the problem. However, just a comment -- that specific block of code is 100% standards compliant. Absolutely nothing wrong with it.
960design
macrumors 68040
autofocus and required are html5 standards so lets check out the standards:
----------------------------------------------------------------
1. autofocus ( should just be autofocus, not autofocus="autofocus" )
http://dev.w3.org/html5/spec/single-page.html#attr-fe-autofocus
2. required ( should just be required, not required="required")
http://dev.w3.org/html5/spec/single-page.html#attr-input-required
3. input type should not close with old school xhtml "/>" just ">"
http://dev.w3.org/html5/spec/single-page.html#attr-input-required
Final Jeapordy note to #3: input element has not closed with a /> since before 1999. Here are the HTML4.01 standards: http://www.w3.org/TR/html401/interact/forms.html#h-17.4
just, never mind, I don't know what I'm talking(writing) about 🙂
bpaluzzi
macrumors 6502a
You need to do a bit more reading. The short and long form of boolean attributes are both equally valid. required is no more "correct" than required="required".
http://dev.w3.org/html5/spec/single-page.html#boolean-attribute
"If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace."
Same with the self-closing tag.
http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag
"Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing."