Reloading One Page Website

Discussion in 'Web Design and Development' started by d4rklamp, Aug 24, 2012.

  1. d4rklamp macrumors regular

    Joined:
    Jan 17, 2009
    #1
    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).
     
  2. AFPoster macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #2
    It's helpful to post the code or at least a link so we can take a deeper look.
     
  3. d4rklamp thread starter macrumors regular

    Joined:
    Jan 17, 2009
    #3
    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!
     
  4. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #4
    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
     
  5. d4rklamp thread starter macrumors regular

    Joined:
    Jan 17, 2009
    #5
    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?
     
  6. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #6
    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
     
  7. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #7
    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.
     
  8. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #8
    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 :)
     
  9. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #9
    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."
     
  10. 960design, Aug 27, 2012
    Last edited: Aug 27, 2012

    960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #10
    Indeed I do! Thank you!

    just me
     

Share This Page