Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Dec 2015
    Posts
    1
    Member #
    52800

    How to position and calculate distances for elements in one-page scrolling websites?

    I'm trying to hand-code one of those one-page scrolling websites. As an example: Titilayo Craig

    I can't share the exact code I have here but the overall idea is that I'm trying to place a chevron at the bottom of the first page which, when clicked, will scroll down to the second page. In addition, links at the top right will scroll down to their respective pages too.

    What I'm having trouble with is how to place the chevron such that it is consistently at the bottom of the first page (above the fold) regardless of screen resolution? In addition, do I manually set a height for the CSS for each page to be the height of the page regardless of screen resolution? I am not sure how to go about doing this.

    HTML Code:
    <body>
        <section id="first-page">
            //content
            <span class="chevron-wrapper"></span>
        </section>
    
        <section id="second-page">
            //content
        </section>
    
        <section id="third-page">
            //content
        </section>
    
    </body>
    CSS

    Code:
    body
    {
        background-color: #FFFFFF;
        align: 100%;
    }
    
    #first-page
    {
        /* is this even right? or should I do screen.height instead */
        /* or should it be a set pixel value? If so, how will it accommodate different resolutions? */
        height: 100%; 
    }
    
    #second-page
    {
        height: 100%; 
    }
    
    #third-page
    {
        height: 100%; 
    }
    
    .chevron-wrapper /* Should be at bottom of first page */
    {
        margin-top: 15%; /* separation from first-page content but I found that doing this percentage-wise gets wider and wider as the page size increases */
        text-align: center;
        width: 100%;
    }
    Any help in regards to positioning things would be great. Thanks!

  2.  

  3. #2
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    I recently made a one page website. Here is how I set the height of the "home" page (well, more of a section than a page but you know what i mean). Siply use the following jQuery:

    Code:
    $( window ).resize(function() { $("#home").height($(window).height()); });
    That will make your home div the height of your screen resolution. Then you can position the down arrow thingy however you would like. Is that helpful? If you have any questions let me know.

  4. #3
    Junior Member
    Join Date
    Dec 2015
    Location
    Athens, Greece
    Posts
    19
    Member #
    52818
    Liked
    1 times
    The right way, to calculate elements sizes, distances and things like that, is
    to use javascript/jquery.
    You can make all your elements visibility:hidden; and when you do your stuff with jquery, to show them to the user.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 02:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com