I can't claim any talent at design; I just used the old design when I made the YI website. I have help now! A few people who want to remain nameless are helping remake the site into something both more modern-looking and more streamlined, easier to use. As Cameron Moll said, Good Designers Redesign, Great Designers Realign and I certainly think we need a complete realignment, to put the important stuff on the home page and other things back behind (we don't need a list of officers on the front page, and the map, while incredibly cool, slows the initial load time immensely).
The plan now is to make it more WordPress-y (fixed width, site navigation across the top), based on a design by Jenna Smith.
I just uploaded the pictures for the annual dinner. Rabbi Shulman is a brilliant and inspiring speaker (confirming my first impressions when he came here). He discussed how a navi (prophet) always spoke in his unique voice yet never added to the unchanging truth of the Torah, and that is the same way we all must look at Judaism, and he tied it in with the dinner theme of Honoring our Past, Building our Future. I'm looking forward to hearing him weekly.
The photo page on the website is one that I'm particularly proud of. The cross-fading code is based on Image Cross Fade Redux and jQuery slideshow (whose website seems to have disappeared) with some enhancements. The whole thing is 39 lines long (jQuery rocks!).
The markup is simple: a div with contained images, which I get from Flickr and are wrapped in an
<A> element to the original image:
<div class="make_fader">
<a href="image link 1"><img src="image file 1/></a>
<a href="image link 2"><img src="image file 2/></a>
<a href="image link 3"><img src="image file 3/></a>
<a href="image link 4"><img src="image file 4/></a>
</div>div.make_fader {
position:relative;
height: 5em;
}
div.make_fader img {
position:absolute;
height: 5em;
}position: absolute in the CSS; do it in the script as:
$('make_fader img').css('position', 'absolute');
The container needs the height set; if all its contents are position: absolute it would otherwise shrink to nothing.
The only actual code you need after including the cross fader code is
$('.make_fader').xfade();
and it starts fading!
Options are, as usual for jQuery plugins, in the form of an object as the first argument:
$('.make_fader').xfade({pause: 100, random: 4000, fadeIn: true});
Options include:
- pause: {Number} minimum number of ms to show the picture. Default: 1000.
- random: {Number} 0 to this number will randomly be added to pause. Default 0. This keeps all the faders on a page from fading at the same time.
- fadeTime: {Number} ms for the fade effect. Default: 2000.
- fadeIn: {Boolean} true to have the images start invisible and fade in. Default: false;
random is very useful because with multiple faders on one page, having them all fade in and out at the same time looks bad. fadeIn makes the images fade into view rather than starting out visible.
The plugin creates an object that is attached to the div that can be used to control the fading.
var xfader = $('.make_fader')[0].xfade;
xfader.stop(); // stop fading. The current image will fade in completely before the fading stops
xfade.start(); // restart fading
xfade.isStopped(); // returns true if the fader is stoppedUpdated: I forgot the '.' before the class name in the code to start fading (was $('make-fader') , should have been $('.make-fader') ). Apologies to all who tried to make it work!
To make the eruv map, someone had to enter all the individual points of the eruv boundary. That someone was Mickey Ariel (thanks!). To make it possible, I wrote a simple web application that contains a Google map and placs a marker at every mouse click. Each marker has a number, and the list of each marker's latitude and longitude is inserted at the end of the page. The markers can be dragged to new locations, and the boundary is drawn between the markers. Clicking a marker brings up a small callout window where notes can be added, the marker can be deleted and it can be renumbered (to move a marker between markers 4 and 5, change its number to 4.5. When you hit
Update, the list will be renumbered appropriately.
The tool can be used anytime you need the latitude/longitude for any route. Enjoy!
With the I-64/I-170 construction, the eruv had to be revised (an incredible job by the eruv committee!) and I had to revise the Google maps eruv on the site. Google maps was the reason I started maintaining the Young Israel site; I read about the API that lets you add your own markers and lines to a map and thought that it would be really cool if we could mark the boundary of the eruv on the satellite map. It turned out to be pretty easy; the code should be clear enough.
The problem is what to do if javascript is not enabled. I initially had a <NOSCRIPT> section that contained an <IFRAME> that displayed the maps.google.com page directly, but that was ugly, didn't actually show the eruv, and didn't deal with the case of javascript enabled but Google maps not supported. And NOSCRIPT is certainly not ideal for unobtrusive javascript—where the site works without javascript but works better with it.
So, the better answer is to have some non-javascript element that does what we want, then replace it with the Google map if javascript is enabled (and trivially, add a test for
GBrowserIsCompatible() to make sure that Google maps are supported). new GMap2(elem) replaces the contents of elem, so that's easy. But what should the default, no-javascript, element be? I finally realized that a static map would work, and the way to get that is to take a screenshot of the real Google map, edited to leave a blank spot where the infowindow goes, and use CSS positioning to put the infowindow in there. Now the scriptless user gets a site almost identical to the real one, but just not interactive.
For those who liked the YI Hebrew keyboard, I wrote a similar keyboard that I use to turn Hebrew into HTML entities (for the website), and, at my kids' request, uses Morfix dictionary and Google Israel to translate or search for Hebrew terms. Enjoy!
I spent a few minutes at the Apple store tonight, drooling over the big imacs, and tried the YI website with Safari 2.0, and most things didn't work!
The search box was visible in the sidebar, the Google map was broken, and the drop shadows and centered embossed text weren't there. At least with the unobtrusive javascript philosophy, the site worked and looked OK, but it wasn't pretty.
I have an old mac, running OS X 2.8 (Safari 1.3; I know jQuery won't work) at home and Windows XP at work, so I can debug on Firefox and Internet Explorer 6, and just hope for the best. I wonder if the Apple store will let me hang out there, hacking :)
Well, I had every intention of documenting all the PHP and Javascript tricks I've learning to get the YI site running, but I'm leyning Acharei Mot-Kedoshim in 2 weeks, plus trying to keep up with shnayim mikra/echad targum plus Rashi and Emek Davar (i've given up on the Malbim,which I started but can't go through all of Sifre each week) in this season of double parshiot is taking all the time I would have had. At least I have my priorities straight!
(If you're reading this because you're interested in programming and it all looks like Hebrew, don't worry. It is.)
This is intended to be a blog of my thoughts while developing the Young Israel website, though with my lack of free time I doubt it will happen much.
