Angular cannot scroll top in modal - javascript

I have the following form in my Angular project (I added jquery import to the ts file):
<style>
body .ui-dialog .ui-dialog-content {
overflow-y:scroll; /* I made the scrollbar of modal visible */
}
</style>
<div id="createForm" class="ui-g-12">
<div class="ui-g form-group p-justify-between">
<!-- other stuff -->
</div>
</div>
I tried to use the following approach that I had used in my previous projects without any problem. I tried to trigger this method via a button but it does not make any sense:
scrollTop() {
//when I use this it works but scroll the body behind the popup instead of popup
$('html, body').animate({ scrollTop: $(document).height() }, 'slow');
//this does not work
$('html, body').animate({ scrollTop: $('#createForm').offset().top }, 'slow');
}
Is there anything that I should do for Angular?

Related

Scroll div using fadeIn

I have following code and what i am trying to do is when i click the button, content of div should be displayed from the initial of div.I am not good at js.For now when i click the button then div content doesnot shows untill i scroll the page . So how could i make it scroll automatically to the top of div content when i click the button?
//HTML
<button type="button" class="btn btn-info btn-block" id="show"></button>
<div class="container-fluid" id="detail" style="display:none;"></div>
//Js
$(document).ready(function(){
$("#show").click(function(){
$("#detail").fadeIn();
});
});
Try this
$(document).ready(function() {
$("#show").click(function() {
$("#detail").fadeIn();
$('html, body').animate({
scrollTop: $("#detail").offset().top - 100
}, 800);
});
});
You can add an element above the div element.
After then, use this function in the button click event.
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
Here is the example.
https://plnkr.co/edit/kcs8UZaBcaegwTSSeThM?p=preview
You can use jQuery ScrollTo plugin.
http://api.jquery.com/scrollTop/
$('#myButton').click(function() {
//optionally remove the 500 (which is time in milliseconds) of the
//scrolling animation to remove the animation and make it instant
$.scrollTo($('#myDiv'), 500);
});

Scroll down button not working

I want a simple scroll down button and it will go down to the section.
I have tried literally every damn button and jQuery and Javascript there is to do this, but it just wont happen.
It links it to the section and moves there but it all happens instant, there is no slow animation, almost like it does not recognize the Javascript or jQuery.
This is my div where the button is in.
This is the jquery i am currently using, I have it right under the button and it is between <script> tags.
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
<button id='downClick'>Go Down</button>
</div>
The Code Snippet works as I want it to, but in laravel it just teleports instantly to the specified section.
Can someone please tell me why it doesn't do the animation?
Try replacing: scrollTop: scrolled with scrollTop: $(document).height()
NOTE: Note the use of $(window).load (when images are loaded...which occupy height) rather than document.ready.
Ref: jQuery Scroll To bottom of the page
UPDATE: To scroll to a specific section replace scrollTop: $(document).height() To $("#my_section_to_scroll_to").offset().top
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: $("#my_section_to_scroll_to").offset().top
});
});
});
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
<button id='downClick'>Go Down</button>
</div>
<div id="my_section_to_scroll_to" style="margin-top:300px;border:solid 1px">
my_section_to_scroll_to
</div>
You're not specifying the speed of the animation, by default it's fast, try this out :
var scrolled = 0;
$(document).ready(function() {
$("#downClick").on("click" ,function() {
// I assume scrolled is the height of the element you want to scroll to
scrolled = scrolled + 100;
$('body,html').animate({ scrollTop: scrolled }, 800);
});
});
If you want to the bottom of the document you could use this.
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled = $(document).height()
$("html, body").animate({
scrollTop: scrolled
});
});
});
But you could use this to get down one element height.. or div or if you use + you can scroll multiple div height!

Scroll to top of an element without using animate

HOw can I scroll to top of an element without using animate()? I googled, but all answers are with animate().
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I just want to instantly go to the top of an element. In my case, the animate() is not necessary.
Use .scrollTop()
$("#button").click(function() {
$('html, body').scrollTop( $("#elementtoScrollToID").offset().top);
});
.dummy {
height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Test</button>
<div class="dummy"></div>
<div id="elementtoScrollToID">elementtoScrollToID</div>
You can do it just passing an anchor, pure HTML:
go to top
and you just add an <a name="top"></a> on the top of your website :)
You achieve the same affect without jQuery by using Window.scroll()
document.getElementById("button").onclick = function() {
window.scroll(0,document.getElementById("elementtoScrollToID").offsetTop);
};
<button id="button">Button</button>
<div id="elementtoScrollToID" style="margin: 800px 0;">
Scroll to here...
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Add class to appropriate nav tab when cooresponding div is scrolled into

I have read similar questions and researched scrollspy, but I don't believe it will do quite what I'm looking for, since as far as I can tell it can only use bootstrap style highlighting. (If it can do more please let me know!)
I have a 4-tab navbar (usually fixed top) and a single-page site. Each tab corresponds to a different section of the page, and each section has a different background color. What I'd like to do is change the tab color to be the same as the corresponding section's background color whenever that region is scrolled to (so it will only change color once the new section's top reaches the navbar's bottom.) I have achieved this effect only when the tab is clicked, triggering a scroll event and adding an active class, however the active tab will then remain if clicking is not used, creating the problem.
Is there a way to change a variable based off the current scroll location? I have tried what I can think of but it hasn't worked yet.
JS
$(window).on('scroll', function () {
if ($(window).scrollTop() >= $('#homeContainer').height()) {
$('.menuDiv').addClass('fixed');
} else {
$('.menuDiv').removeClass('fixed');
}
});
$("#menuHomeButton").click(function(e){
$('html, body').animate({
scrollTop: $('#homeContainer').offset().top
}, 'slow');
});
$("#menuAboutButton").click(function(e){
$('html, body').animate({
scrollTop: $('#aboutContainer').offset().top + 1
}, 'slow');
});
$("#menuPortfolioButton").click(function(e){
$('html, body').animate({
scrollTop: $('#portfolioContainer').offset().top - $('.menuDiv').height() + 1
}, 'slow');
});
$("#menuContactButton").click(function(e){
$('html, body').animate({
scrollTop: $('#contactContainer').offset().top - $('.menuDiv').height() + 1
}, 'slow');
});
HTML
<div class="mainContainer">
<div class="container blue" id="homeContainer">
</div>
<div class="menuDiv"><!--
--><div class="menuItem" id="menuHomeButton" ng-class="{'active':selectedTab === 'home'}" ng-click="selectedTab = 'home'">
<div class="menuTextDiv"><p>Home</p></div><div class="menuItemColor blue"></div>
</div><!--
--><div class="menuItem" id="menuAboutButton" ng-class="{'active2':selectedTab === 'about'}" ng-click="selectedTab = 'about'">
<div class="menuTextDiv"><p>About</p></div><div class="menuItemColor blue2"></div>
</div><!--
--><div class="menuItem" id="menuPortfolioButton" ng-class="{'active3':selectedTab === 'portfolio'}" ng-click="selectedTab = 'portfolio'">
<div class="menuTextDiv"><p>Portfolio</p></div><div class="menuItemColor blue3"></div>
</div><!--
--><div class="menuItem" id="menuContactButton" ng-class="{'active4':selectedTab === 'contact'}" ng-click="selectedTab = 'contact'">
<div class="menuTextDiv"><p>Contact</p></div><div class="menuItemColor blue4"></div>
</div><!--
--></div>
<div class="container blue2" id="aboutContainer">
</div>
<div class="container blue3" id="portfolioContainer">
</div>
<div class="container blue4" id="contactContainer">
</div>
<div class="container">
</div>
</div>
Here is a fiddle, but for some reason I couldn't get the ng-click and ng-class to work on it, which changes the tab color.
Here are some images of what it looks like not on js fiddle:
What I want and have:
http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png
http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png
What I don't want but still also have:http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png
If anyone has a solution I'd be extremely greatful! Thank you!
Get the distance of the div from top:
distance = $("div").scrollTop()
note: do not use var when declaring distance because than you can't access it inside a function
Then check if div has reached the top and add class:
$(window).on('scroll', function () {
if(distance - $("div").scrollTop() >= distance ){
//do something
}
});

Jquery and Foundation 4 Accordion Deep Linking

I'm using Foundation 4 accordion with deep linking set to true:
<div class="section-container accordion" data-section="accordion" data-options="deep_linking: true">
<section class="section">
<h3 class="title"> Program Highlights <span class="arrow_down"></span></h3>
<div class="content" data-slug="panel1">...
Despite Foundation docs saying this should work, this by itself does nothing... so I added:
$(document).foundation('section', {
callback: function (){
var containerPos = $('.active').offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
}
});
This works, but I wanted the accordion panels to close when clicked again, instead of having to click another panel. So I then add some code to toggle open/close each accordion panel and arrow up/down on click:
$(document).on('click','.accordion h3', function () {
$(this).find('span').toggleClass("arrow_down arrow_up");
$(this).next('div').toggle();
var containerPos = $(this).offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
});
Then only only the foundation callback works, not the toggling. So these both work individually, but when I have both in the script only the foundation callback works. How can I get both of these to work?
You can use data-options="one_up: true;" to collapse the content of you accordion. For example:
<div data-options="one_up: true;" data-section="accordion" class="section-container accordion"></div>

Categories

Resources