Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #343077 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    Is it possible to have a scrolling image within a text box AND a button, drop down or radio button that scrolls with the image? I have some screen shots I’m using that do not fit into the size of the course that need to have clickable areas in order to open other screens and cannot resize the image based on the nature of the course (yes, I’m still working on the same software simulation). I’m asking before I experiment so I don’t get caught up in trying to work it out if it either can’t be done or is more complex than I have to learn within the time I have for development.

    Thanks!

    #343172 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    168 pts
    @Klaatu

    Does it have to be responsive or is this strictly a desktop module?

    #343175 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    While I would like to develop using responsive design, at this time it is desktop based only.

    #343192 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    168 pts
    @Klaatu

    Can you provide a sample image you are looking to have this functionality with? You might be able to do this with an image map. The scrolling part may present an issue.  You might have to either use an SVG image map or there are a few jQuery plugins that recalculate a standard image maps coordinates upon screen redraw (there’s one standard JS library too). If you can post an image I’ll (and maybe a few others up for a challenge) try to get something working.

    #343198 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    218 pts
    @timk

    Does it have to be a textbox? You can add images to textboxes but no button or other images.

    Try this (uses jQuery):

    http://community.trivantis.com/shared-content/scrollable-div/

    #343206 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    I’ve attached a sample with an explanation of what I’m hoping for – you two might recognize this page based on previous discussions we’ve had. Thanks to your help, this page is a near perfect simulation of how the software behaves. If I can get the button functionality working…

    The other part of this is to know if it will work with radio buttons, text entry boxes, and drop downs. I’ve attached a couple of screen shots as an example as well.

    #343647 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    Tim – I’m a little lost on how that template is working. When I look at the JS on the buttons, it looks like that JS just changes the background on the text box onClick. I’m not sure what allows the button to scroll. I’m trying to get the button to scroll with a scrolling image that’s visible. I’ve attached a new sample that shows the scrolling image and the button. They are both at the bottom of the title explorer so they’re easier to find.

    #343759 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    218 pts
    @timk

    It’s the custom div that scrolls. There’s some jQuery code in the HTML Extension on title level that adds all the elements in the group (all elements with the CSS class “intoDiv”) to the custom div so they scroll along.

    I’ve attached your sample with a similar approach, but no jquery required. I copied all relevant elements to a new page, so it’s easier to see what happens… your pages tend to be a bit crowded 😉

    The image now has the Class “custommenu”. The CSS in the HTML Extension makes it scroll (the div the image is in, not the image itself). The javascript attached to the button makes the button a child of the image div, i.e. it moves with it.

    Tim

    #343948 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    I’m starting to get how this is working, little by little. I see it working on the page you added, however…

    I tried to copy and paste all the elements to my page (ie the Exiting SSIS in the sample), and I can’t get it to behave the same way. One thing I noticed is that if I put the task panel search list into a scrolling text box, it breaks it (which makes sense to me in a certain way). Instead of copying and pasting the objects, might I have to create the object then copy/paste the text in order for it to work on other pages? Intuitively, I thought I could just copy/paste over to the other course and get the same functionality. When I copy the page (even without the top of page extension at the chapter level) it works fine, including the hide/show.

    #343950 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    218 pts
    @timk

    You only need the objects that are on page level of Page 2.

    It should be possible to copy the elements to another page. The only restriction there is from the code I’m using is that you can have only one element with the class “custommenu”. You could have more of course, but the javascript only refers to the first element with that class.

    As images and textfields are very similar (from the html perpective) you can produce the same effect with a scrolling textfield as well.

    #343999 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    168 pts
    @Klaatu

    Sorry,  I haven’t had the time until now to build an example using your image file. Is this what you are looking to do? This uses CSS only imagemapping and its also responsive. Instead of an image embedded into a text box it uses a web window. If there is interest in a tutorial let me know.

    #344086 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    Thank you both for the options on this. I’m still running into an issue with copying the elements from the page to another page in my course and I’m not sure what might be happening there, especially with Tim’s sample. Even if I create a new page and copy/paste the elements, it fails. I tried copying all the elements into the existing page and matching the order in the title explorer and copying the elements from the existing page over to the page with the working functionality to no avail. I’m stumped as to why it wouldn’t copy over correctly.

    #344093 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    218 pts
    @timk

    Can you give a more detailed description about what’s not working? – Esp. with the scrolling textfield it should be impossible that’s it’s not working, it doesn’t even require custom CSS.

    If you copy the elements to another page and publish or preview in browser, where’s the button? Is it visible on the page in the position it has on the page in Lectora or is it not visible?

    #344096 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    When I copy to a brand new page (or one other page I was working on that didn’t have any “duplicate” elements (like the scrolling text box), it works just fine. On the page that’s having the issue, the button is visible in the same place it shows up in the Lectora window when I preview through Run or in the browser. I haven’t had a chance to publish and test just yet.

    I think I’ve stumbled on to something that may lead us to where the issue may be.

    I can create a new page, copy and paste the text box and button and it works. I can also copy and paste to a page I’ve been working on that does not have the elements that are “duplicate” and it will work.

    When I paste the elements so that they are at the topmost layer (bottom of the title explorer), it breaks. On a lark, I pasted them just underneath the first image on the page, and it started working. If I move them anywhere else in the title explorer, it breaks again. This is on the “Exiting SSIS” page in the sample I sent.

    Not sure why it does that, but it’s a step closer and may be workable even that far “below” all the other elements on that page.

    #344259 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    218 pts
    @timk

    Trying copying button to your real page. Give your original scrolling textfield the CSS class “textfield”. Change the trigger of the Run javascript action on the button from “On: Page show” to “On: Show”. “On: Page show” actions are run first. Maybe there are too many elements on your page, so that the textfield isn’t yet available when the action is run. For me it worked when the script is executed On: Show, it did not with On: page show. This would also explain why it works for you if you move the textfield up in the title explorer as the elements are created in the sequence they are listed in the title explorer.

    Make sure the button is under the textfield in the title explorer, if not the button will be under the image after being attached to the textfield. Also make sure the Javascript refers to the CSS class you’ve added to the textfield.

Viewing 15 posts - 1 through 15 (of 30 total)

You must be logged in to reply to this topic.