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>
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.
Okay, so I have this weird issue on my website which I might have a hard time explaining. I am working on a website which only has one page(index.html) and no scroll. I have a navbar on the left with some menu items. So when clicked on a menu item a box appears with content. As it is a single page no scroll website, I have used IDs to call those boxes. Please see the code below:
<div class="nav-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
when clicked on a menu item this kind of section appears on the screen.
<section class="content show background-overlay" id="about">
<div class="aboutUs">
<h1>About Us</h1>
<div class="overflow-scroll">
Lorem ipsumasfasfasfasfafafsafs
</div>
</div>
</section>
And the browser address bar shows something like this after clicking on the links:
file:///C:/Users/zak/Desktop/web/project1/index.html#home
or
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
Now I have used a modal box inside the gallery content section and after I close the modal box, the page does not stay at the gallery content section but reloads.
For example:
Modal box is here:
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
After modal is closed:
file:///C:/Users/zak/Desktop/web/project1/index.html (which is the home content section)
I want the gallery section to stay open even if I close the modal.
For the modal, I have not used any JS or jQuery. It is pure HTML and CSS. To get rid of the issue I have tried a simple jquery code:
$('#modal_close').click(function(e) {
e.preventDefault();
return false;
});
This code just stops everything working.
Can anybody tell me how to stop the page from reloading after the modal box is closed?
You can try to use hide event to make refresh.
$('#modal_close').on('hide', function() {
window.location.reload();
});
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.
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.
This carousel that I am using stops working, one could drag / swipe a new slide into view by dragging / swiping the previous slide out, once I add an tag inside one of the slides.
The css, html, and js that make up the carousel is as follows:
EDIT: I could not replicate the problem in JSFiddle so here are links to a working version without the html content in one slide and the non-working version with.
Working: https://dl.dropbox.com/u/270523/help/carousel/carousel.html
Non-Working: https://dl.dropbox.com/u/270523/help/carousel/carousel2.html
Here is the non-working html:
<body>
<div id="carousel">
<ul>
<li class="pane1"><h2>Swipe...</h2><object data="http://stackoverflow.com"><iframe src="http://stackoverflow.com" /></object></li>
<li class="pane2"><h2>...or drag...</h2></li>
<li class="pane3"><h2>...or swipe...</h2></li>
<li class="pane4"><h2>...or drag...</h2></li>
<li class="pane5"><h2>...or swipe...</h2></li>
</ul>
</div>
</body>
The working html just has text in the first slide instead of the object tag.
Console error: "Load denied by X-Frame-Options: stackoverflow.com does not permit cross-origin framing."
I'm guessing that that's breaking the plugin altogether.