Menu
I have a small toolbar div that is position:fixed so it moves as the user scrolls. The toolbar is inside a larger div, however I need the toolbar to not scroll out of the parent div - is there any way to do this?
If you don't understand what I mean, take a look: http://flowmainserver.appspot.com/post (I want the love heart and other button not to scroll out of the large image div because they obstruct the comment box)
Is there any way to achieve this with css or will I need javascript? Thanks!
934
First, some other pointers:
<!DOCTYPE> declaration. (using different <!DOCTYPE> declarations may require you to make some changes, including addnig cellspacing="0" cellpadding="0" to <table> tags)<center> element - instead use a combination of margin:auto and text-align:center;.<div> inside an inline level element <a> like this: <a href="/"><div class="title"></div></a>. Instead, give your <a> a display:block; CSS property.text-indent:-10000px; to remove it.<link /> - and sometimes don't <img>. Choose one or the other, and use the appropriate <!DOCTYPE>
alt attributes on <img /> tags and rows and cols on <textarea> tags to validate your HTML document.This will result in much more consistent behavior between browsers and better accessibility. Toss in some <h1>...<h6> headers are you're pretty solid on the SEO too.
As for your question... perhaps if you just made it go behind the comments?
Put this in a .html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://flowmainserver.appspot.com/" /> <!-- remove this when you put it online -->
<!-- Copyright Cal Smith 2010 $(window).height()-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">$(window)._scrollable();</script>
<link href="buttons.css" media="all" rel="stylesheet" type="text/css" />
<link href="main.css" media="all" rel="stylesheet" type="text/css" id="main_css" />
<title>flow | post title</title>
<script type="text/javascript">/*
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
document.location = "http://www.google.com";
}
});
*/</script>
<style type="text/css">
html body {
text-align:center;
}
html body div.pageHolder {
margin:auto;
}
html body a.title {
text-indent:-10000px;
display:block;
}
html body table {
position:relative;
z-index:10;
background:url(imgs/dark_bg.png) repeat;
}
html body table table td {
padding-bottom:5px;
}
</style>
</head>
<body>
<div class="pageHolder" style="margin:auto;">
<a href="/" class="title">Flow</a>
<div class="directory">
<p class="categoryTitle">Post title<span class="categoryTitleBy"> 2 weeks ago by @<a href="#" class="categoryTitleByA">author url</a></span></p>
<div class="postDescription"></div>
<div class="heartOff" title="Click to heart">♥</div>
<div class="commentTab" onclick="$(window).scrollTo( $('#commentBoxTitle'), 380 ); $('#commentBox').focus();" title="Comments">Ξ </div>
<div class="postFull" style="background-image: url(example_full.png); height: 500px; width: 1300px;"></div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<span class="commentBoxTitle" id="commentBoxTitle">Comment</span>
<textarea id="commentBox" class="commentBox"></textarea>
<div align="right"><div class="commentPostButton">Post</div></div>
</td>
<td>
<div class="commentsHolder">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926" class="commentUserPic" /></td>
<td><div class="commentBody">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396" class="commentUserPic" /></td>
<td><div class="commentBody">Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926" class="commentUserPic" /></td>
<td><div class="commentBody">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396" class="commentUserPic" /></td>
<td><div class="commentBody">Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="footer">created by cal smith</div>
</div>
</div>
</body>
</html>
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
