SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    One-Page Website JQuery

    Hi Everyone,

    I am really starting to dig the "one-page website" approach. I know I can accomplish this by loading various content into one div. But is there JQuery approach whereby we can create one long document and navigate to different sections using targets/named anchors?

    Thanks so much!

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this page http://imakewebthings.com/jquery-waypoints/ - waypoints is a plugin for figuring out where on the page you are.
    And this plugin, jQuery LocalScroll, helps you sort out the local scrolling in a page.

    I'll also point out that single page websites are a little bit the flavour of the month and it's worth spending some time to figure out if that's exactly what you want. Sometimes you end up with sites that are simply too long, take really long to load, convey way to much for a single page and can actually be harder for people to navigate if they aren't thought out well.

    Having said that, with the right site content and creative it's something that can potentially work very well, just make sure it isn't done because "the client saw it somewhere and now they want it" :-)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this page http://imakewebthings.com/jquery-waypoints/ - waypoints is a plugin for figuring out where on the page you are.
    And this plugin, jQuery LocalScroll, helps you sort out the local scrolling in a page.
    I'll play around with them and I'm sure I'll have a couple of questions. I'll let you know. Are there circumstances under which I may need both of these?

    I'll also point out that single page websites are a little bit the flavour of the month and it's worth spending some time to figure out if that's exactly what you want. Sometimes you end up with sites that are simply too long, take really long to load, convey way to much for a single page and can actually be harder for people to navigate if they aren't thought out well.
    Great observation. With that thought, it seems that while too much information may kill a one-page site, other unwanted issues may arise by having too little information to justify multiple server requests with traditional navigation.

    Having said that, with the right site content and creative it's something that can potentially work very well, just make sure it isn't done because "the client saw it somewhere and now they want it" :-)
    Okay. I think I have a very specific purpose in mind for this approach: a "sales", "event registration", or other "promotion(al)" type website, specifically. More clearly, something that is designed to convert visitors.

    The other choice, of course (as mentioned in the original post), would be to dynamically load the information into a big div as it is requested.

    Any other thoughts?

    Thanks so much!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gilmeragency View Post
    I am really starting to dig the "one-page website" approach. I know I can accomplish this by loading various content into one div. But is there JQuery approach whereby we can create one long document and navigate to different sections using targets/named anchors?
    There's an approach that doesn't even need jQuery.

    HTML Code:
    <a href="#section1">Section 1</a>
    
    ...
    
    <div id="section1">
    ...
    </div>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yeah, I saw that same approach at this site http://www.insitedesignlab.com/how-t...-page-website/ and jQuery "smooth scroll" was used. I just wanted to know if there was a different/better approach. But there's really not much (at this point) that I could want to do that your suggestion wouldn't accomplish, Paul.

    Thanks.


Bookmarks

Posting Permissions

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