I'm in need of some pointing in the right direction here...
I have a site with a couple of different content types. I want to display this content in a book-like layout. The book should be of a fixed width and height and the pages should be populated with as many nodes as can fit. It should be in two columns, with the left column being filled before the right one.
How should i approach this?
I have been thinking about a few solutions, don't know which are possible and which one is best or which i can combine.
I could just create a view that selects more nodes than is need. Then check how long the nodes is in the theming layer and throw away the nodes that aren't needed. Pagers need to be fixed too.
Use panels in combination with views to display one view in two columns, if this is possible. Need a way to determine the amount of nodes that is displayed on each page, based on content length.
Write a plugin/handler for views so that i can select an amount of nodes that has an maximum, predetermined, max content length.
Write a new display-style for views that shows content in two columns with fixed heights.
Write a custom module, leave views and panels out of it and do everything myself with db_queries.
Would appreciate and guidance a lot. Not looking for a finished solution, i'm not afraid to code and i will contribute back if i create something that someone else can use (like a views plugin). Just need someone to guide me in the right direction :)
The hardest thing will be to figure out how much content you need to fill out the space. There's not really a good way to do that either since, it will depend on both the markup and the styles.
The best solution I can think of is loading the nodes with javascript, or maybe just have them available as javascript variables. That way you could insert the nodes to your page one by one. You could then in the JS see the heights of all the nodes in total, and once that height is bigger than x, you only need to remove the last inserted node.
It's not a perfect solution, but I think you should look at doing this with JavaScript. The only problem is, that it wont degrade gracefully very well.
Drupal help you build fast, and it looks like promising but fails to fullfil the needs of client, designer also programmer. You need to write one module page, and some functions.
5th solution you gave has little trouble than others. Write a function that to have "teaser like" behavior, I will return formatted node according to its type. Don't lay on drupal's teaser system. If teasers will have different heights, add height to teaser function.
I don't have a direct answer, but have a few things for you to think about.
It sounds to me like what you are looking for is a combination of a CSS3 Multicolumn Layout (see http://www.quirksmode.org/css/multicolumn.html for example) and limiting the displayed content to a fixed height.
My first thought would be to create a single view that gets more than you need, display it using CSS3 columns, and set overflow: hidden; for the container, so that the extra text is just hidden.
If you need to get more particular, you may need to dig in to the views rendering system to limit the total number of nodes based on how many characters have been rendered.
But since your desired constraint is more visual than data-oriented, I think that the most practical approach will be to use javascript to detect the text height and state of overflow.
There are some things that are unclear about your requirements. What is the purpose of the 2 content types? Does one display on the left and the other on the right? Or are these just 2 different content types that should behave the same way, but we're only seeing one content type at a time on a given page? What should happen with the overflowed content? Should it appear dynamically on page 2, then 3, then 4, and so on?
One parting thought: Maybe load ALL the content that you want to page through, directly to the browser. Maybe have it start off hidden. Then use javascript to display it, formatted into columns, and use javascript to handle the paging as well.
Related
I am challenged to make an HTML table/grid accessible, which offers the user the possibility to select a row and perform an action on the selected row.
The following link gives an example, on how everything shall look like (without accessibility):
https://alejandro.app.fi/crud-ui-demo/simple
My problem is:
How do I make the buttons on top of the page, for performing the action on the row, accessible? How can I get the screen reader to announce the part, so that the user is able to interact with it?
In my opinion it would be a bad idea, to let the screen reader read something like "To edit this row tab back xyz times and use the buttons above the table"
I searched through the wai-aria and was hoping to find something like a "connector" to give the screen reader a connection to these buttons at the top, but could not find anything, that would fit.
Is this a bad pattern, with which I want to work with? Or how can this be solved?
A large table with internal selectability and external editing controls is inherently difficult to use, even without any disability.
Large tables are hard to get intuitive information from.
Wide tables or tables viewed in narrow windows require horizontal scrolling.
Selectability tends to be confusing, because you are focused on a cell, but when you select it you might want to select it, its row, or its column, so you need a way to distinguish these three kinds of selection. Also, it is not obvious whether selection automatically follows focus or requires a separate action.
External editing controls are distant from much table content, so when you are looking at the controls the selected row may be out of sight, making you forget which row you selected.
Screen readers have poor support for tables and often give wrong header information about cells.
If you asked what users wanted, most probably would not tell you they want to see hundreds of alphanumeric facts arranged in a grid. For editing data, most users might want (1) a way to find the desired data and (2) a way to edit those data. Displaying all the data in a table is unlikely to be a user-friendly method for achieving either #1 or #2.
Clever rendering methods may fail under common conditions. For example, above the cited table is a horizontally scrollable top list of table types. On a narrow device, the right end of the list cannot be scrolled into view.
In principle, tables can be WCAG-accessible. In practice, tables, especially if large, complex, or operable, are usually inferior to other solutions in usability and accessibility.
I'm very new to Kentico and asp, I'm coming from a php/Wordpress background into this. I'm working on a Page Template that has an optional Carousel in it. I'll need the content of the carousel which I have set as a Document Type, but I'd also like to be able to have a Settings Document type in which they are contained. In the Settings Document Type I want to be able to control what kind of wrapper goes around the whole thing, using a form to do this. I've played around with Hierarchical Transformations, but can't seem to get them to work. At best, I'm able to display markup from the transformation, but the variables set in the Settings Form won't to come through.
Does anyone have any idea as to the best way to get this to work the way I want it to, or is this even possible? I only have access to the CMS and have no access to the file structure or anything like that. I've looked through pages of Kentico documentation, but it seems vague and I can't seem to find any examples of anything close to what I want to achieve.
Update: I've finally somewhat figured out how to make this work with Hierarchical Transformations, but I'm still having an issue with the Opening and Closing Wrappers which I set as Header and Footer Transformations. For some reason these tags appear twice, one within the other. The outer one does exactly what it's supposed to do, but the inner one doesn't take the variables set within the form. Anyone have any idea how I can just display this once?
I'm not sure how to boil this question down into a sensible single-line title. I'm also new to .Net.
I want to build a web-page version of an invoice, but I want each page of the invoice to flow down the page, not be paginated. The header of each section will be the same, but the line items and the footer will be different.
I've done this before by writing html to a stringbuilder and then outputting it to a literal control, but I think there must be a better way. I'm just having a hard time conceptualizing how to do something like this with server controls because of the fact that the ID's need to be unique.
Can someone point me in the right direction here?
Thanks!
You can create custom control and give it some properties that you can modify how you want and add the same header and footer to the control. Then use it on your page how many times you would like. Check out tutorial here:
http://www.codeproject.com/Articles/87474/ASP-NET-Custom-Control
I am looking for some advice in regards to getting a very quick display of our reports. The problem I am working with is I receive an XML data structure that defines our layout. The report can be anywhere from 2 to 3 pages to perhaps 20 to 30. So to make the report display as quickly as possible I would like to just render the visible portion of the report. Here are the issues I need to overcome to accomplish this and I am looking for some advice how how to accomplish this.
To get a better visualization, Think of this like a word document. The reports have sections and I want to be able to get them to display as quickly as possible.
1) Of course I do not know the height of the child components I will be adding. Is there any techniques where I can determine if the components I am adding are not include in the view port and could I trigger off scroll bar movement.
2) I was thinking of adding estimation to the children components and then using that to set the height of the parent container. then when I receive scroll bar move event, I would check if the child components have been added to the parent and if not add them. Is there anyway to get the height of a component without rendering it?
3) Does Flex support anything built in that will accomplish this.
Any other techniques would be welcome. Basically I want to get the report displayed to the user as quickly as possible and delay the rendering of components that are off the screen.
Any suggestions would be welcomed. Thanks in advance.
Added Info.
Hard to provide code since I have not coded it yet. Let me try and expand with some details. I have a Parent Container where I take the some XML and using the XML creating children components based on the information in the XML. Right now when we do this it can take a long time to render a long report. What I want to do is to reduce the rendering time by delaying the rendering of those children objects. I have looked into things like the creation policy and createDeferredContent, but not sure if this is the right way to go. Guess the general problem I need to attack is how to do you stop rendering objects once you are outside the parents viewport. What I want is an item renderer like functionality but there is no similarity between the children. Perhaps a picture might be useful (will add as soon as I get to 10 points)?
Use spark List with useVirtualLayout turned on. This is what it does.
There is always similarity between children, but if you can't find it, you can use an itemRendererFunction.
It's always a drag trying to make sidebars the same height as the page content - too short and your page gets boring at the bottom, too long and your page looks like a run-on sentence.
Is there any way to add/remove/display widgets based on content length, so that the sidebar will only display another widget if there's a ton of sidebar whitespace available?
I'm aware of the overflow CSS property, and would rather try to find a different method :)
I agree that it would be better to avoid this altogether. Users are used to a constant sidebar size, with some pages shorter than the sidebar and some longer than the sidebar.
However, that doesn't actually answer your question. It is theoretically possible to determine the length of the post and make some judgements on which widgets to include based on that; however, it's beyond my skill.
As a halfway solution, you can use a widget that gives you more control over the sidebars. I prefer http://wordpress.org/extend/plugins/conditional-widgets/ but I think http://wordpress.org/extend/plugins/widget-wrangler/ would work well too. With those you could specify which widgets appear on which pages. If you have hundreds of posts of different lengths this may not be suitable, but if you have a handful of pages you could use this to add more widgets to specific pages and have fewer widgets on pages you know are shorter.
Hope this helps!
here is an interesting post about a dynamic sidebar depending on length of page. Does this help?