Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 30, 2021 at 5:27 pm #1297608
    Saskbison

    Hello, Enfold team!!

    I’m trying to add a scroll-margin-top for links to a tab element beside an image with hotspots (the image hotspots open a tab on the table). I can’t seem to figure out where to add the scroll-margin-top to keep the page from scrolling down to the top of the tabs.

    The ideal result is just to have the tabs open when people click the hotspot (on desktop this is not needed for mobile) without the page scrolling at all (since the image with hotspots and tabs are side by side, there’s no need for this).

    Thanks,
    Emily

    May 4, 2021 at 7:52 am #1298190
    Ismael

    Hey Saskbison,

    Thank you for the inquiry.

    The site is on maintenance mode and the login info above seems to be invalid, so we cannot see or access the site. Please check the info carefully or provide another login account.

    To prevent the document from scrolling after the tab opens, you might have to edit the enfold/config-templatebuilder/avia-shortcodes/tabs/tabs.js file and remove this code around line 131.

    if(win.scrollTop() > el_offset)
					{
						$('html:not(:animated),body:not(:animated)').scrollTop(scoll_target);
					}

    Best regards,
    Ismael

    May 4, 2021 at 2:08 pm #1298278
    Saskbison

    Hi Ismael!

    Unfortunately, that doesn’t seem to solve the problem. When I click the link to the tab, it still wants to scroll to the top. I think it has more to do with the anchor links than anything.

    • This reply was modified 3 years, 7 months ago by Saskbison.
    May 5, 2021 at 12:04 pm #1298507
    Ismael

    Hi,

    Looks like you are also using toggles, not just tabs. For the toggles, you have to modify the enfold/config-templatebuilder/avia-shortcodes/toggles/toggles.js file and remove the following block of code around line 54..

    if(win.scrollTop() > el_offset)
				    {
				        $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
				    }

    .. and line 171.

    window.scrollTo(0, container.offset().top - 70);

    After editing the files, do not forget to purge the cache and temporarily disable the Enfold > Performance > File Compression settings.

    Best regards,
    Ismael

    May 5, 2021 at 3:36 pm #1298609
    Saskbison

    Hi Ismael,

    Unfortunately, that still doesn’t seem to solve the problem.

    I have both tabs and toggles linked to those image hotspots and have removed the suggested lines for each, disabled compression. and purged multiple times to no avail.

    Thanks,
    Emily

    May 7, 2021 at 9:45 am #1298886
    Ismael

    Hi,

    Thanks for the update.

    We have added this script in the functions.php file to add the no-scroll class name to the hotspot links. This prevents the document from scrolling when clicking a hotspot with an anchor.

    // a custom script
// prevent hotspot scroll
function ava_custom_script_mod() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', '
		(function($) {
			$(document).ready(function() {
				$("a.av-image-hotspot_inner").each(function() {
					$(this).addClass("no-scroll");
				});
			});
		})(jQuery);
	');
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod', 9999);

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.