Skip to content

Rhaptos Software Development

Personal tools
You are here: Home » Developer Blog » Max's Blog » Gallery JavaScript can work in multiple style sheets now

Gallery JavaScript can work in multiple style sheets now Gallery JavaScript can work in multiple style sheets now

Document Actions
Submitted by maxwell. on 2005-08-01 12:30. DevelopmentStyle
Last week I worked on improving the JavaScript that makes the Music Galleries (as in Tony Brandt's course) look and work right.

In addition to making the music galleries actually function (i.e. clicking on a music piece made the bar at the bottom pop up, and re-clicking it, or clicking the "X" made the bar disappear again), the JavaScript file associated with the music galleries also made some elements of the page "look right". That is, it essentially stretched the gallery to be the correct height, the logo bar to be the correct width, and did the same with the bars that popped up at the bottom of the page (where the player appeared).

Originally, however, the values used to help calculate these widths and heights were hardcoded values based on the style associated with the gallery. Since for the longest time "Summer Sky" was the only associated style, this was ok. But ever since I made the Plone look galleriable as well, using the same JavaScript file for both styles no longer worked (and we wanted to avoid having nearly-identical-but-not-quite files in the system).

So Brent asked me to work on a new way of getting those style values I needed (mostly paddings, borders, and margins) without hardcoding them in. And to my amazement, there were actually JavaScript methods that were able to get these values (albeit different ones for IE vs. other browsers). This shouldn't be too amazing, but I'm pretty sure I tried to do this at one point in the past (so that we could let the gallery use other style sheets as well), but it didn't work in the past. My suspicion is that somewhere between Safari 1.0 and 1.3, they picked up support of getComputedStyle (a little Googling appears to confirm this).

Things for me to keep in mind after having done this: the gallery's width, padding, borders, and margins, as well as any padding, borders, and margins on the logo bar and the player bar must be either 0 or expressed in pixels for this to work well. Also, I should avoid CSS such as top and left for the gallery, and express the body tag's left-padding (usually ~200px for the gallery) in pixels as well.

Re: Gallery JavaScript can work in multiple style sheets now

Posted by lizzardg at 2005-08-01 13:54
Yay for updating music galleries!!

Re: Gallery JavaScript can work in multiple style sheets now

Posted by jenn at 2005-08-02 12:32
And yay for getComputedStyle. I can imagine that solving all sorts of long-standing presentation problems on the web.
Developer Blog
« November 2008 »
Su Mo Tu We Th Fr Sa
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
2008-11-10
13:39-13:39 Suggestion for live site slowness reports
Categories:
Content (55)
Copyright (0)
Deep Code (3)
Development (203)
Markup (22)
Metadata (1)
Printing (7)
Style (9)
Testing (2)
Usability (6)