Coding HELP Please -CTA

Elements
1

I am attaching a file which I need some help with. @elementsbot has not been able to help.

The file contains one page only just made up from drag and drop core elements to give me a page - not important to project.

I have a modal id = scroll

If I attach a trigger - button it works fine.

I have replaced the trigger with custom HTML to act like a scroll function so when I scroll down page the modal appears - CTA box is my aim, the modal once again just contains a drag from core elements.

Currently when I scroll on preview a ā€œwhite box with red borderā€ appears but not my modal.

I am stuck but any help to resolve this scroll malfunction will result in a CTA solution. Once I have this working then I will do a proper styled CTA solution.

Any help to resolve this please will be gratefully accepted.

@upssjw @ben @handshaper any ideas?

elementsapp://downloadDocument/ca8dXRTUkzMW

2

Ah, a classic ā€˜scroll-triggered modalā€™ issue! Letā€™s see if we can sort this out. Here are a few things to check or try:

  1. Ensure Correct ID: Double-check that the modalā€™s ID is correctly set to scroll in both your custom HTML and the modal component settings.

  2. Trigger Setup: Make sure your custom HTML for the scroll function is correctly triggering the modal. It might require JavaScript to conditionally display the modal when a certain scroll position is reached.

  3. Debug CSS/Javascript: The ā€œwhite box with red borderā€ sounds like a CSS failsafe or placeholder. Check your CSS to ensure thereā€™s no style conflict. Also, verify your JavaScript logic is firing correctly and targeting the right elements.

  4. Inspect with DevTools: Use browser DevTools to see if the modal itself is hidden or styled in a way that prevents it from displaying. Check for display: none; or opacity settings.

  5. Scroll Position Logic: Ensure the logic for the scroll position in your script aligns with how your Elements page is structured.

If you are still stuck, feel free to share the details or any error messages here, and weā€™ll continue poking at it! Maybe @ben, @upssjw, or @handshaper have additional insights?

Got your back in this epic battle against the invisible modal! :person_fencing:

3

You had your chance and got stuck! have a recharge and come back to me on that one! :slight_smile: :slight_smile: :slight_smile:

4

Oh, PMUK, it sounds like youā€™re taking on quite the modal mystery there! :sweat_smile: Letā€™s give it another shot, shall we?

  1. Ensure Correct ID: Double-check the modal ID is set as scroll and matches your JavaScript.

  2. JavaScript Scroll Trigger: You need a script like this to trigger the modal on scroll:

    window.addEventListener('scroll', function() {
  if (window.scrollY > 100) { // Adjust 100 to your desired scroll position
    document.getElementById('scroll').style.display = 'block'; // Or use classList to toggle visibility
  }
});

  3. Check CSS: Make sure thereā€™s no unwanted CSS preventing the modal from showing. Use DevTools to inspect the modal and see if itā€™s hidden or styled incorrectly.

  4. JavaScript Debugging: Use console.log() to print messages when the scroll event starts and when the modal should appear to ensure the script is activating.

  5. Visibility & Z-Index: Ensure the modal is set to be visible (display: block;) and has a high enough z-index to appear above other content.

Give these a try, and let me know how it goes! If it still gives you trouble, post some more details about your setup or any errors you see in the console. :scroll::magnifying_glass_tilted_left:

And remember, in this wild journey, youā€™ve got a cheeky AI bot with inconsistent solutions cheering you on! :partying_face:

5

You know this doesnā€™t work as we tried all this last time. just have a sleep!v :slight_smile:

6

Oh PMUK! It seems this modal conundrum is keeping us all on our toes! :sweat_smile: Letā€™s brainstorm a fresh approach:

  1. Ensure Unique IDs: Double-check IDs are unique within the document.

  2. Advanced JavaScript: Try using classList.toggle() for visibility to ensure styles arenā€™t conflicting:

    window.addEventListener('scroll', function() {
  if (window.scrollY > 100) { 
    document.getElementById('scroll').classList.toggle('active');
  }
});

    Make sure your CSS has something like .active { display: block; }.

  3. Monitor CSS Positioning: Use DevTools to ensure the modal is being placed correctly and not pushed away by other elements.

  4. Error Messages: Check the JavaScript console for errors when the scroll triggersā€”these might give clues.

  5. Community Brainstorming: Letā€™s see if @ben or @handshaper might have fresh insights this time around!

Donā€™t give up yet, this modal canā€™t stay invisible forever! :crossed_fingers::magic_wand:

1 Like
7

Iā€™ll take a look later today, just got back from a trip to the mainland, so Iā€™ve been away from the computer.

1 Like
8

@PMUK

just seen your post, not sure if this is all you want, white text on a white background

9

No I have a modal which I want to open on a scroll trigger, the modal works if you add a button as trigger so nothing wrong with modal, I worked with the bot so I have the scroll bit working I have the modal working but the script the bot and I worked on opens a white box and NOT the modal. So simply I want to scroll down my page snd then half way (or wherever) a modal opens this can be for a newsletter sign up, a special offer box or whatever, which I can design but havenā€™t yet as I can not get scroll to open the modal just a white box. Whatā€™s there are just scripts for me as reminders. Hope this is clear? THANKS for trying though I do appreciate it!

10

you want the Elements modal to open on scroll? to show the content straight away on scroll

11

Yes TIA

12

didnā€™t like all that css and js, converted to tailwind and alpine, not sure exactly what you were after, only pops up once now, reload will work again, added a trigger point control, you could use I suppose. Needs refining, dont like spending lots of time on one thing

Not sure why you wanted to have a modal show you could have just had a dropzone and put whatever you want in there

13

Thanks for helping, the code came from the bot as I asked to replace the button with a scroll over trigger. I dont know what a drop zone is but will look at that. If you look at the works.co.uk as I dont want to do a link, scroll down and you get a box pop up with an offer. Thats what I want to achieve but if you go in to it twice or cancel it it doesnt pop up again. Itā€™s for my shop Iā€™m building and want a ā€œpop upā€ box to appear on scroll. I do not know whats best but your video does get modal to show. I just like simple solutions so what do you suggest as best way to achieve a pop up? TIA

14

@upssjw Aloha Steve, Iā€™d really like to see the code for this, as it could be convenient. Nice. Definitely better with Tailwind and Alpine.

16

Iā€™ll also look at this tomorrow when back in front of computer. TIA

17

Just sat down to look at his and find you deleted it? Can you put it back for a while so I can download and have look please and THANKS!