I really like the way SlickGrid DataView smoothly scrolls and renders/hides stuff for me. I'd love it if I could use this same sort of behavior to display data that is slightly less tabular in format. For example, a thumbnail gallery with thousands of thumbnails in it.
The main problem is I'd need display my list of items in a grid horizontally as well as vertically. I suppose it could be accomplished with a dataview by dynamically changing the number of columns based on the size of the window, though this seems kind of an abuse of the system. Is there a better system for this out there?
I ended up writing it myself. Enjoy!
Related
I need to put together a prototype of a scrollable list with items that can be vertically resized. For example, a list of charts. I wish I could post any code but dont even know where to start from. Tried googling but nothing came up.
Any idea what a good starting point might be?
Thanks
Personally I would start with creating a list of elements in a vertical fashion. That should be pretty straight forward.
Second I'd reuse a library which may already have a resizable component that you can use. This should allow you to learn about resizable elements.
http://jqueryui.com/resizable/
Finally, put them together and see where your bugs are!
I recently just added a grid layout, but I can't figure out how to make my links work. The grid that I used is the 1140 one at http://cssgrid.net/. I studied the source code of that website, and tried to make my page like theirs, but when I put everything in it made mine worse, and the grid didn't even work. This is how my website is supposed to look http://spencedesign.netau.net/singaporehome.html
and this is how it does
http://spencedesign.netau.net/home.html
And when you reduce the size, it doesn't look like it's supposed to. When you minimize it I want the pictures(links) to be two per row, then one per row depending on how small the page is. I also want the quote to turn into different rows when it is too small for it. But I can't figure out how to make the page look normal regularly let alone make it look good with a smaller browser. Thanks!
http://goldengridsystem.com/ might have what you're looking for. Folding effect worked for me.
I want to replicate the dynamic drag-drop layout similar to
http://www.picmonkey.com/ collage,
where you can drag an item on the edges of the container and place it and the layout adjusts accordingly.
Do you know of any algorithm?
Have a look at
http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux/
There are many more examples like this if you search in google. Pick anyone and you are good to go.
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.
I'm building a page full of hyperlinks which are gotten from querying a content management system, so the number of links is variable.
The requirements need me to display all the links over 3 columns and make it look presentable.
So at the moment I've got myself a Map<Category, Hyperlink> and when I display it at the moment its in one big list on the page.
Is there some way I can dynamically get my columns to flow into each other so that each column contains a similar number of hyperlinks?
Thank you.
The easiest way I can think of to do this is to put the links in to an unordered list, then set the style for each list item so that they are 33% of the available width and displayed inline.
You might try looking at the following sites:
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5268973.html
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The second one is the best one, in my opinion. I used it before when I had the same problem. It gives all the code, really nice illustrations and you can just copy the code free of charge. I think this is exactly what you are looking for.