I've got a bit of a tricky question I couldn't find the answer to. Basically, This is what I have:
In the center is a search box (fixed to the center of the page), and around it are dynamically loaded search results of differing sizes (although, if need be these can be restricted). Thing is, they need to "wrap" around the search box after the results have been loaded. My normal go-to is floating, but this isn't really going to work, as the box isn't aligned to a particular direction.
I've looked at jQuery Masonry for a solution, but it isn't going to work for me (doesn't detect fixed elements, doesn't work from a point).
Any pointers in terms of solutions or Google-Fu would be much appreciated.
This is similar to packing textures of different sizes on a square. Have a look at this algorithm: http://www.blackpawn.com/texts/lightmaps/default.html
Since you have a central fixed box, maybe you can divide your available space in 4 rectangles and then pack the boxes into them.
Related
Okay, so I'm finding a lot of answers that don't quite fit my need. Here is my scenario: I have an app in javascript/html/css. I have two independently rotatable overlayed elements (in this case both svg's) that both have elements that need to be clickable which move around their perimers with the rotation of the two elements. One layer has 7 clickable points, the other has 12 clickable points, and the two rotate to a given point based on onclick events that set a target degree for the rotation. Only the points (i.e. small transparent circles at the edge of a circular radius on each of the two svg's) need to be clickable. My problem is that whichever layer I put on top works, but the buttons on the other layer then stop working, apparently blocked by the other's background. I've tried messing with all sorts of pointer events and some other ideas on StackOverflow, but all end with the same result: one set of buttons doesn't work. They need to be on separate layers so the rotation will put them at the correct position as they rotate in real-time. Any ideas would be welcome. I am looking for an answer that requires no libraries (including jquery), however if it can be done with jquery, then it can be done without jquery-- if I can find out how. Ideas anyone?
#dandavis is pretty much right here, except I think he meant to say pointer-events: auto . Was just noting there's not an official 'answer' posted. For now, marking this one, but if you want to re-post as an 'answer', Dan, I will gladly mark it as the accepted one.
There is an effect of pointing to a special element of image with line.
See example of crocodile at http://snapsvg.io/.
When the image appears at first there is no any pointing with lines:
Then after scrolling appears lines with hints:
I know there is https://github.com/julianlloyd/scrollReveal.js and a lot of other js libraries for effect of appearing.
The question is how to make this lines, place them at the exact point on top of usual image (not SVG) and animate lines on scrolling?
Would be great to know the name of this approach/effect (what to google) and see reviews on good/bad experience, or js libraries.
Update: want to see resolved issue with image resizing and exact pointing,
In most cases, see example at http://www.sitmed.com.br/produto?id=2, image has fixed isze and is not scalable, this will not work for big or small screens.
I think it is possible to write scaling library in javascript, using svg/canvas or even plain div.
Otherewise points will jump on image scaling.
To make these lines and place them at exact position:
The easiest is to use canvas or svg. Here are a few links to do that.
Drawing lines on html page
Drawing arrows on an HTML page to visualize semantic links between textual spans
Placing the lines is easy if you're using canvas. If you are using images for lines, you can place these lines with respect to the big crocodile. Not a big deal.
Animate lines on scrolling
A good place to start with knowing about animations is to learn any animation framework. I would suggest Greensock Animation Platform(GSAP). It is open source and also well supported. They have good tutorials and docs for beginners. You can animate in a very abstract manner using GSAP. Rapheal.js is also good for animating svg images.
As for as scrolling is concerned, you can find many plugins including the one which is mentioned in the question.
Just use a parallax scrolling type js library such as Skrollr. It's very easy to just make the lines a div with a background color, and then as you scroll the page the div grows in length.
The effect you are describing makes me think you are looking for something like flow or organization chart "connectors" which anchor arrows in a chart to glue points on each element. In more general graphics terminology these are likely just known as "line anchor points" or something similar.
JointJS is a great charting/drawing library for HTML5 and SVG that could make what you are doing fairly easy to do, but a simpler "CSS only" might be all you need. If you are you really looking to animate the image then the more sophisticated javascript library approach might be worthwhile. JointJS uses Raphael and Backbone.js so you get a lot of power tools in the box.
You can use this library for drawing SVG lines, its quite configurable and well documented. You basically need to specify your "From" and "To" elements and a line will connect them for you.
Then you can play with the line's stroke-dasharray and stroke-dashoffset properties on scroll to achieve effect of the line being drawn.
More of SVG animation here
I have used this approach and its quite cool looking, hope this helps
I think the best way to implement this depends greatly on what animation you're going for. To reproduce something similar as in your example, you could just stack different images (one for the crocodile and one for each component). Then as you scroll, you could change the z-index of the crocodile and use css animation to "wobble" the size of the element you just revealed. Put all of the images in one div together, to make sure they scale together and align nicely and you're done.
But for something else the work might be completely different of surprisingly similar, I really don't think there's one solution that fits all needs, except if you want to use the canvas as already suggested, but that depends on the complexity of the graphics you want to reveal.
I'm working on a full page, flexible width image gallery.
https://weknowtoomuch.com/projects/nga/projects-grid
Now, you probably start to get an idea of what I'm trying to do. The page in it's current state is rather good, but the spaces between the images (blank spaces around the center of rows) are a bit too big.
The way I have implemented that is very simple, just distribute images by alternating their float property between left and right.
The effect that I'm trying to achieve, ideally, would be something closer to this:
http://images.search.yahoo.com/search/images;_ylt=AwrB8p4dRulSGDgAuCeZDWNH;_ylu=X3oDMTBwazJlZjZ1BHNlYwNzdHJtBHNsawN0aXRsZQRjcG9zAzA-?p=2014+Super+Bowl+pictures&aq=Trending&sid=743e5f15-0b3b-3483-ada1-c617f8754761&spos=0&norw=1&
I tried some research, but the solutions that I found involve fitting all images by changing row height, which I'm trying to avoid. Some tall images might also have to occupy two rows, which would also probably not work well with the changing row height technique.
What I'm hoping for, maybe, is an algorithm that would let me distribute images in a way that white spaces are minimized, and also randomize the location of white space blocks.
I am not using jQuery in this project, but I could do an exception if there is no other reasonable way!
A complete solution that fulfills all the above criteria would also be a good alternative to implementing an algorithm myself, in case you have a tip in that direction...
A final note: some minimal horizontal cropping of images is also acceptable.
Hoping to get some tips, leads, and other useful feedback, and that this would help someone else sometime.
Strangely, a similar question was asked yesterday. In my answer I have presented a draft for a layout engine that adjusts the height of each column to achieve a tile effect.
You don't want to adjust the heights, but the mechanism could perhaps be altered to fit your needs. If you don't update the heights, you can achieve justification by distributing the remaining space among the gaps between the photos. That can create very large gaps which don't look nice. Alternatively, you can achieve a more compact look by centering the rows at the cost of having ragged margins. Still, this looks better in my opinion.
I've created a scrappy prototype (that does not work in IE and has other issues). It centers the images, but you can download it and alter the gap and center parameters.
I know that this is not an answer to your question, more like a suggestion. There are bin-packing algorithms for evenly distributing the images over the rows. Also, the issue of the double-row images is not solved.
Are your photos of arbitrary size or do you use, say, three or four standard sizes? If so, possible layouts could be precalculated and then applied on the fly.
I don't know if this is possible, but the client is adamant. He wants his navigation bar contents to be aligned along a "Fibonacci Spiral".
This thing:
I don't even think the CSS3 rotation aspect is functional in any browser currently, and I have no clue if any of the scripting languages would allow me even the faintest of possibilities to create a custom, curving track to force objects to follow instead of the standard (and pretty much only) horizontal and vertical alignment methods. However, I truly do embrace a good challenge. Backing down without an effort is hardly doing a good job.
If any of you know any possibility even of the greatest magnitude in how I might achieve this effect, I would be amazed. THank you for your time! If you think this is truly impossible to achieve in a current web browser, say so!
Interesting idea anyways. Hope you can make your client happy.
I thought i might chip in with something.
Found a jQuery-plugin that bends text along a curve:
http://tympanus.net/Development/Arctext/
Perhaps one could make a layout of square divs of diminishing size and specify a curve for each one?
Possible div-layout if you turn it around: http://upload.wikimedia.org/wikipedia/commons/9/95/FibonacciBlocks.svg
The plugin specifies the curving from a radius-value and can curve upwards or downwards. It does not seem to be constructed for tilted curves, but that can perhaps be modified.
EDIT: I experimented a bit with the plugin, and i believe it certainly is possible to achieve the effect you need, albeit one does have to know trigonometry quite well (as far as i can tell) to make it function properly.
Another option, and the easiest way i can think of so far, is to make use of an old classic: Image map!
http://en.wikipedia.org/wiki/Image_map
Just photoshop a nice spiral image however you like and use image mapping to set linkable areas. This can maybe be of interest: http://www.outsharked.com/imagemapster/default.aspx?demos.html
It can be difficult to use (webpage) sliders that cover a large range with fine granularity. On the one hand, it is easy to move across the range. On the other hand, it is difficult to locate the exact point one wants, assuming a fine enough granularity.
I was thinking that a magnify effect around the cursor could solve this problem (assuming the problem really exists).
I looked for existing solutions or ideas via google, but couldn't find anything.
Any suggestions here?
I doubt if this is what you're looking for, but... within Mac OSX, holding down the control key and moving the scroll wheel will zoom in and out.
I'm having trouble thinking of a scenario where having so much data that scrolling of this nature would be a problem you'd want to have. In almost all scenarios it makes more sense to chunk up the data or reduce it down in some other way.
About the only thing that makes sense is the seek-bar/scrubber on a video player. If your player is 400px wide with a 360px wide scrubber, but the video is an hour long, the best granularity you'll get is 10 seconds-per-step (with the step-size being 1 pixel).
If that isn't enough granularity, then it's possible you'll need to augment your scrubber with another UI convention - which could be a magnifier - but it could also be other things. Like a "jump to point" text field that would allow to user to entire a time and seek to that exact position.
It sounds like you're going for something (visually) like the OS X dock. This is called a fish-eye effect. There's a jQuery plugin for a fish eye menu which you may be able adapt and merge with a slider to give you the functionality that you're looking for.