Archive for javascript

revenge of the css

Well, I’m still hard at work revising the entry page for SCLRR. I have a number of variations, here, here, here, and here. Of course there’s the usual stuff in dealing with a committee of people and a plurality of decisions. We’ll get there. Also the switch over between a shell account with a redirect for the domain (sooo late nineties…) to an actual hosted domain has gone fairly smoothly, although I expect I shall shortly hear from a multitude of volunteers who had their computers memorize their passwords so that they’ve long since forgotten what they are…

The real story is in those drop down menus. I got the idea from A List Apart which has a gorgeous css only (well mostly) drop down menu styling. It seemed like this would be the perfect solution to so many links as on the old one.

Oh dear. That “mostly” contains a drama in of itself. Because it seems that most browsers do just fine with the css definitions which basically involve defining the display to none for the li containers in the ul list (really, really elegant) and then changing the display back to block on hover.

Except of course our dear old friend Internet Explorer 6 doesn’t do hover when it’s not a link. Pish. So there’s a little javascript hackery that rewrites the hover routines on the fly for IE6. All well and good, I snarfed the css file examples, integrated them into the css and js files and went about happily buffing and polishing the newindex page.

Of course, the astute reader will recall that not only do I use Firefox, but I also work on Linux (Ubuntu, and yes I’m ecstatic that Dapper Drake comes out tomorrow, though I’ve been using the Dapper Beta for the last month and titch) so he or she will spot the looming cliff that I am oblivious to. I am also dealing with a crew of very non tech people, so they are all using IE6 hands down.

And of course it turns out that the dropdowns aren’t working at all in IE6. Figuring a conflict between css elements from the original css file with the new stuff, I copied just the example over and sure enough that worked. So I slowly added in all the decorative elements: the background, border, table, finally the multiple column…and it all works!!

So why doesn’t it work on the index?? I start to add in the actual copy (bidding farewell to the trusty lorem ipsum) piece by piece and it finally dawns on me that the javascript for the slideshow is conflicting with the javascript for the hover rewrite. At first I thought it was due to some IE6 weirdness about mixing inline and external js (the slideshow has some elements that must be inline because the perl script generates the values on the fly) but that wasn’t the case. I finally tracked it down to a conflict over the onLoad in windows. Seems that IE6 doesn’t like two of them. When I combined the calls in a single function, it demonstrated its further fussiness by working only when the two were called in a certain order. (I tested this in IE7, by the way, and it worked without the javascript: hallelujia, praise the lord and pass the ammunition.)

So, it was very wrong of me to blame all the problems on the css. I’ve learned that lesson…

del.icio.us:revenge of the css  digg:revenge of the css

Comments

flickr slideshows

One of the problems with the SCLRR’s main page is that “slideshow” on it. It’s really an animated gif. Now there’s tons of (mostly Windows based) software out there for creating gif type slideshows as any google search will show you. But remember that I try to make this site pretty easily usable by the average volunteer. So for example that Dog of the Month you see is pulled out of the database with a bio that’s all done in the volunteer only section of the website. They don’t have to do anything more than check off the dog they want displayed and voila!

So I wanted something similar for the slideshow. I also wanted some way of uploading the pictures pretty easily. So I got the bright idea of using flickr. They’ve got an API. So the idea went something like this: I create a perl script that uses flickr’s API to pull out a list of pictures with a certain tag and then I rotate through those pictures in the file. So from the volunteer’s point of view. all they have to do is manage a set of pictures on flickr — which has a nice easy to use interface, and to which access can be given without compromising the shell account. Hey I love these people dearly, but I cringe at the thought of a non-technical person stomping all over the files in the account by accident. (I mean I have everything regularly backed up but still.)

del.icio.us:flickr slideshows  digg:flickr slideshows

Comments (1)

Next entries »

Bad Behavior has blocked 1024 access attempts in the last 7 days.