CSS Show active element above the div with overflow:hidden - javascript

I have a scrolling pane div with overflow:hidden. Please check it here. There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one. Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.

Shouldn't be too difficult if you use the .offset() method on hover of a .product. What you can do is the following:
In your .product hover event handler, get the offset of the product. This will give you the position of your product in relation to the document.
Next create your overlay product information div and append it directly to the <body>.
Set the overlay div to position: absolute and use the values returned from the offset call to position it.
Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.

Related

HTML Overlay Issues

I am stuck on a HTML overlay issue. My page have a overlay container. It blocks the clicking of the dropdown behind it. I tried to set a very high z-index for the dropdown, but it doesn't work.
Fiddle for my issue:
> https://jsfiddle.net/ao4dLp3g/2/
Can I get some help? I want to have the original click behavior of dropdown. Is there a way to exclude the dropdown element from the overlay.
It may not be a good idea to create separate overlay containers to cover the rest of area since I may have many elements to exclude.
Thanks!
If you change the position property of the button to relative, you can set its z-index to be higher than the z-index of your overlay.
#dropdownMenuButton{
z-index:1001;
position:relative;
}
https://jsfiddle.net/u0p5fv8t/

How to keep all elements at sticky position until a trigger is called?

I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.
My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.
Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.
I could solve the issue myself (in some way).
I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.
Here is a JSFiddle
However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.

Click on button to display div which should be fixed when scrolling down. Div not showing properly though?

I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.

How to get child element to display without position fixed from within parent with overflow hidden

On one of my sites I have a menu which overflows so I added some jQuery to control the menu position, but my menu has dropdowns I still want the dropdowns to show outside the menu but as overflow hidden is applied without position fixed I cannot get it to show,
Is there no command in css that accounts for the need to sometimes make a child element visible again?
Is my only solution to use position fixed or rebuild the dropdown and menu so it expands the menu when an item is selected.
If all you're looking for is a yes or no answer then:
No, you cannot have a child element that is outside of a parent with overflow:hidden be visible except with position:fixed;

Drop down menu pushes content downwards

A top dropdown menu next to the logo pushes the main webpage downwards when clicked. How is it possible to just overlay the content instead? Thanks in advance.
Make your dropdown position: absolute. Then it won't take up any layout space.
You need to make it position:absolute, like skyuzo says.
Then you need to manually position it where it needs to be. Get the position of the element you want to dropdown from (use offsetLeft, and offsetTop), then set the top and left style properties of your dropdown.
Use a JS toolkit to make life easier :)
Absolute positioning takes the element out of the layout, but that means you can't rely on the element being positioned where it normally is.

Categories

Resources