I am using angular material, I am scrolling page to middle and navigating from one component to another one but after navigation page not loading from top it is showing in middle. Could any help. Thanks.
I found this, hope it helps
add this in your AppComponent
import { Router, NavigationEnd} from '#angular/router';
and
constructor(private router: Router){
//subscribes every changes of your route
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd){
//scroll to top
window.scrollTo(0,0);`enter code here`
}
});
}
Related
I am using mat-dialog from Angular Material design. When the content is longer the container height, the content in the mat-dialog-content should be scroll.
The scrollbar appears when you scroll down but it disappears after a few seconds. How can I show the scrollbar when the dialog appears? so that users are indicated that there is more content below and they will have to scroll down.
You can do the following in your dialog component constructor to always show vertical scroll on dialog open.
DI Renderer2 to call the setSyle() method on the element
private ren:Renderer2
The CDK overlay is not part of the component and need to grab it from the document.
let el = document.getElementsByClassName('mat-dialog-container').item(0);
Use Renderer2 to call the setStyle() method
ren.setStyle(el, 'overflow-y', 'scroll')
Component
import {Component, Inject, Renderer2} from '#angular/core';
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
#Inject(MAT_DIALOG_DATA) public data: DialogData,
private ren:Renderer2
) {
let el = document.getElementsByClassName('mat-dialog-container').item(0);
ren.setStyle(el, 'overflow-y', 'scroll')
}
Stackblitz
https://stackblitz.com/edit/angular-372fxl?embed=1&file=app/dialog-overview-example.ts
I have a link in my navigation toolbar which is in the footer. When I am on a page, and click on the nav link, It brings me to #the-page for a split second, but then I get redirected back to the page I was previously on.
Anyone else run into this problem?`
$('#page-link').on('click', function() {
$.mobile.pageContainer.pagecontainer("change", "#the-page", { } );
});
This on click was in a pageshow function of the page that was showing for a split second
$('.ui-listview').on('click', 'li.latest-news', function() {
$.mobile.pageContainer.pagecontainer("change", "#single-article", { } );
});
by moving it to a pageinit function it seemed to fix it.
It turns out this was a rebinding problem, I added a console.log inside of this function, and realized it was being called multiple times per click.
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
I am trying to show partial view in a page which i made it as layout. when i get the partial view loaded into the layout (main) page, i am unable to view tabs. only ul li and pages are continuously seen from top to bottom. I hope someone will suggest an answer to it
on your partial view put this code:
<script>
$(function() {
$( "#yourTabsID" ).tabs();
});
</script>
I'm using jQuery tabs and I'm having some problems. Let me detail them for you here and then I'll put code below:
PROBLEM 1:
I have a total of 6 tabs (default tab in local div, other 5 loading via Ajax). When the page loads, I need the 3rd tab to be selected by default. Easy. Problem is, say I link to http://example.com/index.html#services the 3rd tab still shows up instead of the services tab.
I've tried to use cookie to set the selected value but it just isn't working right.
PROBLEM 2:
This is major and I can't seem to figure it out. The 3rd tab is the default data and if I click on a tab to the right of that tab and come back everything is golden. BUT... If I click on a tab to the left of the 3rd tab (all tabs left or right of default are loaded via Ajax) and then click back to the 3rd tab the panel goes away completely and it's blank. Then, clicking on a different tab not only leaves the 3rd tab in a selected state (not the content just the tab itself) AND ALSO the selected tab shows in a selected state as well.
I'm pulling my hair out trying to figure out what in the world is going on here. I'll be on the road a bit today, but will check in as it's possible. Hopefully one of you can help me straighten this out.
Okay... here's the code from my jquery
$(document).ready(function() {
//build tabs
$("#tabs").tabs( {
cookie: { expires : 30 },
load: function(ui) {
//initilize accordion
$("#accordion").accordion( { active: 2 } );
},
show: function(event, ui) {
//initialize accordion
$("#accordion").accordion( { active : 2 } );
//cookie select
var cookie = $("#tabs").tabs("option", "cookie");
/*
if(cookie) {
$("#tabs").tabs("select", $.cookie('ui-tabs-1'));
} else {
$("#tabs").tabs("select", 2);
}
*/
},
ajaxOptions: {
dataFilter: function(data, dataType) {
return $(data).find("#content_area");
}
}
} );
});
Here's the code from my tabs:
<div id="tabs">
<ul>
<li>Home</li>
<li>Services</li>
<li>Company</li>
<li>Employee</li>
<li>Work Tools</li>
<li>Contact</li>
</ul>
<div id="content_area">
<p>CONTENT HERE</p>
</div>
<!-- end #content_area -->
I sincerely appreciate your help.
Okay... Figured it out! Went in a completely new direction and actually ended up better as I can use the tabs and the back button with custom address bar changes.
I highly recommend the jQuery Address plugin as I used it to solve my problems. I had to do some tweaking with the accordion in the tabs because the autoHeight wouldn't work, but fixed that by checking the height() of accordion divs and setting changestart.