pietM Posted December 16, 2021 Share Posted December 16, 2021 Hi everyone! I'm trying to fire a function: function activeCaption(){ caption2.innerHTML = captioner.innerHTML; } when the enclosed slider's updateProgress() and updateDraggable() fire, but the caption isn't updating. Any help is appreciated, as always. Thanks for taking a look! See the Pen rNGyPev by evryali (@evryali) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 16, 2021 Share Posted December 16, 2021 Hey there! So it is updating - it's just updating LOADS Check out the console logs See the Pen MWEpxZW?editors=0011 by GreenSock (@GreenSock) on CodePen What are you trying to do? Maybe you wantonDragEnd Link to comment Share on other sites More sharing options...
pietM Posted December 16, 2021 Author Share Posted December 16, 2021 Thanks for getting back @Cassie! I want ".caption2" to pull html from each slide's ".caption3," so it updates as you drag. Kind of like an "active" or "is-selected" function. So, for slide 1, ".caption2" = 1. Caption1, for slide 2, ".caption2" = 2. Caption2, etc. as you drag or advance with the "prev / next" buttons. I added the onDragEnd call, but it still doesn't work. Link to comment Share on other sites More sharing options...
Cassie Posted December 16, 2021 Share Posted December 16, 2021 Ah ok. You'll need to somehow figure out which the active slide is. It's calling it once for each slide (again - pop in a console log, it really helps with debugging) I can pop back and take a look at this a little later if no one jumps in! 1 Link to comment Share on other sites More sharing options...
pietM Posted December 16, 2021 Author Share Posted December 16, 2021 You're the best. Let me know. Thanks @Cassie! Link to comment Share on other sites More sharing options...
Cassie Posted December 16, 2021 Share Posted December 16, 2021 Ok so it was updating loads because you had all this code in a loop for some reason! Not needed. You were adding all of your variables and event listeners and functions and everything for every slide I t would take me a while to figure out the draggable bit so I've just started you off and hopefully you can untangle the rest! I've made a variable for the slide number and that gets incremented or decremented depending on the direction of the slides. Then we know what slide we're on and we can grab the caption from that slide and update the fixed caption See the Pen rNGmaGy?editors=0010 by GreenSock (@GreenSock) on CodePen I reckon you'll need to figure out a similar technique with the dragging bit - work out how to increment or decrement that number so you know what slide you're on. Link to comment Share on other sites More sharing options...
pietM Posted January 20, 2022 Author Share Posted January 20, 2022 Thank you @Cassie !! Unfortunately, I had to resort to the Intersection Observer API for the desired effect. Here's the code and updated pen, should anyone want to use it: const captiongrab = new window.IntersectionObserver(([entry]) => { if (entry.isIntersecting) { caption2.innerHTML = captioner.innerHTML; }}, { root: null, threshold: 0.1 }) captiongrab.observe(box); - My next question is how to calculate the width of the slide container with slides of varying widths. Where can I reach out for paid assistance with this? Thanks for all! Link to comment Share on other sites More sharing options...
OSUblake Posted January 20, 2022 Share Posted January 20, 2022 15 minutes ago, pietM said: Where can I reach out for paid assistance with this? You should be able to find someone by making a post on the Jobs & Freelance forum, https://greensock.com/forums/forum/15-jobs-freelance/ 1 Link to comment Share on other sites More sharing options...
pietM Posted January 20, 2022 Author Share Posted January 20, 2022 Thanks @OSUblake ! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now