Thanks! Fixing the typo in the call to rowStyler and changing the switching
script worked.
It's embarrassing to have two big typos ... but I stop seeing them after
I've been staring at the screen a while.
I'll triple check the iconCoder stuff for boneheaded mistakes, but
meanwhile, does anyone have a fix for event labels in Timeline wrapping
strangely when you change the font size or face?
On Sunday, March 18, 2012 3:36:23 PM UTC-6, Contemplative wrote:
>
> 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:rowStyler="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/-/H8IyTSzWZFMJ.
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}
