SPAMM Cupcake

SPAMM Cupcake is an online show of new media art curated by Ellectra Radikal and Systaime Alias Michaël Borras that was streamed live for the week of Feb. 28–Mar 5, 2013, to a storefront at the corner of Bowery and Kenmare streets in Manhattan, at the invitation of Mark Brown. Ellectra instigated a few months of conversation on FaceBook and eventually some 50 artists participated. The video for my work Snapper is shown here (thanks to Steve Stoppert for the videos, and to Dafna Ganani for making them available on FB). You can find the original animated GIF on the SPAMM Cupcake site, of course, and in my portfolio page of GIFs. Snapper is a work in my recent series on glitch and social memory. Some still images can be viewed on my Glitch Nation page. SPAMM Cupcake has several sites on Facebook, including its group page, the New York City event page and a new page documenting Cupcake.

The events and documents and chats have been flowing so furiously I have barely had time to check out all the works at SPAMM Cupcake. I’m posting this as a way of gathering the documentation and declaring my intention to be a less involved with FB commentary about the show and more involved in experiencing the work in the show.

Navigation Menu with current page disabled

In creating my new portfolio pages, I have relied on other people’s code. I’ve already mentioned the Photobox jQuery image gallery, which drives the slideshows on the new pages. From multiple sources, I figured out a better way of using CSS to create navigation menus than what I’ve been doing before. The core idea is that the link to the current page should show up in the navigation menu but should not be active. Typically, you’ll want to either pull it out visually, to flag the page you are on, or dull it it down, to indicate that it is not available to be clicked. Ideally, the cursor should not change to the active pointing finger over the inactive link.

I relied on multiple classes before, and had to do lots of markup editing. By adding some jQuery code to the CSS, you can get the menu working with minimal fuss.

CSS:

#navmenu a {
   color: #90c7fe;
   text-decoration: none;
}
#navmenu a:hover {
   text-decoration: underline;
   color: #fe596e;
}
#navmenu {
   color: #838390;
   padding-left: 1.5em;
   padding-top: 0.5em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}
#navmenu a.current-page {
   color: #fedc7b;
   text-decoration: none;
   pointer-events: none;
   cursor: default;
}

JavaScript (jQuery)

$('a.current-page').click(function() { return false; });

The JavaScript should be included either on a page load or at the end of the page, just before the <body/> tag. To use the markup, just enter something like this:

<div id="navmenu"> 	
<a href="glitchez.html">Glitch Nation</a> | 
<a href="gifz.html">GIFs</a> | 
<a href="datascapez.html" class="current-page">Datascapes</a> | 
<a href="birdz.html">Ornithology Suite</a> | 
<a href="studiez.html">Field Studies</a> | 
<a href="treez.html">Tree Scrolls</a> | 
<a href="noiz.html">Blue Noise</a>		
</div>

The key to it all is shifting the “current-page” class to the navigation link for whatever page you are on. The CSS takes care of the appearance of the disabled link and the JavaScript disables the cursor response. The code may not work in IE (but what did you expect?). Of course, you’ll have to include jQuery, probably with something like this in the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>