I would like to take some arbitrary HTML and display it in a carousel, showing a page at a time. For example, see how articles are laid out in the NY Times iPad app. I have achieved the column layout using the -webkit-column-width CSS property, and it works as expected if I add empty carousel items:
http://www.senchafiddle.com/#ea1RR
However, I need to figure out programmatically how many dummy carousel items to add, based on the number of columns. As far as I can tell, there is no way to find the width of the text, since the extra columns are overflow and don't affect the size of the element. Any help with this issue, or ideas on other ways I could achieve the same functionality, would be appreciated.
I think this solution can be adapted to fit your needs: http://www.webdeveloper.com/forum/showthread.php?t=196319
If you have problems start a senchafiddle so i can inspect your code
Related
I'm working on a class project at the moment and I'm having some trouble with the front-end part of it.
What I'm trying to do is implement a grid of hexagonal like shapes (I'm using this example by web-tiki), that works exactly as I want when resizing the screen.
I want to put this grid in a carousel-like div, that adds a page with the same number of items when resizing, instead of stacking them underneath, thus taking up more space downwards.
I've been through a lot of research, but none of the examples given seemed to fit my case. Can anybody give me an insight on how to do that?
Edit: Based on Rustyjim's comment, I actually edited the carousel's js file to fit my needs, so consider the issue solved. Thanks for the responses!
JS Fiddle Example
I have a div which contains user generated HTML elements. Each line in the div can be any number of characters, but displays only on one line, and does not wrap. My issue is that partial elements are shown vertically, and due to the variety of HTML elements, I cannot anticipate exactly how many lines of text can fit.
The image below shows the issue, in this case using only list item elements (highlighted with a red arrow.) I've included the HTML and CSS are below as well.
I have been looking for a ReactJS compatible solution to prevent element that do not fit completely from being displayed (I'm open to nearly anything CSS, NPM module, JavaScript snippets, just no jQuery.) All elements needs to remain at a static size, so dynamically resizing the text or container is also not suitable unfortunately.
The solution need only work in Chrome.
Unfortunately despite hours and hours searching for solutions in the form of modules on NPM or CSS solutions such as -webkit-line-clamp, I've found nothing suitable. -webkit-line-clamp will only work (as far as I can tell) on text within a single element, so it will fix a paragraph with 5 lines, but it will not fix 5 single line paragraphs.
Any ideas on how to solve this would be appreciated greatly. I've been struggling with this for months. Thank you very much for reading.
Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery.
this seems to be the answer. I am currently searching for an angular.js directive
There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
The images have a fixed/max width
The images have a fixed/max height
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit:
After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.
Does anyone know of a jQuery content slider (not just an image slider) that allows you to specify a grid of elements?
As an example, this is the sort of grid that I'm after:
http://cl.ly/image/0O213C1n2b0s
You can see that it's a 2x2 grid. With the controls, when someone clicks on a 'next' link, it should scroll to show the next 4 elements. I'd like to be able to have multiple instances on a page, each having different grids (I may be 3x2, 2x2, 4x1 on the same page)
Also, as an added caveat, I need this to be responsive.
First question is; does anyone know of a solution that already exists which would fit my requirements? If not, that leads to my second question; would anyone like to help me write such a thing? I'm relatively savvy with javascript (more specifically jQuery if I'm being absolutely honest) but by no means an expert.
I've done a fair amount of googling, but came up short. Hopefully someone is way ahead of me and has already written something along these lines.
What say you, Internet?
Have you seen this:
jQuery grid syle slider
I've built a very basic grid of divs by using float:
However when expanding one of the items placed in the right-hand side column, here is what happens (please excuse my crude/lame arrows I've used to illustrate what I'm trying to achieve):
Which is what I expected but not what I really want. I'm looking for a neat way of having boxes A and B move up to fill the empty spot and items C-H to move up one row so that available space is utilized most efficiently.
Here is the JSFiddle I've created to illustrate this problem (apologies it's not clickable, stack overflow rep thing again...) :
http://jsfiddle.net/VDV6S/4/
I would appreciate any suggestions.
You need jQuery Masonry, or something similar.
Alternatively, you can split the items into two columns manually: http://jsfiddle.net/thirtydot/VDV6S/5/
Another option is to use CSS3 columns, however the browser support might not be acceptable.