I know CSS is not supporting position: fixed for only x or y but only for both a the same time.
The common approach to solve this seem to be to use fixed positioning in combination with jquery to re-position the component with respect to the scroll amount in the non-fixed axis. The downside with this is that the component will lag a lot when scrolling in this direction.
My question is if this is a problem that is being looked at for future specs of CSS? Anyone know?
I think we need a fixed-x and and fixed-y positioning value.
This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common.
Here's a fiddle:
http://jsfiddle.net/UfZPa/1/
which shows what I'm after but not the actual problem because this very small example is very fast as it looks now.
Update
From the CSS ED:
Intersection between the stickily positioned element and the bottom of
the sticky-constraint rectangle limits movement in any direction, so
the offset never pushes the stickily positioned element outside of its
containing block. However, when the element is free to move within its
containing block as the page is scrolled, it appears to be pinned to
the relevant flow root edges, similarly to a fixed position element.
I think this is describing what I want but I'm not sure...
Update 2
To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). What I want is some labels to stick at the edges in one directionwhen being scrolled out of view but at the same time stay in the normal flow in the opposite direction. I want this for both fixed-x/flow-y and fixed-y/flow-x. And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. I think we are missing an option to make components fix in only one dimension and still flow in the other. Maybee I'm the only one wanting this =)
A quick skim through some CSSWG notes such as this one leads me to believe that position: sticky might be a potential solution to this problem, provided you only specify the offsets on the axis you want the element to be fixed.
There is a point of concern though: unlike a fixed element which is considered absolutely positioned, a sticky element starts out relative to its containing block. Since relatively-positioned elements are not taken out of the normal flow, you will have to account for the layout of other elements in the same flow as your element, among other things, and (thus?) forcing the element to act like it's fixed regardless of scroll position may be a little more difficult.
Of course, there is too little information and implementation available to verify any of this — I'm just making an informed guess, and the document I link to is an ED not meant for general reference — but you can always ask the www-style mailing list and see what the good folks there have to say. I haven't experimented enough with position: sticky to be able to comment further myself.
Related
Now I’ve seen this page from webflow, which has inspired me much.
In this page, you start scrolling horizontally, then when you reach a certain area, the scrolling direction changes so that the page starts scrolling vertically.
Is there a way to do this?
(Preferably vanillaJS, but jQuery would be fine)
Basically there is not a set-up solution built into standards or jQuery (and I don't really recommend to use jQuery). I haven't searched if there is a library to do this (I suspect there is, and you should use one if possible instead of building by hand) but I'll try to roughly explain what it uses in vanilla JS/CSS.
We can construct a really long element (that includes the contents you want to reveal by scrolling), and use some cropping mechanism so that only a portion of it is displayed. This is basically done with overflow: hidden;.
Next this long element should move with scrolling. Adding an onscroll event listener that adjusts the transform property (spefically, translate functions) would do that.
These element should behave magically: they scroll to a position, stop and stay there until they reach another scrolling position, where they continue to be scrolled away. This is accomplished with the position: sticky; CSS property. See what MDN says:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This is somewhat hard to understand but the key is that it stays where it is as if it was a normal element until reaching the position you have set through top/bottom/left/right properties. Then it stays at that position until it's scrolled away together with its parent element (the "nearest scrolling ancestor").
So now you have an element that
Is really long but has only a portion shown
Can move as mouse scrolls so that users see more as scrolling
Stays in a fixed position through a part of the page and then scrolled away
which is basically the effect you want.
These three steps are the basic building blocks of such fancy effects you mentioned. There should be of course many nasty implementation details that I haven't outlined here but I hope this answer help you briefly catch what's happening under the hood.
I have to "lead" respectively move an Element (the red one in the sketch below) through the page in a given way (so it won't collide with the content). The box should move along the given path while the user is scrolling.
I tried to set the position of the element to fixed at the left / top corner and then just move it along the horizontal axis while scrolling. But i think this is not the best solution and the code is pretty ugly.
I also tried to solve this with the skrollr parallax framework, but this isn't possible.
Here is a sketch of what i'm trying to achieve:
So what is the best approach to solve this?
Edit:
To get a better idea of what i'm trying to achieve here's a link to a page which has something similar: http://rit-team.ru/
That page is unbelievably cool...
If you want to preset the path (as they did) then the principal is pretty straight forward. Define an array of 'checkpoints', essentially x coordinates. You then use the vertical scroll offset as an index into that array, setting the position of your moving element accordingly.
If you want to 'drive around' elements of arbitrary size, then I have no idea. These guys won a design award for their efforts, so I'm guessing it's not a walk in the park.
this question is related to my before question:
position relative elements after absolute elements
I updated the JsFiddle provided there to reflect my current html (for which I've no URL right now) more exact. See here: http://jsfiddle.net/dkxUX/22/
I realised that this layout is problematic for me.
In the comments to o.v.'s answer he pointed out that I could create additional wrappers,
like for example a #header div. This is not a bad idea indeed, since this way I would still be able to position my elements absolute within it, however - as long it is positioned anything else than static.
And here comes my problem:
I was curious if the height of an absolute positioned element will affect the height of its parent.
Actually, it seems not: http://jsfiddle.net/qFh6s/1/
Beeing frustrated I tried it with jQuery:
http://jsfiddle.net/WD6LF/1/
Result: Beeing even more frustrated, running out of ideas.
I just cannot give the elements fixed heights, because their content will vary.
Actually, I'm already annoyed by my html, for example the additional wrappers for the sticky footer make it seeming less semantic to me. Furthermore, I begin to understand that putting everything into divs and giving it an absolute position is NOT the answer to all CSS hurdles.
So I'm open to any useful suggestion, whilst making myself ready to scratch everything and start over.
You should really look into floats. Floats will help you position elements even if there height is not known. And you will stop swearing...:)
Good designers do not use tables or positioning, they use floats. You can use clear:both on any div if you don't want it to follow any other div. I didn't quite completely read your question but I am pretty much sure its floats you are looking for. Here is a quick tutorial on floats. Go through it and you yourself will be able to solve your problem. I hope your problem gets solved. Happy designing!!
I have this problem where I am trying to show multiple graphs (based on jsPlumb) on a single page. Since I want each graph to be side by side on one row no matter how much space is available I am using a table (if I used divs with float:left, if not enough space is available some of the divs move down on a separate row).
Now each table cell contains a main div which in turn contains two or more node-divs. The way jsPlumb works is by creating a separate div for each node. I need to position each node at a particular top/left relative to its parent div.
The problem I have is that the main graphDiv in each table cell does not expand to fit its content. Some of the graph-node divs are outside of it. I understand that when you have "absolute" positioned divs they are not taken into account. But I am using "relative" positioned divs with top/left coordinates. Does the same thing apply?
If so, what would be the best way for me to expand the table-cell/graphDiv to cover its content? (i have tried all the clear fixes and went thru all stack-overflow related posts but could not find a solution).
Here is a link to the jsfiddle page I set up: http://jsfiddle.net/7QkB2/28/
I'm a little rusty but I share your pain in trying to get divs to properly expand to contain their contents.
As explained by this page http://reference.sitepoint.com/css/relativepositioning when you use relative positioning you're actually leaving behind a hole where the content used to be. I'd think of it almost as an optical illusion - The object is still reserving an invisible block in its old position, but it appears as if it has moved.
So in your case, the 3 nodes are still stacked in the upper left corner of the graph even though they look like they're floating outside of it. If you get rid of all the absolute and relative positioning on the nodes you'll see the table is sized to be big enough to fit their original positions.
I'd recommend usually only using position relative if you're only moving your content by a few pixels. Why they designed the css to work this way is a mystery to me, but maybe its something to do with the limitations of the rendering engines? When you use position absolute the object no longer has a "box" taking up space in the document. It's easy to position, but won't affect the spacing of anything else as you observed.
I'm not sure your exact application, but you may need to get creative with how you specify the spacing. If you know the dimensions you can always specify them, but I'm guessing you're not that lucky. Do you really want to set the position relative to the top-left corner, or just relative to the other nodes? I'd probably just use old-fashioned margins. That should allow you to specify the positions of the content that needs to fit in the table while maintaining the block model. Then if you need one of the nodes to overlap, position it using absolute positioning.
Have you tried displaying each div as an inline-block and turning off line wrapping on the enclosing div? You don't have to resort to tables if you want content with a dynamic width to display horizontally without wrapping.
div.graph {
display: inline-block;
}
div.graph-container {
white-space: nowrap;
}
Ok so the story is my users need a multi-select dropdownlist, which doesn't exist in ASP.NET, so the simple solution I'm going with is I'm using listboxes with multiselect on and I start them off at size 1, and onmouseover I change the size to say 10, onmouseout sets it back to one. Simple enough and the users don't know the difference.
Now, my issue comes from the fact that since I have any number of controls on my web app, I've set these listboxes to higher z-index numbers than the other controls, which creates a problem: on my listboxes closer to the bottom of the page the list expands below and not above, and part of the listbox goes under the bottom of the page but since onmouseout resets the size of the listbox I can't scroll the page down.
Does anybody know what I need to set to make it expand up instead of down?
edit Also, some may ask "why don't you just rearrange the listbox to a higher position in the page," the reason this isn't a viable option is I have well over 40 controls on the page and it they're grouped cohesively, I didn't just randomly place them where they are.(ie. investment info in one section, account in another, suitability in another)
EDIT: It's worth noting that the jQuery version of the below will be more compact and, in my opinion, more easily understood.
Glo, the code you have currently would be helpful here, especially since it seems you will have difficulty changing anything we give, or implementing what we might describe. Anyway, this works as intended in IE7, Firefox, and Opera; Safari and Chrome go quirky with it: http://jsfiddle.net/bUFzq/35/ (modified from http://www.plus2net.com/html_tutorial/html_frmddl.php).
The CSS just makes the select position-able relative to its default placement. Elements can only be positioned relative to other positioned elements. `position: relative;' leaves the element where it was until you move it, unlike absolute and fixed. It also positions relative to the edges of its nearest positioned ancestor. (The IT industry has the unfortunate convention of increasing Y downward rather than upward; just a heads up - or down.)
element.offsetHeight is the computed height of the element - how big it appears on the screen. element.style.bottom (like its cousins top, left, and right) sets the element's offset from the corresponding edge, in the direction of the element's center. setAttribute is fairly self-explanatory; it acts as if you were actually editing the HTML. Most properties of element.style (that aren't on all other objects) represent and modify similarly named CSS properties. For example, element.style.backgroundColor sets the background-color property.
addEvent is a function copied from Dustin Diaz's Rock Solid addEvent() because the browsers don't agree very well on how to do events. However, I would have put his script in a separate file and mine in yet another if I weren't working within a single script area. I did the `var addEvent = init();' thing just so you wouldn't have to scroll through his source, even though it is a good example of good code.
mouseover & mouseout are the actual listeners, explicitly called using apply 1) because I needed that height value for later and 2) because for some reason (at least within jsFiddle) it doesn't start out in the correct position, and only if the listeners are called in that order will it get there.