Tag JavaScript

Meta-Social Code

I had an idea the other day, and I’m not sure why no one’s implemented. I suspect that either a) someone has and I don’t know about it, or b) there’s some fundamentally-unsolvable problem. If so, please point this out in the comments.

At any rate, the idea is this: as a site owner, I want to make it easy for people to link to my site. I want a wall of social-site buttons on every page, with every site from AOL to Zynga.

But as a reader, I only have a few sites that I use to link to places. I don’t want to wade through row after row of useless icons just to find the one that I want to use to share the URL.

So it seems the obvious thing to do would be for some entrepreneur (not me) to offer “social site button bar as a service”. The site owner adds some markup to the page to say “this is something that can be recommended/liked/shared”, and include a JavaScript script that takes care of the magic behind the scenes. Something like:

<html>
<head>
http://social.com/siteid12345/api.js
</head>
<body>
<h1>This is my page</h1>
<p>Hello world</p>
<social:button-bar/>
</body>
</html>

The script can take care of adding additional <script>s to load additional APIs from whichever social sites are being loaded, and add a DOMContentLoaded listener that’ll replace <social:button-bar> with a series of other elements, like <g:plusone> and <fb:like>.

The end-user, meanwhile, can visit a configuration page and decide which social sites will appear in the button bar. This can be saved in a cookie.

I’ve consed up a quick and dirty prototype, and was surprised that it worked. I haven’t tested it extensively, though.

The obvious objection (aside from “but how does one make money off of this thing?” But they said that about Kozmo.com too. So there) is that this seems like an engraved invitation to cross-site scripting (CSS) holes. And privacy leaking, and who knows what all else.

A related question, which I haven’t answered, is who can see the cookie? If the JavaScript code comes from social.com, then social.com needs to be able to see the user configuration cookie to know which buttons’ code to serve up. But if the reader is looking at content.com, there’s no good way to get a social.com cookie and pass it along. It might be possible to set a content.com cookie, but of course that won’t help when the user surfs over to othersite.org, where we want the end-user to see the same button bar.

I confess that I’m not entirely clear on the policies that govern which sites/scripts can see what data. So it’s quite possible that I’m missing something glaringly obvious.

Countdown to Backpedaling Widget

Over on the right, in the sidebar, you should see a countdown clock entitled “Countdown to Backpedaling”. (If not, then something went wrong.)

If you’ve been listening to Ask an Atheist, then you should recognize this as a widget version of the Countdown to Backpedaling clock. And if not, then you should definitely be listening to them. Because they’re cool.

At any rate, it’s a clock that counts down to May 22, the day after Jesus’ return and the Day of Judgment, when the backpedaling and excuses begin.

So anyway, now you want to know a) where to download this, b) how to install it, and c) how to complain to me about all the problems you’ve had with (a) and (b).

Download

The main download page is .

If you’re using WordPress, you can download , put it in your wp-content/plugins directory, and with any luck, a “Countdown to Backpedaling” widget should magically show up in your “Widgets” control panel. You can then drag it into position, and it should work.

If you’re using some other software, you’ll want . Installation depends on what you’re using, of course, but you should be able to insert it anywhere that takes HTML.

Configuration

The main configuration option is the “show_secs” variable at the top. If you want to see seconds in the countdown, set it to true. If you find the seconds’ flashing annoying, set it to false.

You can also look through the CSS part, and edit as you please. You might need to change the width.

I might improve on this, if time permits and I don’t get raptured before getting around to it.

If you have any comments or complaints, leave a comment. Bug reports accompanied by a rum and Coke will get higher priority. Bug reports accompanied by a patch will get even higher priority.

A Better Way to Toggle

(Warning: what follows may be obvious or trivial to many.)

One of the cool things about AJAX is switching parts on and off: you
can make an element visible simply by

myElement.style.display = "block";

or hide it with

myElement.style.display = "none";

But the problem with this is that it requires the JavaScript script to
know a lot about the document. The example above doesn’t look too bad,
but what if you have something like a pulldown menu that appears when
you click a button?

Let’s say that originally, the button is gray and has a “+” icon next
to the text. When you click on it, the menu becomes visible, but the
button also changes to red, and the “+” icon changes to “-“, to show
that the menu is active.

Now you have all sorts of CSS resources that you have to keep track
of. It would be nice to put them in the .css file, with the
rest of the style stuff.

Read More

Different Stylesheets for Browsers With and Without JavaScript

As hacks go, this one is pretty obvious, but I thought I’d throw it
out there anyway.

Let’s say there are three stylesheets you want to use on your web
page: one for all browsers (style.css), one for browsers with
JavaScript enabled (style-js.css), one for browsers without
JavaScript (style-nojs.css). This can be useful for things
like “display the fancy drop-down menu only if the browser supports
JavaScript; display the plain-HTML menu only if the browser doesn’t
support JavaScript”.

The common stylesheet is pretty standard:

<link rel="stylesheet" type="text/css" href="style.css"/>

The one for browsers that don’t support JavaScript is also pretty
easy: that’s what <noscript> is for:

<noscript>
  <link rel="stylesheet" type="text/css" href="style-nojs.css"/>
</noscript>

Finally, what’s the best way to have different behavior in browsers
that support JavaScript? Why, run a script, of course:


  document.write('n');