Hi,
I am trying to emulate some of the features of the site at:
http://www.experiencialecom.com.br/experiencialecom/Portugues/I like the fact that when you click on a menu item, the entire screen scrolls to the desired spot.
I looked at the source code of this site, and it looks like they use jquery and coda-slider (a jquery application).
In my webpage, I do get the panels to slide, but I want to expand the panels so that each fits the entire width of the screen. I thought all I need to do was modify the "ready" function so that it gets the width of the monitor, and then sets the css of the panel (and its containers) to have that width.
That did not work. It did expand the widths of the containers, but not of the panel.
Once I have that working, I'd like to expand the height of the panel to fit the screen. This might cause a problem in that the menu would be covered, but I think I would do is set the menu to be in a div with a "position:absolute" attribute, so that it stays put while everything else scrolls.
I've pasted a few relevant statements below so you can see my modifications: (anything with the word "monitorwidth" is from me)
var MonitorWidth = window.screen.width;
var MonitorHeight = window.screen.height;
$wrapper.css('width',MonitorWidth);
$slider.css('width',MonitorWidth);
var horizontal = true;
if (horizontal) {
$panels.css({ 'float' : 'left', 'position' : 'relative' , 'width' : MonitorWidth
});
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);} // WHY do they use 'offsetWid
// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden', 'width', MonitorWidth );
Now as far as the webpage goes, here is a fragment that lets the above make sense, but also introduces another issue:
<div id="wrapper">
<div id="slider">
<ul class="navigation">
<li><a href="#sites">Sites</a></li> <li><a href="#files">Files</a></li> <li><a href="#editor">Editor</a></li> <li><a href="#preview">Preview</a></li> <li><a href="#css">CSS</a></li> <li><a href="#terminal">Terminal</a></li> <li><a href="#books">Books</a></li>
</ul>
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="sites">
<div class="panel-wrapper" id="dsites"><p> </p></div>
<div class="fundo_00"></div>
<h2 style="z-index:100">Sites</h2><p style="z-index:100">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p></div>
<div class="panel" id="files">
<div class="panel-wrapper" id="dfiles"><p> </p></div>
<div class="fundo_01"></div>
<h2>Files</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p></div>
AFTER THIS there are several more divs of class 'panel'.
Any help would be appreciated.
-- Gidmeister