I have a pattern that needs to repeat itself across element1 to element 2 without user noticing the transition. Basically i need element1 and element2 to blend together, any idea how to approach this problem?
i was thinking about using javascript and calculating background offset, but i am thinking its 2016 there has to be some better way maybe including css maybe svg, tbh i am looking for someone to push me in right direction.
basicaly i have pic 1 and need to contrusct pic2 from html to be responsive. element 1 streches across screen with fixed height but variable width and element 2 is on fixed position. with fixed height and width.
Related
I'm trying to achieve a metaball effect by blurring svg's (CSS Blur), then applying CSS contrast to the parent div to get hard edges back. Below is an example. For some reason, the filter does a weird thing on the edges.
I believe i would need to first extend the div to be bigger than the viewport, but some elements are dependent on VW and would therefore scale in an unexpected manner.. Anyone have an idea of how to expand the filter past the viewport edges?
Don't really know how to approach this, i would like the blur to extend past the viewport but retain current layout.
EDIT:
Needed to add white background to container div to make the contrast behave in the way i wanted. ( not go crazy on the viewport edges)
im a designer trying to prototype a unique scroll behavior. Please bear with me.
Here's a GIF animation
Context:
Basically, i want a div to change height (up or down to an arbitrary
height) based on its position in a parent.
Specifically, a div should decrease in height, down to 0, as it
leaves the parent's view and increase, from 0, otherwise.
When you combine this with rounded corners, it gives a unique effect.
I have mostly been experimenting with getBoundingClientRect in the context of a parent div, and using different math to change the style/height of the div.
So far, the effect doesn't work so smoothly.
Here's a working demo (the pink rectangle is the one that should change, i have not figured out how to apply the effect to all of them, but that's a seperate q :)
I'm loooking for some advice concerning the following problem.
I want to position several elements inside a flexbox since the feature shall adapt to its surroundings.
Below one of these items I want to position a computed element which will use the size of the element above it. So in essence it has a fixed (but calculated) size.
I tried solving the issue by placing the calculated element into the flexbox, but this destroys the overall behavior.
It is supposed to look roughly like this:
<Label w/o shrink> <input element, can grow> <Label w/o shrink>
<some rectangle, calculated size>
desired layout - a link since I'm not allowed to post images
In the attached example jsfiddle example of problem I'm using an input element in combination with two labels and a computed rectangle to describe the behavior. Think of the rectangle as a generic example for the problem.
Resizing of the window in terms of enlarging the window works like a charm.
Issues occur when decreasing the size.
Flex can only decrease the size of elements with a non-fixed size, such as the input element. My computed rectangle has a fixed size. So this size prevents any shrinkage of the input+rectangle container.
Idea 1: Make the calculated item a little smaller than the related input so the container itself can shrink since there is space. The input will shrink and thus the calculated rectangle will shrink as well.
See jsfiddle with a smaller rectangle
This works to some degree. If the mouse moves slowly enough when resizing the window / the changes in size happen slowly, everything is fine.
As soon as the shrinkage happens too fast for the rendering to keep up, the issue as described above occurs again.
Idea 2: Ignore the calculated element by positioning it absolutely.
See here: jsfiddle with relative and absolute positioning
I defined the outer element to be positioned relatively and the inner (the calculated element w/ "constant" width) to be positioned absolutely.
By doing this the element will be taken from the flow and everything works fine.
Almost.
Since now the rectangle is ignored, the remaining layout gets broken as well. This is not acceptable due to the usage of this feature as a component in a bigger context. In the example the last label gets positioned too high up since the div won't take into account the rectangle.
My question now is if you have further advice. If at all possible I want to avoid any calculations in javascript and solve the issue using css-related options. (Otherwise using further info of getBoundingClientRect() - such as the x position - might have been an option in some way (?) -> this way I could remove the rectangle completely from the flexbox and just position it "by hand" at the desired position).
I am happy about any further ideas.
The issue appears to be caused by using the width of the input someInput to calculate the computed-element-container width. If you use the flex item width instead then it should work.
I've updated your jsfiddle to show this - I've created a second flex container above the original, that has the same three items. I then calculate the width based on an element with id: content-box. Hopefully this will assist you with finding a solution:
https://jsfiddle.net/jamarmstrong/h9rz1t4b/
For people who might have a similar issue here's another approach I came up with while trying to adapt James solution.
See this jfiddle: jsfiddle using overflow and min-width
What I changed about my first solution:
The issue with the shrinkage is some chicken-and-egg issue: The flexbox cannot shrink further than the elements inside allow for shrinkage, but then my computed element only shrinks if another element shrinks which in turn is prevented by the flexbox itself being unable to shrink, which brings us back to the beginning.
So in my question I tried to make the flexbox ignore the element by positioning it absolutely - which messes up the overall layout.
A solution I came up with in order to allow shrinkage: Make some of the elements be able to overflow the flexbox and allow for a min-width different to auto.
This way I allow the calculated element to overflow the flexbox (which makes the flexbox kinda ignore the item). Note that you also want to adjust the min-width of certain elements.
So in the end I introduced a second flexbox which encapsulates the computed element. Both this element as well as the items inside allow both for overflow and shrinkage. (One might be able to simplify the elements a little).
The computed element can thus breach/overflow its boundaries and the overall construct can shrink. The shrinkage causes the computed element to resize right away - so temporary overflow gets fixed immediately.
You can compare this approach to James idea and decide which one suits your troubles better.
I would like to have a couple of divs that scroll in sync with each other in a manner similar to the diff tool, meld. Note: as this is a static image, when you move the slider, the corresponding slider moves in sync with the other slider. I need to do this both horizontally and vertically.
This is for a highly customized diff tool, some of the diffed lines are very long, and horizontal scrolling needs to happen. This is within a web page, I use jQuery, but any css/JavaScript approach would be appreciated.
It should be as easy as binding to the scroll event of each div and set the .scrollTop & .scrollLeft of the other div equal to scrolled div's scrollTop & scrollLeft.
See https://developer.mozilla.org/en/DOM/element.scrollTop && https://developer.mozilla.org/en/DOM/element.scrollLeft
Edit: Here is an example:
http://jsfiddle.net/dHvJJ/
I assume that you have a fixed font size. I also assume that the two containers are 2 divs.
here's my approach (in order to support webpage resizing properly):
convert the font-size from px to em
spit out an array of correspondences from the code (for example, you should already know that lines 32-33 from the first div correspond to line 22 in the second)
add event handlers for onscroll on both divs. Now the 'magic' is to calculate where the corresponding scrollbar should be, based on your info - it's pretty safe to assume that in order to scroll to line 32, you have to scroll 22 lines on the left side and so on.
For the horizontal scroll I don't think it should be anything hard, simply scroll the corresponding div at the same scrollLeft position
What is the best way to position multiple divs with differing sizes on the screen while taking advantage of as much space as possible. It will have to get the width and height of each div and decide the most optimal arrangement like a puzzle.
If you're willing to use a plug-in, take a look at jQuery Masonry. If you want to try to code this yourself, the Masonry source code may give you some ideas.
Set up an array with the sizes of the divs (getAttribute(); 'width' and 'height',
get the size of the browser window,
iterate through the div array, take the divs of the same height and add widths up,
if you get to the width of the browser window, add them, else take the closest number and add them.
At the point you run out of divs of the same height, find same width divs and add them vertically instead if you can fit it in the remainder of the window. (Don't forget to shrink the browser window variable)
This will fill the window from the top left and work towards the bottom right.
Finally when you're left with only 'odd' divs, simply add the biggest in width and height, and work your way down.