Re: Bubble size.

Fri, 29 Dec 2006 10:56:12 -0800 

Try the attached file.

David

Saad Aziz wrote:

Ok Please review the enclosed php document.

Thanks!



-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of David Huynh
Sent: Friday, December 29, 2006 10:02 AM
To: General List
Subject: Re: Bubble size.

Hi Saad,
It would be best to either point us to a URL where we can see your timeline, or if that's private, attach the HTML file and a fragment of your XML file that isn't private. It's hard to debug bits and pieces of code. 

Cheers,

David

Saad Aziz wrote:

Ok I tried the recommendation:

function onLoad() {
...
...
...
        var theme = Timeline.ClassicTheme.create();
        theme.event.label.width = 150;
        theme.event.bubble.width = 320;
        theme.event.bubble.height = 5000;
...
...
...
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSour
...
...
...
Still no luck?! What did I do wrong? 
Thanks in advance.


-----Original Message-----
From: [EMAIL PROTECTED]

[mailto:[EMAIL PROTECTED]

On Behalf Of V. Alex Brennen
Sent: Thursday, December 28, 2006 8:45 PM
To: General List
Cc: Saad Aziz
Subject: Re: Bubble size.

On Thu, 2006-12-28 at 16:15 -0800, Saad Aziz wrote:


So I modified the following function:
function onLoad() {

  var months=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

        theme.event.bubble.width = 100;
        theme.event.bubble.height = 60;
  var d=new Date();

  var dtStamp=months[d.getMonth()]+" "+d.getDate()+"
"+d.getFullYear()+" 00:00:00 GMT";
  var eventSource = new Timeline.DefaultEventSource();

  var bandInfos = [

    Timeline.createBandInfo({

        eventSource:    eventSource,

        date:           dtStamp,

        width:          "85%",

        intervalUnit:   Timeline.DateTime.MONTH,

        intervalPixels: 400

    }),

Saad,

You neglected to set the theme for your bandInfos. You should include
the line:
        theme:          theme (<- name of a different theme)

if you don't modify the default.  I'd recommend you create a new,
different, one.

That will tell the Timeline application to make use of the new theme
object so that your resizing of the bubbles takes effect.

You can create a new theme object in onLoad() if you wish for it to be a
different theme, like this:

function onLoad()
{
        var theme = Timeline.ClassicTheme.create();
        theme.event.label.width = 150;
        theme.event.bubble.width = 320;
        theme.event.bubble.height = 125;
        [...]
}

The Dinosaur Timeline example is a good place to look for a full
example, IIRC.


    - VAB




_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general


_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general


_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general
------------------------------------------------------------------------ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>

<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">

<head>
 <title>Tarot.com Revisions Timeline :: Admin @ Tarot.com</title>
 <noscript>
  <!--
   Need Java Script for this page. <BR>
  -->
   You can't access this page and get full functionality without enabling 
javascript first.
 </noscript>

 <script src="./timeline_src/api/timeline-api.js" 
type="text/javascript"></script>

 <script type="text/javascript">
  var tl;
  function onLoad() {

   var bandInfos = [
    Timeline.createBandInfo({
width: "70%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 100 
    }),
    Timeline.createBandInfo({
width: "30%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 200 
    })
   ];
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  }

  var resizeTimerID = null;
  function onResize() {
  //window.location.replace("http://dev38.tarot.com/timeline";);
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
  }

  function onLoad() {
   var bandInfos = [
    Timeline.createBandInfo({
width: "70%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 100 
    }),
    Timeline.createBandInfo({
width: "30%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 200 
    })
   ];
   bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); 
  }

  function onLoad() {
   var theme = Timeline.ClassicTheme.create();
   theme.event.label.width = 150;
   theme.event.bubble.width = 320;
   theme.event.bubble.height = 5000;

   // A small hack introduced to center on current date, not some static value.
   var months=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", 
"Nov", "Dec");
   var d=new Date();
   var dtStamp=months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear()+" 00:00:00 
GMT";
   var tstamp=d.getTime();

   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           dtStamp,
width: "85%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 400 
    }),
    Timeline.createBandInfo({
        showEventText:  false,
        eventSource:    eventSource,
        date:           dtStamp,
width: "15%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 250 
    })
   ];
   bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;
var xmlFile="timeline_data.xml?"+tstamp; 
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
   //Timeline.loadXML("timeline_data.xml", function(xml, url) { 
eventSource.loadXML(xml, url); });
   Timeline.loadXML(xmlFile, function(xml, url) { eventSource.loadXML(xml, 
url); });


  }

</script>

<style type="text/css">
h3
{
 line-height:1px;
 padding:20px 0 0 10px;
}
#timeline_link_spacing
{
 padding:0 0 0 10px;
 line-height:10px;
}
.timeline-container { 
 font-family: Tahoma, Helvetica, Arial, sans serif;
 font-size: 8pt;
 border: 2px solid #aaa;
}
A { text-decoration:none; color:orange; } 
</style>

</head>

<body onload="onLoad();" onresize="onResize();">

 <?php include("../admin_layout/admin_header.php"); ?>

 <h3>Revisions Timeline</h3>
 <p id="timeline_link_spacing">
   <a href="./add_to_timeline.php">Click Here</a> to add a new item.
 </p>
 <div id="my-timeline" style="height: 480px;"></div>

</body>

</html>
------------------------------------------------------------------------ 

_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general
Title: Tarot.com Revisions Timeline :: Admin @ Tarot.com

Revisions Timeline

_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general

Reply via email to