I've got a line of text that gets revealed when a dropdown arrow is clicked. However, certain pages of the site I'm building have divs that extend beyond the single line of text I'm hiding.
Here's an example:
The green div (ordinarily white) needs to overlap the div above (blue body with orange margins). My goal is to cover up a link that will sit 15px beneath the arrow under the word "Bukau", leaving the text to left unaffected.
I have a hunch the solution I'm looking for might involve making the 'green' div fixed/changing z-index values.
I also want to make sure the green block acts like an extension of the content below it, getting pulled up/down when a user clicks the arrow toggle.
Appreciate any advice/suggestions!
Solution: Simple as making the top-margin on the 'green' div -50 or so pixels, and setting its position to 'relative'
Related
As stated in the title. When you start tabbing it doesn't respect the fact that there is a nav overlay at the bottom of the screen. So certain links and buttons that are hidden behind the overlay will be tabbed to without being in view of the user.
Is there a way for me to override this functionality and force tabbed items into view?
Trying to intercept tab etc. and adjust the scroll position yourself is one possibility as you have stated but that could potentially lead to unexpected behaviour.
A better way to handle this is to adjust your layout to account for the overlay at the bottom.
In essence all of your main content would sit in a container (this may be the <main> element if your overlay at the bottom is an <aside> otherwise just use a <div>).
Make that container the page height minus the height of the overlay.
That way no content will ever be behind the overlay (which technically is no longer an overlay as nothing goes behind it).
The beauty of this is when you get to the very bottom of the page everything will be visible, with an overlay you may end up with something partially obscured if you don't give it enough margin / padding at the bottom.
I have found two things:
DocumentOrShadowRoot.activeElement this would one way we could capture the currently focused button or link.
Element.scrollIntoView() this would be how we force the focused element to the center of the viewport.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have a <table> that I would like to overlay a circle on and have everything outside of the circle be blurred. The circle will change position based on a function, so it needs to be dynamic. I know how to do this with an image, but this needs to be a table. I have used the following CSS, but this will only let me blur an entire cell.
-webkit-filter: blur(10px)
The two options I can think of would be to overlay some sort of svg that is made up of a square and a circle and blur the space between in the edges (is this possible?), or to apply some sort of blur gradient to the cells that meet the edges of the circle.
Any ideas would be greatly appreciated.
Here is an example of what i am trying to accomplish. http://i.stack.imgur.com/f5EqT.png
It's possible to do something like this, but it might not be as straightforward as you were hoping.
JSFiddle Example
My technique involves cloning the entire content area, and overlaying it exactly on top of the original, but only revealing a portion of it.
You can clone the area through javascript (jQuery's .clone() works nicely), or you can simply include all the markup again in your HTML, but for a table this large, that's not very efficient.
To reveal only a small circle of it, I placed it all inside of a div element that had overflow: hidden set, so all the overflow gets cut off.
The tricky part comes with keeping that overlaid position right where it needs to be.
In my example, I have the circle move to follow the mouse. By default, both the circle, and the cloned content are absolutely positioned to the top left of the original content, allowing it to line up, but as my circle moves, the content moves with it, since it lives within the circle (setting overflow: hidden causes the circle to act as it would with position: relative, containing absolute positions within).
So, to compensate for this, I always move the cloned content an equal amount in the opposite direction as the circle is moving.
Then it's just a matter of blurring the original content, whilst keeping the cloned content crisp.
I hope that helps!
I have two divs. I would like to position one div over the other and have it appear over it. I am able to position the div but how can I make it such that background of the div is not visible or should I control the background visibility.
....
...
You should use background color and you can do one more thing that is while showing the upper div reduce the opacity of below div or just hide it or you can make overlay on which put the upper div so background div will not be visible. So many ways are already present to do such thing it depends upon you need.
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.