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
Related
I have a sidebar navigation menu with children and sub-children which appear on hover. Here is a jsfiddle link: https://jsfiddle.net/s096zfpd/
This is obviously heavily simplified just to give an idea of what I'm trying to accomplish. My issue is that sometimes the list within <nav> exceeds the height of <nav>. In this case, I want to be able to scroll within <nav>, but doing so would compromise the overflow-x:visible property which I need to display .sub-nav, since CSS simply doesn't allow the simultaneous use of overflow-x:visible and overflow-y:scroll.
I'm thinking that maybe a js solution could work well here. Any suggestions?
Thanks.
If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto It means that we can not apply visible and hidden to same DOM element, so ideal solution would be
To create a wrapper and then apply overflow-x and overflow-y to two different DOM elements. Sharing the js fiddle solution to your problem
https://jsfiddle.net/e2edvupc/
Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.
I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance
How do I create a div which will act like a relatively positioned div (as in it cannot allow elements behind it) and still will also act like an absolutely positioned div (as in it can freely be positioned)? I am willing to use javascript and jQuery if needed.
Example: or a similar effect
I don't think you can do what you're asking for in the way you're asking for it. You should be able to fake it adequately though.
Say you wanted to "insert" a sidebar that pushes all the main content on a page over by 200 pixels (the width of the sidebar). You could increase the left margin of the page/container by 200px (animate it if you wanna be flashy) and then absolutely position your div where you want it (you could animate it sliding in from off screen if you want it to appear as if it is "pushing" the other content over). If I understood the question correctly, then this should accomplish the visual effect you're going for.
I think you mean Draggable elements, you can use jQuery User Interface:
http://jqueryui.com/demos/draggable/