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
Related
I have HTML code with a table integrated with PHP Laravel. I'm getting data from Admin.php to my HTML. So the table is coming by a back-end code and is wider than the screen window. I have added a horizontal scroll bar to move it. I have added a link on back-end to move between <th> with hash href. The problem is when I click on the link, it is move to the particular <th> by scrolling horizontally as well as scrolling vertically.
Anchor tag in Admin.php:
$orderIdColumn .= '<br>Read notes >';
I added a jQuery in my HTML to prevent vertical scrolling:
$(document).ready(function()
{
$('.intro').bind('click',function(event)
{
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 100);
event.preventDefault();
});
});
Even after including this, the link is still vertically scrolling. However, after adding a static link in HTML and bind it with the above function, it is working. I guess the problem is the link is coming from back end, but not sure. How can I solve this?
This is a demo most likely what I'm trying to do. This code is working perfectly without any vertical scrolling. I don't understand why this is not working in my project.
http://jsfiddle.net/34r76ag8/21/
Just create a function in the HTML file and call it in the element in php page with onclick.
function scroll(){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 100);
event.preventDefault();
}
in php file
$orderIdColumn .= '<br>Read notes ';
Try to inspect with the chrome developer tool to verify that information received from the back-end is correct.
you can do this by doing the following : ctrl + shift + c (to open the inspector)
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();
}
I have a dead simple jQuery code responsible for navigation through website using animated scrolling.
jQuery(".main_menu li a").click(function() {
var href = jQuery(this).attr('href');
if(jQuery(this).html() == 'Home') {
jQuery("html, body").animate({ scrollTop: jQuery('body').offset().top }, 1000);
}
else {
jQuery("html, body").animate({ scrollTop: jQuery(href).offset().top }, 1000);
}
return false;
});
After making some unrelated changes in CSS and template the scrolling suddenly stopped working - now I can only scroll to top of the page by clicking "Home". Running the scrolling code in console doesn't work either. I tried to undo the changes I've made but it doesn't seem to help so I'm stuck here looking for the reason of this issue.
Here's the live version.
Problem here is All Section id's is getting duplicated. Section id's woda,oferta, o-firmie, galeria and kontakt.All section id's is getting duplicated double times in HTML markup. Please change their duplicated id's value for a section then it will working fine.
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();
}
});
});
Hi I am using Jquery scrollToElement to scroll to a particular div on a page (its a single page layout) but now there is a new page. I want to know how to use the same nav to go back to the old page and scroll to particular div do I use index.html#div ?
Write a common function for scrolling to particular div say scroll_me(), Then you can call the function by passing div id on document ready function
Example
function scroll_me(id){
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
You can call this function on
$( document ).ready(function() {
scroll_me('particulardiv');
});
You shoud put slash before #div
index.html/#div