Forums » Writing Workshop » Read Thread

I am very, very partial to having a nice, pretty background with text scrolling over it. The cost for this is that the story is only readable for about half the page, which means as you scroll, your eyes will have to remain at the midpoint and below of the page.

How annoying would this be for you as a reader? Allow me to give you an example using two pictures, one with the text at the beginning of the page, and one after you've scrolled some.

Note: obviously the pictures are small. The font would actually be readable on the bottom of the page had I used full sized pics, but it screws up the forum format

How the page begins:

How the page looks as you scroll up:

What are your thoughts on this style? Is it so annoying you'd dock me points in my rating?

Of course it should be pointed out that adjusting window size can make almost all the page readable by removing the parts that clash with the text color (in particular, just making the vertical portion longer helps a lot), but obviously my preference is the default window size so you see the whole picture. Either way, what do you think of this aesthetic?

For me, and perhaps only me, I find it very, very annoying. I just can't stand it when there is not enough contrast anywhere on the web. I appreciate the attempt to add the picture, that is neat. Maybe you could just put a background color on the text so it covers up the picture where it runs over? Or even trying something crazy like using a scrolling box to contain the text in a certain location on the screen?

A scrolling box would be ideal, but I do not know how to do that, or if it's even possible. Any scripting search suggestions?

I did notice there is a way in html to make a scroll box. I just need it to be transparent. And for it to work here. ;)

Okay! Found a way to do a scroll box. All I need is to remove the BORDER of the scroll box. Any ideas on that?

I found this and it works

< div style = "height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;" >

And I'm sure I can modify it. But it has a border.

Change that border:1px to border:0px?

Ogre11, can I kiss you? Not in a gay way (unless you prefer that). But ffs YOU ARE MVP. Dude you just saved my ass again. This totally solves the problem. Thanks 1000x!

Only one thing left to do, and I don't know if I can: remove the other vertical scroll indicator.

If I can remove that, it would be perfect. But as it stands, it's good enough.

I think if you add

overflow-y: hidden;

that it will hide the scroll bar. I'm not completely sure on what will happen, or if it will ignore you because there still is actually information there...

Instead of overflow:auto; ?

That actually undoes the scroll. But thanks for the hints. I'll keep looking for the rest of the day and if not I'll just live with the mini scroll bar.

Yeah, that's what I was afraid of. I'm not sure there's any way to hide that one because if it wasn't there, people wouldn't know to scroll. You might have more luck getting rid of the other one on the page.

I found a cheap solution. Just extend the horizontal width until the scroll bar disappears. >:)

Obviously if people prefer to change window size, it won't work. But with default window size, this should work.

But... I just realized a potential flaw. Without the visible scroll bar, someone is bound to think the page just ends. I suppose I should leave it visible.

Fucking solved! Lol it was all so easy. All I have to do is make sure the total amount of text and spaces OUTSIDE of my interior scroll bar are a smaller height than the total pixels that the default window comes in.

Thanks again for your help, Ogre11. In fact you have helped me a lot and it is really appreciated.

Glad you got it worked out!

Mostly... there is just one final issue. If I could find a way to change the y-axis coordinate of the top of the second scroll bar without changing the size of the popup window (e.g. without using < p > < / p > to lower it), that would really give me absolute freedom.

In the meantime, I accidentally found a way to change the location of the text of your links (the link doesn't work though):

position: absolute;
top: 20px;

Putting this in my DIV tags put my link text at the top of my page lol

Yeah, position: absolute gives you LOTS of freedom, but doesn't do anything without you telling it exactly what to do.

I'm pretty sure you can't change the size of the scroll bar. Well, at least not the standard one. If you wanted to go java up your own scroll bar and slap that one on there, I guess you could do that...

I'm cool with the size. I just want to lower the maximum y-coordinate value without just using < p> < / p >, because that changes the actual popup window size too.

Almost there... using this:

position: absolute;left: 10px;top: 350px;

after #ccc, I can now position the new scrollbar. The draw back is once again my link to the next page is at the top of the page...

Finally got it! All that needed to be changed was position:absolute to position:sticky, which put the links back at the bottom of the page, and then I adjusted the specific numbers (especially height) until the main scroll bar vanished, leaving only my custom scroll bar. Your help was invaluable, as was my annoyingly clever brother who doesn't even know anything about #ccc stuff or html, lmao. The asshat just realized that overflow and position had to be functions due to the words after the :'s looking like parameters, and then he googled it and found absolute, static, sticky, fixed, and relative, and we tested all of them until it worked.

With it on position absolute, for whatever reason, everything typed at the bottom of the div tag looped back to the top, including the links (note: if anyone ever wants their links at the top of the page, well, this will do it!). Now the links are back at the bottom, AND the normal scroll bar is gone due to my custom scroll bar and use of blank paragraph lines making the window exactly the normal default popup size.

Of course, this may not work on other browsers, and almost certainly won't work on mobile. Not to mention, changing the window size will likely undue all my hard work. But I am quite pleased. If I adjust the numbers right, I can actually completely remove all vertical scroll bars from the default size window, but I figure that would be confusing, so I'll just leave my smaller one visible.

Anyway, if you ever need free 8 ratings, Ogre11, don't hesitate to ask!

Thanks, I love me some 8s!

Also, yes, you really should (if you haven't already) try it in a few browsers. It can be quite annoying to spend a lot of time getting something just right in one browser, only to see it completely not work in another. If you're super-ambitious, you can actually write code that will do one thing in one browser and another in a different browser -- but that can really take some time. Also yes, mobile -- there are some here who read stories on mobile, but it is well-known that the site doesn't work well in mobile. But of course, you CAN also write custom css code for mobile as well!

Good luck!

Thanks. But I also have discovered one other thing I should do: If I'm going to use this sort of thing in a story, I really ought to make it optional for the reader, which would be as easy as just copy/pasting every page and having two parallel paths, one with the parallax and one without. All depends on the lazy factor, of course.

Depending on how/where you implemented the css, I do wonder if you could use a built-in variable here...