1

So I'm using the JQuery Ruler plugin in my site to apply horizontal and vertical rulers to an element inside the body. This element takes up the majority (but not all) of the screen, and can be resized according to the size of the elements it contains.

The trouble I'm running into is with scrolling. When scrolling down, the vertical ruler moves as appropriate, but the horizontal ruler stays where it is in an absolute sense, only moving back into sight when the user stops scrolling. The same happens to the vertical ruler when scrolling horizontally.

While this technically works, I'd prefer if the vertical ruler was fixed in a horizontal sense but absolute in a vertical sense, and vice versa with the horizontal ruler. Does anyone know of any CSS magic I could employ to do this? I saw a similar problem here, but I don't think that I'm looking for the same thing.

The CSS for the ruler container element:

#simWindow {
    overflow: auto;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    border: #222 solid 1px;
    box-sizing: border-box;
}

And the code to draw the ruler: 

$('#simWindow').ruler({ scale: self.scale(), unit: self.distanceShorthand() });

I've tried applying the ruler to a parent element, but then it doesn't move at all with scrolling. I've also tried just setting the position to fixed, with the same result - the ruler will appear on screen, but remain absolutely fixed and not respond to scrolling at all. If anyone else has any solutions, it would be greatly appreciated.

Community
  • 1
  • 1
Dan McElroy
  • 426
  • 4
  • 19
  • It's not entirely clear what you're asking, but it sounds like you want to use `position: fixed; top: 0; left: 0;` on the horizontal ruler. – Rory McCrossan Nov 06 '14 at 14:41
  • I'm afraid this just makes the ruler disappear off the screen. Using `position: fixed` in general stops it from scrolling horizontally as well. Apologies, I'll try and clarify, but it's an annoying problem to verbalise. – Dan McElroy Nov 06 '14 at 14:44
  • Could you put an example of the issue in to a http://jsfiddle.net? – Rory McCrossan Nov 06 '14 at 14:45
  • The problem with this project in particular is that the HTML involved is so large and complicated that reducing to something that will work in JSFiddle and still demonstrate the problem would be a very lengthy exercise. Thanks for your continued interest, though. – Dan McElroy Nov 06 '14 at 14:47

0 Answers0