Doug Avery, ON THE TOPIC OF Javascript

When building out the Viget Extend blog, I really wanted to give some special attention to the real meat of the content: the code blocks.

After looking at some other dev blogs, it seemed like there were two types: Big Ol' Blocks and Little Snippets. The big ones deserved the full treatment: Scrollbars, full colorization, line-numbering, all of it. We accomplished this with SyntaxHighlighter, a cool JS file that handles all this work. The developers just need to slap a name="code" on their pre tags, and SyntaxHighlighter formats and colors everything properly. (View an example of the treatment)

The shorter code snips were a little trickier. We didn't want them to linebreak automatically (like code here at Inspire does) for accuracy reasons, but we didn't want to apply scrollbars to something as simple as a single line of code. The solution was a quick jQuery idea: Expanding the code block on hover, so they grow to the full width of the page.

$("pre").hover(function() {
        $(this).animate({ width: "765px"}, 250);
    }, function() {
        $(this).animate({ width: "437px" }, 250);
});

This was all right for a while, but soon we began running into posts like this one, where one or more of the blocks just didn't need the expanding treatment. In these cases, the jQuery effect was just annoying.

For a while, I just let it be, but this morning the answer hit me: We could probably do something to get the width of the code block's contents, and trigger the effect based on whether not the content width exceeded the block's. The first part was just setting up a variable to get the widths of both the block and the block's contents:

Continue reading "Simple jQuery Solution To A Simple Problem"

Leave a comment ( 5 )

Erik Olson, ON THE TOPIC OF Flash and Javascript and Tips and Tricks

Bi-directional Actionscript/Javascript communication is something that has been out for a while, but some Flash designers/developers still are saying, "I didn’t know you could do that."

Well you can! And with just a little bit of code.

Continue reading "Bi-Directional Actionscript/Javascript Communication in AS3"

Leave a comment ( 7 )

Keith Muth, ON THE TOPIC OF Development and Favorites and Javascript

Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it.

JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Both Yahoo! and Google have been offering data from their sites in JSON format for the past couple years. A good example of this is Flickr. Anyone with a Flickr account can access a JSON feed of their photos.

Finding Your Feed

If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Flickr's API has many other feed formats, so I suggest going to their site to read up on it because there are a lot of things you can do. If you want the JSON version of the feed, change "format=rss_200" at the end of the query string to "format=json" so that your URL looks like this:

Continue reading "Pulling Your Flickr Feed with jQuery"

Leave a comment ( 25 )