Integrating a Java based page key scrolling control in a page

Question

I've created a site with a fixed header. I've discovered this causes one issue

when someone hits the page down/up key, the length of that scroll is too long

due to it not remving the height of the header (and a very small bit of padding below it) from the scroll length. So (for example), if you're at the beginning of the page and hit "page down", you'd have to manually scroll back up a bit to match where you previously left off and not miss any content.

I found what I thought was the solution to this problem in this Java based page

scroll control:

It worked well enough in the demo page. However, no matter what I do (which given my beginner skill level in this sort of thing), I can't get it to control my pages. I had one other person take a look at it and offer suggestions, but none of them solved the problem. One thing he did do was adjust the "bar" content vs the original Javascript code. I've pasted this revised code below, to compare to the original linked above.

My pages with actual content are not hosted yet. A friend has hosted a "dummy" page I made with generic content but the same code as some of my other pages (I'm not quite ready to have the content public). Here's the link:

http://www.11fifty.com/Site_108/before.html

I'm totally stumped with this. I've found some great advice here from reading the archives as needed, so I hope someone can make sense of this. In addition, I hope it will help others that may want to correct for this in their own fixed header sites.

Thanks in advance...

(function(){
    var content, header
    function adjustScroll(event) {
        var e, key, remainingSpace;


        content = content || document.getElementById('content');
        header  = header  || document.getElementById('header');


        e = event || window.event;
        key = e.which || e.keyCode;


        if ( key === 33 ) { // Page up
            remainingSpace = content.scrollHeight - content.scrollTop;
            setTimeout(function () {
                content.scrollTop = (remainingSpace >= content.scrollHeight - 

header.offsetHeight) ? 0 : (content.scrollTop + header.offsetHeight);
            }, 10);
        }
        if ( key === 34 ) { // Page down
            remainingSpace = content.scrollHeight - content.scrollTop - 

content.offsetHeight;
            setTimeout(function () {
                content.scrollTop = (remainingSpace <= header.offsetHeight) ? 

content.scrollHeight : (content.scrollTop - header.offsetHeight);
            }, 10);
        }
    }


    document.onkeydown = adjustScroll;
}());

Thank you, Killrawr & Dahaka. I didn't realize! :) Any idea(s) how to get this to work in my pages? — Martin Melucci, Jul 05 '13 at 17:42

score 0 · Answer 1 · edited May 23 '17 at 10:32

What you need to do is to add a class tag (let's name it class="new") to every item on your list and handle keypress events to scroll to next item or the previous one, this code may help you :

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}

jQuery(function () {

  $("#next").click(scrollToNew);

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behaviour
      scrollToNew(); // scroll to the next new heading instead
    } else if (evt.keyCode == 38) { // up arrow
      evt.preventDefault();
      scrollToLast();
    }
  }

});

More details : https://stackoverflow.com/a/2168876/2310699

Akram, thanks. Let me wrap my head around this later and let you know how it works out... — Martin Melucci, Jul 05 '13 at 00:05
I had a little time to look at this now...am I understanding this correctly - this makes the page down scroll to a specific point in a page, instead of compensating for the height of the header in the scroll by reducing the scroll by that amount? If possibly, I greatly the latter... — Martin Melucci, Jul 05 '13 at 00:23

score 0 · Answer 2 · answered Jul 04 '13 at 07:46

0

In your sample page the class of the header is header not the id, therefore this is not working:

document.getElementById('header')

This goes for the content too. Change these 2 rows:

<div class="container">
   <div class="header">

to

<div id="container">
   <div id="header">

Why you are at it add a semi-colon to the end of this row:

var content, header

If this is not the case, then create your own jsfiddle to show your exact code.

answered Jul 04 '13 at 07:46

Balint Bako

2,500
1
14
13

Balint, I tried substituting id for class in both div tags, & that messes up my pages. It stops the coding in the container & header from functioning, leaving no container/header to speak of (main text + header images/buttons get pushed to the left edge where the green "fill"/background would normally be). When I tried adding a semi-colon to the java you noted, it didn't have an effect - I imagine the code needs fixing before that would help though. I'm using a script for text-shadow in IE. If I create a jsfiddle, should I put its code in the java box along with the page scroll java code? – Martin Melucci Jul 05 '13 at 00:05
Balint, I've created two jsfiddles to demonstrate: http://jsfiddle.net/MMM717/VZfcV/1/ http://jsfiddle.net/MMM717/w96Hu/ The first one is my "dummy" page, without the page scroll javascript. The second jsfiddle is the page scroll code on its own, after it was modified a bit to remove the "bar" code with "header" used instead. Does this help? – Martin Melucci Jul 06 '13 at 22:02

Integrating a Java based page key scrolling control in a page

2 Answers2