I have a certain page which holds a iframe and gets submitted and then a new message is shown within the iframe, this is a lot shorter then the iframe before so it doesn't go to the point I want it on the page.
Now I want to scroll to the new id using jQuery meaning the user can read it from the top and not have to scroll.
My id of my iframe is "#iframe-container".
if (window.location.pathname.split('/')[1] == "Test.aspx")
{
// jquery here.
}
thanks
$("html, body").animate({ scrollTop: $('#iframe-container').offset().top }, 1000);
You can change 1000 to be less to scroll faster or even to 0 to jump to the ID directly.
$("html, body").animate({ scrollTop: $('#iframe-container').offset().top }, 0);
Cross-window post message API support to communicate to new domain . using post message method.
In iframe page
iframe.contentWindow.postMessage("your message",iframe.src);
source page:
if (window.addEventListener) {
window.addEventListener('message', function (e) {
if(e.data =="yourmess age"){
$(window.parent.document).scrollTop();
}
Related
I have a button which scroll to a "target" div when pressed.
The button and the target div are being injected as an external widget to the site.
the function of the button:
scrollToElement = function() {
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetElementClass").offset().top - 10
}, 1000);
//other code
}
It seems that when page load the first press on the button scroll to a different location of the page.this only happen during the page load as it seem there is some kind of race condition between the scroll top calculation and the actual location of the "target" div during the load.
I thought of "stop(true,true).animate(......)" but as I read from the documentation it can stop other animation on the page so I think it may interfere with the customer site functionality and I ruled that out (please let me know if I'm wrong).
Do I have another option except the stop function to try and counter this issue?
Also I wonder if that behavior can be caused by other code performing "jQuery().stop()" and is there some kind way of resolving such collision?
I have a small scrollFunction that I think works well and it is pretty dynamic. You just simply create a button and in the onclick parentheses add your target id/class. First you need a button in your .html file that looks like this:
<button type="button" onclick="scrollFunction(putYourTargetDivHere)">This is a button</button>
Then in your javascript/jquery file use this:
function scrollFunction(target) {
$('html,body').animate({
scrollTop: $(target).offset().top
},
'slow');
}
And if you want to run the function when the page loads you can use this:
window.onload = function() {
scrollFunction(YourTargetDivHere);
};
Best regards Max
It seems like my intuition was correct and some element which was loaded after my widget was stopping the scrolling animation , after adding additional animate on "complete" and "fail" function of the animation the scrolling now reach the correct location (though it is a little bit sluggish).
window.scrollToElement = function() {
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetelementClass").offset().top - 10
}, {
duration: 1000,
queue: false,
complete: function(){
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetelementClass").offset().top - 10
}, {
duration: 500,
queue: false});
},
fail: function(){
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetelementClass").offset().top - 10
}, {
duration: 500,
queue: false});
}
});
// other code
}
The result is that on failure or if something mark the animation as complete before actual completion another animation is being made.
It is not perfect as the scroll seem to be lagging sometimes and I assume more tweaking are needed.
I have a website which uses jQuery to scroll between a few sections (in page1.html). Now, I added another page to the website (page2.html).
I would like the links in the header of page2.html to link back to the corresponding section in page1.html.
In page2.html I wrote:
<li>Home</li>
This links back to page1.html#splash. But on page1, the site does not scroll to the respective section.
My JavaScript is:
$(document).ready(function(){
$('a[href=\\#]').click(function(e){
e.preventDefault();
$('nav').removeClass('visible');
$('html,body').stop().animate({scrollTop: $('.'+$(this).data('scrollto')).offset().top-65 }, 700, 'easeInOutExpo', function(){});
});
What I already tried:
I attempted to add the following code, found elsewhere, to page1.html:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
But there is no scrolling to the right section and the console put out the following error: index.html:19 Uncaught ReferenceError: $ is not defined
Frankly, I am stuck at this point due to lack of expertise in this field.
How do I manage that the site actually scrolls to the right section when coming from another page?
Once you have left the page, the JavaScript from the previous page can't control it. So, you'll need to use jQuery to handle it on the new page when it loads. Place this code on page1.html, changing the comment to the scroll command:
$(document).ready(function() {
if (window.location.href.includes('#splash')) {
let animationTime = 100;
$('html, body').animate({
scrollTop: $('.splash').offset().top
}, animationTime);
}
});
Uncaught ReferenceError: $ is not defined
gives this type of error when your page doesn't get the JQuery
I would like to animate my page after the page was redirected using Jquery, the problem with my code is that it only redirects but ignores the animation code, how can I resolve this issue ?
$("#menu a:first-child").click(function() {
window.location.href = "https://www.mysite/blog";
$('html,body').animate({
scrollTop: $("#mainwrapper").offset().top - 70},
'slow');
});
(The animation just scrolls down to an anchor with fluid transition.)
When you redirect, your current script will stop. If you really one to do it, I think there is a way, I DO NOT recommend it, but it will do the job.
Before you redirect to the other page; I assume the new page is still in the same app, not a totally different website), you can set a localStorage variable. Then at be beginning of the JS file of the page you redirect to, check if that localStorage variable you have set in the earlier view is there, if it is, do the animation, then remove that localStorage variable.
// js file of current view
$("#menu a:first-child").click(function() {
localStorage.setItem("animation", true)
window.location.href = "https://www.mysite/blog";
});
// js file of redirected view
if (localStorage.animation && JSON.parse(localStorage.animation)) {
$('html,body').animate({
scrollTop: $("#mainwrapper").offset().top - 70},
'slow', 'linear', function() {
localStorage.removeItem("animation")
}
);
}
I am trying to add a function to my DataTables that scrolls to the top of the table when the pagination links are clicked and I have followed the guide here:
http://jsfiddle.net/EjbEJ/
function paginateScroll() {
$('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 100);
console.log('pagination button clicked');
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();
This works perfectly but unfortunately the page I have the DataTable on is loading in to an iframe and in an iframe it no longer works. Any idea how to get this script working in an iframe?
yes you must use postMessage to communicate with the iframe, and likely have your code in both places, so the parent frame can send a message to the frame, and then the frame can do the scroll animation.
https://davidwalsh.name/window-postmessage
just to let you know I resolved this issue. I just needed to add $(parent.document).find to get the html and body tags of the parent frame.
function paginateScroll() {
$(parent.document).find('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 100);
//console.log('pagination button clicked');
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();
Cheers
I've built a scrolling homepage for my site that allows users to click a link in the header to scroll down to different sections of the site. I also have external links to new pages that allows users to view different projects.
For whatever reason, it works great, but as soon as I get to one of the project pages, then try to click the home page, or the work links it doesn't work properly. Without creating a second header.php,
how can I make the nav work globally.
<script>
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var $anchor = $(this);
href_arr = $anchor.attr('href').split("#");
$('html, body').stop().animate({
scrollTop: $('#'+href_arr[1]).offset().top - 0
}, 500); // it was -70
event.preventDefault();
});
});
});
</script>
My links looks like this...
Link
Work
Any thoughts on how to fix the jQuery so it works on external pages?
It sounds like #home and #work don't exist on your product pages, correct? If that's the case then calling event.preventDefault() will actually prevent the browser from going back to your home page. Try checking if the element exists before preventing the default behavior. If the element doesn't exist, the browser will visit the link normally. This is one way of doing it.
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var hash = '#' + $(this).attr('href').split('#')[1];
// check if the element exists on your page
if ($(hash).length) {
// if so, scroll to it and prevent the default behavior
$('html, body').stop().animate({
scrollTop: $(hash).offset().top - 0
}, 500);
event.preventDefault();
}
});
});