Say you start with

$("#someDiv").fadeOut();

after your event happens (click, focus, blur, whatever.)

Try it, put a bold line of text in a div, make a link, and give the link a click event that fades the div.

Try it, seriously, we’ll wait.

Did you see that? Annoying, right?

OK, add one more thing to that chain and it solves the ugly fade problem. Before fading: change the font color to match the background color. So if you have a background of #ccc and a font of #333 for example, your new chain would be

$("#someDiv").css("color", "cccccc").fadeOut();

and there you have it. NO, IT IS NOT PERFECT, but it’s much nicer looking than that mess you see without it. Of course, if you fade that guy back in, give his font the proper color again before he gets back, or the container will just look empty. My favorite thing about this “hack” is that it doesn’t change the look in Firefox (at least not with the default “speed” for fading.)

• Senators: http://www.senate.gov/general/contact_information/senators_cfm.cfm
• House of Representatives: https://forms.house.gov/wyr/welcome.shtml
• You’ll need your full zip code (all 9 digits): http://zip4.usps.com/zip4/welcome.jsp

Gas prices effect all of us, in nearly every aspect of our lives. Please do something about it. Get everyone you know involved. Now.

I go to the Google. Everything I find says there’s an element with absolute position “hiding” my links in Firefox. BUT- THERE ARE NO ABSOLUTE POSITIONED ELEMENTS IN MY CODE. So, I go to the developer toolbar in Firefox. Turns out, there are 1.2 million tiny divs (I may have exaggerated) covering my whole div header. WTF? Turns out the rounded corners plugin is creating those. Well, that sucks ass. So I finally hacked out one line of code “div.header div{position: relative}”, making all divs in the header div positioned relative. BLAMMO! Success. I hope this nugget helps some one!

• I love jQuery, so the first step is to download that and put it on your server.
• Next, you’ll need the HTML for the stuff you’ll want to edit. Here’s what mine looked like:

  <input value="<?php echo $id; ?>" id="nameID" type="hidden" />
  <span class="editName"><?php echo $name; ?></span>
  <input id="newName" name="editName" style="display: none" type="text" />

  * Note that I’m leaving out the part where you connect to your database, return a result set, and set the “$name” and “$id” variables. The hidden id is a unique identifier for the entry in your database that you should return in your result set so we know which row to update in the db.

  The important part of this HTML is that you have a class (or you could use an ID) containing your editable content, and you have a hidden text box with the same value, with its display set to none.

• Now, the magic happens. We need to set up an onClick event for our span to make the span disappear and the text box appear. Here’s how jQuery does that for us (put this in a script tag in your page head, right after your link to the latest version of jQuery):

  $(function(){
      $("span.editName").click(function(){
  
      });
  });

  Pretty simple - the first line is the standard jQuery function, the next line says when you click on a span with the class of editName, do a function.

• Next, we build the onClick function:

  $(function(){
      $("span.editName").click(function(){
          $(this).hide();
          $(this).next("input#newName").show().focus();
      });
  });

  Use jQuery to hide the span, and show the text box (and put the cursor in it).

• Now the user edits the text box and then leaves the text box. Time to use jQuery’s $.ajax function, you can put this onBlur event inside the main $(function(){ }); function, right after your click function:

  $("input#newName").blur(function(){
      var nameID = $("input#nameID").val();
      var newName = $("input#newName").val();
      $.ajax({
          type: "POST",
          url: "updateName.php",
          data: "nameID=" + nameID + "&newName=" + newName,
          cache: false,
          success: function(message){
              alert(message);
              window.location.reload(true);
          }
      })
  });

  OK, it looks like a lot happened here, let’s break it down. First, we create two variables with the id of the row to update, and the new name to use. Next we get into the $.ajax function - tell the function to use the POST method. Then enter the url of the PHP script we made to update the db (probably has a SQL statement to ‘update tbl_name where id = $nameID, set name = $newName’ or something like this.) Next we pass the data, our two variables from the last step. Then we make sure the browser is not cahcing the page. Finally, we have a success function. I am assuming there will be success for the simplicity of this tutorial, you can read up on jQuery to see how to handle failures. You alert the message, and reload the page so the new name is showing in the span and the text box is gone. Important: the success function takes a message parameter, this is what your updateName.php script echoes, so you should have it echo something that makes sense like “Name updated!” on success, or a graceful error message if the update doesn’t work.

This is of course a simplified version of how to accomplish inline editing, it does not take into account every potential roadblock or hazard, or scenario, so please tinker with it, customize it, and strengthen it. It’s just a building block, I hope you enjoy it! *Aside: this is modified from my working code, and I did not test it thoroughly, so it has potential to blow up. If you try it and can’t see why it’s busted, contact me and we’ll noodle what’s going wrong.

Here’s how I incorporated him:

• Trimmed out the background in Photoshop
• Gave the image a nice shadow in Photoshop
• Made a new div in the bottom include .php file on my web pages, set the CSS so it was right-aligned, gave it a high z-index so it would be always on top no matter what size the screen/browser is
• Dropped the image into said div
• Hacked around accordingly so it works in FireFox and IE7
• Punted for IE 6 (the image is a .png, and I need it’s transparency); I wrote some javascript to hide the div in this crap-tastic browser -  so IE6 users, you lose! But you probably hate this site already anyway since I use transparent png’s here, too, so you lose twice. Get a better browser!

Here is my final CSS code that worked in FF and IE7:

div#lizard{
position: fixed;
bottom: -20px;
right: 0;
width: 100%;
text-align: right;
margin: 0;
padding: 0;
clear: both;
display: none;
z-index: 10;
}
div#lizard img{
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
}
 

The main div for the image has “display: none” and then I switch it to be visible in my javascript browser detection.

Warning: session_start() [function.session-start]:
Cannot send session cache limiter - headers already sent...

The best part, the line of the error was the last line of my script connecting to the db, the line with ‘?>’. WTF, right? It turns out, I had an empty space after my php closing tag. Deleting that fixed the problem. YIKES!

I am excited about the new opportunity, but will miss the folks at Veris, too, I wish them all the best!