Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Getting a Javascript page scroll to work in my pages

    Hello,

    I've created a site with pages that each have a fixed header (which is important to me). I've found a fault with this - when hitting page down, the scrolling moves too far - it's not taking into account the height of the header. So when someone hits page down, they'd have to manually move back up a bit to not miss seeing any content. To correct this, the page button scrolling needs to be reduced at the least by how high (in pixels) the header is (186px + the 2px of padding I have below it).

    I came across a Javascript based fix for this here:

    http://jsfiddle.net/bpMCE/

    On that sample page, it works pretty well - even when I copy the code into a new html file and run it in its own page locally.

    However, whenever I try to integrate this Javascript into my pages, it doesn't have an effect. One person who tried to help modify the original Javascript to substitute "header" for "bar", but that's about all the actual progress on getting this to work so far.

    I've setup two jsfiddle pages to show my code:

    This one contains a "dummy" page I've created. My pages are not hosted yet and I'm not quite ready to have the content public. So I set this up, which contains identical code to one of my actual pages, but with generic content substituted.

    http://jsfiddle.net/MMM717/VZfcV/1/


    The modified page scroll Javascript (replacing the "bar" with "header", as noted above) is here, to compare to the original Javascript linked above.

    http://jsfiddle.net/MMM717/w96Hu/


    Does anyone here have an idea what to do with getting this to work in my page? I'm a beginner at this stuff, and tried to figure it out as best I can, but can't get anything to work correctly. Some suggestions others have made ended up messing up my pages in other ways, and still didn't get the Javascript page scroll to work correctly.

    Thanks!


    (I've asked about this in a previous thread, though I posted it in a different room of the forum. Hopefully this might be better solved here. I apologize if this is considered by some as bad form - it's not my intention...)

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Quote Originally Posted by MMM717 View Post
    (I've asked about this in a previous thread, though I posted it in a different room of the forum. Hopefully this might be better solved here. I apologize if this is considered by some as bad form - it's not my intention...)
    If someone works on your problem only to find out it was solved hours ago in an other post intentional or not somebody's mad. Just don't do it. The mods will move it if its in the wrong section.

    You have to find out the height of the viewers window and subtract your header height, then scroll to that when the PgDn key is hit.
    Play with this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    body{
    	margin: 0;
    	padding: 0;
    }
    #header{
    	width: 100px;
    	height: 186px;
    	padding: 0 0 2px 0;
    	background-color: orange;
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    #main{
    	width: 100px;
    	height: 10000px;
    	background-color: blue;
    }
    #mark{
    	position:absolute;
    	top: 740px;
    }
    </style>
    </head>
    
    <body>
    <div id="header"></div>
    <div id="main"><div id="mark">--------------------</div></div>
    
    <script type="text/javascript">
    var MyHeight = window.innerHeight - 186;
    
    window.addEventListener('keyup', function (e) {
    if (e.keyCode === 34) {
    	window.scrollTo(0,MyHeight);
    }
    }, false);
    
    </script>
    </body>
    </html>
    The ------------------ is to see where things are.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I'll try that - thanks! (and for the advice as well).

    I'll let you know how I do with this, or if I have another question...

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I don't think it's bad to post in another forum if you don't get a response in first one *IF* you then post a link from each forum to the other one, so others can see if you've gotten answers in the other one(s).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I gave that a try, Sunfighter. Whenever I tried adding the various #header & #main code, it ended up changing the appearance of the page, even if I didn't include the background color addition (which I guess was to try and help me make adjustments).

    I tried using your new Javascript while leaving my other code as is. It sort of worked. It allowed me to correct the page down scroll length (once I adjusted it further - when I noted the pixel heights above, I forgot that my actual header was a bit taller than I noted and that I needed to also account for the fixed footer height).

    However, the page down scroll only works once. When I hit page down another time, it'll temporarily go further down the page for as long as I hold down the key. Once released, the page will immediately bounce back to where hitting page down once placed the page. No matter how many times I try, it keeps bouncing back. I can manually scroll anywhere, but if I try page down again, it'll go back to that place. This doesn't allow me to test any control of page up.

    What should I do next? Do you need more information from me on something?

    Thanks...

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Double posting and linking to the other post in both posts is ok, but using the Report this post (top-right next to post number) and asking for it to be moved may be better.

    Post your code (Cut and Paste) here using the # mark in the tool bar to generate [code] tags, and we can see where the errors lie.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    What should I be wrapping the #mark div around, sunfighter? All the content? Where should I place the line of dashes?

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    The # or hash mark or pound sign is in the tool bar above you in the message box. Click it and it will give you the tags, place your code between the two tags.

    Put the final code that is still causing your problems there. All the code including css and JS
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I see - originally I thought you meant the additional "mark" coding you had suggested I try!

    BTW - When I tried the page scroll Javascript you wrote, I placed in the page as a .js file. It worked the same when I placed the raw code directly in my page (which is what I did below, so you can see what I added).

    I had altered the pixel innerHeight, but it had the same issue with it jumping back at any height setting:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    <title>XXX</title>
    <meta name="description" content="XXX">
    <meta name="keywords" content="XXX">
    <meta name="geo.region" content="XXX">
    <meta name="geo.placename" content="XXX">
    <meta name="geo.position" content="XXX">
    <meta name="ICBM" content="XXX">
    <style type="text/css">
    <!--
    Access-Control-Allow-Origin: *
    @font-face {
    font-family: 'Century Gothic';
    src: url('../webfonts/CenturyGothic.eot');
    src: local(☺), url('../Fonts/CenturyGothic.woff') format('woff'), url('../Fonts/CenturyGothic.ttf') format('truetype'), url('../Fonts/CenturyGothic.svg') format('svg');
    }
    html, body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #C9D6A0;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }
     
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For
     
    consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they
     
    contain. Remember that what you do here will cascade to the .nav list unless you write a more specific
     
    selector. */
    margin: 0;
    text-shadow: #A2C8CA 0 0 1.00px;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility
    color: #AED6D9;
    font-weight: 500;
    font-size: .92em;
    line-height: 150%;
    }
     
     
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;/* removing the top margin gets around an issue where margins can escape
     
    from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the
     
    divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an
     
    alternate method. */
    text-shadow: #A2C8CA 0 0 1.00px;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility
    color: #AED6D9;
    font-weight: 500;
    font-size: .92em;
    line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it
     
    is surrounded by a link */
    border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the
     
    hover effect. ~~ */
    a:link {
    color: #AED6D9;
    text-decoration: none; /* unless you style your links to look extremely unique, it's best to
     
    provide underlines for quick visual identification */
    }
    a:visited {
    color: #AED6D9;
    text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience
     
    as the person using a mouse. */
    text-decoration: none;
    }
     
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    width: 960px;
    overflow: auto;
    background-color: #603B3D;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    }
     
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image
     
    placeholder that should be replaced with your own linked logo ~~ */
    .header {
    height: 200px;
    width: 960px;
    background-color: #603B3D;
    text-align: left;
    position: fixed;
    z-index: 1000;
    }
    .header img {float: left;}
    .header ul#noBullet {
    margin: 5px 0 0 400px;
    text-align: center;
    list-style: none;
    }
    .header ul li {
    width: 127px;
    margin: 0px;
    float: left;
    }
     
    /* ~~ This is the layout information. ~~
     
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on
     
    their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border
     
    to the div itself, it will be added to the width you define to create the *total* width. You may also choose to
     
    remove the padding on the element in the div and place a second div within it with no width and the padding
     
    necessary for your design.
     
    */
     
    .content {
    margin: 186px 0 0;
    padding: 2px 0;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 1em;
    }
     
    .bigger { font-size:91%; }
     
    .width { width : 930px;
    * + padding-left: 40px;
    * padding-left: 40px;
    }
     
    .picctr { text-align : center; }
     
     
    /* ~~ The footer ~~ */
    .footer {
    height: 21px;
    width: 960px;
      margin: 0 0 0 -480px;
    padding: 9px 0;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 50%;
    background: #603B3D;
    }
     
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the
     
    element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the
     
    element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated
     
    div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }
    body,td,th {
    color: #AED6D9;
    }
    -->
    </style>
    <script type="text/javascript" src="textshadow.js"></script>
    
    <script type="text/javascript">
    var MyHeight = window.innerHeight - 232;
    
    window.addEventListener('keyup', function (e) {
    if (e.keyCode === 34) {
    	window.scrollTo(0,MyHeight);
    }
    }, false);
    </script>
    
    </head>
     
    <body>
     
    <div class="container">
      <div class="header"><img src="Logo.jpg" width="443" height="186">
        <ul>
          <li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
          <li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
    	<li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
    	<li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
    	<li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
    <li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
    <li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
         <li><a href="XXX"><img src="Button.jpg" width="127" height="90"></a></li>
      </ul></div>
      <div class="content">
        <p>&nbsp;</p>
        <p><div class="picctr">
          <img src="dummy picture 1.jpg" width="800" height="429"></div></p>
        <p>This is fake text to fill space here and replace my actual content.</p>
        <p>-----------------------------------------</p>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
    page up/down keyboard buttons.  I need to limit/reduce the scroll when
    performed in this manner by the height of the header and any padding directly
    below it so when one hits page down, no text/content is missed out on without
    having to adjust their position on the page with arrow keys, a thumbwheel,
    etc.</p>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
    page up/down keyboard buttons.  I need to limit/reduce the scroll when
    performed in this manner by the height of the header and any padding directly
    below it so when one hits page down, no text/content is missed out on without
     
    </p>
        <p><div class="picctr"><img src="dummy picture 2.jpg" width="800" height="429">></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
     
    </p><br>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
     
    :
        </p><br>
        <ul>
          <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's public.  I'm trying to hopefully get the
     
    quirks worked out that are being encountered.</li></div></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's public</li></div></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's public</li></div></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's public.  I'm
     
    trying to hopefully get the quirks worked out that are being
     
    encountered.</li></div>
          <br>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's public</li></div></div>
        <br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's public.  I'm trying to hopefully get the
     
    quirks worked out that are being encountered.</li></div></div></ul>
        <p><div class="picctr"><img src="dummy picture 3.jpg" width="800" height="429"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
     
    </p>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
    page up/down keyboard buttons.  I need to limit/reduce the scroll when
    performed in this manner by the height of the header and any padding directly
    below it so when one hits page down, no text/content is missed out on without
     
    </p><br>
        <p>This is generic text inserted to show the problem I'm having <span
     
    class=bigger>(please also see the smaller text near the bottom of this
     
    page)</span>:</p><br>
        <ul>
          <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's public.  I'm trying to hopefully get the
     
    quirks worked out that are being encountered.</li></div></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's public <br>
          I'm trying to hopefully get the quirks worked out that are being
     
    encountered.
          </li></div><br>
          <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div>
          <br>
          <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div>
        </ul>
        <p><div class="picctr">
          <img src="dummy picture 4.jpg" width="800" height="429"></div></p>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
    page up/down keyboard buttons.  <br>
      </p>
      <br>
        <p>This is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.</p>
        <p>&nbsp;</p>
        <HR color="A2C8CA">
        <p>&nbsp;</p>
        <p style="font-size:.8em;">Some additional details on the above:<br>
    </p><ul style="font-size:.8em;">
        <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div>
    <br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's publicThis is text to fill a line item in
     
    this dummy page, to replace the actual content I'll be using for my site once
     
    it's public</li></div></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div><br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is text to fill a line item in this dummy page, to replace the actual content
     
    I'll be using for my site once it's publicThis is text to fill a line item in
     
    this dummy page, to replace the actual content I'll be using for my site once
     
    it's public</li></div></div><br>
        <div class=width><li>This is text to fill a line item in this dummy page,
     
    to replace the actual content I'll be using for my site once it's
     
    public</li></div><br>
        <div class=width><div class="listpad" style="padding-right:15px"><li>This
     
    is generic text inserted to show the problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down, no
    text/content is missed out on without having to adjust their position on the
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show
    the problem I'm having on my page with scrolling up too much when using the
    page up/down keyboard buttons.  I need to limit/reduce the scroll when
    performed in this manner by the height of the header and any padding directly
    below it so when one hits page down, no text/content is missed out
     
    on</li></div></div>
    </ul>
    <BR>
        <p style="font-size:.8em;">Final items noted to demonstrate my site
     
    issues:</p>
        <ul style="font-size:.8em;"><div class=width><li>This is final item
     
    one</li></div>
          <div class=width><li>Description for final line item two</li></div>
          <div class=width><li>Third item</li></div>
          <div class=width><li>...and last listed item</li></div></ul></p>
        <p style="font-size:.8em;">"This is text to flesh out this section."</p><br>
        <p style="font-size:.8em;">This is generic text inserted to show the
     
    problem I'm having on my page
    with scrolling up too much when using the page up/down keyboard buttons.  I
    need to limit/reduce the scroll when performed in this manner by the height of
    the header and any padding directly below it so when one hits page down</p>
        <br>
        <p>&nbsp;</p>
        <!-- end .content --></div>
      <!-- end .container --></div>
      <div class="footer">
        <p><span class=bigger><img src="Brown ftr.png" width="147" height="19"><a
     
    target="_blank" href="XXX">XXX <img src="FTR BTN 1+2.jpg" width="15" height="15"></a>, <a target="_blank"
    href="XXX">XXX <img src="FTR BTN 1+2.jpg" width="15" height="15"></a>, <a
    target="_blank" href="XXX">XXX <img src="FTR BTN 3.jpg" width="15" height="14"></a></span></p></div>
        <!-- end .footer --></div>
    </body>
    </html>

  • #10
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I've fumbled around online trying to get even a rudimentary understanding of Javascript coding to try and get this last bit of code to fix the problems I'm having with my pages, but to no avail.

    To reiterate, I found that I was better off not making any of the changes noted to my non-Javascript coding as they were changing the appearance of my pages. The code DOES function with those, but it's not functioning in a way that is useful to me and my pages.

    As is, the Javascript that Sunfighter nicely wrote is :

    Code:
    var MyHeight = window.innerHeight - 232;
    
    window.addEventListener('keyup', function (e) {
    if (e.keyCode === 34) {
    	window.scrollTo(0,MyHeight);
    }
    }, false);
    That is after I adjusted the innerHeight to best fit my page. I also tried a variant of (roughly) setting that to zero and adjusting the Y point instead:

    Code:
    var MyHeight = window.innerHeight - 0;
    
    window.addEventListener('keyup', function (e) {
    if (e.keyCode === 34) {
    	window.scrollTo(0,450);
    }
    }, false);
    That works in a similar manner, with the same problem remaining: it only works once. If I hit page down again, it'll only move down while my finger is on the key, and will snap back to the previous point upon release. Due to this, I can't test how well any of this works on the page up function.

    The goal is to have the page down/up keys working as they typically would, with the addition of an adjustment for the use of fixed headers, footers, and associated padding. The above code is making that initial page down movement/placement on the page "stick", instead of going further down the page.

    If anyone could take a look at this to get this working and provide assistance, I'd greatly appreciate it. Or even give me something to look at to try and alter the code to accomplish this myself.

    Thanks!


  •  

    Posting Permissions

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