SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question HELP with scrolling to page centre using js

    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.

    Code HTML4Strict:
    <!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!

    Regards,
    Team 1504.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    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. ?

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You got it. Instead of using scrollTop, use scrollLeft, and instead of scrollHeight, use scrollWidth

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It worked! Thanks you very much TommiChi

    Regards,
    Team 1504

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    $(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 ||

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by team1504 View Post
    But I have heard and found from some experience that mixing JavaScript & JQuery is bad.
    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');
    }
    });

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    I actually own simply JavaScript— haven't read past chapter 2 tho lol.
    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:
    [HIGHLIGHT="JavaScript"]
    $('document').ready(
    function() {
    var viewportWidth= window.clientWidth;

    if(viewportWidth <= 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?

  11. #11
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your CSS definitions would be more efficiently written like this:
    $("#container").css({'margin-left': '-700px', 'position': 'absolute', 'left': '50&#37;', 'height': '1098px'});


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •