Jump to content


Page/site structure

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've been learning JavaScript and jQuery for a few months now and it's been a bit of a learning curve.


So far all of my sites have been using HTML/CSS3 only.


Now I would like to push things further. I keep seeing lots of sites like these (this is one example)-




What I am unsure about is- is this website basically one page?


If I created one very long page with all of sections that animate in and out, and which likely contain lots of pictures, videos, etc.


Would this overload the browser and affect the smoothness of animations?


This is something I would like to try so to save some time I would be grateful for any pointers you may have.

Link to comment
Share on other sites

I also am inspired by sites like that and other award winning sites.


One way to do that is via SPA - single page architecture, where you 'ajax' load a 'fragment' on navigation.

My site - masons-foundation.org you can navigate, but if you notice the index/menu is not loaded, only the 'middle' is replaced (via Ajax).


I plan to teach such ways so that road is paved: SPA.
But I'm not ready yet, but if you someone ping me I can give you my suggestions. Also I'm using SASS and Pug (and GSAP) and DropBox and such to try to mek it easier.

.hth, .V

Link to comment
Share on other sites

Hi Vic!


Many thanks for your reply!


I ha a look at your website and I think this is exactly what I am looking for. One question (and even though I did look this up I do not quite understand the difference)- why use Ajax and not Json?


So far I have completed about ten courses on JavaScript and jQuery on Treehouse and Lynda.com, and I also got two very good books- Mark Myers' A Smarter Way to Learn jQuery and Ryan Benedetti and Ronan Cranley's Head First jQuery.


Any recommendations on the next course to do or any good books that could help me master this technique.


Although I have made lots of progress in the last few months I have to say that I do not find it easy!

Link to comment
Share on other sites

Hi 335.

It's just called Ajax - but your are loading a fragment-page. 

Like this:

  $VCM.replace = function (el, pg) {
      url: pg+ '.html'
      , dataType : 'html'
      , crossDomain: true
      , error: function (xhr, status, err) {
          $(document).trigger('stateNotFound', pg)
          //$VCM.event.dispatch('stateNotFound', pg)
      , success: function(res) {
         setTimeout(function() {
            el.innerHTML = res
            var sec = document.createElement('section')
            sec.innerHTML = res
            var x= sec.getElementsByTagName('script')
            for (var i = 0; i < x.length; i++) {
            $('#main').css("height", 'auto')
         }, 500)
         }// suc
See the jquery ajax call replaces an element w/ newly loaded element. (Ignore the name ajax -it's just an http request).

But if you can wait some time, I'm happy to show you via screen share a few demos.
I recommend you learn jquery, SASS, Pug, Banner ads: 
I do think SPA is the future and I plan to write a book on it, it would be great to get a 'reviewer'. 
Link to comment
Share on other sites

Hi Vic!


That code is very hard for me to read or understand but as I said I am not very advanced in the language!


However, I have a bit more than ten years experience of teaching at university so I could definitely work with you on this. 


When I first started to teach and some time had gone by I started realising my own mistakes in trying to teach some complex concepts to students who are so much less clued up. Teaching what you know, what I learned as the time went by, is also a skill in itself!


You should explore the whole process of learning before you start writing the book! Ryan Benedetti and Ronan Cranley's Head First jQuery, as I mentioned earlier employs some very effective techniques. Paul Tough's How Children Learn would also be a very good read!


I think lots of people on this forum would give you loads of help if you really wanted to make that book!

Link to comment
Share on other sites

Sounds like a good background. 

I'm happy to collaborate on this. ex: paving the road for SPA and 'advanced' sites.



I just need a bit more time to get material ready. Also I plan to teach a 2 day class as a way to 'test' out the material. 

Link to comment
Share on other sites

I would be very interested to learn and I think I would definitely be able to help you to present the material...


If you want to test I would be willing to participate and I think I would be a very good tester! :)


You can message me if you like!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.