I'm trying to use scrollify in a div whith fixed position, but it doesn't want to
i have to disable the parent fixed position and all overflows...
Anyone has an idea?
Unfortunately, scrollify does not work inside a div with a fixed position. This is because of the way fixed positioning works in CSS. When an element has a fixed position, it is taken out of the regular document flow and is not affected by other elements. Therefore, scrollify cannot detect the scroll events inside the fixed position div.
The best solution would be to avoid using a fixed position div and instead use a different type of positioning such as absolute or relative. Alternatively, you could use a different JavaScript library or plugin that is designed to work with fixed position elements.
.fixed-content {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
try this and please post your code with the question or erorr this will make more sence if people try to help you with your code
Related
I am developing a store for a friend and I want to make the "ADD TO CART'S DIV" fixed when the users scrolls after it. As I am far from being a CSS expert I am facing problems with it.
I tried to use JS to add "position: fixed" to the div, but I cant do that because the div has a relative position and changing it do fixed mess up with all the div's elements
this is the link
and this is the div I want to make fixed (the div id is rightcol):
I would also want to make the div stop right before footer
Thanks in advance
Use this property to make div sticky on scroll
position: -webkit-sticky;
position: sticky;
top: 0;
the header is your website is also sticky. you can use the same properties it works
You can use position sticky. sticky element works as fixed element with respect to its parent element. It will serve as fixed in the space provided by its parent.
So in order for your project. You need to restructure your html in such a way that sticky element should get enough space to behave as fixed element in that region.
So, I tried doing position:absolute, but whenever I place something new, (eg a div) the other div gets pushed down.
Eg. without other div
Box
With other div
other div
box
Thanks :D
Are you sure the CSS rule is not ovewritten? (Check this with a browser code inspector, such as Firefox's Firebug or Opera's Dragonfly)
Additionally, If you want the div to be put on a place despite srolling,
use
position: fixed
instead. This will keep your object on a fixed place in the page.
You can usually use position:fixed or position:absolute.
If you want the element to be stuck on the screen no matter how to scroll, you can use position:fixed. Make sure that your top & left or bottom & right are set appropriately. Also make sure that the z-index is set appropriately, so no other element is covering it.
position:absolute; DOES depend on the parents of that element. If a parent of that element is positioned, then the absolute positioning will position the element within that element.
do you have examples of your code?
This is my example on jsfiddle http://jsfiddle.net/YG6tx/5/
so my question is, why is the red div(pageWrap) not taking the height of it's inner elements?
If I specify a float:left, it takes the height, but the margin: 0 auto no longer holds.
how can I acheive both? (margin:0 auto + the div needs to take the height ).
Do I need to specify the height explicitly?
I'm a newbie, so this question might seem simple.
Designing with floats and absolutely positioned element is hard... Their parent elements won't wraparound them so often you'd have to specify the height attribute on the parent to accomplish the look you want. However, the .topLeft wouldn't exactly need to have the float:left; property. If you remove that I think you'll get the desired look. Example: http://jsfiddle.net/YG6tx/8/
Just give overflow:hidden to #pagewrap.
Try this updated fiddle: http://jsfiddle.net/YG6tx/12/
As in you original fiddle there were no images due to incorrect path of images so in my fiddle also no images but as per your requirement i have changes the layout.
As per your requirement images are at position, red div taking entire height as per elements inside and center also margin:0 auto;
If i am lagging some where please comment so i can change as per requirement.
Please look at this fiddle:
http://jsfiddle.net/dyv88/16/
On IE7, if I put width: 100% on a table, inside a div with position:absolute and width unspecified, the table takes over the entire screen.
All more recent browsers, it does not.
Can someone please explain?
And what's the best way to fix this? Do I just need to specify width on all absolute positioned elements? Or is there a better fix with some kind of wrapper element?
If you want to position absolute, it must be relative to the first parent that is positioned. It seems that IE7 doesn't know which parent that is, because you did not specify one.
Do position: relative on one of the parents to fix this. Or position the table relative.
I think specifying width on absolute positioned elements is always a good thing, since absolute positioned elements are taken out of the regular low of the page.
jsFiddle Demo
I'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.
The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).
I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.
Anyone know how I can do this?
I usually go with overflow: hidden or overflow: auto.
Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;
overflow: auto;
Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.
.abs-div {
position: absolute;
overflow: auto;
width: 160px; /* Replace with your width */
}
A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:
<br style="clear: both" />
This will force the element below the floated elements, which will stretch the containing div.