Yes, that's what I meant and it takes care of an error that was occurring sometimes when the window was resized. But I see now that it still doesn't move the footwrap on vertical scrolling. I was so happy to get rid of the error, I missed that. For that we need to detect the scrolling of the wrapper because this new markup makes it the element that scrolls, not the window -
Replace:
Code:
<script>
$(window).scroll(function () {
$("#footwrap").css({top: -$(window).scrollTop()});
});
</script>
with:
Code:
<script>
jQuery(function($){
$('#wrapper').scroll(function(){
$("#footwrap").css({top: -$('#wrapper').scrollTop()});
});
});
</script>
But the jquery.scrollTo.js script scrolls to the top of the element unless you specify the axis. That makes the scroll state of the footwrap go back to 0 when using the jquery.scrollTo.js script's scrollTo() function. To avoid that, specify the 'x' axis in the two places scrollTo is used, here:
Code:
$('#wrapper').scrollTo($(this).attr('href'), 800, {axis: 'x'});
and here:
Code:
if($('a.selected').size()){
$('#wrapper').scrollTo($('a.selected').attr('href'), 0, {axis: 'x'});
}
However, there's something still a bit off and I'm not sure of the solution or if it's a real problem but there often is no vertical scrollbar. I'm thinking this is because the page tries to layout so that one isn't necessary. If the content of the items were taller, this might not be an issue. Also, sometimes the scrollbar appears to fill its track which normally signifies that no scrolling or very little scrolling can be done. When this happens it happens in cases where more scrolling than that is possible, at least to my eye. Again this might be due to the items being so short. But I think this may persist even with taller items. It can probably be lived with if it does.
Except for subtle differences in layout, it still doesn't seem to matter which jQuery version is used. I would recommend 1.6.4 or the latest (1.7.1) though for a greater chance of compatibility with the latest browsers. Certain versions should be avoided, like early sub versions in the 1.4 and 1.6 versions. Some of those were buggier than most.
Here's my full working code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll Horizontally</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800, {axis: 'x'});
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
if($('a.selected').size()){
$('#wrapper').scrollTo($('a.selected').attr('href'), 0, {axis: 'x'});
}
}
</script>
<script>
jQuery(function($){
$('#wrapper').scroll(function(){
$("#footwrap").css({top: -$('#wrapper').scrollTop()});
});
});
</script>
<style>
body {
height:100%;
width:100%;
margin:0;padding:0;
}
#wrapper {
width:100%;
height:100%;
position:fixed;
top:0;
left:-1px;
background-color:#ccc;
overflow:auto;
}
#mask {
width:500%;
height:100%;
background-color:#eee;
}
.item {
width:20%;
height:100%;
float:left;
background-color:#ddd;
}
.content {
width:400px;
height:300px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
#foot { background-color:#f00;
padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
}
#footwrap { background-color:#036;
position:fixed;
top:0;
left:0;
width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
z-index:100;
}
</style>
</head>
<body>
<div id="footwrap"><br>
<div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div>
<br>
</div>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">item1
<a href="#item1" class="panel">1</a> |
<a href="#item2" class="panel">2</a> |
<a href="#item3" class="panel">3</a> |
<a href="#item4" class="panel">4</a> |
<a href="#item5" class="panel">5</a>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">back</a></div>
</div>
</div>
</div>
</body>
</html>
div fixed pos x but scrolls y
Reply With Quote
Bookmarks