Scrolling images and buttons

jasonadal
jasonadal Community Member Posts: 441 ♪ Opening Act ♪
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!
«1

Comments

  • klaatu
    klaatu Community Member Posts: 988
    Does it have to be responsive or is this strictly a desktop module?
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    While I would like to develop using responsive design, at this time it is desktop based only.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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/
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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?
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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.
  • klaatu
    klaatu Community Member Posts: 988
    Tim, export and take a look see at the html files. By using "Top of File Scripting" Lectora manages to actually place the code before the DOCTYPE. LOL.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    I was wondering about that as well (some years ago, when I still was a beginner with jQuery), but someone whom I trust to be an expert said, this was the best way to include jQuery:

    http://community.trivantis.com/forums/topic/embedding-jquery-into-lectora/

    In this example the whole html extension (which comes from my shared sample) can be deleted as jQuery is not required to make my approach work.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    The change to "onShow" worked; I was able to move the text field and button to where they need to be on the page. You guys are truly amazing and have been such a huge help with this project. I'm going to try and get approval at some point to get into a CSS and JavaScript class. Another option I know of is Codecademy, though I think it may be a tougher sell to get them to just let me use work time to self-teach versus enrollment in an actual course with reimbursement.

    Any suggestions on books I could read that would help get me up to speed beyond what I'm learning from your knowledge?
  • klaatu
    klaatu Community Member Posts: 988
     

    Tim, I don't think that guy realizes that the code gets injected before the Doctype. Doing so can cause browsers to enter quirks mode. It's bad practice at best.

    Jason, here are two of my all time favorite learning resources:

    Quentin Watts YouTube Channel - Great for beginners.
    Adam Khoury's Develop PHP site - In my opinion, Adam provides one of the best free learning resources available. He can be a bit sharp witted, however, he knows his stuff and could probably teach a sponge to code.

     
  • nwilliams3743
    nwilliams3743 Community Member Posts: 74
    Wanting to second what Jason mentioned. You guys have helped me greatly too. Tim, I used your scrollable div post on my previous project and worked a charm.

    Jason, I completed the codecademy courses for HTML & CSS, JS and JQuery. It was a great way to start and I've actually started going back over them a second time to embed the knowledge more.

    One thing I am struggling with is although I know the concepts now, adding jQuery interactions to a Lectora file has been a struggle (adding the link is the easy part - I get stuck on loading the actual interaction correctly.) But practice will make perfect with this. Stick with it because I sure as hell am trying to!
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    One more quick question on the div solution - Can I use the same RunJS on multiple buttons? For example, in the text field, there's also an Intake Search area, etc. Can I create a button that need to be a child of the text field without having to create separate divs?

    If I'm reading the way this works correctly, I can use the same code to add multiple buttons as "children" of the text field...
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    Hm, why don't you just try... ;-) With the current version of my code you can have only one target textfield but you can copy the action to several buttons and it should work.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    I'm getting to the experimentation part for sure :) Unfortunately, my trial on my home computer ran out and I'm on such a ridiculous timeline for the project I'm on, experimentation is at a minimum. The current expectation is to have 6 modules of a similar functionality and interactivity ready for release on June 1st. I'm on the second one and started in roughly November. You've seen what I've been doing so far, and I think 2 months on that first one is pretty reasonable when you factor in QA and content revisions.

    I'll get there, I promise!
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    I was able to get this to work with multiple buttons, but now I'm really pushing the envelope, I think.

    I'm trying to do the same thing now with drop-down menus, text entry fields and radio buttons. I think where I'm coming up short is the value for the appendChild value. I tried "form" and "combo" and neither of those worked. This was based on seeing that the button has a type value of "button", but I don't see a type for the drop-down.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    I'm maybe pushing the envelope in bringing this question back - I'm now trying to do the same thing with drop-down menus (in this example) and will later be doing it with radio buttons and text fields (i.e., this page would have three text fields that go along with it). I tried to find the value to use for appendChild, but after trying "form" and "combo" I had no luck. I saw method drop-down, but didn't think the value could have a space in it.

    I'm also struggling with applying the JS to the two buttons (intake and workgroup) to mimic the other page - is it the position in lectora that makes the difference? I'm sadly stumped again.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    1.

    The position on the Lectora page is essential. The object keeps its position after being appended to the other element. If you place an element at x = 100 and y = 100 in Lectora, this is the position from the top and the left with regard to x=0, y=0 of the page. By appending the element to another object you change not the position of the object itself, you change x=0, y=0. The object will still be at x = 100, y = 100, but the new 0-point now is the top left corner of the element you've appended it to. If the object is supposed to be in the top left corner of the target element, place it at 0,0 on the Lectora page.

    2.

    To adress an object in a script you always have to find a suitable selector to get it. If you don't know one, you can use an easy way you already know: Give the objects a CSS class. Then you can adress the elements in javascript with document.getElementsByClassName("your_class"). This will get you all the objects with the named class. To do something with them, you'll have to use a loop, to do whatever you want with each of the objects one after the other.

    I attached your sample again. Your pages have become too complex for me... Check "Page 4". You'll find a radio button group, a drop down, and two buttons that all have the same class. Also check where the elements are placed on the page and where they end up in the textfield.