So a few weeks ago I saw a similar job board here

I e-mailed the site and asked them how they did it. All they told me was that they were using a plug-in and some custom coding… I already new that!!! lol. So they weren’t giving up their secrets of how to create a free job board.

So my search began. After a couple weeks I was finally able to find a solution at some random site… which I forgot to document I found it here… but that’s o.k. I will still share my secrets with you… (Don’t download their files just instal TDO Mini Forms and then follow the directions.)

The solution required using TDO Mini Forms. This plugin allows you to set up a form that allows any member or non member to create a post depending on the settings you set of course. Once the post is created all you have to do is change the status to published and the post is live.

So my process went something like this.

• Install WordPress 3.0
• Instal TDO Mini Forms
• Modify 2010 (the wp theme) loop.php, functions.php and other tweaks
• Style it in CSS

I was up and running. Check it out here SportsTrainingJobs.com.

Capabilities:

• Non-Member Users can posts jobs.
• Jobs are seperated into categories
• Search function targets only job posts

I wanted to experiment with jquery 1.4.1 so I started building a tool tip and just kept going with it. A few things before we get started.

DOWNLOAD THE DEMO AND FILES

• Uses the wonderful jQuery 1.4.1
• It does not use code in the bottom of your content
• hoverIntent (not the jquery plugin) NEW
• can set feature to stay open
• Can utilize JSON to insert code snippets for fancy tips NEW
• It use the rel and rev attributes
• works in all the popular browers (even ie6) NEW
• Can add plain text to the rev attribute.
• It’s w3c valid
• It’s SUPER easy!

Here are some examples:

Top Left
Top Right
Bottom Left
Bottom Right
Center Right
Center Left

OMG WAIT…

I forgot to tell you… You can put just about anything you can code into this tool tip (I tried an iframe and it worked great!) It is pretty powerful for a tool tip eh?

Live Links
Or Dead Links
Here is an img
Here is a vid
(you can link images to a tool tip too)

DOWNLOAD THE DEMO AND FILES

The Tricks

Basic Use

• add rel=”mytip” to any link you want the tip to work on.
• Just add your text/code to the rev attribute.

Advanced Use

• to set the width and location would look like this you can set all, some, or only one of these values: rel=”mytip [width:500px; height:300px; center right leaveopen get]” possible values here
• using get will cancel out the rev tag so make sure your id=”tip1″ has the same value as your JSON object ie ‘tip1′.
• to leave the tab open and insert a .closebutton just add leaveopen in the brackets
• you can add classes and attributes like you would in normal code.
• You can change the offset from the mouse in the JS
• You can modify the span wrapper to auto include something more if you want to do something fawn-cay.
• You can change the css on the .mytip class

experiment… what can you not do? Let me know your feedback or if you find some bugs. PLEASE because I don’t want to pollute the web.

Blessings,
Richard Lee

DOWNLOAD THE DEMO AND FILES

I decided to try and create a custom tool tip and it worked out pretty well. I had to utilize a funny attribute to make it work (the rev attribute… WHAT??? that’s what I said. go ahead check w3c ( ; )… But it Does. I just need to work on customizing the positioning. so if the browser isn’t wide enough or to pop out to the left instead of the right etc.

I am using a Google hosted jQuery 1.4 take a look below.

This is some Anchor Text Hover over it

you can make the link do nothing too! but I have a tip! just set the href to #

This is out it works

You must be careful with quotes ” ” you must make sure you use ‘ ‘ instead of ” ” use the opposite of what you are using for your attributes.

It works in all the browsers as far as I know… (I haven’t tested in chrome or opera though)

With this solution all you have to do is set the rel=”mytip” and then put whatever you want in the rev=”" attribute for your tip. It requires jquery 1.4, the code I wrote to make it happen, and then a .mytip class for css

you can view the source below this sentence to cut and paste the .js and .css (all of it i’m linking to googles jquery)

Blessings,
Richard Lee