One Page Scroller

In week twelve we learned about one page scrolling websites and about slick navigation. This is just a site with all the content on one page, and we want all the links in the navigation bar to go to the different sections of the page. So first I set up a regular HTML page with a link to an external reset and a CSS style sheet in the Head. Along with some Section tags and a navigation bar with the anchors linked to those sections of the page.

Now the first thing I want to do is make sure my mainNav is always visible at the top of the page no matter what section the user is on so that they can navagate to other sections easily. add a “position:fixed” in the mainNav id tag:
#mainNav {
height:50px;
line-height:50px;
text-align:center;
background-color:rgba(60,120,195,0.7);

 position:fixed;
    left:0;
    top:0;
width:100%;
}

I also want my navigation to be in line with “#mainNav ui li { dislay:inline; }” in the CSS as well, but then any designs to your anchor tags in the mainNav list items wont show without a “display:inline-block;” at the end of it. for example this wont show up:
#mainNav ul li a {
padding:0 10;
height:50px;
background-color:#000;
color:#FFF;
}

unless you add “display:inline-block;” at the end…
#mainNav ul li a {
padding:0 10;
height:50px;
background-color:#000;
color:#FFF;
 display:inline-block;
}

Now I want the user to only see the first section (home) when they visit my one page scroller sites, and to do this all we need to do is set the height of our home id tag to 100vh in the CSS document.

Also, we generally like to have our one page scollers scoll smoothly whenever the user clicks on one of the anchor tags, and we can do this in 3 seps:

  1. First we need jQuery linked in the head using script tags and make sure that you put it in its own js folder within the root folder. (If you don’t have jQuery then download it online and put the .js file you download in a js folder within the root folder)
  2. Next get your smooth scrolling J Query from https://css-tricks.com/snippets/jquery/smooth-scrolling/ and put it in your js folder as well. Then link  this jQuery file in the head of your document as well.
  3. Thirdly, we need to hook up the smooth scoll by copying and pasting this after your jQuery inside the Head:
    //https://css-tricks.com/snippets/jquery/smooth-scrolling/
    $(function() {
    $(‘a[href*=”#”]:not([href=”#”])’).click(function() {
    if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
    if (target.length) {
    $(‘html, body’).animate({
    scrollTop: target.offset().top
    }, 1000);
    return false;
    }
    }
    });
    });

To get your navigation to highlight you need to do 5 things.

  1. First we need jQuery linked linked in the head, if you have not downloaded and linked it in he head already for the smooth scrolling then make sure to put get it, put it in its own js folder within the root and link it in the head of your HTML using with “” tags.
  2. get current class script
    //CURRENT CLASS
    $(document).ready(function () {
    $(window).scroll(function () {var y = $(this).scrollTop();$(‘.link’).each(function (event) {
    if (y >= $($(this).attr(‘href’)).offset().top – 90) {
    $(‘.link’).not(this).removeClass(‘active’);
    $(this).addClass(‘active’);
    }
    });});
    });
  3. add class=”link” to your anchors.
    <nav id=”mainNav”>
    <ul>
    <li><a href=”#home” class=”link”>Home</a></li>
    <li><a href=”#about” class=”link”>About</a></li>
    <li><a href=”#services” class=”link”>Services</a></li>
    <li><a href=”#contact” class=”link”>Contact</a></li>
    </ul>
    </nav>
  4. add class active to first anchor.
    <nav id=”mainNav”>
    <ul>
    <li><a href=”#home” class=”link active”>Home</a></li>
    <li><a href=”#about” class=”link”>About</a></li>
    <li><a href=”#services” class=”link”>Services</a></li>
    <li><a href=”#contact” class=”link”>Contact</a></li>
    </ul>
    </nav>
  5. make and active class in the CSS document
    /* REUSABLE CLASSES */
    .active {background-color:#F00!important;}

To add a Slick Nav, follow these 5 steps:

  1. Make sure you have jQuery linked in the head, so if you have not yet downloaded and linked it in he head already for the ether the smooth scrolling or the highlighting, then make sure to put get it, put it in its own js folder within the root and link it in the head of your HTML using with “” tags first. Otherwise just proceed with step two.
  2. Download slick nav from http://slicknav.com/ and get the js file and the .css file and put it in your document.
  3. Then link to the slicknav .ss and slicknav.js documents in the head
    <!–SLICKNAV STUFF–>
    <link rel=”stylesheet” href=”css/slicknav.css” />
    http://js/jquery.slicknav.js

    $(function(){
    $(‘#menu’).slicknav({
    label:””,
    closeOnClick: true
    });
    });
  4. and in the unordered list within the nav add a menu id
    <ul id=”menu”></ul>
  5. Then you can stylize your slicknav in the CSS document, to make your slicknav background invisable for example just creating a slicknav_menu class and define it in the CSS document. (.slicknav_menu {display:none;}) As a mobile friendly site I also defined it in the media query as well:
    @media screen and (max-width: 45em) {
    /* #menu is the original menu */
    #menu, #mainNav {
    display:none;
    }
    .slicknav_menu {
    display:block;
    position:fixed;
    width:100%;
    }
    }

You can also change the courser whenever you mouse over the navigation bar by adding cursor:pointer; to the .active class tag.
.active {
background-color:#F00!important;
cursor:pointer;}

To make the color smaller for whatever reason, add both an outline and outline offset to the .active class.
.active {
background-color:#F00!important;
cursor:pointer;
outline:5px solid #000;
    outline-offset:-5px;}

I also added a form at the bottom of my page. To do this I need create the input areas and text areas in the HTML and then we need to link that that to a form.php file so that we can tell the site what to do with the users information.

  1. The HTML code:
    <section class=”col33″>
    <form action=”form.php” method=”post” enctype=”multipart/form-data”><label></label>
    <h1 class=”title”>Contact</h1>

    <label></label>
    <input name=”name” required=”required” placeholder=”Your Name”>

    <label></label>
    <input name=”email” type=”email” required=”required” placeholder=”Your Email”>

    <label></label>
    <textarea name=”message” cols=”20″ rows=”5″ required placeholder=”Message”></textarea>
    <input id=”cancel” name=”cancel” value=”Cancel” />

    <input id=”submit” name=”submit” type=”submit” value=”Submit”>
    </form>
    </section>

  2. Then I created a new form.php document that I placed in the root folder with the following code:
    <?php
    $name = $_POST[‘name’];
    $email = $_POST[’email’];
    $message = $_POST[‘message’];
    $from = ‘From: lufatest.com’;
    $to = ‘blagojevicgordan@gmail.com’;
    $subject = ‘Email Inquiry’;$body = “From: $name\n E-Mail: $email\n Message:\n $message”;
    ?>

    <?php
    if ($_POST[‘submit’]) {
    if (mail ($to, $subject, $body, $from)) {
    echo ‘alert(“Thank you for your email!”);’;
    } else {

    echo ‘<p>Oops! An error occured. Try sending your message again.</p>’;
    }
    }

    ?>

  3. and finally i customized it in my CSS document.
    /*FORM*/
    form input, form textarea {
    display:block;
    width:96%;
    margin:1%;
    padding:1%;
    border-radius:4px;
    font-family:Arial, Helvetica, sans-serif;}

http://www.lufatest.com/humber/gdpw/gordan/_9_interor_design/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s