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!
To select multiple elements of an html page using multiple elements selector, we pass the element names inside parenthesis, in double quotes, separated by commas. For example: $(“div, p, h2”) this will select all the div, p and h2 elements of a page.
You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.
With jQuery selectors, you can find or select HTML elements based on their id, classes, attributes, types and much more from a DOM. In simple words, you can say that selectors are used to select one or more HTML elements using jQuery and once the element is selected then you can perform various operation on that.
Description. This Multiple Elements selector selects the combined results of all the specified selectors E, F or G. You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.
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.
2Cents:
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) |
| || || || |
----------------------------------------------------------------
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);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With