Typeface.js

Website: http://typeface.neocracy.org/

With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images.

Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Here's what it takes to get going: load the typeface.js library and some typeface.js fonts, then proceed like normal:

 Text here in Helvetiker font...

open source...

You're encouraged to make a donation to this project if you find typeface.js helpful. This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.

cross-platform...

Supported browsers include Firefox 1.5+, Safari 2+, and Internet Explorer 6+. Things will degrade gracefully for other browsers. Users browsing with their PDA's, for example, will still see your text there--it just won't be quite as pretty. Search engines will see your graphic text now too, without having to rely on OCR or "alt" properties.

Step-by-Step Seminar Registration

As different “steps” of the registration process are completed, the current step gets check off as done and the next step lights up. Includes some very basic form validation.

Download Files

AnythingSlider

Features

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Pauses autoPlay on hover (option)
• Link to specific slides from static text links (Slide 6)

Usage & Options (defaults)

$('.anythingSlider').anythingSlider({
      easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
      autoPlay: true,                 // This turns off the entire FUNCTIONALLY, not just if it starts running or not
      startStopped: false,            // If autoPlay is on, this can force it to start stopped
      delay: 3000,                    // How long between slide transitions in AutoPlay mode
      animationTime: 600,             // How long the slide transition takes
      hashTags: true,                 // Should links change the hashtag in the URL?
      buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
      pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
      startText: "Start",             // Start text
      stopText: "Stop",               // Stop text
      navigationFormatter: null       // Details at the top of the file on this use (advanced use)
});

Linking directly to slides

$("#slide-jump").click(function(e){
  $('.anythingSlider').anythingSlider(6);
  e.preventDefault();
});

Changelog

Version 1.1

• Changed default easing to "swing" so didn't depend on any other plugins
• Removed extra junk (other plugins used for design, etc)
• Added Pause on Hover option
• Added options for passing in HTML for the start and stop button
• Added option to use custom function for formatting the titles of the navigation
• Added public interface for linking directly to certain slides

Version 1.0

• First version

Download v1.1

Remote Linking

Thanks to some CSS positioning tricks, we can actually have two different page elements in two different areas of the page use the same anchor link and react to the same hover event. Pretty cool effect that uses nothing but pure CSS and degrades very well.

Example One: Download Files View Demo
Example Two: Download Files View Demo

Top 10 Apps for Scheduling a Meeting Online

Meetings suck. But if there's one thing worse than meetings, it's playing email tag to schedule them. Is your company still sending out mass emails to ask for preferred meeting times? It's the pits, isn't it? Yes, Outlook has a hack whereby you can solicit responses for scheduling, but it's not much of an improvement. There's a better way, and it's a ridiculously simple concept. A Web app lets you pick a range of dates on a calendar and then notify your colleagues so they can pick the times and dates that work for them. You then view the responses and you're done.

Just as wikis solved the distributed document collaboration problem (that we used to use email for), this class of online tools solves our scheduling problem. Here's our rundown of the ten best scheduling apps to be found, in order of preference. Most of them operate on a freemium basis or are fairly cheap.

Tungle

The first thing you'll notice about good apps is that many of them have ridiculous names. Tungle is no exception. But ignoring the silly branding, Tungle is my pick for the most innovative of the bunch. Its Web interface is quite nice, and it has support for the broadest range of integration including: Outlook, Google Calendar, iCal, Xing, LinkedIn, Facebook, Ning, and your blog. Why so many? Tungle is all about sharing your calendar as broadly as possible after you've published it.

Doodle

Doodle doesn't have the social Web love that Tungle does, but it's dead simple. If your coworkers can't figure out how to use this, you may need to find a new career quickly. We covered Doodle launching branded versions for continuing use by a company. But if you just want to try it out once, then you don't even need an account.

TimeBridge

TimeBridge is another app that syncs well with the standard set of both cloud-based and desktop calendars. As we mentioned in our initial review, the cool thing about TimeBridge is that the "Yes/No/Best" answer that can be provided by those you invite makes it really easy to get a response even from those who might be reluctant to use this kind of app.

Setster

Setster is a little more complex to navigate, but that's because it's probably better suited to more complex scheduling jobs. If you need a persistent SaaS calendaring tool that has good collaborative characteristics, Setster is probably your best bet. Read our full review from March here.

Congregar

Congregar doesn't waste any of your time, and that's to be admired. You can create a new event to schedule right from the home page, preview what the emailed poll will look like, and then move immediately to inviting people. Done, end of story.

Presdo

Presdo is pretty slick looking, but the interface is slightly less intuitive than many of the other apps in the list. If you need something with a decent feature set that's really going to look more impressive to the boss, then Presdo would be a great choice.

Diarised

Diarised has got the simple process of online scheduling down pat. But it has one of those annoyingly long sign-up forms, and there doesn't seem to be much integration with Outlook, GCal or iCal. Diarised would be just fine for a quick and informal job, but if you're looking for something to use in the enterprise I'd pick something else.

When is Good

When is Good is probably the most bare bones of these apps on the list, but that's not necessarily a bad thing. Like Doodle there's no sign-up required. It's got a highlighted calendar grid for choosing a range of dates, and it works the same whether you're setting up the poll or responding.

Meet-o-Matic

Meet-o-Matic has got a really old school UI, with check boxes for choosing the dates you want to propose to coworkers. But it's free and there's absolutely no sign-up required for the basic version. The "advanced" version is a little under $20 a year, but I would suggest you hunt around for something with a better UI and more features if you're willing to pay.

Meeting Wizard

Meeting Wizard is going to come up high in search results if you're looking for this kind of thing. It's been around for quite some time, and it has more of a corporate look than I would like. But it still definitely works fine and could be the ticket for you.

Perfect Full Page Background Image

We visited this concept of re-sizeable background images before… but reader Doug Shults sent me in a link that uses a really awesome technique that I think is better than any of the previous techniques.

This technique and the above background image is credited to this site. Here is what this technique is going to accomplish:

• Fills entire page with image, no white space
• Scales image as needed
• Retains image proportions
• Image is centered on page
• Does not cause scrollbars
• Cross-browser compatible
• Isn’t some fancy shenanigans like Flash

This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image.

Technique #1

This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals.

And the CSS:

* {
  margin: 0;
  padding: 0;
}

html, body, #bg, #bg table, #bg td {
  height:100%;
  width:100%;
  overflow:hidden;
}

#bg div {
  height:200%;
  left:-50%;
  position:absolute;
  top:-50%;
  width:200%;
}

#bg td {
  text-align:center;
  vertical-align:middle;
}

#bg img {
  margin:0 auto;
  min-height:50%;
  min-width:50%;
}

That’s quite a little load of markup and CSS, but it does the trick very well! Just doing this alone gets the job done, but what about if we want actual content on the page. Setting that overflow to hidden on the html and body elements should scare you a little bit, as that will totally cut off any content that is below the fold on a site with no scrollbars. In order to bring back scrollable content, we’ll introduce another wrapper. This one will sit on top of the background, be the full width and height of the browser window, and set the overflow back to auto (scrollbars). Then inside of this wrapper we can put content safely.

#cont {
  position:absolute;
  top:0;left:0;
  z-index:70;
  overflow:auto;
}

.box {
  margin: 0 auto;
  width: 400px;
  padding: 50px;
  background: white;
  padding-bottom:100px;
  font: 14px/2.2 Georgia, Serif;
}

JavaScript Fixes

For IE 6, there is some MooTools stuff going on to fix it up

In Firefox, default “focus” is placed on the body element when the page loads. That means that pressing the space bar will scroll down the body, which would reveal some ugly white space. We can use some jQuery for a quick fix, to remove that focus and place it on a hidden element instead, removing that problem:

$(function(){
     $(".box").prepend('');
     $("#focus-stealer").focus();
});

Dreamweaver Extensions and Web Design Tools

The best Dreamweaver extensions available for Adobe Dreamweaver CS4 and CS3. Only Adobe has a larger list of Dreamweaver extensions but i have listed them all on one page

Select from the following categories or scroll through our complete list of Dreamweaver extensions and website development software. Some products may be listed in more than one category if they perform multiple functions.

	Bundles and Collections		CSS Tools and Editors
	Website Builders		Website Navigation
	User Registration and Login		Shopping Carts and E-commerce
	Database Management		Email and Email Marketing
	WYSIWYG Text Editors		Charts and Data Display
	Web Form Tools and Validation		Website User Interaction
	Cookies and Sessions		Dynamic Lists and Dropdowns
	Calendars and Date Pickers		Content Management Tools
	File Upload/Download Tools		Flash Tools
	Image Gallery Tools		Search Engine Optimization Tools