Anchoring vertical scroll?
August 8, 2017 12:00 AM
This might be a long shot, but...
Is there a way to force an image in a vertical scroll text box to scroll to a specific spot based on a click action? The learner would click on a button appended to the image to open a text block describing the item. I'm trying to keep the text block in a fixed location relative to the button.
I hope that describes the goal well enough to get some ideas. The closest comparison I could make is a link that scrolls a page to a specific place similar to a "link" in a Word document.
Discussion (7)
It's probably me, Jason, but the above is confusing as all get out. To help me understand better, can you post something that has the design and elements without the functionality?
I posted a while back, in response to one of your questions, a method to include a scrolling image map that included links. Your question was about a scrolling menu if I recall. This sounds similar if I am getting it at all.
The appending piece is all good - you wouldn't believe how often I've used that to add buttons and fields to scrolling images.
In this case, though, the button would force the image to scroll, more like a "Move to" action on an object. I'm running out to deliver some classroom training until Thursday so I'll see if I can come up with possible sample then.
See http://community.trivantis.com/forums/topic/scrolling-images-and-buttons/
Is this close? The actions that are attached could be used to open a new text box that describes the scrolling image/link.
LOL. I totally understand your wife's response. Depending on the level of knowledge and skill of the person I'm talking with, the site I recommend would change. I'll bet, when necessary, she refers to Mozilla Developers Network. W3C schools is not the actual WWW Consortium (https://www.w3.org/). W3C schools has it's place but it's more for beginners/amateurs imo. I have some developer/designer friends who say W3C schools has incorrect info but I haven't seen that myself.
Thanks for posting that sample. I'l try to take a look but it might not be until this weekend.
BTW - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop (better and sure to be accurate)
It's always a good idea to make the wife happy. ;-)
@klaatu - Here's a zip of what I'm trying - I added a list of actions to the button that describe what I'm trying to do. Basically, there's a button appended to the image that changes the text of the entry field. However, the learner wouldn't see this change unless they've already scrolled down manually. I want the button to scroll the image up so that when the text changes, the learner will immediately see the text in the entry field.
After some brief google searches, I found a tutorial on how to create a "go to top" button, but I'm not entirely sure that it applies to a scrolling text box. Breaking it down, I believe that it's the ".scrollTop value defines where it would scroll to. Thoughts?
(FWIW, I told my wife, who's a developer, that I was looking at W3C schools and she wrinkled her nose at me.)
I wasn't sure about the relationship of the schools site to the actual W3C, so it's good to know they're not affiliated.
On a somewhat related note, I'm trying to figure out if I can add horizontal and vertical scrolling to a text block with an image. Adding white-space: nowrap and overflow: scroll using a class for a text block works, but it doesn't work when I add it to the text block. While not really practical for text only, this could be really useful for some images that may need horizontal scrolling only or potentially both. I know I'm close, but am missing something somewhere...
Edit: I can get it work intermittently, but it's oddly inconsistent - I'm trying to keep the "order of operations" for when I add each piece, since that seemed to make a difference. I'm still flummoxed, though.
I wanted to bump this back up in case there were any ideas or thoughts about a button to scroll an image in a text box.
To summarize: I'd like to have a button that forces a scrolling image to jump to a specific y coordinate of the image. A similar function is a web page that has a "Go to top" that scrolls the page back to the top when clicked. I'm at that point in my development and hope I can find a solution instead of splitting the functionality across multiple pages.
Discussions have been disabled for this post