Anchoring vertical scroll?

jasonadal
jasonadal Community Member Posts: 447 ♪ Opening Act ♪
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.

Comments

  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    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.
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    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.
  • jasonadal
    jasonadal Community Member Posts: 447 ♪ Opening Act ♪
    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.
  • jasonadal
    jasonadal Community Member Posts: 447 ♪ Opening Act ♪
    @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.)
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    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. ;-)
  • jasonadal
    jasonadal Community Member Posts: 447 ♪ Opening Act ♪
    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.
  • jasonadal
    jasonadal Community Member Posts: 447 ♪ Opening Act ♪
    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.