January 24, 2017 at 10:06 am #343077
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!January 24, 2017 at 1:51 pm #343172
Does it have to be responsive or is this strictly a desktop module?January 24, 2017 at 1:59 pm #343175
While I would like to develop using responsive design, at this time it is desktop based only.January 24, 2017 at 2:20 pm #343192
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.January 24, 2017 at 3:00 pm #343198
Does it have to be a textbox? You can add images to textboxes but no button or other images.
Try this (uses jQuery):January 24, 2017 at 4:05 pm #343206
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.
Attachments:January 30, 2017 at 9:57 am #343647
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.
Attachments:January 30, 2017 at 1:40 pm #343759
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 😉
Attachments:January 31, 2017 at 12:54 pm #343948
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.January 31, 2017 at 1:19 pm #343950
You only need the objects that are on page level of Page 2.
As images and textfields are very similar (from the html perpective) you can produce the same effect with a scrolling textfield as well.
Attachments:January 31, 2017 at 7:44 pm #343999
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.February 1, 2017 at 11:11 am #344086
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.February 1, 2017 at 1:33 pm #344093
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?February 1, 2017 at 3:19 pm #344096
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.February 3, 2017 at 6:38 am #344259
You must be logged in to reply to this topic.