I was trying to modify the code-slider plugin so that it would scroll panels that were the size of the entire screen. (the demo on the jquery site has it moving panels that are rather small). So I thought all I had to do was take each div that sandwiches the panel (several are nested) and set their width in code to be the width of the monitor.
It did not work.
So I simplified the code to show here. I just have the divs, and their css, and the code that sets them to the width of the screen. If you can figure out what I'm doing wrong, I'd really appreciate it.
Here's the entire code, css, and html (its not long):
<STYLE type="text/css">
body {
margin: 10px;
padding: 0;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
background-color: #EDEDEC;
}
#wrapper {
width: 760px;
margin: 0 auto;
}
#slider {
width: 620px;
margin: 0 auto;
position: relative;
}
.scroll {
height: 250px;
width: 620px;
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
background: scroll left bottom;
}
.scrollContainer div.panel {
padding: 20px;
height: 210px;
width:620px;
}
</STYLE>
<script src="/js/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
var $wrapper = $( '#wrapper' );
var $slider = $( '#slider' );
var MonitorWidth = window.screen.width;
var MonitorHeight = window.screen.height;
$wrapper.css('width',MonitorWidth);
$slider.css('width',MonitorWidth);
// if false, we'll float all the panels left and fix the width
// of the container
$panels.css({ 'float' : 'left', 'position' : 'relative' , 'width' : MonitorWidth});
alert('width of panel is: ' + $panels.attr( 'width' ) );
alert('width of scrollContainer is: ' + $container.attr('width'));
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
var $scroll = $('#slider .scroll').css('overflow', 'hidden', 'width', MonitorWidth );
}
);
</script>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="sites"><h2>Sites</h2><p>lots of text goes into the panel here. We want the panel to extend the width of the page, and eventually also figure out how to make it extend the height of the page. Then we want to put a menu on top which will scroll from panel to panel, where each panel covers the entire page. The menu would have absolute positioning, so it would stay on top.</p></div>
</div>
<div class="panel" id="preview"><h2>Preview</h2><p>Here is another panel, this time in Latin: 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</body>
</html>