One more thing that I noticed:
you have
<div ex:role="view"
ex:viewClass="Tabular"
ex:label="List of events"
ex:columns=".year,.month,.label,.description,.shortURL"
ex:columnLabels="year, month, event, description, link"
ex:columnFormats="list, list, list, list, url"
ex:sortAscending="false"
ex:rowStyle="rowStyler"> <-this should be ex:rowStyle
r="rowStyler"
</div>
I think the missing "r" at the end of the ex:rowStyle might fix the
coloring of you table.
wjw
On Sunday, March 18, 2012 4:27:33 PM UTC-5, Contemplative wrote:
>
> Hi Sandra,
> I have a row styler function that looks like the following and works in my
> exhibit.
> I noticed a slight difference in the way that we are using the switch
> directive.
> Perhaps that will help.
>
> var corn_or_beans = function(item, database, tr) {
> if (database.getObject(item, "Commodity")) {
> var commodity = database.getObject(item, "Commodity");
> }
> var color = 'red';
> switch (commodity) {
> case "corn": color = '#FFFF00';
> }
> switch (commodity) {
> case "beans": color = '#FFEC8B';
> }
> switch (commodity) {
> case "wheat": color = '#CDAD00';
> }
> tr.style.background = color;
> };
>
> wjw
>
> On Thursday, March 15, 2012 5:20:01 PM UTC-5, Sandra wrote:
>>
>> Second issue (timeline colorCoder) now fixed. I was missing a > . ugh.
>>
>> On Thursday, March 15, 2012 1:44:47 PM UTC-6, DavidK wrote:
>>>
>>> I'll try to take a look at this later, but just in terms of gathering
>>> data, can you try using
>>> http://trunk.simile-widgets.org/exhibit/api/exhibit-api.js
>>> which has a few bugfixes, and see if anything changes?
>>>
>>>
>>> On 3/15/2012 12:09 PM, Sandra wrote:
>>>
>>> I'm impressed with Exhibit and Timeline, and have had a lot of fun
>>> working with them. But it's been a real slog getting past a zillion little
>>> issues. I've gleaned all I can from what I can find online. At this point,
>>> I'm pretty close to being done with my Exhibit, but I still need help with
>>> a few pressing issues. I would absolutely appreciate any help I can get on
>>> these issues. Screen caps and code attached!
>>>
>>> BTW, I'm using the Tabular and Timeline views in Exhibit. I don't know
>>> enough javascript to play around with Timeline proper.
>>>
>>> *ISSUES*
>>>
>>> *Exhibit rowStyler tabular view:* does absolutely nothing to the
>>> table. It's all still white. Javascript console doesn't show any errors. My
>>> code is modeled after the presidents example. With my limited knowledge of
>>> Java, I am stumped.
>>>
>>> *Exhibit timeline extension colorCoder:* works except it totally
>>> ignores one of the spans. The events with .stage="PLANNING" do not appear
>>> purple on the timeline as I have set them up to do. They are grey, which
>>> appears coded as "others" in the legend at the bottom of the timeline. The
>>> other color coded events appear the correct color and correctly in the
>>> legend.
>>>
>>> *Exhibit timeline extension iconCoder:* does absolutely nothing. I
>>> still get those little purple default dots on all my events. I have tried
>>> both relative URLs and full URLs in the coder div, and I have tried putting
>>> the icon URLs into the database itself with an 'icon' and an 'iconURL'
>>> property.
>>>
>>> *Exhibit timeline extension event label divs:* are fine if I don't
>>> style them. But if I use CSS on the div.timeline-event-label class to
>>> change font-family or font-size, the text of the event labels wraps to a
>>> second line, which in some places makes them illegible as the event
>>> placement appears to assume single-line labels. I can get away with skinny
>>> sans-serif fonts like Gill Sans if I make them 12px or smaller, but that's
>>> a little too tiny for my taste and for my web editor's.
>>>
>>> I've attached screen captures of the above problems in action (except
>>> the rowStyler issue). Code at the bottom of this post. You can see a
>>> working version of the page live at
>>> http://sandrachung.com/exhibit/timeline3copy.html
>>>
>>> *What I've done*
>>>
>>> *API versions:*
>>> I've tried a couple different versions of the Exhibit API and timeline
>>> extension. With Exhibit 3.0 Scripted, my site just sits there and churns
>>> the "working" box at me and displays no timeline or tabular view. If I'm
>>> using the Google spreadsheet converter for my database,the console tells me
>>> object #<object> has no method 'make *iso* 8601 date string'.
>>> <http://www.google.com/webhp?sourceid=chrome-instant&ix=sea&ie=UTF-8&ion=1#hl=en&sa=X&ei=MwZhT9a6GeOe2wX2wf38Bw&ved=0CBgQBSgA&q=Object+%23%3CObject%3E+has+no+method+%27make+ISO+8601+Date+String%27&spell=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=8fc685d9ca728249&ix=sea&ion=1&biw=1408&bih=779>If
>>>
>>> I give it validated Exhibit JSON, it gives me a "poorly formed" error
>>> message (I've checked for weird spaces and commas and found nothing;
>>> JSONlint also says it's fine). These two versions seem to give me the most
>>> consistent results with either a validated JSON file or converted Google
>>> spreadsheet:
>>>
>>> <script src=
>>> "http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js";<http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js>type="text/javascript"></script>
>>> <script src=
>>> "http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js";<http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js>type="text/javascript"></script>
>>>
>>> *Database: *
>>> I've tried both the Google spreadsheet converter and linking to a local
>>> JSON file. I created the local file by cutting and pasting the database
>>> from my working version with the Google spreadsheet converter (using the
>>> scissors icon). Validated with JSONlint.
>>>
>>> *Browser: *
>>> Everything I've done I've tested in Chrome, Safari, and FF, all on a
>>> Mac, and so far they're all giving me the exact same issues.
>>>
>>> *Relevant code:*
>>>
>>> <html>
>>>
>>> <head>
>>> <title></title>
>>>
>>> <script src=
>>> "http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js";<http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js>type="text/javascript"></script>
>>> <script src=
>>> "http://trunk.simile-widgets.org/exhibit/api/extensions/time/time-extension.js";<http://trunk.simile-widgets.org/exhibit/api/extensions/time/time-extension.js>type="text/javascript"></script>
>>>
>>> <script>
>>> var rowStyler = function(item, database, tr) {
>>> var stage = database.getObject(item, "stage");
>>> var color = "white";
>>> switch (stage) {
>>> case "PRE-CONCEPT": color = "#C8BDB2"; break;
>>> case "CONCEPT": color="#F7D2CD"; break;
>>> case "PLANNING": color="#DECFE8"; break;
>>> case "DESIGN": color="#CCD7EE"; break;
>>> case "CONSTRUCTION": color="#CCE5DE"; break;
>>> }
>>> tr.style.background = color;
>>> };
>>> </script>
>>>
>>> <link rel="exhibit/data"
>>> type="application/jsonp"
>>> href=
>>> "https://spreadsheets.google.com/feeds/list/0AtaqlNJIHEAedFU4QkxiS1BQU0tRRThmODgyNjBaZ0E/oda/public/basic?alt=json-in-script";<https://spreadsheets.google.com/feeds/list/0AtaqlNJIHEAedFU4QkxiS1BQU0tRRThmODgyNjBaZ0E/oda/public/basic?alt=json-in-script>
>>> ex:converter="googleSpreadsheets" />
>>> <link rel="stylesheet" href="stylesheet.css" type="text/css"
>>> media=screen />
>>> </head>
>>>
>>> <body>
>>>
>>> <div ex:role="coder" ex:coderClass="Color" id="stage-color">
>>> <span ex:color="#472200">BEFORE NEON</span>
>>> <span ex:color="#D81E05">CONCEPT</span
>>> <span ex:color="#59118E">PLANNING</span>
>>> <span ex:color="#0038A8">DESIGN</span>
>>> <span ex:color="#007c59">CONSTRUCTION</span>
>>> </div>
>>>
>>> <div ex:role="coder" ex:coderClass="Icon" id="dot-color">
>>> <span ex:icon="images/brown-button.png">BEFORE NEON</span>
>>> <span ex:icon="images/red-button.png">CONCEPT</span>
>>> <span ex:icon=
>>> "http://localhost:8888/exhibit/images/purple-button.png";<http://localhost:8888/exhibit/images/purple-button.png>
>>> >PLANNING</span>
>>> <span
>>> ex:icon="http://localhost:8888/exhibit/images/green-button.png";<http://localhost:8888/exhibit/images/green-button.png>
>>> >DESIGN</span>
>>> <span
>>> ex:icon="http://localhost:8888/exhibit/images/blue-botton.png";<http://localhost:8888/exhibit/images/blue-botton.png>
>>> >CONSTRUCTION</span>
>>> </div>
>>>
>>> <table width="100%">
>>> <tr valign="top">
>>> <td ex:role="viewPanel">
>>> <!--This div creates the timeline view-->
>>> <div ex:role="view"
>>> ex:viewClass="Timeline"
>>> ex:label="Interactive Timeline"
>>> ex:timelineHeight="300"
>>> ex:topBandHeight="80"
>>> ex:topBandUnit="month"
>>> ex:topBandPixelsPerUnit="80"
>>> ex:bottomBandHeight="20"
>>> ex:bottomBandUnit="year"
>>> ex:bottomBandPixelsPerUnit="60"
>>> ex:start=".start"
>>> ex:latestStart=".latestStart"
>>> ex:earliestEnd=".earliestEnd"
>>> ex:end=".end"
>>> ex:isDuration=".isDuration"
>>> ex:colorKey=".stage"
>>> ex:colorCoder="stage-color"
>>> ex:iconKey=".stage"
>>> ex:colorCoder="dot-color"
>>> ex:bubbleHeight="400"
>>> ex:bubbleWidth="300"
>>> ex:configuration=timelineConfig">
>>> <div ex:role="lens" class="timeline-bubble"
>>> style="display:none;">
>>> <img ex:src-content=".imageURL" class="bubblepic" />
>>> <p><span ex:content=".month" class="title"></span>
>>> <span ex:content=".year" class="title"></span>
>>> </p>
>>> <p ex:content=".label" class="title"></p>
>>> <p ex:content=".description"
>>> class="description"></p>
>>> <div ex:if-exists=".URL"><a ex:href-content=".URL"
>>> class="bubblelink" target="_blank"> read more </a></div>
>>> </div>
>>> </div>
>>> </div>
>>> <!--This div creates the table view-->
>>> <div ex:role="view"
>>> ex:viewClass="Tabular"
>>> ex:label="List of events"
>>>
>>> ex:columns=".year,.month,.label,.description,.shortURL"
>>> ex:columnLabels="year, month, event, description,
>>> link"
>>> ex:columnFormats="list, list, list, list, url"
>>> ex:sortAscending="false"
>>> ex:rowStyle="rowStyler">
>>> </div>
>>> </td>
>>> </tr>
>>> </table>
>>>
>>> </body>
>>>
>>> </html>
>>>
>>>
>>> Thanks!
>>>
>>> -Sandra-
>>>
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "SIMILE Widgets" group.
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msg/simile-widgets/-/U5esnee5ON8J.
>>> To post to this group, send email to [email protected].
>>> To unsubscribe from this group, send email to
>>> [email protected].
>>> For more options, visit this group at
>>> http://groups.google.com/group/simile-widgets?hl=en.
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/simile-widgets/-/dfM0ONmw-kAJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
![http://localhost:8888/exhibit/images/purple-button.png"](http://localhost:8888/exhibit/images/purple-button.png"){kind=link}
![http://localhost:8888/exhibit/images/green-button.png"](http://localhost:8888/exhibit/images/green-button.png"){kind=link}
![http://localhost:8888/exhibit/images/blue-botton.png"](http://localhost:8888/exhibit/images/blue-botton.png"){kind=link}
