Saturday, January 14, 2012

Highlight Default Selection in Spry

I had successfully created a Master / Detail relationship on my site using Spry, the kind where you select a specific record on your page, which then populates any additional detail associated with that record on another part of the page.  The master side of the page had some basic CSS associated with it that would show when you were hovering over a record or when that record was selected.

The problem I was having, was when the page was initially loaded, the first record on the Master side of the page was initially selected.  I liked this since it also initially populated the detail associated with that master record, giving the page a "filled in" look.  The only issue I was having, was the Master record was not "selected" and highlighted, so while it may have been obvious to me what was going on, to the end user they couldn't necessarily tell that the data on the detail side was associated to a record on the master side of the page.



Here's my code prior to the fix I put in place:



Nothing really fancy going on here.  Standard Spry code that is generated by Dreamweaver for a Master / Detail region, unfortunately it doesn't highlight the first entry in the Master list that is selected by default.

Here's my code after the fix:











You'll notice the main difference between the two sets of code lies in the conditional logic that I included, which will ensure the initial record is marked as selected so the CSS can do it's thing.

No comments:

Post a Comment

Popular Posts