josephmclaughlin.info

jQuery Slider With WordPress Login

Joseph McLaughlin — Mon, 16 Mar 2009 21:52:22 +0000

This post was originally submitted to NetTuts, but was not accepted for some reason. So, I’ve posted it here for you folks to enjoy. Let me know if there’re any errors or changes I need to make.

Create a basic Wireframe

We’ll start by putting together a basic site layout for our site in XHTML:




  
  Sliding Drawer Login

All we’re doing in the above XHTML is setting up the basic layout of the page, leaving room in the header div for our login slider. As you can see, I’ve already put in a link to jquery.js, as well as master.js and master.css, which we haven’t written yet.

Add an HTML Form

Let’s dive into our form code before we get to styling. The form we’ll be using works out-of-the-box for a standard WordPress installation. You can customize it to work with your CMS of choice as the form code doesn’t hinder the sliding drawer effect we’re looking at today. You can put this code directly inside the header div.


  
  
    
      
        Username:

        
      
      
        Password:

Not much to explain here. Let’s move onto styling our page.

Adding some CSS

This CSS will go in whatever file you linked to in the first step, so in my case, it will go in master.css.

A couple notes on the CSS:

You can use any image you want for your image and handle. However, if you don’t want your slider to be that obvious, I recommend creating the header and then slicing your image to divide it into two parts. One for the main header, and one that will be clickable - we’ll refer to the latter as the “handle”.
This CSS will make the site centered in the browser window. Obviously, you’ll need to change that if you’re site isn’t centered. The rest of the stylesheet should remain the same.
Because we don’t want users that have disabled JavaScript to be frustrated, we’ve only enabled the typical “click-me” mouse-pointer when our JavaScript runs with the following rule. I’ll point out why in a second when we write our JavaScript.
```
body.script #handle {
	cursor:pointer;
}
```

So, with that in mind, here’s our CSS (You can and should make changes where appropriate):

/* This will center our site */
body {
  text-align:center;
  margin:auto;
}
/* This will contain our entire site */
#wrapper {
  margin:0px auto;
  width:800px;
  text-align:left;
}
#header {
  height:180px;
  background:url(images/header.png) no-repeat 0 0;
}
/* This will hold the sliding drawer */
#drawer {
  position:absolute;
  margin-left:700px;
}
/* This is the div you can click on to reveal the drawer */
#handle {
  position:relative;
  background-image: url(images/handle.png);
  width:31px;
  height:180px;
  left:69px;
}
/* This makes the handle appear clickable */
body.script #handle {
  cursor:pointer;
}
/* This is the div that will hold our form */
#login {
  position:absolute;
  top:0px;
  width:130px;
  height:179px;
  right:-38px;
  z-index:-1;
  background-color:#fff;
  border-bottom: 1px solid #333;
}
#loginform {
  padding-left:13px;
}

If you’ve followed the instructions to this point, you should have something similar to this:

If all is well, let’s continue and write some JavaScript.

jQuery

The jQuery on this drawer is fairly simple, because we’ve already done most of the hard work with our XHTML and CSS markup. This code will go in whatever file you linked to in the first step, so in my case, it will go in master.js.

$(document).ready(function(){
  $("#handle").toggle(
    function() {
      $("#drawer").animate({"margin-left": "+=130"}, "medium", "linear", function(){
        $("#login").css("z-index","100");
        $("#user_login").focus();
      });
    },
    function() {
      $("#login").css("z-index","-1");
      $("#drawer").animate({"margin-left": "-=130"}, "medium");
    }
  )
  $("body").addClass("script");
});

Let’s go over this javascript. First we use the toggle() function to toggle between two user defined functions. Inside the first inner function, we use the animate() function to slide right 130 pixels. After the animation completes, we set the z-index property to 100 (so you can click on the elements in the form as opposed to clicking on the surrounding div). Then we set the focus on the username field so you can immediately enter your username. In the second inner function, we do the opposite, in the opposite order. First setting the z-index to -1, then sliding the drawer left 130 pixels.

The last thing we do is the trick I mentioned earlier: adding a script class to the body element. That way, we can set different CSS rules for the same element depending on whether or not our script finished executing.

Finished!

And here is a screenshot with the sliding drawer out, ready to log in. Enjoy! (Click here to see a functional demo)

Blogging from TextMate

Joseph McLaughlin — Mon, 16 Mar 2009 17:27:14 +0000

This post is coming to you straight from TextMate, no copy/paste required. How, you ask? Well, one of the hidden (Ok, so it’s right there in plain sight, but I never looked) features of TextMate is blogging (HTML, Markdown, or Text). It has the ability to upload images, set categories, tags, download and edit current posts, and I’m sure much more.

The thing I’m excited about, as a geek, is having a desktop application that allows me to control exactly what HTML gets published to my blog, while avoiding the hassle of copying and pasting my code into the HTML editor that WordPress provides.

For now (especially with my posts on jQuery coming soon), I’ll try it out and I’ll be sure to update you, my readers, with anything I like/dislike about it.

jQuery Tutorials Coming Soon

Joseph McLaughlin — Sun, 15 Mar 2009 22:02:17 +0000

I decided that some jQuery tutorials would be a great thing to start posting on this blog, so look for some starting this week.

jQuery is my JavaScript library of choice. It’s fast, powerful, and easy, yet it can pull off remarkable things. If you look around this blog, you’ll see that I’ve used it in several places, namely the login-slider on the top-right, the footer, comments, and the quotes widget on the right sidebar. I’ve also created two dashboard widgets for Mac OS X that use jQuery, and as soon as I think of more widgets, I’m sure I’ll build more.

Some of the topics I thought I’d cover were AJAX using jQuery, the jQuery animation function, and jQuery plugins. If there’re other areas you’d like to see get covered, leave a comment, and I’ll be sure to look into them.

HREF.IN Widget

Joseph McLaughlin — Sun, 15 Mar 2009 18:37:27 +0000

By request, I ported my popular is.gd widget for the folks over at HREF.IN, another URL shrinking service who’s goal is to be simple and effective.

The widget features some of the same features, while maintaining a look similar to their site.

Features

After typing in a URL, shrinking it is only a press of the return key away
If you’d like to clear the box, just press the escape key
If you’d like URLs to be automatically copied to the pasteboard, just enable that option in the widget settings (Thanks to Andrew Hedges for the code to do this)
Creates URLs that are typically under 20 characters long for use in tweets, friendfeed messages, blog posts, email, or word of mouth.

If you like this or my other widget, please consider donating, or buying me something from my Amazon.com wishlist. Thanks!

Anatomy of a Dock

Joseph McLaughlin — Sun, 01 Mar 2009 05:30:43 +0000

The dock is one of the central features of Mac OS X, and is very useful right out of the box, but there are several tweaks (hacks) that you can use to increase your productivity on OS X. This post will cover the ones I find the most useful.

Dock Spacers

These help you organize your dock into easily identifiable segments. For example, on my dock, I have Finder, spacer, Web and Communication Apps, spacer, Web Development apps, spacer, Running apps. This makes it easy to identify which section each app would be in.

To accomplish this, you simply need to type (or copy) these lines into your Terminal:
defaults write com.apple.dock persistent-apps -array-add '{ "tile-type" = "spacer-tile"; }' killall Dock

You can create multiple spacers at the same times, (by omitting the second line) but they won’t show up on your dock until you execute killall Dock (which restarts your dock).

Transparent Icons

I’ve written about this before, it causes a hidden application icon to be semi-transparent, showing you that you have that application hidden.

Again, a simple trip to the Terminal will give you this effect.
defaults write com.apple.dock showhidden -bool true killall Dock

Use 2D Dock in Leopard

If you don’t like the look of the 3D dock introduced in Leopard, but would like to keep it on the bottom (the left and right docks are automatically 2D), this line in the Terminal makes the switch:
defaults write com.apple.dock no-glass -boolean YES killall Dock

If you have any tips on using the Dock in Mac OS X, feel free to contact me and I’ll add it with a link to your site/blog.

Teaser: You can also do things like this to your Dock. If any of you would like the files to make your Dock look like this, let me know.

Wordpress Design Competition

Joseph McLaughlin — Fri, 27 Feb 2009 17:08:06 +0000

I entered the WPWebHost Best Wordpress Design competition under the “Modern and Elegant” category.
The finalists for each category will be picked towards the end of March, and I encourage you to vote!

This isn’t the best post to demonstrate the full look of my design, so please, look at this post which utilizes code snippits and more! Thanks for looking!

Web Developer Toolkit - Part 1

Joseph McLaughlin — Mon, 23 Feb 2009 00:55:48 +0000

As I’ve written about before, one of the reasons the Mac platform is thriving is great “Indie” development. In this post, I’ll talk about some of my favorite applications for web design and development on a Mac.

I think the top of my list has to be TextMate. TextMate is dubbed “the missing editor” for Mac OS X. It has built in syntax highlighting and snippits for over 30 different programming languages, and you can easily add more. I use TextMate on a daily basis, it’s great. (Can’t wait for version 2.0 though)
Price: €39 ≈ $52
Site: macromates.com
Trial: Yes, 30 Days

Firefox has to come next. I don’t know what I’d do without the Web Developer toolbar plugin for Firefox. It helps me when I’m trying to get my divs set up just right. Safari’s Inspector comes very close, but there are a few bugs I hope will be taken care of in version 4.
Price: Free
Site: mozilla.com/en-US/firefox/
Trial: N/A

I think Photoshop deserves a mention here. I use Photoshop a lot, it’s not only a premier image editor, but works for mocking-up a site design as well. I am currently evaluating Pixelmator which seems like it has potential, but I still rely on Photoshop for most of the heavy-lifting.
Price: $699
Site: adobe.com/products/photoshop/
Trial: Yes, 30 Days

Next comes MAMP. I think that MAMP is one of the easiest ways to set up and manage a webserver on your Mac. My dad recently wrote a post about installing a local version of your wordpress blog for backup and testing purposes, you can check that out here.
Price: Free or $54 (for the PRO version)
Site: mamp.info
Trial: N/A - Yes, 30 Days (for the PRO version)

Twitter RSS Mashup

Joseph McLaughlin — Thu, 19 Feb 2009 06:49:14 +0000

Recently, I had the idea to use my Twitter client as an RSS alerter. Basically, I thought I could pull in all my feeds, post them to a Twitter account, and follow that account for in-line notifications of new posts. I’ve been wanting to show everyone how to do it and I’ve finally gotten around to doing it. I thought the best way to show you was using a screencast. It’s just under 6 minutes long and should walk you through the process step-by-step.

If you don’t know how to do something, or have a comment about the screencast/tutorial, leave me a comment, send me an email, or @reply me on Twitter.

If you’re using Firefox, the embedded video isn’t showing up for some reason. I’m working on a fix while staying XHTML Strict, if you’d like to watch the screencast, please watch it here.

Alternatively, you can view it in a higher resolution here (requires QuickTime).

Planned or Unplanned?

Joseph McLaughlin — Thu, 19 Feb 2009 06:17:31 +0000

It seems that Twitter is down, not an uncommon thing, but what I found interesting was the discrepancy between whether it was “planned” or “unplanned”. When I visited twitter.com/home to get to my Twitter page, I was told it was “Unplanned Maintenance” and was about to go about my life until Twitter was back. But I made an interesting discovery: If you went to twitter.com (without the /home) you were told it was “Planned Maintenance”. Huh?!

So Twitter, it’s “Planned” if your attracting users and “Unplanned” if you’re already a user? Hmm, something seems wrong.

Feel free to leave a comment, or contact me on twitter (@mclaughj)

Thanks Brainjuice!

Joseph McLaughlin — Sat, 14 Feb 2009 17:47:51 +0000

Yesterday (2/13/09), I complained on Twitter about Blogo’s HTML output not being valid. This morning (less then 24 hours later), Ben from Brainjuice sent me an email asking what he could do to help. That’s customer service people! I didn’t directly contact them, they found me and helped me find a solution.

Turned out that it was a default setting that works well for people with little or no experience (n00bs). To change the setting, go to “Preferences” → “Advanced” → “Remove inline styles from HTML”.

Thanks Brainjuice! I’m using Blogo for everything now!