I have navbar like this :
<ul class="dropdown-menu" role="menu">
<li>People</li>
<li>Main Page</li>
</ul>
but when I click on "People" link, it will not position correctly, because I am loading some charts on that page. I have many section with unique id and content is loaded from JavaScript (charts).
<section id="top_something">
<div class= "container">
<h2 class="blue-headings text-center"><b>Top People</b></h2>
<div id="div_something"></div>
</div>
<br>
</section>
The content of a div id="div_something" I am making in JavaScript ...
I have a 10 div's like this on that main_page with unique id. I can see that when I click on a a href="/main_page#top_something" on navbar it will paste me on that section , but as soon as it loads JavaScript it will move me upper
thanks in advance
If your main_page is a directory (which it probably is) then you need to simply include a slash before the anchor name.
People
If you have JavaScript injecting content after the page loads then you will be brought to the appropriate anchor but the page may move because the additional content added by JS will push the anchor down the page. You might consider repositioning the screen to the appropriate anchor using JS after its done injecting content.
Related
I've been hours, even a couple of days trying to get this done but i can't find a solution, I've tried everything but haven't found a case like mine.
I'm trying to scroll to another component in my one-page website from a navbar, which is another component. The main app component I set like this:
<body>
<app-navbar></app-navbar>
<app-page-one id="page-one"></app-page-one>
<app-page-two id="page-two"></app-page-two>
<app-page-three id="page-three"></app-page-three>
<app-footer></app-footer>
</body>
As you can see i put an id on each component so i could identify it when trying to scroll.
I want to click the Page Three button inside my navbar for it to scroll down to the page three component. My navbar component looks like this:
<body class="body">
<header class="header">
LOGO
<div class="menu-toggle">
<fa-icon [icon]="faBars" transform="grow-20"></fa-icon>
</div>
<nav class="nav">
<ul>
<li>
Page One
</li>
<li>
Page Two
</li>
<li >
Page Three
</li>
</ul>
</nav>
</header>
</body>
I've tried using Ngx Page Scroll and everything, but can't seem to make it work. I'm not sure if I need to use Input Output to make them communicate or something like that, anything will help, thanks.
you can use angular router fragment or the angular cdk for scrolling.
I find the angular router is the easiest, but I will give you the link for the angular cdk in case you don't like this way.
first thing on index.html declare a style tag - because without it smooth scrolling won't smooth scroll.
index.html
<style>
html {
scroll-behavior: smooth;
}
</style>
you can change the scroll offset as you see fit
app-router.module.ts
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
scrollOffset: [0, 64]})]
then your component.ts
<li>
<a routerLink="." fragment="page-one" >Page One</a>
</li>
<li>
<a routerLink="." fragment="page-two">Page Two</a>
</li>
<li >
<a routerLink="." fragment="page-three">Page Three</a>
</li>
edit your component.css
a{
cursor: pointer
}
you can also do this to scroll to fragments on other views. https://angular.io/api/router/RouterLink
you might need to add a # on each fragment which is better than id #page-two as an example. and you would change the fragment to reflect that. the cdk way is in this link https://material.angular.io/cdk/scrolling/overview
Each href needs to have a reference to what element.id you want ngx-page-scroll to move the viewport to. Therefore the body should be something like this.
<li>
Page One
</li>
<li>
Page Two
</li>
<li >
Page Three
</li>
If you refer to the npm page and look at the url, https://www.npmjs.com/package/ngx-page-scroll#usage. You can see there is both a link and an element reference(#usage) to the Usage section (id="usage") of the documentation.
For a project i must include an HTML file into a div. This HTML file contains a menu that will be displayed on each page of the website. (To make it easier to edit the menu if we need to add something in it)
I include this file in my div with jQuery (.load). It works correctly on Firefox and IE. The menu displays well and I can click on the "parents" to show children.
But with Chrome, when I click the parent, the page refresh. It doesn't do anything else that refreshing the page without showing the children. (Sometimes when we spam click the menu, it opens, I don't know why and how)
But when I paste the code for the menu directly in my main HTML file, the menu works fine on all browsers.
Did you have any idea of why my menu doesn't want to work when it's included and used with Chrome ?
The include in my main html :
<div id="menuLeftLoad"></div>
<script>
$("#menuLeftLoad").load("Menuleft.html");
</script>
Here is the MenuLeft.html file :
<ul class="nav nav-pills nav-stacked">
<li class="parent"><i class="fa fa-bars"></i> <span>Tables</span>
<ul class="children">
<li id="basic-tables">Basic Tables</li>
<li id="data-tables">Data Tables</li>
</ul>
</li>
</ul>
Here is a link to see this problem in real: http://allanresin2.tk/testui/index.html
EDIT (Solution) :
The solution has been founded by #CarstenLøvboAndersen .
I had a JS file (custom.js) that acted on my menu before everything else, so it caused problems when i wanted to click in the menu.
So, i replaced this :
jQuery('.leftpanel .nav .parent > a').click(function()
With this :
jQuery(document).on('click','.leftpanel .nav .parent > a',function()
So now, we have this function that wait for my click to execute. Before, the function was executed while the menu had not even finished loading.
Thanks to all people that tried to help me
As far as I can see in your code, there is no click event for the a tags.
So what you need is a click handler, that prevents the default behaviour of the a tag and loads the html file instead.
Here you have some dummy code:
main.html:
<main>
<h1>Hi i am main</h1>
<a class="clicker" href="new.html">New</a>
<div id="foo"></div>
</main>
<script>
$('.clicker').on('click', function (evt) {
$("#foo").load("new.html");
return false;
});
</script>
new.html:
<div class="new">
<p>I am new!</p>
</div>
im losing it here. I working on this site and the menu link to differents anchors.. If im on another page the anchor link work properly but if im in the same page (home) do not work more than once.
I double check the urls and i think they are ok.
The live url is greencleansteamwash.com
The anchor links are Benefits, Services and Appointments
My code is something like this
<section id="benefits">
Content of benefits
</section>
<section id="plans">
Content of plans
</section>
<div id="book">
Content of booking
</section>
<ul class="nav-offcanvas">
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
</ul>
Delete the whole URL from the links, just leave the # part.
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
I'm trying to fix the top menu on page change.
Example:
<div data-role="page" id="page1">
//page 1 contents
</div>
<div data-role="page" id="page2">
//page 2 contents
</div>
and my top menu
<div id="top-menu">
</div>
Is there any way to not make the menù code reappear on each page?
I want my menu div to be collective for all pages.
Any ideas?
Thanks,
Andrea
No, the concept of "pages" does not allow for static content to be shared among them.
But I see at least two solutions:
use only one page containing your menu, and many hidden div to encapsulate your content (like <div data-role="content" id="page1" class="hidden">). Using your menu navigation, you just have to show/hide the content you need
use some JavaScript trickery:
$(document).on("pagebeforeshow", "[id^=page]", function(event)
{
// "move" the menu to the content of the current page
// (you have to add IDs to each page like 'page1content')
$("#top-menu").prependTo("#" + this.id + "content");
});