We Keep Coding

How to display element on screen but not at the top of the screen in html/css?

I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:
My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.
Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).
Thanks in advance!

var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;
Then position it relative to viewportX and viewportY.

I use this small jQuery extension to set something to center on the screen:
(function($)
{
$.fn.centerMe = function(centerIn)
{
var containerWidth = $(centerIn).width();
var containerHeight = $(centerIn).height();
var elWidth = $(this).width();
var elHeight = $(this).height();
$(this).css('left', containerWidth / 2 - elWidth / 2);
var adjTop = containerHeight / 2 - elHeight / 2;
$(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);
Usage is basically: $('#elemToCenter').centerMe(window);

jquery, columns equal heights and at least as tall as the browser window

I'm using the following bit of jquery to make the two main columns on my page the same height.
var $toEqualize = $('.equalheightbox');
$toEqualize.css('height', (function(){
return Math.max.apply(null, $toEqualize.map(function(){
return $(this).height();
}).get());
})());
Which works great except if the content of either div isn't big enough to stretch to the bottom of the page then the two columns are the same height but there's an unsightly gap at the bottom of my page. I'd like the columns to be the same height but also to be at least as tall as the browser window being used to show the page.
Anyone any ideas?

Not tested but that should do it:
var $toEqualize = $('.equalheightbox');
var wS = $(window).height();
$toEqualize.css('height', (function(){
return Math.max.apply(null, $toEqualize.map(function(){
return wS > $(this).height() ? wS : $(this).height();
}).get());
})());
For explainations:
$(window).height() is the height of the screen of the client (if you want less, check for the height of the parent.
wS > $(this).height() ? wS : $(this).height() // that will select at least the height of the screen (this expression is a shorthand for if (...) { ... } else { ... }

Why don't you add a container for both div, set them to have the full height of the parent and let them grow.

How to Smoothly Prevent a Fixed Element from Scrolling Past A Specified Element

Essentially what I want to do is keep my blog posts' meta information on the screen at all times. As it is, the meta info (title, author, etc.) is displayed to the left of the post content, and I have it set up where the meta information stays on screen smoothly when I scroll down. However, I'm having an issue:
I can't get it to smoothly not scroll over the #comments DIV. It either overlaps or is jumpy, depending on how I tweak the code.
Here is the JS function I'm using:
function brazenlyScroll() {
var element = jQuery(".single-post .headline_area");
var top = element.offset().top - 50;
var elementHeight = 26 + element.height();
var maxTop = jQuery("#comments").offset().top - elementHeight;
var scrollHandler = function() {
if (jQuery(document).width() > 1035) {
var scrollTop = jQuery(window).scrollTop();
if (scrollTop<top) {
element.css({position:"relative",top:""})
} else if (scrollTop>maxTop) {
element.css({position:"absolute",top:(maxTop+"px")})
} else {
element.css({position:"fixed",top:"50px"})
}
}
}
jQuery(window).scroll(scrollHandler);
jQuery(window).resize(scrollHandler);
scrollHandler();
}
That code is included via an external JS file and is called at the bottom of the page. You can see all of this in action here: http://www.rickbeckman.org/dumber-and-dumber-and-dumber/
Any help would be greatly appreciated.

You can make the comments div shrink to right by giving it a 300px padding when meta block reaches maxTop.

I just tested ur code and was able to fix the overlapping by changing 26 to a bigger number, say about 60.
var elementHeight = 26 + element.height();
Hope this helps.

I can't get window.innerHeight on IE7. How to fix?

I can get window.innerHeight on Chrome.
1, How to get this property on IE7 via pure JS?
2, How to get this property on IE7 via jQuery?
Thank you!

Pure JS is difficult; so you'll need a script for that:
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
jQuery on the other hand, is as simple as typing this:
$(window).height();
JS Fiddle link for a live demo
Note: The window size is the size of the result section in JS Fiddle.
Update 1
I found a script that finds the scrollbar size from JQuery Dimensions should have a method to return the scrollbar size:
jQuery.getScrollBarSize = function() {
var inner = $('<p></p>').css({
'width':'100%',
'height':'100%'
});
var outer = $('<div></div>').css({
'position':'absolute',
'width':'100px',
'height':'100px',
'top':'0',
'left':'0',
'visibility':'hidden',
'overflow':'hidden'
}).append(inner);
$(document.body).append(outer);
var w1 = inner.width(), h1 = inner.height();
outer.css('overflow','scroll');
var w2 = inner.width(), h2 = inner.height();
if (w1 == w2 && outer[0].clientWidth) {
w2 = outer[0].clientWidth;
}
if (h1 == h2 && outer[0].clientHeight) {
h2 = outer[0].clientHeight;
}
outer.detach();
return [(w1 - w2),(h1 - h2)];
};
The only problem left is it always adds the scrollbar width & height to the dimensions, regardless if there is a scrollbar or not. One solution to fix this problem is to detect when there is overflow in a web page, and at what dimension (vertical or horizontal).

Javascript: How to capture the height of the content of a website?

I am trying to find the correct Javascript code to capture the height of all the content on a webpage.
I have looked at document.height, window.screen.height, document.body.offsetHeight, bodyScroll, clientArea.style.height, bodyHeight, and document.documentElement.clientHeight.
I am using FireBug to test these values but all (except for the window.screen.height) seem to change as I resize my window, so they are not actual reporting the actual height of the content.
Now, the window.screen.height never changes, even if I change to different pages with different sizes.
How can I determine the total height of the content? Basically I need to know what the scroll bar knows. Th scrollbar knows how much to scroll per page and how much to scroll to reach the end of the content.
Any help would be greatly appreciated.

Try this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
document_height = $(document).height();
document_width = $(document).width();
window_height = $(window).height();
window_width = $(window).width();
alert(document_height + ' x ' + document_width);
alert(window_height + ' x ' + window_width);
});
</script>

Different browers report the size of the window and size of the document in different ways. You can use a library to get around the cross browser problems, like this code in jQuery:
$(document).height();
Without a library, I have used this code to get the dimensions:
var b, h, info;
b = document.body;
h = b.parentNode;
if (window.opera) {
info = { winWidth: b.clientWidth, winHeight: b.clientHeight, pageWidth: h.clientWidth, pageHeight: h.clientHeight };
} else {
info = { winWidth: h.clientWidth, winHeight: h.clientHeight, pageWidth: b.clientWidth, pageHeight: b.clientHeight };
}

var height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);