How to disable full page scrolling (or "jumping") till an embedded HTML element loads?

Ask the community
,
1

Hello!
So I came across this problem because i have an embedded (external) html page on a specific page of my Wix site, that has a banner (or a little pup-up window), that when it loads (or “triggers”) it scrolls (or maybe “jumps”) down the entire main page to it’s own position, like it was an anchor set to act like this. I want to avoid this and to be as fail-safe and “compatible” as possible, I think the best would be is to write in a code in the developer mode on the page that disables the page scrolling till this banner (or pop-up) element appears (and so the scrolling “triggering effect” times out), so the page view would be still “locked” on the top of the page, but only during this period of time.

Please help me out, how could this be done?

Thank you!

2

So a little bit of update after a couple of unsuccessful tries by my own:

I loaded the page simply in Chrome (so not in Wix’s editor) and clicked “Inspect” on the questionable banner (pop-up) window. Than I guess I have found the “modal’s” main “id” and it’s “main div section” looking like this:

<div class="modal fade in" id="popupFrontPageBanner-modal" tabindex="-1" role="dialog" aria-labelledby="popupFrontPageBanner-modal" aria-hidden="false" style="display: block;">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content" style="background:transparent;">
				<div class="modal-header">
					<h4 class="modal-title" id="popupFrontPageBanner">&nbsp;
					<button class="btn btn-danger pull-right" style="background-color:#FFF" data-dismiss="modal" aria-label="Close">Bezárás X</button>
					<button class="btn btn-danger pull-left" style="background-color:#FFF">Hirdetés</button>
					</h4>
				</div>
				
				<div class="modal-body" style="background:rgba(255, 255, 255, 0.5);">
				  				<div class="blog-sidebar sidebar" style="border:0px; margin:0px; padding:0px;">
					<div class="text-center">
						<a href="https://www.bmwgroup.jobs/hu/hu.html?bmw=dis:Q12022ext:dehir:popup" onclick="bannerClick(959)" target="_blank">
							<img class="img-responsive" style="padding:0px; width:auto; margin:0px auto;" src="/upload/images/br22bmwdb16-01_dehir_popup_banner_1024_small.jpg" alt="BMW 10.31-11.06. popup">
						</a>
						<div style="display:none;"></div>
					</div>
				</div>
								</div>
				
				<div class="modal-footer" style="display:none;">
					<div class="row">
						<div class="col-xs-6 text-center">
							
						</div>
						<div class="col-xs-6 text-right">
							<button data-dismiss="modal" class="btn btn-warning">Bezárás</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

So I have searched for a solution on the net like “how to disable modal banner (or pop-up)” and have came across this hint:

$( document ).ready(function() {
  $('#myModal').modal('hide')
});

So I have tried to modify and exchange the modal’s “id”, and simply entering this line in Chrome’s “console mode” made the “modal” banner disappear (hidden) from the page as expected:

$('#popupFrontPageBanner-modal').modal('hide')

But when I have tied to enter and apply this in Wix’s developer HTML code editor, it always failed to affect anything, rather it underlines with red the “$” string and it complains “Cannot find name ‘$’. Do you need to install type definitions for jQuery? Try npm i --save-dev @types/jquery.”

So here’s where I’m stuck again, and have no clue what to do or modify next, and how to make this working in Wix’s site HTML code editor. Hope that my research and info update so far may trigger some reactions and solution tips regrading.

My hope is, that if it worked fine in Chrome’s console, than there’s a way to exchange something or modify it, to make it work in Wix’s HTML editor somehow for my site’s page permanently…

Thank you!