bioneural.net » javascript

Geo Mashup implementation guide

Bruce — Sun, 21 Sep 2008 23:06:46 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Geo Mashup is one of my favourite WordPress plug-ins (and no, that's not just because it adopted the Geotag Icon). It neatly integrates geographically-relevant blog posts with a custom Google Map displayed within your own site. The Maps API in turn allows those willing to dirty their hands with a little JavaScript the option to pull in geotagged content from external sources, including photos (e.g. from Flickr, Panoramio, Picasa Web Albums), content from other blogs (via GeoRSS feeds), and placemarks from Google Earth (uploaded KML/ KMZ files, even with network links). What follows is an implementation guide, sharing some usage tips and the code used on bioneural.net. The code given here applies to Geo Mashup 1.1.1 and WordPress 2.6.2. Geo Mashup 1.2 was released on 19.03.09. Some of the code here may require modification. Installing the plugin Download Geo Mashup here, expand the ZIP archive and upload the geo-mashup directory to /wp-content/plugins/ on your web server. Log in to WordPress as Administrator and activate Geo Mashup from the Plugins tab. Once active there will be a new Geo Mashup tab under Settings, and you'll need to visit this to enter your Google Maps API key (if you don't yet have one, click the Get yours here link). Don't worry about the other options at this stage. Creating a map page The tag reference gives you the choice of two types of tag to use with Geo Mashup. Shortcode tags are added to posts or pages on a case-by-case basis. Template tags on the other hand involve adding ...

Address Book to Google Maps to RouteBuddy

Bruce — Thu, 17 Jul 2008 14:37:16 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

A while back it was necessary to use an Address Book plugin to look up contacts using Google Maps, but Apple changed to make plotting addresses using Google Maps the default behaviour. It turns out with a bit of JavaScript you can grab the coordinates via the Google Maps API and include these in a special URL that will create a waypoint in RouteBuddy. No Address Book plugins or custom AppleScripts required. Credits: Aburt gave me the idea to challenge myself to do it, having discovered this starting point with a strong hint from here. Tested and compatible with Safari 3.1.2 and Firefox 3.0.1 using RouteBuddy 2.1.1. Installation Just select and drag the JavaScript below into Safari's Bookmarks Bar (or your browser's equivalent) for easy access, creating a so-called "bookmarklet", and give it a short name (I used LL2RB but anything will do): javascript:void(prompt('Drag%20the%20selection%20below%20onto%20RouteBuddy\'s%20Dock%20icon:',['rbud://view?&lat='+gApplication.getMap().getCenter().lat()+'&lon='+gApplication.getMap().getCenter().lng()+'&zoom=4'])); Usage Select a contact in Address Book and control or right-click on the address label to reveal the Map of option: This should open a Google Map centred on the address for that contact, with an open info window. If that location looks correct just click on the bookmarklet and you should see something like the following: All you need do now is follow the instruction to drag the selected URL onto RouteBuddy's icon in the Dock. Example URL: rbud://view?&lat=53.371075&lon=-1.477572&zoom=4 This will launch RouteBuddy and create a new waypoint at these same coordinates, which you can then edit as appropriate: But what happens if Google Maps botches the address look-up, or you want to add a location from ...

iBox now at version 2

Bruce — Wed, 12 Mar 2008 19:02:21 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

A customised version of iBox is used extensively on bioneural.net (e.g. the Flickr photocast here) and iBegin have just released version 2. This free JavaScript lets you display automatically scaling images, external documents, or embedded containers in an overlay dialog without needing to reload the page. iBox has gained some weight since v1.2.1 (2006) but remains compact compared to other Lightbox-alike solutions and just as simple to use, now boasting wider browser support and new plug-in capabilities (e.g. for embedding YouTube videos). In most cases it degrades gracefully when JavaScript is disabled (it won't display hidden inline containers; JavaScript is required to play YouTube videos).

How to safely inject CSS3 using jQuery

Bruce — Thu, 14 Feb 2008 14:14:56 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so. During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another. Text shadows, drop shadows, and round corners in Safari 3 A historical precedent The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.: It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it? So, if we can hack our ...

Corners, gradients and shadows with jQuery

Bruce — Wed, 13 Feb 2008 15:36:40 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability. Situation recap In Part 1 we explored various ways to make rounded corners, comprising one or more of JavaScript, CSS, Flash, and SVG. Ditto for drop shadows. Implementing a gradient was restricted to the use of background (or inline) images, or to SVG. There are a few more tricks we might try for gradients: We could load a transparent PNG as a CSS background and vary the fill colour on the container to allow for a multitude of colour-graduated boxes without further image editing (see this ALA article); Unfortunately the CSS 3 draft as of this writing doesn't include background gradients, but you might be able to fake it using border-color; We could use JavaScript effects libraries. It turns out we can use JavaScript to create our corners and drop shadows too. There's also a plugin for using curvyCorners with jQuery that more than halves the standalone curvyCorners code size. Extending jQuery While there are some basic effects (hide, toggle, slide, etc.) and manipulation options in the jQuery core API, jQuery UI is a bolt-on library of ...

The best way to do corners and gradients

Bruce — Wed, 06 Feb 2008 14:36:17 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown! The traditional approach The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs: Willkommen! Welcome! Willkommen auf der Projekt Koru Seite, wo Simone & Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einführung findet Ihr hier zusammen mit einer Erklärung warum wir das Koru als Symbol unserer Reise gewählt haben. Welcome to Project Koru, where Simone & Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project here together with an explanation of why we chose the koru as the symbol for our journey. Three gradient images (2 having one rounded corner each) could then be loaded ...

bioneural.net site preference panel revisited

Bruce — Tue, 22 Jan 2008 20:06:51 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.) Get the files Let's get it done, then come back to the how and why if you're interested. Download the files to create your own preference panel as siteprefs.zip, available here. Expand the archive and upload the folder "siteprefs" into your K2 main directory: /wp-content/themes/k2/siteprefs/ At this point you may also want to download and activate the Theme Switcher plugin if you plan on allowing your audience to change the WordPress theme they see on a per-user basis (storing their preference in a cookie). Support for the plugin is built into the preference panel (see features, below). It's yours to play with and customise; all I ask is that you retain the little "i" icon with it's link back to these instructions. Feedback and suggestions for ...

From Proto.aculo.us to jQuery

Bruce — Sun, 06 Jan 2008 18:31:03 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

As I recently noted, both WordPress and K2 have migrated from using Prototype plus script.aculo.us to using the jQuery JavaScript library. Prototype is a JavaScript framework, including a library of functions used to build Ajax applications. It's best buddies with script.aculo.us, an add-on JavaScript effects library that extends the capabilities of the former. So where does jQuery fit in? The winds of change WordPress hasn't altogether dropped either Prototype or script.aculo.us. As of version 2.3.2 they're still bundled in wp-includes/js/, but the Codex notes that since version 2.2: Switched to jQuery for core JS, which is lighter and faster. I'm no programmer, but I do understand that loading a smaller function library is kinder on your bandwidth and browser, and that writing fewer lines of script to call those functions is kinder on web developers. K2, on the other hand, stopped bundling Prototype and script.aculo.us as of revision 382. This popular WordPress theme now does all its Ajax magic—Live Search, Rolling Archives, and Live Comments—via jQuery. Loosing weight As of this writing Prototype (1.6.0.1) weighs in at 121 KB. The six core files that make up script.aculo.us 1.8.1 (sound.js and unittest.js are optional) also happen to total 121 KB, making a combined size of 242 KB. If I could therefore use jQuery 1.2.1 (at 45 KB) to achieve the same JavaScript-mediated effects, I'd be using around one fifth of the code libraries I was previously loading. But it's worse than that, because if I retained Proto.aculo.us for custom effects and loaded jQuery for K2, I'd be wasting ...

Valid fix for PNG transparency on a single image

Bruce — Wed, 09 Aug 2006 21:59:28 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

As you likely know, IE6 (and below) cannot handle PNG images that use alpha transparency. PNG produces graphically superior results compared to a transparent GIF image, which will often have a white fuzzy border. There are various "fixes" for this particular IE problem on the Web, but sometimes their application can have undesirable results, or the fix involves invalid XHTML or CSS. In my case I was prepared to accept grey backgrounds on the mini-icons used on bioneural.net, but there was one particular image where this really bugged me. Here's how I fixed it. A general fix At first I tried a JavaScript-based solution which was easy to install and automatically applied to all PNG images. Simply load the script in your header, enclosed in IE-specific conditional comments: You can view and download pngfix.js here. Notice all those floats? I suspect they were responsible for my giving up on this method. For example, it messed up the feed icons in my sidebar (right, below), and for some reason that particular icon failed to complete loading in the IE progress bar (even though it was obviously being displayed). Weird. I don't like weird: I did initially convert the affected images to .jpg (since this issue only affects floated images with a .png extension), but then decided "Why should I bend over backwards just for IE?". I reverted to the PNGs and continued to look for another solution. There's always another solution... A specific fix I subsequently discovered a solution that makes use of proprietary CSS and conditional ...

Embedding iStockPhoto feeds revisited

Bruce — Thu, 15 Jun 2006 11:17:53 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

In an earlier post I described a JavaScript-based method to include recently-approved iStockPhoto images in a page on your website. When I migrated from a static blogging system (iBlog) to WordPress I found a useful plugin that worked very well in MAMP. Unfortunately it broke when I moved my developmental site to a live DreamHost server. Here is a bit more background to the problem and an eventual solution that uses SimplePie. Although the focus here is on displaying photographs, it's a solution that should work with practically any feed you might wish to embed. No go with latestistockimages.php I was initially using Christine's (of UTW fame) iStockPhoto plug-in for WordPress to display my latest approved images. This worked fine under a localhost development environment, but when I went "live" with DreamHost it stopped working due to the blocking out "outdated" PHP code that posed a security risk. For some reason my e-mails to the author went unanswered, and the download link has been a 404 for ages. Plugging the gap with Feed2JS I turned back to Feed2JS, with this in my sidebar: My iStockPhoto photocast