I am writing the CSS and HTML for a site currently under construction, something I am not too familiar with having to code.
I have, per request, created a navigation menu that sits on the left side of the screen and expands to cover the page content partially when clicked, allowing the user to show and hide the nav when not needed.
The content that the nav overlaps when it is opened is a bunch of tables, with clickable cells and resizable columns (i.e. they change the cursor to a pointer to allow the user to know they can do something with the cells/table columns)
But when the nav expands over the page content, I am still picking up the cursor changes behind it, making it seem clickable in wrong locations.
Can anyone point me in the right direction on how to prevent elements on the page from picking up cursor changes on elements behind it?
I can probably dynamically change the CSS using javascript when the navBar is opened and closed (remove the cursor on open, add it back when closed) but I am searching for a simpler and more universal fix that can be utilized in the future as well.
Sounds like you need to set the z-index property for each of your elements.
If you create elements without assigning a z-index they'll be indexed automatically, any elements you create after you create the nav will have a higher z-index by default.
Make sure all of your elements have a z-index and that the nav has a higher z-index than the elements it will overlap, example:
.nav {
z-index: 100;
}
.el1 {
z-index: 99;
}
.el2 {
z-index: 98;
}
Etc, think of it as layering your elements on top of one another, the if an element has a higher z-index than another it will be on top of it.
You can force cursors to be a certain way using the cursors CSS property (MDN). See below, where I force all elements that aren't links to have a regular cursor:
*:not(a) {
cursor: default
}
Also, see #Nunchy's answer to correctly configure z-indexs so this type of thing won't happen
Related
I'm trying to implement a simple tabs component in a single-page app. The selected tab should (obviously) display its contents while unselected tabs keep their content available but hidden. How should I hide the content on the unselected tabs?
Each of the canonical techniques for hiding content has issues:
technique
drawback
opacity: 0
User can still potentially interact with invisible content. Breaks if a sub-element of the tab element sets the opacity property.
color: transparent, background: transparent
Same issues as above.
display: none
Component on unselected tabs is loaded in a div with no dimensions, which in my experience causes rendering issues when that content is later displayed. (Several React libraries I'm using do not properly calculate inner dimensions of columns or whatnot when they're initially rendered in a display: none div and later displayed.)
visibility: hidden
Still takes up room on the page. Breaks if some sub-element of the tab element sets the visibility property.
To sum up: I want to know how to render content as if it's actually loading on the page (i.e., with the proper dimensions), but completely invisibly, with no space reserved for it on the page and with no possibility of user interaction. Ideally, the solution should be agnostic to whatever CSS properties are set on the arbitrary component within the tab itself; i.e., the CSS inside the tab content should not be able to break the display of the tabs themselves. Is there some recommended combination of CSS properties (visibility, opacity, display, position, z-index, etc.) that does what I want here?
I am in the process of reworking a simple web site so that it can run on a thumb drive, aka with no server involved.
On a page on the original I had a "select" control that would execute a script that read a file and loaded images and some text.
Since I can't load files from the client's computer, I put all the information on the page, each entry in a separate div, each with a unique id, and am using style.visible = "hidden" and "visible" to hide the ones I don't want to see and show the ones I do.
Problem is, the page stays the same size (length) as if each of the divs was visible, and the space occupied by the divs I have hidden is not released.
How do I get the hidden divs to give up their space?
Here's the original page: https://www.vintagebankantiques.net/people.html
A css rule like
.class-of-divs{
min-width: 100%
}
or possibly
.class-of-divs{
min-width: 100vw
}
should help. Without having a JS fiddle or something it's hard to say more.
What these rules do is say that those divs must all be 100% of the width of the page, and shouldn't change size based on the presence of the other divs.
A problem you might get is that the divs will still get shifted in position by their neighbours. To prevent that, you could try setting display: none instead of visible: hidden. The key difference is that a div with a visibility of hidden still affects page layout. A div with a display of none does not affect page layout.
Essentially my website has multiple parallax scrolling panels, so basically a picture embedded within a div element, and splitting between two of those panels, I have a navbar which I want to affix to the top of the screen... now I have that completed but the navbar isn't on the top most layer and all the other divs on the screen go on top of that, there is a "demo" or my site which you can see this actively happening. I'm not sure how to either move the rest of the elements down without messing up the parallax or bringing the z value of the navbar up above all other elements... Any help would greatly be appreciated!
(I've had this problem on other sites before I've created and I've never been able to figure it out)
My Website (Github.io) / demo
You can use the CSS z-index property to achieve what you're looking for.
Simply add a high z-index property value to the navbar selector, like as follows
.affix {
// pre-existing properties
z-index: 999;
}
I'm writing in angularJS and I couldn't find a comfortable solution for this issue-
I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click.
unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.
The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...
Any help would be appreciated.
Thanks!
Tammy
Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).
But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/
Here is the website I've been working on: Comotional - test site
I am using flipping cards within "Who we are" section and have problems with z-index. Whichever z-index and css combination I tried (even added additional divs on the back side), I can't fix the flipped content appearing below other cards. If you hover over these, you will see what happens and will see where the problems happens. Is there anyway to get this working via js?
It's limited by your container height, not the z-index. Set the height auto and find another way to set up the grid - perhaps making something like a row container along with a clear div while setting height to the front side of the card.
i think the problem is that you have lots of nested elements so changing the z-index of a nested element does not make them appear above on the stack unless until you make the z-index of the parent container greater than other parent containers that are blocking the view.
you can use hover event to change/increase the z-index of parent container on mouse-in and default on mouse-out
link to justify what I am saying