Develop Reference

Scrolling only horizontally is not working

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)

Scroll to top of datatable in an iframe?

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

Scrolling Site Issues With Main Nav

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();
}
});
});

JAVASCRIPT - script conflicts?

I have a Carousel made from bootstrap and this is the script to run it.
<script>
!function ($)
{
$(function()
{
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
I tried adding a different effect on the navigation bars I got so that when I click the navigation, it will slide up into the section in that page. I added this script.
<script>
$('a').click(function()
{
$('html, body').animate(
{
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
when I added the script, the left and right buttons in the carousel stopped working. I really don't know if it had a conflict with the second script. I spent around half an hour looking for the error and finally found out that the second script conflicted with the carousel script.
Is there an error in the scripts? How do I fix it?

My guess is that
$('a').click(function() { /* ... */ })
conflicts with the click event handler set up by carousel(). You could add a class on your navigation links (or use whatever nav class is already there), and use a more specific selector in this second script.

Oh.
Figured it out just now.
Added li in $('a').click(function()
Now it looks like $('li a').click(function()
It doesn't conflict now :))

How to control the scrolltop javascript function?

I'm using the Pagify.js plugin, which helps create one page websites by using jquery to pull several html files inside a container div without the browser having to refresh the whole page.
The problem is that I'm trying to scroll to the nav bar div when a link is clicked, and I'm getting odd results. Here is the plugin and HTML jsfiddle. Here is the code I'm using to scroll (I'm not sure where to put it)
$('html, body').animate({scrollTop:$('#nav').position().top});
http://jsfiddle.net/5y9HT/
If I paste the scrollTop code in different places in the pagify.js, different things happen, none of which behave exactly right.
I'm trying to achieve a situation where it will scroll to the nav div if a link is clicked, but will not scroll if the browser is refreshed (it should already be there. Just like on this site: http://www.madebysofa.com/archive/index.html

I think you want #nav's offset, not it's position:
$('.content').on('click', 'a', function(a){
a.preventDefault();
$('content').get('newPage.html');
var nav_position = $('#nav').offset();
console.log(nav_position);
$(document).animate({
scrollTop: nav_position + 'px';
});
});
You might still be able to use your position().top in the same manner.
$('.content').on('click', 'a', function(a){
a.preventDefault();
$('content').get('newPage.html');
var nav_position = $('#nav').position().top;
console.log(nav_position);
$(document).animate({
scrollTop: nav_position + 'px';
});
});

try this,
$('html, body').animate({scrollTop:$('#nav').offset().top}, 1000);
you can also use document instead of specifying both 'html', and 'body'. Hope it works.