I am looking forward to designing a web page with a matrix layout. like #. It would have max. 8 columns and 3 rows.
I have decided on 8 columns as every screen width resolution on PC, mobile, tablets divides perfectly by 8. I have decided on 3 rows as it is readable. Though vertical scroll bar shows automatically, asking a visitor to click it to see the content is a pain to him. So, visitor needs to see complete paragraphs/sections the first he sees the page.
When I left coding for web (as I started managing my team members. I hardly used to program until some time back and seem to lost out a lot.) when CSS/js was just coming out. Now it dominates even the HTML. So, using CSS is the way to go. (Imho, I actually find coding CSS a scary job).
Looks to be a huge requirement, after I have searched for the resources online.
Problems:
* Fixed columns over different resolutions
* Fixed rows
* Placing right content in right matrix boxes.
How do I start?
Update: I am a huge fan of http://www.nytimes.com/chrome. The main screen which shows assorted news in a matrix is a wonderful and unique design. The matrix changes dynamically to respond to changing screen resolution.
How can we design it?
Probably, first, you forget about non-standard grid of 8x3. Then, you
Check the demo;
Download 960 grid system;
Read tutorial with the video;
start using that grid. Will be much easier to maintain it in the future
You may care about this.
If not, just make <ul> and <table> forms.
Related
I have project where I would like to display sensor readings from the building. It contains temperature, date and name of the room. It is in one small simple square.
I would like it to be displayed on the TV monitor( I am unaware of what the resolution will be, but that can be calculated with JS).
Problem is, I don't know how many readings there are going to be and I need to show them all on the screen(Since it is going to be on monitor without possibility to scroll). I don't know how to calculate their dimension so they would fit. I didn't find any miraculous css property for this so I am fine with creating some JS function. However, I don't have an idea where to start. I would know the number of sensors and resolution, that is all. This number of readings will change over time though.
Any JS libraries that could do this? If none, what function should I write?
Edit: Touffy's solution works great! I found this article for others in needs: Dynamic number of rows and columns with CSS Grid Layout and CSS variables
You can probably decide which browser will be used for this sort of application, so you can pick one that supports CSS Grid Layout. With that, you can do what you want without any JavaScript by specifying the grid container to take the whole viewport (100vh and 100vw), and letting it arrange the grid items with the constraints you like (number of columns, spacing…).
A particular page on our site loads with 1000s of divs each about 1000px x ~1500px(A printable page), each div displays additional elements/basic table/etc but can vary in height.
Render time can be several minutes depending on PC performance.
Using tools like webix which can load millions of rows proves the render process is taking up most of the loading time, but doesn't work well for non-tabular data.
Using Angular JS to create infinite scroll lists is possible. But this also doesn't work well with varying height elements.
All solutions I have found so far loose the browsers find feature, which our users commonly use, thus we will probably have to develop our own search tool.
Yes we could add pagination, or some sort of way of breaking down the data, but users still need to review all the data regardless of how it's broken down.
The same data (10,000 pages 30mb) once exported to PDF loads in < than 1 second.
I think the best solution will be the combination of a few different ideas.
I'm trying to create a HTML5 app with cross-browser compatibility - ideally for mobiles. I'm using HTML5/CSS3/JavaScript/jQuery(with mobile).
My homepage needs to be six square buttons(images) that are centered to the page, so if you imagine a mobile screen with two columns, three squares in each, in the center.
I was hoping someone with more experience might be able to guide me to which is the best way to tackle this problem? It would be cool if the screen was turned horizontally that the images would float into 3 columns of 2.
If anyone has any ideas I'd very much appreciate it. I apologize that my description is a bit brief but I haven't wrote the code just yet, I wanted to see what people thought first of all. Thanks.
If you make the buttons display:inline-block they'll flow across the page. Then you just need to center everything and you're done. Check out this fiddle for an example.
Use the concept called web responsive design
refer
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
http://smallbiztrends.com/2013/05/what-is-responsive-web-design.html
Example sites
http://socialdriver.com/2013/06/50-best-responsive-website-design-examples-of-2013/
http://socialmediatoday.com/jacey-gulden/1687451/10-examples-inspiring-responsive-web-design
To make your app for multiple device screen sizes...you can make use of css media queries
Also you can specify the layout/btn sizes in percentages along with the usage of the media queries.
can someone help me find a solution to achieve the same result as the google plus album view ?
The thumbnails listing manages to keep a consistent row width by re-sorting AND cropping images so they fit all the time, and re-arranges them according to window size.
I know about masonry but it tends to create a lot of white space when images don't have the same size... (because it does not handles cropping)
Does anybody knows about a plugin that does that? or if not the basic math behind it?
take a look at:
http://blog.vjeux.com/2012/javascript/image-layout-algorithm-google-plus.html
It explains how the layout works.
Also take a look at:
http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/
http://www.moewashere.com/jglance/
which are both implementations of the google plus album grid.
Maybe this is a bit overkill for what you are looking for.
You can use the Simulated Annealing algorithm, that is commonly used in electronics to find the optimal layout for all the tiny electronic components inside a microchip restricted area, which is basically the same problem of finding the best layout for a set of images inside a browser window.
Basically, this algorithm gives you a good solution but not guarantee to be the best.
Read carefully the Wikipedia article, as it explains better than I would do.
You can also check out this Simulated Annealing applet for the Salesman problem. Try out with a 500 temperature and watch what happens when it colds down.
Hope this helps.
What I found in google plus and may be it can help you.
They cut some images to make it fit. You easely can find it on the first image
They have lines of images with the same height
So it is ease to do that. You can adjust images to the same height by scaling at first and in each line you can cut the widest a little bit to adjust the width of line.
O, by the way, If you will strach chrome window with google+ service it will not look as good as it was, some gaps will apear for some lines
Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)