posts tagged with “javascript”

Site Identity, Part 1

2 comments

This week I decided I want to work on my site and extensions a bit before I live and breath Mozilla for the next 3 months. Enter the ribbon. It’s something I’ve wanted to do for quite awhile, and it took a bit longer than I expected.

I added what I’m calling a ribbon (unrelated to Office 2007) to the main fligtar.com sites, like this blog. Clicking on it will bring down a menu of other things on fligtar.com.

I wanted to be able to easily modify an existing site to use this style and I wanted to be able to modify the menu content in one place, but I didn’t want to use PHP.

I’m pretty happy with the result (I won’t say “Mission Accomplished”), as including the ribbon without gradient can be done by:

<html>
    <head>
        <link rel="stylesheet" href="http://g.fligtar.com/ribbon.css" type="text/css">
        <script language="JavaScript" type="text/javascript" src="http://g.fligtar.com/jquery.js"></script>
        <script language="JavaScript" type="text/javascript" src="http://g.fligtar.com/ribbon.js"></script>
    </head>
    <body>
        <div id="ribbon_menu" style="display: none;"></div>
        <div id="ribbon"><div id="ribbon_logo"></div></div>
    </body>
</html>

… and the gradient is 2 lines more.

The process I went through to create this reveals why it took longer than expected:

  1. Determine color scheme
  2. Make shiny bar
  3. Place shiny bar
  4. Make 4 versions of logo that I’m not happy with
  5. Make 2 entirely functional menus before deciding I want the ribbon to drop down
  6. Fight with IE
  7. Realize that some sites (blog and LSU map) can’t use the gradient
  8. Separate gradient from shiny bar and redo that area of CSS
  9. Deploy to all sites
  10. Fight with trac’s CSS which did not play nicely with mine
  11. Win!

I called this Part 1, but my current plan is basically:

  1. Implement Ribbon
  2. …
  3. Profit!

More like tstupid

I spent a half hour trying to figure out why my site was rendering perfectly in Firefox, but not at all in IE7. I went through the trouble of finding the Microsoft Script Debugger (did I mention Firefox comes with a Javascript/CSS Debugger?) to find that it wasn’t a JavaScript error. I resorted to the Google, which led me to my solution. I vaguely remember encountering this problem a few years ago as well, but apparently didn’t learn my lesson.

You can’t add tr’s to a table in IE. You have to add it to a tbody. ERGO, this does not work:

var table = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');

td.innerHTML = 'IE sucks';

tr.appendChild(td);
table.appendChild(tr);

You must do this instead:

var table = document.createElement('table');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');

td.innerHTML = 'IE sucks';

tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);

Indeed.