the right jQuery syntax

Question

<script type="text/javascript">
    $(document).ready( function () { 
        $('#cell').css('height',$(window).height()+'px');
    });
</script>

as you see I have this script that defind the #cell's height to be as the page's height. but outside of this div i got another div that put it top=50% and margin-top=-218px to be in the middle of the screen. because of that, the height of the height of the page is bigger then is should be.

I tried to do something like this but i cant find the right syntax-

<script type="text/javascript">
    $(document).ready( function () { 
        var p = $("mainWrap");
        var position = p.position();
        heightPage = $(window).height()
        heightTop = position.top;
        heightFixed = heightPage - heightTop + "px";
        $('#cell').css('height', heightFixed);
    });
</script>

EDIT: i was able to do this like so

<script type="text/javascript">
 $(document).ready( function () { 
  var s = document.getElementById('cell');
  var fixedHeight = $(window).height() - s.offsetTop;
  fixedHeight = fixedHeight + "px";
  $('#cell').css('height',fixedHeight);
});

thanks for your comments.

for the guy that commented that ask for what i was trying to do: i centered my content by wrapping it with a DIV that pushing it to the middle by 'top:50%' and margin it back to the top so it will be in the middle by 'margin-top:208px' (its the height of the content). besides that, i got a footer that hides under the screen scrolled (no matter what is the resolution of the screen) and because of the centering thing, the footer was too much scrolled.. the top:50% pushed the footer deep down and i had to find a way to push it back up.. that is where the jquery part came in. i know there is a alot of ways to keep the footer down or under the screen but im working with a cms patform and there is alot of bugs and inherited css so it was too complicated.

anyhow everthing is ok now and its working, hope it will be usefull for someone someday.

thanks for the help.

missing a semi-colon on 5th line, for a start. Plus you should wrap the subtraction on line 7 (heightPage - heightTop) + "px"; — musefan
– musefan, Commented May 24, 2012 at 8:44
@musefan, semi-colons are automatically adding by the js engine, that is not the issue. — Ash Burlaczenko
– Ash Burlaczenko, Commented May 24, 2012 at 8:45
Can you explain exactly what you want? It seems to me that you're trying to center an object on the page. For that you normally wouldn't need javascript at all; just CSS. — Wesley
– Wesley, Commented May 24, 2012 at 8:46

Paul · Accepted Answer · 2012-05-24 08:49:31Z

3

var p = $("mainWrap");

needs some indicator if it is an ID (#) or a class(.). For an ID it should look like

var p = $("#mainWrap");

EDIT: As Ash pointed out, p will most probably be undefined and hence the next line will throw an error, because undefined has no property position.

answered May 24, 2012 at 8:49

Paul

9,0523 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ash Burlaczenko Over a year ago

Good spot. You could explain therefore that p is likely to be null. +1 anyway.

Yoshi Over a year ago

@AshBurlaczenko p wouldn't be null, it would be an empty jquery object.

Collectives™ on Stack Overflow

the right jQuery syntax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related