Unexpected page scroll when element loads - javascript

I am loading an embeddable element, but when the page loads it jumps/scrolls to the element. I've tried adding in a function that would scroll to the top of the page using jQuery, but to no avail.
I've noticed this behaviour on Chrome and Edge, however, it does not occur on FireFox. Any clues?
I expected the page to not scroll to the element. I added the jQuery function and still experience the same behaviour.
const elementConfig = {
language: 'en-US',
trip: {
originAirport: "RIX",
destinationAirport: "TLL"
},
placement: '',
features: {
showFilters: true,
showMapLegend: true,
}
}
function onSherpaEvent(event) {
// Ensure that the sdk is loaded before creating the element:
if (event.type === 'sdkLoaded') {
$sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
}
}
$(document).ready(function() {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
<script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId=sxM5NjIzNz" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="what">What</div> <br> some <br> content <br> that <br> is <br> just <br> meant <br> to <br> be <br> a <br> placeholder <br> in order <br> to see <br> if <br> this <br> scroll <br> issue <br> happens <br> here
<div id="sherpa-trip-element">sherpa-trip-element</div>

You need to ask Sherpa. There are hundreds of scroll calls in the widget. There is no callback on mount and the document.ready is already triggered when the sherpa focuses.
The best bet is to move the widget into an iFrame you control

Try to Check the version.
Here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs

Related

Why is window.scrollTo() not being called?

I'm using Bootstrap's Buttons plugin toggle state feature on a custom checkbox. When this button is toggled (on), a hidden element should appear near the top of the page and then the page should scroll to the top. When the button is toggled next (off), the element should disappear and the page should scroll to the top.
The hidden element is toggled when the button is toggled on and off but the scroll is not working.
Changing the data-toggle from 'buttons' to 'button' makes the scroll work but does not visibly toggle the button so that is no good.
I tried setting an onchange event for the checkbox itself but that also doesn't scroll.
It seems that Bootstrap's function for the onclick event is doing something that doesn't allow my onclick function to run properly. I failed at trying to understand it so far (I will keep trying).
Setting a timeout for the window.scrollTo() function makes it work. Why could this be? Is there a way to do this without the timeout?
<body>
<div class="container">
<div>
<h3>Toggle Header and Scroll To Top</h3><hr />
<h1 id="displayMe" class="d-none">Display Me</h1>
<div style="height: 100vh;"></div>
<div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
<input type="checkbox" class="custom-control-input" id="myCheckbox">
<label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
</div>
</div>
</div>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#myButton").on("click", toggleAndScroll);
});
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
//setTimeout(function () {
window.scrollTo(0, 0);
//}, 100);
}
</script>
</body>
https://jsfiddle.net/ews9q50v/
(Uncomment the setTimeout lines to see it working)
I have no idea why it doesn't work. Bootstrap is messing something up.
But you can easily bypass it by moving scrollTo to the end of event loop using setTimeout(func, 0).
$("#myButton").on("click", toggleAndScroll);
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
setTimeout(function () {
window.scrollTo(0, 0);
}, 0);
}
demo
This seems to work for chrome but Firefox is having other issues:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
But since you are using jQuery something like this works in both Firefox and chrome:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
$("html, body").animate({ scrollTop: 0 }, "slow");
}
I'm not entirely sure what the issue is - probably something to do with the scroll height changing at the same time as scrollTo is called.

Select 1st 2nd and 3rd child element of THIS element

I have two links that show and hide different divs. The divs have 3 elements h2, p and img and I would like to animate each element separately but can't seem to figure out how.
I would like to click on a link and make each element have a different animation for entrance and leaving. I am pasting my html and jQuery here hope someone can help.
function showonlyone1(thechosenone) {
$('.uslugetxt').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeTo("slow", 1);
$(this).children().animate({
fontSize: "50"
}, 500)
} else {
$(this).fadeTo("slow", 0);
$(this).children().animate({
fontSize: "0"
}, 500)
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
analitycs
PPC campaigns
</div>
<div class="uslugetxt" id="x1" class="x1">
<h2 class="naslovx">GOOGLE ANALITYCS</h2>
<p>
There is something funny about your data? You double question
</p>
<img src="imgs/analitika.jpg" alt="analitika-slika">
</div>
<div class="uslugetxt" id="x2" class="x2">
<h2 class="naslovx">DISPLAY ADVERTISING</h2>
<p>
Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
</p>
<img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>
try using the :nth() pseudo selector?
showonlyone1 = function showonlyone1(thechosenone) {
$('.uslugetxt').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeTo( "slow", 1 );
$(this).children(":nth(0)").animate({fontSize: "50"}, 500, function(){ $(this).parent().children(":nth(1)").animate({fontSize: "30"}, 500)
})
}
else {
$(this).fadeTo( "slow", 0 );
$(this).children().animate({fontSize: "0"}, 500)
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
analitycs
PPC campaigns
</div>
<div class="uslugetxt" id="x1" class="x1">
<h2 class="naslovx">GOOGLE ANALITYCS</h2>
<p>
There is something funny about your data? You double question
</p>
<img src="imgs/analitika.jpg" alt="analitika-slika">
</div>
<div class="uslugetxt" id="x2" class="x2">
<h2 class="naslovx">DISPLAY ADVERTISING</h2>
<p>
Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
</p>
<img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>
Now for your next question, how to time animations, simply use the complete function of the animation. So when my first animation completes, the second runs -- but bear in mind that, in the context of the completed function, 'this' refers to the animated element! We'll go back to its parent, select the next child, and animate THAT.

Page Refresh Preloader Page Position Issue

Hi There I am having a problem with my preloader. If I am say half way down a page and I click a link or page refresh the next page shows at the last position (e.g half way down page as I was on previous page.) I need every page to be at the top. Here is my code:
$(window).load(function(e){
e.preventDefault();
$('#status').fadeOut('slow');
$('#preloader').fadeOut('slow');
$(function(){
$(this).scrollTop(0);
setTimeout(function(){
$('html, body').css({ "overflow-y":"auto"});}, 500);
});
});
Hi found the answer based on this Reload browser does not reset page to top
scrollTop function wasn't working properly here is working example
$(window).load(function(e){
e.preventDefault();
$('#status').fadeOut('slow');
$('#preloader').fadeOut('slow');
$(function(){
$('html').animate({scrollTop:0}, 1);
$('body').animate({scrollTop:0}, 1);
setTimeout(function(){
$('html, body').css({ "overflow-y":"auto"});}, 500);
});
});
Put $(this).scrollTop(0); after a (Minimum)delay(Pushed later in event-loop)
$(window).load(function(e) {
e.preventDefault();
$('#status').fadeOut('slow');
$('#preloader').fadeOut('slow');
$(function() {
setTimeout(function() {
$(this).scrollTop(0);
}, 0);
setTimeout(function() {
$('html, body').css({
"overflow-y": "auto"
});
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

How to prevent textarea from dancing while typing and running into page bottom? : JQuery/CSS

I am continuously typing into auto sizing textarea;
When text goes runs into bottom of page and i continue typing;
What i find is that the page dancing like hell on each keypress or keyup and text runs into bottom of page (for which i need to scroll down to check what is happening). How to prevent page dancing and text running into bottom?
JS Fiddle: https://jsfiddle.net/osbnnbxa/
Browser: IE10 (Also find little dancing in firefox; but client use IE10 so need to work on that only)
HTML:
<div>
<div>
<br><br>
<textarea class="normal" name="myarea" id="myarea" style="height: 100px; overflow-y: hidden;"></textarea>
</div>
</div>
<input type="button" class="butt" value="ehehehhe" />
JQuery:
var myquery = {
autoHeight: function(e) {
$(e).css({
'height': 'auto',
'overflow-y': 'hidden'
}).height(e.scrollHeight);
},
init: function() {
setTimeout(function() {
$('textarea').each(function() {
myquery.autoHeight(this);
}).on('input', function() {
myquery.autoHeight(this);
});
}, 200);
$("textarea").keypress(function(e) {
$(".butt").focus();
$(this).focus();
});
}
};
$(myquery.init);
Update: Customer says do not define maximum height of textarea. Let it flow as the text increases.
Okay, I know you said to let the textarea flow, but I really like this solution. In your fiddle, it lets the textarea grow to close to the bottom of the viewport and stops all the dancing. It's hopefully a reasonable compromise. Modified fiddle is here.
textarea {
max-height: 85vh;
}

How to fix an element after scroll in an AngularJS webpage

I recently made a website in AngularJs. I am still in the learning phase.
I wish to fix an element on a page after it reaches the top. I have tried all sorts of Javascript and Jquery functions. However, they don't seem to be working.
I also tried using Angular UI's ui-scrollfix but it is also not working.
I am sharing my code. It is a partial page. Please advise me a method to achieve the above mentioned effect.
<div class="row pdiv">
<div class="col-md-8 pdiv col-md-offset-2">
<h3><b>About Us</b></h3>
<ul class="nav nav-justified">
<li role="presentation">What are we?</li>
<li role="presentation">Brands Associations</li>
<li role="presentation">Know Us</li>
<li role="presentation">Our Motto</li>
</ul>
</div>
<div id="weAre" class="col-md-8 pdiv col-md-offset-2">
<br>
<h4><b>What are we?</b></h4>
<p>Some content goes here.</p>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="brandsAssociation" class="col-md-8 pdiv col-md-offset-2">
<br>
<h4><b>Brands Associations</b></h4>
<p>Some content goes here.</p>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="knowUs" class="col-md-8 pdiv col-md-offset-2">
<br>
<h4><b>Know Us</b></h4>
<p>Some content goes here.</p>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="motto" class="col-md-8 pdiv col-md-offset-2">
<br>
<h4><b>Our Motto</b></h4>
<p>Some content goes here.</p>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<span id="toTop" class="glyphicon glyphicon-chevron-up"></span>
I need to fix the ul class .nav .nav-justified after it hits the top of the page.
I am using bootstrap.
here are the javascript dependencies.
<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
Please help...
To fix your ul to the top when it hits the top of the page on scroll, you can put a directive on it that checks for the window's scrollTop() exceeding the ul element's offset top. When that occurs, the directive can just add a class to the element that fixes it to the top.
So your ul markup would look like this, with new directive set-class-when-at-top on it:
<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
That directive would add the CSS class fix-to-top to the element when the element hits the top of the page. The directive definition would look like this:
app.directive('setClassWhenAtTop', function ($window) {
var $win = angular.element($window); // wrap window object as jQuery object
return {
restrict: 'A',
link: function (scope, element, attrs) {
var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
offsetTop = element.offset().top; // get element's offset top relative to document
$win.on('scroll', function (e) {
if ($win.scrollTop() >= offsetTop) {
element.addClass(topClass);
} else {
element.removeClass(topClass);
}
});
}
};
});
If you wanted to get a bit cheeky, you could even reduce your scroll handler to just one line:
$win.on('scroll', function (e) {
element[($win.scrollTop() >= offsetTop) ? 'addClass' : 'removeClass'](topClass);
});
And the fix-to-top CSS class would just be something like this:
.fix-to-top {
position: fixed;
top: 0;
}
Here's a fiddle.
I started using MikeJ's great answer to get started, but quickly realized a few shortcomings:
Didn't account for when content above the element changes dynamically after the directive is first parsed
Content below the fixed element moved up the height of the element when it became fixed and was removed from the normal document flow
If this element is being fixed below something else (like a top menu) you may have some trouble calculating the right spot; you need to fix it before the offset top is past where the $win.scrollTop() is, so that it doesn't disappear behind that menu and then get fixed after.
To fix these, I came up with a modified version:
function setClassWhenAtTop($window) {
var $win = angular.element($window);
return {
restrict: "A",
link: function (scope, element, attrs) {
var topClass = attrs.setClassWhenAtTop,
topPadding = parseInt(attrs.paddingWhenAtTop, 10),
parent = element.parent(),
offsetTop;
$win.on("scroll", function () {
// dynamic page layout so have to recalculate every time;
// take offset of parent because after the element gets fixed
// it now has a different offset from the top
offsetTop = parent.offset().top - topPadding;
if ($win.scrollTop() >= offsetTop) {
element.addClass(topClass);
parent.height(element.height());
} else {
element.removeClass(topClass);
parent.css("height", null);
}
});
}
};
}
This requires the element you are fixing to be wrapped in an empty parent that only contains the element to fix. This is to handle both knowing where the original offset of the element was (for putting it back into the document flow) and to have the height of the original element to keep the document flow as it was. In addition, pass in an attribute for paddingWhenAtTop to fix it sooner (or later if desired).
Usage in the HTML changes like so:
<div>
<ul class="nav nav-justified" set-class-when-at-top="fix-to-top" padding-when-at-top="50">
</div>
Here is my attempt to make it full angularjs :
JS
.directive('setClassWhenAtTop', ['$window', function($window) {
var $win = angular.element($window); // wrap window object as jQuery object
return {
restrict: 'A',
link: function (scope, element, attrs)
{
var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
topPadding = parseInt(attrs.paddingWhenAtTop, 10),
offsetTop = element.prop('offsetTop'); // get element's offset top relative to document
$win.on('scroll', function (e) {
if ($window.pageYOffset + topPadding >= offsetTop) {
element.addClass(topClass);
} else {
element.removeClass(topClass);
}
});
}
};
}])
CSS
.fix-to-top {
position: fixed;
top: 55px;
height: 50px;
z-index: 999;
width: 100%;
}
HTML
<div class="navigation-bar" set-class-when-at-top="fix-to-top" padding-when-at-top="55">
...
Main changes to skip jquery :
parent.offset().top => element.prop('offsetTop')
$win.scrollTop() => $window.pageYOffset
Tip of the day :
Would you please stop always giving angularjs title questions jquery answers ! Or at least indicate it clearly in your title or in your answer requirements ;-)

Categories

Resources