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.
Related
How to make element change behavior depending on screen position? For example, imagine an input/select that opens an option box or a button that shows a dialog box, as in the image below, but notice that when the same element is at the bottom of the page, it opens the boxes to the side that has space , as a native input/select does.
I noticed this bug in even famous libraries with millions of weekly downloads, that if the element is at the bottom of the page, two unwanted situations happen: Either the element doesn't appear (it stays off the screen), or it expands the area, increasing the screen and distorting the layout.
Anyway, boxes should always open in reaction to the main element, like a "position: relative + position: absolute".
The preferred solution should be just HTML + CSS (as "pure" as possible), but if that's not possible then you can use javascript, too. How can I do this?
How can I do this?
I have two content_editable <body> elements, that have the same exact content. I need to make one reflect the position of the other. So, if the user moves the caret down and scrolls the content, I need to make that change happen on the other element.
I tried using jQuery's scrollTop, to no avail. I've also looked at a few caret based positioning solutions, but nothing has worked yet.
A bit more background. I have a magnifier widget, that uses the css3 zoom feature to magnify content. This is done by duplicating the content via HTML and then zooming in a div on that content.
There are ckeditors in the content, which means there are iframe's with content_editable <body> tags.
When the content is duplicated, it does not preserve the position of the body's scroll. How can I get the position copied into my copied content?
PS. The only essential browser is Chrome.
I have a small web-app I'm developing for myself.
When I click the add button, it calls some .load functions to return the error message and the updated table.
However, it causes the gradients to look like this (look around the error message and to the top left/right of the table):
The gradient is set to the background of the containing div (The grey one inside the green one). The jQuery loads in a single <p> for the message and a <table> for the table.
I can't see why this would happen to the gradient, as it works fine on the initial page load (before jQuery updates it).
Is there anyway to force the background to 'refresh'? It fixes itself if you inspect element or change to a different tab then back to this one.
With the limited information provided, I would assume it is less an issue with the "background gradient" and more an issue of the elements in the foreground having an opaque and/or colored background being overlaid on top of the background gradient.
Have you styled the <p> in question to have a transparent background, or is there a background color being applied to it (either directly or inherently)?
Please provide more info (the CSS and a bit of HTML) for the problem for a better answer.
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.
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.