We have a page with a list of anchors. Content for each anchor shows on top of the window once navigations are clicked.
However for the last anchor, the content won't go to the top of the page because there isn't enough content at the end of the page. Hence empty space has to be added, this creates a problem for different sizes of windows.
Is there anyway to solve the problem without the empty space?
Thanks!
You can use :target pseudoclass to style anchored element corresponding to hash part of URL, thus making anchored element more noticeable for user.
Also, some websites has footer with huge (with tons of copyrights, disclaimers, archive links, etc.) height that makes it possible for page to be scrolled even to anchors that are at the end of content area.
No...if the page isn't long enough, clicking a named anchor will merely bring it into the viewport. Without a ton of padding, it won't pop the element to the top of the page.
Instead of adding a bunch of padding to the bottom of the page, you could use some kind of visual cue to draw the user's eye to the selected element after clicking it.
Related
When clicking on a result from a Google SERP, sometimes a Scroll to Text Fragment is added to the URL request, e.g. https://example.com/#:~:text=Lorem%20Ipsum, and highlights the targeted text in purple. That's pretty neat, but it break my CSS layout.
On one of my divs elsewhere on the page (not the one that gets highlighted), I'm using an absolutely-positioned :before element to add a rounded effect to the top of a 100%-wide div.
how it normally looks
The rounded pseudo-element is trimmed off of either side, since it is position: absolute, and not in the page flow. But, when there's a Scroll-to-Text Fragment added, which highlights a paragraph further up the page, for some reason the pseudo element is allowed to push the screen wider and break page layout.
how it looks if there's a scroll-to-text highlight on the page
Am I forgetting something about how CSS works, or is this a bug?
As a workaround I tried to detect this with JS window.location.hash so that I could dynamically remove my pretty rounded effect, but the Scroll to Text Fragment hash is not detected by JS (at least in Chrome). Thanks for any help.
I am building a preview of a document, which is split into separate DIN-A4 Pages. Those A4-Pages are white blocks with a margin between them.
Now i need a way to move elements to the next page as soon as there is no space left on the current page.
I am currently thinking of implementing a solution using JavaScript to detect if an element is overflowing the current page (which can be checked with el.clientHeight < el.scrollHeight or similar things), and then mark that element and all following nodes to start on the next page. I dont think this will be the most beautiful approach since it will require multiple render cycles to get the result. Do you have any suggestions on how to solve this problem in a smart way?
I know CSS very well, and i don't think there is a way to solve this with flexbox, since flex cant move elements from one div (which is a page with white background) into another div.
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
I need a bit help with this thing I am trying to write. I don't need code, just a bit of help with the logic.
So I have this navigation, that at any point can be a different width with different number of anchors in it. If it happens to be longer than the wrapping container, I must trim it, put "..." and if the user clicks on the dots, the remaining items must show in a dropdown.
Ok for now, but the navigation is also sticky. And when it sticks to top, I must reduce a logo and share (sometimes also language selector) from its width. When it goes back to being static, I must again update it, and show elements that I previously trimmed.
All of those "extra" elements, that I must reduce from the width, are containers somewhere in the website, that do not have special classes or anything special in them, pure content (it comes from a CMS, and that cannot be changed).
I would appreciate any type of help!
Thanks!
If you know the dimensions of the navigation, I would say the following steps might help:
Always have an ellipsis element, with a hidden class, toggled as needed.
Using jquery $('navElement').offset().left + $('navElement').width you get the right end position for the nav.
Now you can get the element at this position, maybe using Document.elementFromPoint(),
Identify all elements after this element, you'll have to figure out the logic for this, make them display block, and wrap all of them within a container dynamically.
now showing hiding that container will result in a dropdown effect.
As long as you can identify the logo and other components you want toshow/hide when sticky using css selectors, when your nav goes sticky, add a parent class to your nav and write css to hide these elements when inside the sticky class.
That is the logic I would follow at a broad level based on your question.
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.