I really should be doing other work, but I thought of a quick improvement to the Built In Blogger presentation I did at the NMC 2005 Summer Conference on “More Than Cat Diaries: Publishing With Weblogs”… the hiding and showing of slide notes (using the “+/- notes” button in the top left) displayed a CSS chunk of text by toggling its display properties. What I did not like was that the notes simply showed up at the bottom of a slide, so a full screen slide, the notes would appear out of screen, below the fold line (requiring a scroll down).
Well that was an easy fix- just change the positioning properties for the div to be absolute, so now a slide that appears like this:
When you click the button in the top right, now the notes appear layered over the slide:
And an extra right aligned button under the notes can make them disappear again.
Neat, eh? Just minor updates in Blogger Template, and publish, correct?
Well, yes, until you deal with the asterisked note in the slide I share how this presentation was created. Basically, this technique worked fine in web standard browsers I tested (Safari, FireFox in Mac OS X and Firefox on a PC). In Internet Explorer, almost anything wrong can happen to CSS. This tripled the time I spent getting this to finally work because:
(1) The IE box model or lack there of, made the notes div be wider than the screen. Okay, so I added a fixed width of 500px to make it stay inside the window.
(2) The notes div was made to display on top by setting a z-index:3. On standard browsers, it layered as expected (on top). In IE the div for the footer insisted on being on top. Even if I explicilty set a lower z-index for this div z-index:1 IE just does what it feels like doing. The ultimate fix was to remove the position:relative from the footer CSS class.
Anyhow, you can find details on how this magic (or kitty litter) was done at http://cat-diaries.blogspot.com/2005/06/blogger-presenter.html where details are in the notes display area and you can also grab a copy of the entire template used in this production.
How about a new IE motto… “Got way too much web design time on your hands? Let IE fill in those idle hours with thousands of unexpected CSS behaviors…” If you really want to take back your web on a PC, get Firefox. Now. Stop reading this, and get the Fox. What are you doing still staring at this screen?
hey alan – great to see you’re still tinkering with this! I attended your presentation at the NMC conf and am wondering… i see you’re using wordpress now for cdb – have you fiddled with making a non-diary blog with wordpress? I’m experimenting with the idea now, and thought I’d see if you’d had any successes in that regard (you know – working smarter, not harder!). ?? Have you?
and thanks for a great presentation and for getting my mind started down this path!
-s
Shelley,
I’ve not had time to get fully immersed in the WordPress template and structure, just tinkering on the edges (hence the not so original design based on the default Kubrick). I love WP and the availability of themes makes it certianly viable to use or create any sort of layout. Some day down the road…
If you’ve not tapped into it, be sure to check out the documentation in the WP Codex: http://codex.wordpress.org/
read the directions!? 😉
http://codex.wordpress.org/Pages#WordPress_as_a_CMS
there’s even a plugin that does a bit of it for you. I’d looked around (even a bit in the codex, if you can believe it!), but evidently using “index” is not the best approach. what i was looking for is evidently more commonly referred to as a “front page.”
thanks again!
http://snaptography.com/2005/25/06/weblogs-for-use-in-presentations/
No idea why my trackback didn’t go through…
Me either. I did walk under a ladder today, stepped on a crack, and had a black CAT cross my path 😉
http://www.davidjmiller.org/Professional.php/2005/07/08/borrowing_from_friends
Trackback failed
Alan you need to upgrade to the newest WordPress build. There is a security hole in the XML RPC structure used for pingbacks/trackbacks. That is probably what is causing all of these failed trackbacks. Let me know if you need help although I’m sure you have it under control.
Thanks Brian… I am on vacation and mostly offline, but just uploaded the changed files for the 1.5.1.3 version.
It sure would be nice if WP had a download of JUST changed files- their upgrade instructions to delete entire directories and upload new ones is a bit overkill (I am on a slow dial-up).
But thanks anyhow.