Scrolling only horizontally is not working - javascript

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)

Related

Using a variable to set a ScrollTop with animate function

I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>
You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.

Using a parameter in URL to scroll to div (mimicking an anchor behavior)

I'm using a jQuery tabs plugin that uses anchors so that you can define which tab should be open by default.
But if the interface is below the fold, it doesn't scroll into view. I tried adding an anchor tag above the interface, but I can't get it to highlight the appropriate tab AND scroll into view.
Since I can't use two anchors, my thought was if I wanted to provide a link to scroll into view I could include a parameter in the URL, like this:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2
(where "Interface" might be the name of an anchor of id name at the top of the interface)
I googled and searched stackoverflow and couldn't find anything. Is there some sort of script that would allow this to work? Or is there a better way to do this?
Here's a working example:
http://stage.ravencreative.com/scroll/Index.html
This makes the second tab active:
http://stage.ravencreative.com/scroll/Index.html#parentHorizontalTab2
(#parentHorizontalTab2 is what makes the second tab open by default)
This scrolls to the tabbed interface:
http://stage.ravencreative.com/scroll/Index.html#Interface
(#Interface is the anchor at the beginning of the interface)
But I can't get both to work at the same time. Any suggestions? Is there a way to do something like:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2 where a script picks up on the scrollto parameter and scrolls to it?
Something like (I'm using English since I am not familiar with the code construct):
if scrollto is found in the URL
then scroll to the anchor defined in the scrollto
You can use a variety of #tabConditionSelector conditions as you described, then on document.ready you can read it and scroll / select and anything else on a case-by-case basis.
Using jQuery:
$( window ).load(function() {
var hash = window.location.hash;
if (hash == "#parentHorizontalTab2") {
var top = document.getElementById("Interface").offsetTop; //Getting Y of target element
window.scrollTo(0, top);
} else if (hash == "#parentHorizontalTab3") {
//select tab 3 etc
}
});
You can use this to scroll to specific location on load from link hash
$(window).load(function () {
var hash = window.location.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 'slow');
});

jQuery smooth scrolling on a different webpage

I have managed to get the smooth scrolling working on a single page using the following code.
Note the HTML link is stored in a header.php and used across multiple pages below is a code snippet:
HTML Script:
<a class="item" href="index.php#contact">
<a name="contact"></a>
JS Script:
$('a[href="index.php#contact"]').click(function (e) { // user clicks on html link
e.preventDefault(); // prevent the default behaviour that occurs in the browser
var targetOffset = $('a[name="contact"]').offset().top; // define a variable to point at a particular section & offset from the top of browser
$('body').animate( // create animation
{ scrollTop: targetOffset }, 1000); // scrollTop property = target variable
});
Problem:
When I go to a different webpage and click the contact link it does not link back to the index.php#contact and scroll down to the contact anchor point.
Any assistance or advice is much appreciated I'm sure its a simple tweak in the code somewhere.
Check your href it's supposed to be: index.php/#contact

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

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.

Categories

Resources