Scrolling Twitter Feed

This is a jQuery powered script which pulls the content from a Squarespace twitter widget with help from liScroll to provide the marquee action. Here’s a guide!

Click to read more ...

SlideDeck Installation Guide

Slidedeck is a pretty awesome slider. Although the paid version (there is a free version!) does carry a hefty pricetag of $99 per site (bundle and unlimited deals are available), it has some great features, themes and a rock solid commercial-standard feel. It is based on the popular Javascript library jQuery and can be used as a standard image slider or as a way to display content in an intuitive way. “Simply put, it’s a better way to present content on the web.”

Below is an example of the pro plugin, upgrade to get: support, themes, access to the API (via jQuery), vertical slides, touch screen support and to remove the branding.

Slide 1

Slide 2

Vertical Slide 1 Title

Vertical Slide 2 Title

Vertical Slide 3 Title

Slide 3

Slide 4

Slide 5

Click to read more ...

Installing jQuery

jQuery is a very useful JavaScript Library for interacting with content on a web page, but more importantly for some people - it is the basis for a tremendous amount of plugins floating out there on the web. 

To install jQuery, simply paste this at the top of Extra Header Code in Code Injection:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

This will keep you up to date with the latest version of jQuery v1.x via Google’s ultra fast Content Delivery Network (you can ask for the latest version of jQuery, including v2 when released, but I wouldn’t recommend this, as if/when v2 is released, you will want to do a thorough checking over to ensure your site will not break).

Linking Files Correctly

I spend quite a bit of time on the Squarespace Developer Forums (which is somewhere I highly recommend if you need help) and the most common problem I see when people are adding new custom scripts or features is incorrect references to external files!

Many of you will be familiar with going into File Storage to upload new files and if you are used to using the WYSIWYG (what you see is what you get) editor to insert/link files, you won’t have needed to know how to reference files in manually. Any files you upload into File Storage can be linked to by adding “/storage/” and then the pathname to the file you see in File Storage. 

For example, if you see a folder called “photos” with the file “image1.jpg” inside, to link to it you would use “/storage/photos/image1.jpg”.

Click to read more ...

Slide Toggle - YUI 2

This div has an animation time of 1 second and label of Hello!

This div has a width & height animation

Click to read more ...