I have created an organizational chart using ASP.NET on web page. The web page is using strict DOCTYPE and following W3C standards.
The chart has a hierarchical layout decided by the manager field in the table that contains employees in the organization.
The chart layout has nodes with employee image and other details like job title, department and contact details. Nodes are beautifully arranged and connected by lines (only horizontal or vertical or both).
A lot of DIV elements are used (to avoid table) for connecting lines and arranging the chart properly. As suggested by my friend, using DIVs for connecting lines in the chart is semantically wrong. Also, a lot of DIVs are used to arrange the chart.
Is there a way by which I can make it semantically correct? Or, am I using HTML for the wrong purpose?
It looks like you're using HTML for something you shouldn't. Having said that,DIVs are supposed to be for division (sections) of the document. If each node is conceptually a unit, then a DIV is probably appropriate. If the nodes are not a unit, you may want to use a SPAN instead.
Related
I am planning on creating like a family tree appearance in this scenario.
Is it possible to connect two separate layouts via a line tool or any connector ?
So far all I have done was static images of lines and aligning the layout so it appears connected to the other
Is there even something like a family tree Out of the box from Pega ?
Family tree kind of view is not present in Pega.
Similar kind of requirement came to me as well few years ago. That time I created my own html Section and css files.
I picked the idea from google to show list tags (li) in form of connected lines.
An example of the idea : https://jwcooney.com/2016/08/21/example-pure-css-family-tree-markup/
An example of connected div layout : http://jsfiddle.net/sbaBG/1
Under list tag I used Pega tags to show property values.
I'm wanting to use Panels to drive a whole bunch of pages for data interaction, but I'm not sure how to get Panels to "interact" with each other. I think the best way to put it is with an example. Say I have one Panel which has a list of nodes (in a view?), and another Panel that I want to display an editor for any node I click. And I have a page that has the first Panel in a block on the left, and the second in a block on the right. So I suppose on click, there'd be some AJAX grab that puts some page in the other Panel. Now, this is a simple example, and I'm going to end up with many different sets of interactions among multiple panels doing all sorts of stuff. But this works as a starting point. The goal is to be able to reuse these Panels in multiple pages that may interact with similar data, but with different operations (maybe there's the above edit page example and also a similarly designed view page also utilizing the left block node selector?).
How much of this can be accomplished with Panels (and maybe supplementary modules?)? Where would I need to code to put it all together? I assume it would need code perhaps in the Panel page that contains things like the data selector panel, data view panel, etc. to "link them together". Are there any good examples floating around on how to do this, since it seems like a fairly bread-and-butter exercise for any sort of web-based data interaction...
The best and probably the simplest way probably would be to do it with some coding but if you prefer using modules there a module families like Context or Rules that should give you some functionality which you are after. I also suggest looking into AJAXification methods and modules.
With VS 2003 we were used to desing the web forms quite similarly to win forms: the Textboxes, Labes, Buttons etc. were positioned with absolute coordinates (inline css) in divs with ms_positioning="GridLayout".
With VS 2010 this way of designing web forms seems to be gone (at least it can no more be used to get the design finished quickly) and the use of absolute coordinates and inline css is considered obsolete anyway.
I would like to get some hints how to design web forms like the one in sample screenshot the "correct" way.
I would like to preserve following important things:
One should be able to quickly / easily add, remove or move the form's controls while maintaining the overall look and feel of the form - our web forms tend to change / grow over time as customers' requirements change.
The form should not crumple together when the user reduces the width of the browser window - the form width should not descend under some minimal value.
I am considering using html tables, but for example for the Address-Block on the sample screenshot I would have to have a table with 9 columns (one for every vertical boundary) and use lots of colspans - not neccessarily the fastest way of designing the forms considering future changes. And I heard in 1999 or so that the html tables were obsolete.
I read I should use divs and css for pretty much everything but I am unclear in how to create a web form like the one on the sample screenshot without providing absolute positions and sizes some way or other.
Any hints will be greatly appreciated.
Thanks in advance
Best Regards
Erich Horak
I would divide up your three main sections into divs, then tackle each section individually. My main tool when approaching this is the Web Dev Toolbar. I use it to view markup and CSS of any form I locate online that I like the look of:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
(CSS -> View CSS and CSS -> View Style Information (hover mouse) are helpful drop down options)
Forms are created with CSS mainly through the use of label and input classes:
http://speckyboy.com/2011/05/24/css-form-templates-tools-services/
Your form looks difficult at first glance, but when you break it down it really isn't that hard to do. The link above has samples - simple like you mentioned - but simple or not, the CSS is the same.
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.
does anyone know how to create a bar/pie graph based on the value from database in ASP? For example, i would to create a graph based on the number of people who went for vacation in certain state..I would like to retrieve the value directly from database..need help..thanks..
You could check out Google Charts.
There are a number of great javascript libraries which can take datasets and convert them into graphs.
canvasgraph
flot
are two of the big ones. The plus of javascript is that the processing is done client side and you don't have to send over images, just JSON.
Dojo also works well, though documentation is a little scarce.
Microsoft's Office Web components (OWC11) also works on the server side, and it's fairly easy to use.
Third option is to use plain old HTML. Works well sometimes if you want a simple chart, like a horizontal bar chart. You can use a table, with div / span tags set to correct widths ad colors for the bars. Free, easy and requires no plugins of any kind to work.