Findme Auto Not Scrolling To Content Properly

anchors are not being scrolled to properly

Actually, they are. If the page is viewed with an inspector, you will see that the savings-main span is in the middle of the icon block. Visiting https://multiply.org.my/calculators-all/#savings-main scrolls to exactly this position.

Collapse-Pro-Matic offers a few ways to address offset issues, but with Collapse-O-Matic, you might try to use a block-level element such as ‘div’:

<div class=”collapseomatic find-me colomat-visited” title=”savings” id=”savings-main” rel=”savings”><div class=”calc-title”>Savings<br>Calculator</div></div>

This will assign the scroll location to the top of the block, rather than somplace in the middle.

Best of luck!

Thanks for your quick reply, I’ve tried changing the block elements to div on my staging site but it still does not scroll to ensure that the anchor is at the top of the page. Instead, now it is scrolling so that only the top of the new block is seen (which is worse).

The scrolling does not seem to be working in mobile as well when using div element.

What should i do so that it scrolls and makes the anchor the top of the page?

• This reply was modified 4 years, 9 months ago by adamwjs.

but it still does not scroll to ensure that the anchor is at the top of the page

In this case the ‘anchor’ is the trigger… not the expanded content.
What you are attempting to do is have an url anchor that:

1. scrolls the page to the trigger (default HTML behaviour)
2. fires trigger, expanding the target content
3. scrolls the page again to the beginning of the hidden content.

Advanced scroll targets, scroll offsets, and expand callbacks are a feature offered in the pro version. However, we could look into adding target support to the findme attribute. We’ll post back with a version for you to test, if you are intrested.

Here you go
https://github.com/baden03/collapse-o-matic

and a demo:
https://spacedonkey.de/3915/collapse-o-matic-new-findme-options/

You can now use data-findme=”target” like so:

<span class="collapseomatic find-me" title="savings" id="savings-main" rel="savings" data-findme="target"><div class="calc-title">Savings<br>Calculator</div></span>

or better yet:

<div class="calc-title collapseomatic find-me" title="savings" id="savings-main" rel="savings" data-findme="target>Savings<br>Calculator</div>

Give it a try and let us know how it goes.

Hello twinpictures,

thank you for the effort put into helping me solve this issue. I have implemented the fork of the plugin as well as the code and it seems to be working for level 0 drop downs but not for level 1 nested drop downs.

The nest dropdowns automatically close when they are clicked when using the code provided. What am I doing wrong here?

You may have a look of this implementation at https://staging6.multiply.org.my/calculators-all/

Really appreciate your help so far in this.

Regards,
Adam

Well that’s not good… not good at all!
Standby for hot-fix.

Update: Fix has been pushed to GitHub v 1.7.13e
https://github.com/baden03/collapse-o-matic

Here is a demo:
https://spacedonkey.de/3920/collapse-o-matic-nested-grouping/

Thank you for the feedback, hopefully this will resolve the issue.

• This reply was modified 4 years, 9 months ago by twinpictures. Reason: added link to hot-fix

Thank you so much! the problem has been completely solved. Will close this ticket as resolved and will leave you a review.

Best regards,
Adam

Glad it worked out. Thank you for closing the issue and leaving a review.
We’ll push the new version of the plugin out this coming Tuesday. It will include the changes you already have, so you can update w/o fear.