Tag Archives: javascript

Cufón JavaScript Font Replacer

Oct 9, 2009 by Matt | Posted in Design No Comments

Cufón is a neat font-replacement script that has been gaining popularity of late. It’s easy to set up, and works in modern browsers, and IE6+.

Cufon on ProBlogDesign.com

To use a custom font on a web page, you first run a TTF or OTF font file through the generator on the Cufón website (or your own instance of the generator), which will convert the and generate a JavaScript file named after the font.

Next you include the minified Cúfon script, and the font JS file, then call the Cufon.replace() function.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Copperplate_600.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>

Easy enough. The only downside is that the text won’t be selectable after the replacement.

You can read more about Cúfon in the documentation.

Open Links in New Windows or Tabs Without Target=”Blank”

Mar 6, 2009 by Matt | Posted in Coding One Comment

Though it’s not considered good practice to go around opening new windows on people, it still is something that there are practical uses for. There are legitimate reasons to open new windows, other than trying to open all of your external links in new windows, such as popping a window with a Google Map or Flash game, etc.

I recently came accross an interesting post on WP Cult that discussed opening external links in a new window with jQuery. I adapted the jQuery snippet a little and came up with this:

jQuery(function() { jQuery("a.popup") .click(function(){ window.open(this.href, "popupwin", "status=1, toolbar=0, location=1, menubar=0, width=600, height=450, resizeable, scrollbars"); return false; }) });

If you add the snippet to your page head, between <script> tags, of course (and after referencing the jQuery library), you gain the ability to selectively make links open in new windows by adding the class of “popup” to the <a> tag.

In addition to avoiding the target=”_blank” attribute, you gain the control of being able to customize window size and chrome. It’s also very accessible to both users and search robots, since the href attribute still points to the usual URL, unlike with some JavaScript solutions that break browser features such as middle-clicking to open a link in a new tab.

Google AJAX Libraries API

Jan 21, 2009 by Matt | Posted in Coding One Comment

Do you use a JavaScript library — such as jQuery, Prototype, or MooTools — on one (or more) of your websites? That probably adds a good 18-120 kilobytes to your pages’ total size, adding more time to users’ download time.

Now, how many websites use that same framework? How many websites make use of jQuery, or example? A lot. That means any given user could be downloading the JavaScript files multiple times in a day, as different sites require it. What a waste of time and bandwidth.

Google has an interesting solution. They host multiple versions of several major JavaScript libraries on their servers for web developers to take advantage of. This offers several advantages. Their servers are quick and have wide pipes allowing for very fast downloads, for one. The real benefit is caching.

If a user visits several sites that reference jQuery (or another library) from Google, their browser caches the file and will only load it once, reusing the cached file on the other sites when they are loaded. This is because you’re referencing a file from ajax.googleapis.com instead of your own domain, and if multiple sites reference it, the browser remembers it already downloaded the file and uses the local copy.

Continue reading →

jQuery Color Fade Menu

Nov 19, 2008 by Matt | Posted in Coding No Comments

Have you ever seen one of those Flash navigational menus where the hover color fades in and out? You know, the ones where you point to an item and it doesn’t just change color abruptly, but fades into the other color?

Well, it’s possible to create that effect without Flash, using straight JavaScript. Using the jQuery framework it’s not too hard at all.

CSS-Tricks.com has a great tutorial up, teaching how to do just that. Color Fading Menu with jQuery.

It’s a neat effect, and though it’s not entirely necessary, it can make your navigation a little more interesting without detracting from it usability or SEO-wise.

Include Common JavaScript Libraries in Your WordPress Theme

Nov 12, 2008 by Matt | Posted in WordPress 13 Comments

I bet you didn’t know that WordPress already includes several common JavaScript libraries, ready to be called upon with a simple template tag. Libraries such as

jQuery
Scriptaculous
Tiny MCE
Thickbox

Want to use jQuery in your theme, for a tabbed box, an AJAX something, or some sort of DHTML effect? You can add it in with a single template tag in your header.

Continue reading →

Easy PHP Reflections

Oct 16, 2008 by Matt | Posted in Software & Scripts No Comments

Looking to create that cool reflection effect on an image? There are plenty of JavaScript solutions, such as Reflection.js, to handle the effect on the client side, but what if you want to do it on the server end, to ensure maximum compatibility or to take the load off the client machine?

Enter Easy Reflections, a PHP script that makes does just that. Available in PNG and JPEG/GIF flavors, it makes it wicked easy to generate reflected images. Just use an image tag like so:

<img src="reflect_v3.php?img=picture.jpg" />

There are extra parameters you can optionally pass, allowing you to alter the height and width of the resulting image, and adjust the size and tint of the reflection.

Don’t worry about putting too much stress on the server, there’s optional caching support.

AJAX, Disambiguation

Oct 13, 2008 by Matt | Posted in Coding 2 Comments

“AJAX,” which stands for “Asynchronous Javascript and XML” has sadly been being used as a buzzword lately, referring to Javascript/DHTML tricks rather than it’s “real” meaning.

AJAX is the use of the XMLHttpRequest object in JavaScript to load new content from a server into a page, without reloading the page. A good example of this is Twitter. Type your new message into the box, press the button, and your message is sent to the server (and a response is sent back) without the page being reloaded. This is AJAX.

What AJAX isn’t, but people keep referring to as AJAX, is dynamic Javascript tricks such as Script.aculo.us effects.

Please use the term “AJAX” to refer to asynchronous HTTP requests, and not any old bit of JavaScript. We already have a term for that, it’s “DHTML,”� or “Dynamic HTML.”

Sikbox – Live Search Made Easy

Oct 10, 2008 by Matt | Posted in Services and Tools 2 Comments

“Live Search” is a term that people started using somewhere along the line to refer to AJAX-y search forms that display results as you type, rather than taking you to a results page. Kind of like Apple’s Spotlight search in OSX, which I have to say works great.

Wouldn’t it be cool to have something like that on your blog? A search form that, as you type, displays the results in a dropdown instead of a results page? That’s where Sikbox comes in.

Sikbox is a Yahoo BOSS app that allows you to create a cut and paste live search solution. It’s free, easy to install, and you can even apply your own CSS styles to it (or pick from one of the pre-made themes). You can search the entire web with it, or limit it to your website, like most of us would probably do.

Here’s a screenshot of it in action:

If you click on one results, you jump right to it. It works pretty good. It seems to work a lot better than the default WordPress search system too (providing your blog is in the Yahoo index).

Tag Archives: javascript

TweetRoll