I am currently stuck at a point. i am using css animations to move p elements inside div from left to right at different speed. I want them to change their direction once they touch each other? How can I do this?
There was a new browser API introduced for this recently that might do what you want
Intersection Observer API
otherwise you might need to calculate that yourself using methods explained in How to check if an element is overlapping other elements? or https://gist.github.com/jtsternberg/c272d7de5b967cec2d3d
by getting position and size of elements and compare them.
Related
Given the following hypothetical function:
bowlingBall : Form -> Signal Element
bowlingBall shape =
makeMovable shape
How would one retrieve the absolute position of
bowlingBall greenFilledCircle?
I've noticed that when I debug a compiled page containing a drag-able element, chrome keeps track of the position under the property transform: matrix(...) - is this something we can tap into using elm functions, or does some interop need to be employed?
The short answer is that you can't do directly what you're asking for Elements. There's a pull request which would allow you to do this, but it hasn't been merged in yet.
There likewise isn't a good way of directly inspecting the position of a Form either.
I've run into a similar issue in the past and the way I've tackled it is to hold the position of my various items in my model and do all my position manipulations with regard to that position.
This isn't perfect; in particular the cumbersome conversion between the coordinate systems used by Mouse and the coordinate system used by Forms becomes much more annoying without this capability, especially if your Forms don't happen to inhabit a canvas at the upper-left corner of your window.
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
my current project uses quite a few CSS-based background gradients. They are not used for every element, but they are quite essential for the User Interface.
While integrating them, I was unable to find detailed answers how these gradients affect performance.
Obviously having multiple gradients will use processing power when the respective element is first drawn. Is it known if this gradient generation can also be hardware-accelerated or is this CPU-only?
Additionally, and IMO more importantly, are they being cached? If so, what has to be identical for two elements to share the same "generated" gradient? My first guess would be that the css-statement and the element-size has to be identical (even if the classes that contain this statement are different). It could also be possible that it is being cached by class, but then the element-size could be different and as thus would require another gradient.
For example, if I have a list (ul) with let's say 15 list items (li), which each has a background gradient and includes three elements which also have background gradients, each element type has a constant size. Would the browser generate 15 or 60 gradients?
Pankucins is right - the browser will cache the whole CSS file when it is downloaded. The styles are then rendered when the page has loaded.
Each gradient will be rendered separately; but I really don't think it will be too much of a problem.
I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted.
I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas.
Alternatively, if anyone can explain the math behind -webkit-perspective, I can figure out the position as that's the only thing I'm not sure how to model.
Have you tried using getBoundingClientRect()?
I've used it successfully in the past to calculate the dimensions of elements that have been transformed with the transform property.
The problem is, that the CSS3 transformations doesn't actually change the position of the elements in anyway. Of course the browsers "know" that they are repositioned, because it renders them, but this information is not provided back to the DOM/API.
The only thing I can think of, is to calculate the positions based on the transformations yourself, since these are "simple" matrix transformations.
Unfortunately Algebra class has been too long ago, that I can't tell you anymore how to do it - only that it is possible.
Using getBoundingClientRect is a good idea but will only give you the coordinates of the rectangle that contains your shape, not the exact coordinates of the 4 topleft, bottomright, bottomleft, topright corners.
You'd only be able to do this by taking each of those non-transformed coordinates and applying the transform via javascript.
Are there any disadvantages (aside from muddier code) to using empty elements on a page simply for styling purposes?
For instance, using some empty <div>s with different texture background images to lie fixed behind page content.
The obvious one is that you're technically blurring the separation between structure and presentation layers. If I'm ok with that aspect of it, I'm just wondering if this poses any SEO, performance, or other issues.
Any links or evidence that point me in either direction would be great! Thanks!
Semantically speaking, I would think not. If only it is a few empty elements. But instead of using empty DIVs to sport multiple backgrounds, why not just use CSS3's Backgrounds and Borders Module? In this level 3 module, you can specify multiple backgrounds for one element, and I assume in your case the body element.
You can learn more about these here: http://www.sitepoint.com/mastering-css3-multiple-backgrounds/
For more information regarding the DIV element and it's correlation with SEO, check out this link: http://blog.ucvhost.com/advantages-of-div-tag-from-seo-prospective