scrollTop doesn't work on jQuery popup box - javascript

This is my script for scrolling.
$("#oneA").click(function() {
$('html, body').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
and my html
<div id='oneA' style='height:100px;'></div>
<div id='twoA' style='height:100px;margin-top:300px'></div>
The above works fine as I tested on a static/normal page. But when I try the same on a popup box, it doesn't work at all. I suspect this could be library conflict between the popup and the jQuery scrolling.
I've placed these libraries
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='../js/jquery.magnific-popup.min.js'></script>
<script src="../js/index.js"></script>
in the footer for the popup box. Without this the popup won't appear.What's the possible way to make the scrollTop work on this popup, please?

$("#oneA").click(function() {
$('#popupId').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
In the place of, html,body I replaced with the popupbox id and it worked within popup.

Related

Jquery Smooth scroll in AngularJS1.0.7

is it possible to do Smooth Scroll with Jquery 1.10.2 in AngularJs 1.0.7? I have tried many examples, but none of them are working. I think I have always the same issue.
According to this example: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
I have:
<body ng-cloak>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
...
Click Me to Smooth Scroll to Section 2 Below
...
<div id="section2">
...
<script>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</script>
</body>
This is not working. I think it´s because Angular is parsing the link. Any ideas? I know there are a couple of directives but not working for me neither. I would like to approach it with Jquery.

Need JavaScript help for smooth scrolling

I have a working "go to top" button in my forum. I have chosen to go with the following code because it does not change my forum's URL in any way, which is important. Within the head section:
<script>
function scrollWindow() {
var top = document.getElementById('goHere').scrollTop;
window.scrollTo(0, top);
}
</script>
The div within the body I want to go to:
<div id="goHere"></div>
The input:
<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />
It functions well and leaves my URL clean. My questions:
Can my JavaScript be edited to allow smooth scrolling to the div ID (and if so, would you please help me with the edits)?
Must I link to an external jQuery file in order to achieve this?
So making it as simple as possible, here it is using JQuery, see fiddle http://jsfiddle.net/aq9ptz0L/2/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#goHere").offset().top
}, 2000);
});
Note in your <head> section add this if you dont already have JQuery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Add this script instead of your script and working fiddle here Link
!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}});
function scrollWindow() {
var top = document.getElementById('goHere');
window.smoothScroll(top)
}
</script>

Datatables scroll top on page change

I have a problem. I would like to scroll top of table on page change when using datatables.
I've added the following code
$('#tableId').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: 0
}, 200);
});
(at the moment it scrolls to top of page) but it doesn't completely work.
When I click other page, page is scrolled top, but just after data is loaded it scrolls down again. I don't know what is happening (I'm not JavaScript guru) but it seems Datatables runs extra action after data are loaded that scrolls again to bottom. Is there any way to prevent Datatables (probably) from scrolling down after loading data?
I could use draw.dt instead of page.dt and it would work fine but it would cause other side effects. If table is placed somewhere on page, just after loading data, it would be scrolled to top of page (or top of table) and I would like to run this only after changing page.
I figured it out, but it took me a lot of time. The issue was when I was using Bootstrapped version:
<script type="text/javascript" src="https://cdn.datatables.net/t/bs/jq-2.2.0,dt-1.10.11/datatables.min.js"></script
when I changed it into:
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>
it was working fine.
So finally I noticed I can include it like so (datatables and bootstrap plugin in separate files):
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
The problem was in last file (not minified version is here - https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js ). In this file there is a line:
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
this exact line causes that when I clicked on button to change page after loading data focus was moved again to bottom of page. When I used this file locally and commented this line, now when I used:
$('#tableId').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: 0
}, 200);
});
I was moved to top of page, and when I used;
$('#tableId').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: $('#tableId').offset().top
}, 200);
});
I was moved to top of table.
This works well globally, without having to write code to target each table on your site/application.
// Scroll back to top of datatable when its pagination button is clicked to load/display next page
$('.dataTables_wrapper').click(function(event) {
var clickedElem = event.target;
if ($(clickedElem).hasClass("paginate_button") || $(clickedElem).parents('.dataTables_paginate').length) {
/* Not when the button is diabled */
if (!$(clickedElem).hasClass("disabled") && !$(clickedElem).parents('.disabled').length) {
let divContainingTheDataTable = $(clickedElem).closest('.dataTables_wrapper');
$('html, body').animate({
scrollTop: $(divContainingTheDataTable).offset().top - 60
}, 200);
}
}
});

How do disable JavaScript inside an div?

I have an problem with my JavaScript and I'm not sure how to deal with it.
So I'm using this script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 700);
return false;
});
});
The script is making a smooth scroll on my page which I think is really cool, so I don't want to delete it.
But my problem is, that I also have a simple gallery slider on my page, but the JavaScript will effect that gallery slider. It scrolls to the top when clicking on a link in href. The code for the gallery slider is:
<div id="images">
<img id="billede1" src="http://i.imgur.com/dL3io.jpg" />
<img id="billede2" src="http://i.imgur.com/qASVX.jpg" />
<img id="billede3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="billede4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
The thing is, I really like the simple code and I'm trying to be better, so I don't want to use some advanced code which I don't understand.
Is is somehow possible to disable the JavaScript not to be working in my div? Or maybe called it something else than the "href"?
I think my "href" is the problem.
So.. Here it is in fiddle:
http://jsfiddle.net/62dsqLff/
and you can see the problem.
Really thanks. I appreciate it :-)
Let me share a fiddle for you JSFIDDLE on this demo I am given new class called .nav for your navbar anchor tags. Then rewrite the script like below.
$('a.nav').click(function () {
alert( $($(this).attr('href')).offset().top);
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 700);
// return false;
});
Use an id for that anchor, instead of a vague "nav a" which will trigger on any a inside your nav element. Also prevent default action if you are using an a as a button. The right way to create your "return top" script, is to target a button. Instead of nav a, create a button, give it an id, and target that id.

Javascript scroll vertically after clicking an image

I have a set of buttons that are currently just images with different hover effects defined like so:
<img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" />
And what I want to do with them is scroll down to a different div upon clicking them but I am unsure on how to do this. I found a sample piece of code that works in this scenario here http://jsfiddle.net/ryXFt/3/ but my problem is that I don't know how to apply this to my images that I have created.
This is my failed attempt at trying to get it to work:
<script type="text/javascript">
<script>
$("home.PNG").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
However it does not work and I am unsure simply how to get javascript to recognise the image as something to click.
your selector is wrong
<script type="text/javascript">
<script>
$("#myID").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
look at the jquery documentation
You need to add an id property to the image:
<img src='home.PNG' id='homeimg'.....>
And access it like this:
$("#homeimg").click(...

Categories

Resources