HELP with scrolling to page centre using js

JavaScript
1

Hello,
I was wondering if someone could help me write some javascript that scrolls to the centre of a page onDocumentReady. Except that it works in most browsers.
With some help i developed this: Of course I have to change it to on documentReady instead of onClick of a paragraph.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrap {
    width:1300px;
    margin:auto;
    padding:20px;
    border:1px solid #000;
    background:#ffc;
}
#content {
    width:900px;
    background:red;
    margin:auto;
}
h1 {text-align:center;}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p id="trigger">Click on me to go to the centre of the page</p>
<div id="wrap">
    <h1><a href="#content">test</a></h1>
    <div id="content">
        <p>the content the content the content the content the content the content the content the content </p>
    </div>
</div>
<script type="text/javascript"> 
 $("p").click(function () { 
      location.hash = "content";
    });
</script
</body>
</html>

Maybe there is some jQuery we could use to write this because jQuery works in most broswers.

So, I am hoping that someone here could help me write some browser-compatible JavaScript or JQuery that scrolls to the centre of a website when the page i loaded and ready.

Thanks in advance and hope to hear from you soon! :slight_smile:

Regards,
Team 1504.

2

Ah okay its window.clientHeight!

Also if I wanted to write some CSS inside that if statement after the scroll left action… I know jQuery has a. CSS() function in there API…But I have heard and found from some experience that mixing JavaScript & JQuery is bad.

How could I write, lets say, margin-left:-700px; style to the element wit the id #container using JavaScript?

Thanks in advance,
Team 1504

3

That is absolutely no true, you just need to know what you are doing. A perfect example of it is the source code we have been working with this far, that is in fact a mix between jQuery and regular JS…

What people need to realize is that jQuery does not suddenly make you a good coder, it just means that if you are a good code coder, you have less footwork to do, especially with cross-browser stuff. My point is that every JS coder should work on their skills and stop blaming the tools. Actually if you are looking for a good book on Javascript, I know that Sitepoint has a few (such as Simply Javascript).

Anyway, I would modify our code as follows:
$(document).ready(function() {
var viewportheight = window.clientHeight;
Var viewportwidth=window.clientWidth;

If(viewportwidth <= 1024 || viewportheight <= 768) {
$(‘body’)[0].scrollLeft = parseInt($(‘body’)[0].scrollWidth / 2 );
$(‘body’).css(‘margin-left’, ‘-700px’);
}
});

4

$(document).ready(function() {
var viewportheight = window.clientHeight;
Var viewportwidth=window.clientWidth;

If(viewportwidth <= 1024 || viewportheight <= 768) {
$(‘body’)[0].scrollLeft = parseInt($(‘body’)[0].scrollWidth / 2 );
}
});

The scrollLeft part of the script will fire if viewportheight OR if viewportwidth are true. If you need both conditions to be true, then use && instead of ||

5

I actually own simply JavaScript— haven’t read past chapter 2 tho lol. :slight_smile:
Well thank you very much for reassuring me or confirming that one can fuse Js and jQuery.

If I wanted to do both the centering and the writing the CSS then the script would be something like this:


                 $('document').ready(
                         function() {
                                var viewportWidth= window.clientWidth;

                                 if(viewportWidth &lt;= 1024 )
                                     {
                                        /* scroll to horizontal centre */
                                         $('body')[0].scrollLeft = parseInt($('body')[0].scrollWidth /2);

                                         /* the styling that is added upon meeting the above if condition*/
                                         $("#container").css('margin-left' , '-700px');
                                         $("#container").css('position' , 'absolute');
                                         $("#container").css('left' , '50%');
                                        $("#container").css('height' , '1098px');
                                      }
                              });
                       [ /HIGHLIGHT]
Does that look valid, efficent, and right I guess?
6

Tommi,
How would one write that in an if statement with the condition of the viewport’s height is less than or equal to 768px and width is less than or equal to 1024 PC

So $(document).ready(function() {
var viewportheight = window.height;
Var viewportwidth=window.width;

If( (viewportwidth <= 1024 ) || (viewportheight <= 768 ) )
{
$ (‘Body’).scrollLeft = parseInt($(‘body’).scrollWidth / 2 );
}
});

Something like that?

7

It worked! :slight_smile: :weee: Thanks you very much TommiChi

Regards,
Team 1504

8

I suppose you could do something like this:
$(document).ready(function() {
$(‘body’)[0].scrollTop = parseInt($(‘body’)[0].scrollHeight / 2);
});

Let me know how this works out for you.

9

You got it. Instead of using scrollTop, use scrollLeft, and instead of scrollHeight, use scrollWidth

10

Your CSS definitions would be more efficiently written like this:
$(“#container”).css({‘margin-left’: ‘-700px’, ‘position’: ‘absolute’, ‘left’: ‘50%’, ‘height’: ‘1098px’});

11

Hmm well I was talking about the horizontal centre not the vertical centre.
so is it valid to do something like this:
$(‘body’)[0].scrollWidth/2

In place of the scrollHeight/2. ?