I need to apply an effect on containers that on mouse over the container it get resized or expands while pushing other containers surrounding it and causing them to get resized too. Something similar to this
Can someone provide me with an example or a hint on how to implement something like this?
Thanks
Looks like totally custom component with manually resized containers (for each container there is a list of affected ones). If you want to be sure, try to decompile it :)
More thoughts: every containers grows vertically of horizontally; so it splits all other into two groups, one of them gets free space and starts growing too... Then it all goes back in same order. I think for each container there is list of connected containers, who can grow if that container is grown in same direction. In any case, I don't think it's automatic behavior.
Related
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
I've been working on an interface for a website. I'm stuck on a simple thing that I've spent hours and not get it fixed. I'm giving the prototype of my project. When you zoom in to page or minimize the page the alignment gets messed up. How do I fix that?
http://www.thewebblog.net/server/sosyalagDenemem
You are using floats and this is how they work. As many as possible will fit on the same row and the rest will wrap below. When the container is resized, any floats that fall off the edge are again moved below.
The easiest band-aid solution would be to add a wrapper div with a fixed width which is large enough to fit all of your floats without wrapping, or at least a min-width. Note that this will cause a horizontal scroll-bar on any window smaller than this width.
If by "minimization" you mean window resizing, it is because you are floating those columns. There are two ways you could go about fixing this.
1) Make your website responsive. You can find tons of information online about this, but here are some resources to get you started:
Ethan Marcotte's Dao of Flexibility talk
Looking Beyond Common Media Query Breakpoints
2) Add a min-width to the <div> that contains all of your floated elements. Make sure the width is more than all of your floated items lined up. This will make sure that if the window gets smaller than the container, instead of pushing those elements below each other, it will just keep the container from getting farther and create a scrollbar.
Note, this isn't necessarily the best way in terms of designing for mobile, tablet, etc., but it will certainly keep your site from breaking on "normal" desktop monitors. If this is your only target audience, then there's no problem with it.
An example of this would be:
.container {
min-width:960px;
}
I'm working with a large flex applications and I have noticed that one of our largest components (with lots of child canvases) takes about 6 seconds between the initialize and creationComplete events. I've been doing some reading and have found that having lots of nested canvases can cause slowdowns, but i'm not sure if this is where the slowdowns would be? Anyone have any suggestions on speeding this up, or even diagnosing exactly where the slowdowns are coming from?
It's been my experience that nested containers with dynamic sizing are the most common cause of these types of lags. Some things to try:
Set explicit sizes/positions for your containers/components whenever possible. This reduces the incredible amount of measuring that goes on within the framework during the creation process.
Reduce the number of nested containers. Sounds obvious, but it's amazing how much you can cut away when you start looking critically at how your UI is set up. Specifically, are there HBox and VBox containers you can get rid of by simply setting explicit positions/sizes for the child components? Do you really need to use a Form container?
Switch your containers to the much lighter weight Spark Groups instead of using the heavier weight Canvas where possible.
Hope that helps. If not, post some code so we can dig in to your particular issue.
The biggest thing to consider is to use VBox's and/or HBox's in place of some dynamically generated x's and y's. VBox and HBox are much more efficient. Look into it!
Adding many display objects to the display list all at once can take a long time, especially if we're talking about Flex containers that have layout and scrolling logic in the mix. Since you say you're using many Canvas containers, that could certainly be the issue you're running into.
I know that a lot of developers abuse the creationPolicy property. Normally, it is set to "auto" which allows Flex to defer instantiation of a container's children until a very short time "later". Often, before the next frame, so you don't even see the difference. Do you happen to set creationPolicy to "all" anywhere in that hierarchy? This could be forcing the Canvases and their children to be created immediately.
I know there are a lot of questions about dynamic sizes for Flex components, but this one is quite specific and the other answers aren't a whole lot of help. Briefly, I need a List that resizes to exactly fit its content, unless that height exceeds its (dynamically sized) parent container. My requirements are as follows:
The component extends List, or at least acts similarly.
variableRowHeight and wordWrap both equal to true.
The height of the list cannot be less than minHeight (roughly 32px for scrollbar arrows).
The height of the list cannot be greater than the height of the parent container .
Note that the parent container can be resized dynamically.
The height of the list should be updated as the size of both the contents and parent container changes.
Live updating would be preferable but not necessary.
There should be no scrollbars if the content height is less than the parent container height (sounds obvious, but I've had trouble with this too).
The trouble is that with variableRowHeight and wordWrap, it's very hard to know the size of the content at any given time. If the parent container's width is reduced, a line wrap may occur in the list which will change the height of the content. I know I can measure the height of the list content using measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom, but when should I calculate that? What events should I listen for? And the thing I've had the most trouble with - when should I calculate it to set the size initially (i.e. just as the content has finished populating)?
I've been tackling this for months now on and off, but can never find a solution (though I've come close with chunks of code of varying degrees of incomprehensibility). I'm not asking for someone to create a full component for me, I'm just hoping someone has the right pointers to let me know how I should go about determining and updating the size. I'm happy to do all the prototyping for you and discuss the results :).
Custom Flex components are definitely their own beast. You have a lot of dedication to spend months working on one!
If you haven't seen it already, you should certainly take a look at the Flex Component Lifecycle. This will answer your questions about where to execute code. I believe that measure() and commitProperties() are going to be important for your component.
I also find validateNow() to be a very useful function when managing components with dynamically sized children and/or parents. I have not yet figured out when the optimal times to call this function are but it seems to be necessary when calculating sizes of Flex components. There's an informative article about it at judah's blog.
Best of luck!
Update -- I stumbled upon a seemingly great article about Flex component lifecycle at DevelopmentArc that I'm adding to my own reading list.
I often inspect sites using firebug and have noticed quite a range of complexity in the way developers wrap their content. Looking especially at centered aligned layouts:
At the simplest end are sites like 99designs.com which simply apply a margin: 0 auto to the body element.
Body -> Header/Content/...
Next along the scale are most other sites, with stackoverflow being a prime example. These sites have some kind of main container, within which the header and the content for example reside
Body -> Container -> Header/Content/...
Further than this are sites which have multiple wrappers. Normally there is a large outer wrapper which consumes the entire page just like body, and within that they have the central container as in the example above.
Body -> Wrapper -> Container -> Header/Content/...
Sometimes columns divs are defined, within which there's a left and a right column. Othertimes people achieve the same left and right column without the need for any surroundnig column or content div.
So my question is, why isn't everyone doing it the most simple way, such as in 99designs. Is it to manage their styling, handle ie6 or what?
Any thoughts?
Because no one design fits everybody's application.
Developers are going to go with what they're comfortable with and what works. If I can get my page done in two days using what I know (and get it to work cross-browser) then I'm not going to waste my time (and my client's money) by trying to do things the 99designs.com way and taking a week.
The reason you may find additional DIVS like wrapper and container and the like has to do with CSS. The CSS box model is powerful, but to achieve certain layouts, sometimes you need additional boxes to work with. It is all highly subjective, and you can't predetermine what divs you will need for a site design until you sit down to build it. There is no one way or right way to use divs in a site design. The more visually complex, often the more complex the markup is. You generally want to keep it as simple as possible...but you can't just keep things absolutely simple just because.