Nice template!

[Aaron Kwong]

This is very handy Geoff! :-)

Correct me if I'm wrong, but I think there might be an issue with  
where the <img src> tag is pointing. Shouldn't it be <img  
src="include/omni_task.jpg"> instead, since the gantt chart jpeg file  
is created in that folder by default?

Then again, you did mention that you were exporting a separate set of  
jpeg files from OmniPlan in the first place. Maybe you're saving them  
in the main folder instead of the "include" folder...

My HTML skills are very weak, so I can't think of any way to improve  
on this. Maybe you should post this on the OmniPlan forum to see what  
the users there can suggest?

Sincerely,

Aaron Kwong
Support Ninja
The Omni Group

On Jun 7, 2007, at 12:00 PM, omniplan-users-request at omnigroup.com wrote:

> Send OmniPlan-Users mailing list submissions to
> 	omniplan-users at omnigroup.com
>
> To subscribe or unsubscribe via the World Wide Web, visit
> 	http://www.omnigroup.com/mailman/listinfo/omniplan-users
> or, via email, send a message with subject or body 'help' to
> 	omniplan-users-request at omnigroup.com
>
> You can reach the person managing the list at
> 	omniplan-users-owner at omnigroup.com
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of OmniPlan-Users digest..."
>
>
> Today's Topics:
>
>    1. Better presentation on the web (Geoff Canyon)
>    2. Better presentation on the web (Geoff Canyon)
>
>
> ----------------------------------------------------------------------
>
> Message: 1
> Date: Wed, 6 Jun 2007 23:42:32 -0700
> From: Geoff Canyon <geoffc at inspiredlogic.com>
> Subject: Better presentation on the web
> To: omniplan-users at omnigroup.com
> Message-ID: <2293822F-F0C9-4130-A365-F13B63206599 at inspiredlogic.com>
> Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
>
> I use OmniPlan to organize many small projects, with just a few tasks
> for each project. The result is a project file with about 150 tasks.
> This doesn't present the Gantt chart and Resource Timeline too well
> in the standard web export.
>
> I've gotten around the issue that the images don't follow the scale
> I've set. I do that by exporting the images individually after the
> main export, and putting the resulting jpegs in place.
>
> The problem is that the images are large -- much larger than the
> display I'm using to show them to my PC-using brethren. When I scroll
> down, I lose the display of the dates. When I scroll to the right I
> lose the display of the task/resource.
>
> It's been about ten years since I did any significant HTML coding,
> but I took it up today, and here's the result.
>
> I put together a simple HTML document that shows the same image (the
> Gantt chart export) four times, using divs to achieve the desired
> effect. The upper left just shows the header for the tasks: task and
> duration in my case. The lower left shows just the task list itself.
> The upper right shows the header for the Gantt chart: the dates. The
> lower right is the Gantt chart itself. The chart is automatically fit
> into the window, with scrollbars if necessary. When the chart is
> scrolled to the right or left, the date header follows. When the
> chart is scrolled to up or down, the task list follows.
>
> The end result is something like an Excel spreadsheet with the left
> column and the top row locked.
>
> The HTML isn't pretty, the interface isn't perfect, and putting the
> thing together isn't as automatic as I would like, so if anyone can
> improve this I'm eager to see the result.
>
> To use this, create a file with the HTML below in it. Edit the HTML
> to use the file name for your project in place of "omni." Save the
> file as "tasks.html" in the include folder of your HTML template.
>
> Edit the index.html file to change the link that points to the tasks
> image file to point to your new file instead.
>
> Now export as usual, and enjoy!
>
> If you ever change the name of the project, you'll need to edit the
> HTML file to use the new name for the images.
>
> regards,
>
> Geoff
>
> ps -- watch out for line wrapping:
>
>
>
>
> <html>
> <head>
> <style type="text/css">
> .taskheader {
> height:30px;
> width:30%;
> overflow:hidden;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
> .ganttheader {
> height:30px;
> width:68%;
> overflow:hidden;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
> .tasklist {
> width:30%;
> height:90%;
> overflow:hidden;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
> .ganttchart {
> width:68%;
> height:90%;
> overflow:scroll;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
>
>
> </style>
> </head>
> <body {height:100% width:100%}>
> <div class="taskheader" id="taskheader1">
> <img src="omni_tasks.jpg">
> </div>
> <div class="ganttheader" id="ganttheader1">
> <img src="omni_tasks.jpg">
> </div><br>
> <div class="tasklist" id="tasklist1">
> <img src="omni_tasks.jpg">
> </div>
> <div class="ganttchart" id="ganttchart1"
> onscroll="tasklist1.scrollTop=scrollTop;ganttheader1.scrollLeft=scroll 
> Le
> ft">
> <img src="omni_tasks.jpg">
> </div>
> </body>
> </html>
>
>
> ------------------------------
>
> Message: 2
> Date: Wed, 6 Jun 2007 23:50:39 -0700
> From: Geoff Canyon <geoffc at inspiredlogic.com>
> Subject: Better presentation on the web
> To: omniplan-users at omnigroup.com
> Message-ID: <E7157CD3-21F7-4005-BB6F-1C0EC94C77F0 at inspiredlogic.com>
> Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
>
> This is the HTML for the resources chart. Follow the same procedure I
> described in my previous email.
>
> regards,
>
> Geoff
>
>
>
>
> <html>
> <head>
> <style type="text/css">
> .taskheader {
> height:30px;
> width:30%;
> overflow:hidden;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
> .ganttheader {
> height:30px;
> width:68%;
> overflow:hidden;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
> .tasklist {
> width:30%;
> height:90%;
> overflow:hidden;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
> .ganttchart {
> width:68%;
> height:90%;
> overflow:scroll;
> padding:2px;
> border:1px solid black;
> float:left
> }
>
>
>
> </style>
> </head>
> <body {height:100% width:100%}>
> <div class="taskheader" id="taskheader1">
> <img src="pg_tasks.jpg">
> </div>
> <div class="ganttheader" id="ganttheader1">
> <img src="pg_tasks.jpg">
> </div><br>
> <div class="tasklist" id="tasklist1">
> <img src="pg_tasks.jpg">
> </div>
> <div class="ganttchart" id="ganttchart1"
> onscroll="tasklist1.scrollTop=scrollTop;ganttheader1.scrollLeft=scroll 
> Le
> ft">
> <img src="pg_tasks.jpg">
> </div>
> </body>
> </html>
>
>
> ------------------------------
>
> _______________________________________________
> OmniPlan-Users mailing list
> OmniPlan-Users at omnigroup.com
> http://www.omnigroup.com/mailman/listinfo/omniplan-users
>
>
> End of OmniPlan-Users Digest, Vol 7, Issue 1
> ********************************************