How to handle many elements in jQuery?

Question

I am looking to create a site composed of different panels. Let's say we have 4 panels. Each panel takes up the whole screen at a given point in time, and looks something similar to this

--------------------------------
|     home     ||     about    |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------
--------------------------------
|    contact   ||     jobs     |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------

Let's say I now click on the "jobs" link through the home page. I'd like the screen to scroll with an animation vertically, to the bottom right hand corner of the container that contains all the items.

This is not that much of a problem, and I am aware I can achieve that with a plugin such as ScrollTo.

Now imagine that instead of just 4 pages, I have 16. This plugin can easily be scaled, but since so many elements exist on the page (each panel contains images, text, menu, titles, etc...), the site slows down substantially.

I can resolve this problem when I am already on a given page, by hiding all the other pages -- but how can I handle all the elements while animating from one panel to another? Any ideas for implementation?

Thank you!

Answer 1

Don't load everything to the DOM, use ajax and pull in what you need and remove what you don't. I worked on a site very similar to what you describe once and I went the "hide everything in the dom" route, I eventually had to re-write parts of it to use ajax because the page was simply taking too long to load.

Answer 2

2Cents:

• by default all panels except the active are hidden AND have an additional css class (e.g. "panel-simplified")
• panel-simplified reduces the layout to the absolute minimum: no advanced css3 techniques, only selected content is shown, maybe even dummy content
• on click the target panel gains full beauty / loses panel-simplified
• only the necessary panels, which are "passed along" are shown (min: 2panels, max: ~ 10 panels (0,0) -> (4/4))

e.g. State before (0,0) -> (2,2). Hidden panels without a label.

----------------------------------------------------------------
|    (0,0)     ||     (1,0)    ||     (2,0)    ||     (3,0)    |
|    FULL      ||      SIMP    ||              ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,1)     ||     (1,1)    ||     (2,1)    ||     (3,1)    |
|     SIMP     ||     SIMP     ||      SIMP    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,2)     ||     (1,2)    ||     (2,2)    ||     (3,2)    |
|              ||     SIMP     ||      FULL    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,3)     ||     (1,3)    ||     (2,3)    ||     (3,3)    |
|              ||              ||              ||              |
----------------------------------------------------------------

Answer 3

not sure how's your html code is, but i agree with sjobe suggestion.

i'm guessing you have a menu like so:

<ul id='menu'>
    <li><a href='#home'>home</a></li>
    <li><a href='#about'>about</a></li>
    <li><a href='#contact'>contact</a></li>
    <li><a href='#jobs'>jobs</a></li>
</ul>

and some divs like so:

<div id='container'>
    <div id='home'></div>
    <div id='about'></div>
    <div id='contact'></div>
    <div id='jobs'></div>
</div>

now the javascript:

// when DOM's ready
$(document).ready(function() {
    // get the current hash or default to #home if none
    hash = window.location.hash ? window.location.hash : '#home';

    // construct the file name to load
    file = hash.replace('#', '/') + '.html';
    // load the file to the div
    $(hash).load(file);
    // and scroll to it
    $.scrollTo(hash, 800, {easing:'elasout'});

    // and create handler for menu click
    $('#menu a').click(function(event) {
        event.preventDefault();
        hash = this.hash;
        $.scrollTo(hash, 800, {easing:'elasout'});
        });
    });

// when page (incl scripts, styles, images, etc) ready
$(window).load(function() {
    // iterate through each menu
    $('#menu a').each(function() {
        // get its hash
        hash = this.hash;
        // construct the file name to load
        file = hash.replace('#', '/') + '.html';
        // preload the file to the div
        $(hash).load(file);
        });
    });