I am looking for help, I am doing a project but and for it I am making a website to present it on. I have made a (red coloured) nav bar that covers the top 100 pixels of my website. Under it I have multiple containers that have text, images and a video. When scrolling, I would love for all these containers to go to 100 opacity i.e. disappear when they reach the nav.
In other words make the nav the top layer of the website and any container, that when scrolling down, that reaches it, it would not go over it and cover it as I have links in my nav bar. Also, this is not urgent, but if I wanted those links to go to a certain part of the current page I am on, how would I do that?
Disclaimer: CSS would be most appropriate for my project, if not possible, that's ok.
All help is greatly appreciated! Thank you!
Here is the JSFiddle of the website: https://jsfiddle.net/gmsrbh70/
<header>
<nav>
<div class='title'><h1><a href='index.html'>Computer Science Project</a></h1></div>
<ul>
<li> <a href= '#section1'> Introduction</a></li>
<li> <a href= '#section2'> About </a></li>
<li> <a href= '#section3'> Graphs</a></li>
</ul>
</nav>
</header>
<div class='task'>
<h1> What was the task assigned?</h1>
<p>The Create an innovative computational artefact which you feel could be used to address any or some of the issues raised in the context of this brief and report on the work and process involved.</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.
TLDR: Can I force a column layout refresh after dynamically updating the 'css-column' css with javascript/jquery?
I have a navigation menu that I am using css columns for (I cannot work out how to use the Magento2 menu column functionality). I cannot really change the markup much. I want to stop 'widow' titles from happening (titles at the bottom of the column, with all the content on the next column - see 3rd pink title in screenshot below). It cannot be set with css as the nav items are dynamic and will change.
(I have tried "break-after:avoid" on the parent list, but this stops the list from breaking altogether - i.e. it should be able to break anywhere in the middle of the list).
I came up with a hacky solution that almost works - with javascript I am dynamically adding "break-before: column" to any list that has a widow title. (It checks the left offset of the title, compared with the offset of the first list child. If it is different then it means the title starts on the previous column).
This (sometimes) works BUT it (sometimes) does not update the columns until you resize the screen a bit.
I have been been trying out these kinds of solutions and many of these too. However none of them seem to work, for example I have tried:
console.log(elt.offsetHeight);
console.log(elt.getBoundingClientRect());
Tried 'elt' being all sorts, the parent elements, the whole body/doc wrapper etc. I thought maybe this was because the element in question is hidden until you hover over the nav link. But I forced it to be open using chrome devtools and ran the same 'reflow triggering' javascript and it still made no difference?
Is there a (preferably nice and not forcing reflow of the whole document every pageload??) way to force a recalculation of the css columns?
OR is a better solution possible using css grid / any other way?
Thanks!
In case it is relevant to another possible solution, the markup is like this:
<ul class="level0 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Title
</li>
<li class="level1 nav-3-1 category-item first parent">
<a href="">
<span>Sub Title</span>
</a>
<ul class="level1 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Sub Title
</li>
<li class="level2 nav-3-1-1 category-item first">
<a href="/">
<span>Lorem 1psum</span>
</a>
</li>
<li class="level2 nav-3-1-2 category-item">
<a href="/">
<span>Lorem 2psum</span>
</a>
</li>
</ul>
</li>
...
</ul>
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.
Currently I am working on a project that is similar to this example:
Off Canvas Menu Example
HTML:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
CSS:
.left-off-canvas-menu {
height: 100vh;
}
JS:
$(document).foundation();
$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
I am using off-canvas to show a menu on page. however based on some condition I like to turn off animation and just the menu pops in without any animation and then turn the animation on later based on some other conditions?
Would that be possible ?
On my website europebathroom.com I have a horizontal main menu. When I hover over one of the menu-items a dropdown appears. When I hover over another menu-item the drop-down of that menu-item appears, as it should of course.
However, I don't want this to happen when you accidentaly quickly touch another menu-item.
I want it to be like the horizontal menu on the following link: badkamerwinkel.nl.
So, there should be a delay in the change of the dropdown by some milliseconds on hover, to avoid annoying situations if you accidentaly touch another menu-item.
Is there a script I can use to do this? I am not very experienced yet, my apologies.
Thank you so much in advance, and please know this is my first post on this great support site, so any criticism and tips are welcome to make my next posts better!
Mike
EDIT:
The menu works approximately like the menu below.
<ul class="main">
<li class="item1">
<div class="submenu1">...</div>
</li>
<li class="item2">
<div class="submenu2">...</div>
</li>
<li class="item3">
<div class="submenu3">...</div>
</li>
</ul>
.submenu1{
display:none;
}
.main .item1:hover .submenu1{
display:block;
}
.submenu2{
display:none;
}
.main .item2:hover .submenu2{
display:block;
}
So if you hover item1 the submenu1 shows, if you hover item2 the submenu2 shows immediately. Is there a way to delay this action by a few milliseconds? Thanks!
You can use JQuery hoverIntent plugin to delay the animations. I have used this to create a similar kind of behavior.
check it out here