Question

Alright… I’m trying to write some javascript code that will apply to an html block, which itself appears in a javascript file. It’s a complete mess. Here’s a sample:

[new Date(1942,01,01), , '<div onclick="this.nextSibling.style.display=\'block\'; this.style.display=\'none\'"><img src="img/content/michenerCenterThumb.jpg" style="cursor:pointer" /></div><div style="display:none"><iframe width="200" height="165" src="http://www.youtube.com/embed/in7IUzjN3pY?rel=0" frameborder="0" allowfullscreen></iframe>'],

[edit] I’m using Timeline, which is available here: http://links.sourceforge.net/#timeline. Part of building a timeline involves adding entries, like in this sample:

data.addRows([
      [new Date(2010,7,23), , 'Conversation<br>' + 
        '<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
      [new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' + 
        '<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
      [new Date(2010,7,24,16,0,0), , 'Report'],
      [new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],     
      [new Date(2010,7,28), , 'Memo<br>' + 
        '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
      [new Date(2010,7,29), , 'Phone call<br>' + 
        '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
      [new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],     
      [new Date(2010,8,4,12,0,0), , 'Report<br>' +
        '<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
    ]);

In the html, I want to implement jquery ui, highslider, etc., but this becomes messy very fast (like in my above example.) What is “doing it right” in this instance?

Thanks,

Ben

Answer 1

I came up with a more elegant solution… closer, I hope, to what constitutes proper coding. The html of each element is now written on the html page. I read this by using a custom getElementsByClassName which inserts each item class into an array. This array then populates the timeline.

The html:

<div class="item" date="1956,1,1" enddate="1967,1,1">
Some Content    
</div>

and the javascript:

var items = getElementsByClassName("item"); 
    for (var x = 0; x < items.length; x++) {
         var date = items[x].getAttribute("date"); 
         var enddate = items[x].getAttribute("enddate"); 
         var html = items[x].innerHTML; 
            if (!enddate) {
                items[x]=[new Date(date), enddate, html];
            } else {         
                items[x]=[new Date(date), new Date(enddate), html]; 
            }
        }

    data.addColumn('datetime', 'start');
    data.addColumn('datetime', 'end');
    data.addColumn('string', 'content');

    data.addRows(items);

You can find the custom getElementsByClassName here: http://code.google.com/p/getelementsbyclassname/