How to calculate the actual screen distance jQuery?

Question

I want to place an Ad in a page column. When I scroll down, I want the Ad to follow all the way, but position in the vertical middle of the page. Using the script right now can only set a certain distance but cannot set exact 50% distance.

I have tired $window.height()/2 or $document.height()/2, but they calculate my Table height instead of the actual screen height. How to solve this? Thanks!

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
$(function () {

var $sidebar = $("#sidebar"),
    $window = $(window);

$window.scroll(function () {
    if ($window.scrollTop() > $window.height() / 2) {

        $sidebar.css('position', 'absolute');
        $sidebar.css('top', $window.scrollTop() + $window.height() / 2);
        $sidebar.slideDown(500);
    } else {
        $sidebar.css('position', 'auto');
        $sidebar.css('top', 'auto');
    }
});

});
</script>
</head>

<body>

<br><br>
<table bgcolor="#CCCCCC" width="800" height="3000" align="center" border="1">
<tr>
<td width="150" valign="top">
<div style="width:100px;height:100;background:white;"></div>
<br>
<div style="width:100px;height:100;background:blue;"></div>
<br>
<div style="width:100px;height:100;background:yellow;"></div>
<br>
<div style="width:100px;height:100;background:pink;"></div>
<br>
<div style="width:100px;height:100;background:maroon;"></div>
<br>
<!-- AD -->
<div style="width:100px;height:100;background:red;" id="sidebar">test</div>

<br>

</td>
<td width="500"></td>
<td width="150"></td>
</tr>
</table>

</body>
</html>

score 1 · Answer 1 · answered Aug 20 '13 at 07:46

1

Try screen.height to get actual height. Reference

answered Aug 20 '13 at 07:46

Amit

15,217
8
46
68

Bigxiang · Accepted Answer · 2013-08-20T08:47:51.283

1

From jquery document, $(window).height(); should return height of browser viewport.

I represent the demo based on your html and js. It looks like your site now :)

see it: http://jsfiddle.net/FrFsP/1/

edited Aug 20 '13 at 08:47

answered Aug 20 '13 at 08:01

Bigxiang

6,252
3
22
20

Nice one I think this is what he wants to achieve .. @IamRan – Vaibs_Cool Aug 20 '13 at 08:07
Hmmm it's close but not exactly... Can you check this website? http://live1.7m.cn/ The Ad in the middle column will stack in place at first, only when scroll over, it will stay in the middle of the page. Btw, I copied your scripts and tested and found it only work on IE but not on chrome... – Iam Ran Aug 20 '13 at 08:18
it's weird, I am using chrome, I wrote the demo using chrome... I will visit the site and take a try. – Bigxiang Aug 20 '13 at 08:22
Thank you dear. But still only work on IE, chrome not working... what script should I call for this code? Is this one okay? http://code.jquery.com/jquery-1.9.1.js – Iam Ran Aug 20 '13 at 09:39

score 0 · Answer 3 · edited May 23 '17 at 10:31

0

You need window.innerHeight to get the real dimensions (for modern browsers). Take a look at JavaScript - Get Browser Height for a small wrapper function.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 20 '13 at 07:47

ranieuwe

2,268
1
24
30

score 0 · Answer 4 · answered Aug 20 '13 at 07:48

0

If I got the idea right, I think this is what you are looking for just check out this example to see if this is it

If it's not what you are looking for, please can you clarify a little more?

answered Aug 20 '13 at 07:48

Labib Ismaiel

1,240
2
11
21

hmm seems not, please kindly check this site and see. http://live1.7m.cn/pk_live_ft.aspx?view=odds&match=&line=no – Iam Ran Aug 20 '13 at 07:52
I mean the 3 small Ad inside the column of the page, when it scroll down it will locate at the middle of the page. – Iam Ran Aug 20 '13 at 07:53

score 0 · Answer 5 · answered Aug 20 '13 at 07:52

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

As documented here: http://api.jquery.com/height/

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}
$("div.target:nth-child(1)").center(true);
$("div.target:nth-child(2)").center(false);

JSFIDDLE DEMO

no matter I change the parameters to outerheight or innerheight or screen.height, it's still calculating the height of my table. I scroll over the red box is move the the 1/2 height of my table instead of middle of the screen. Should I make some change in the HTML instead? — Iam Ran, Aug 20 '13 at 08:00

How to calculate the actual screen distance jQuery?

5 Answers5