BlogsEye.com
I'm keeping the technical articles here
for the time being.
eventually a right column

Easy to Use Social and Blogging badges

I created the following set of badges for social bookmarking and blogging. It seems unique because in addition to the stuff like delicious and digg it has tweet, ping, blogger and livejournal links. This encourages people to tweet or blog your page. (Try it. I dare you to blog or tweet this page!).

<script language="javascript" type="text/javascript" src="http://www.blogseye.com/blogthis/blogthis.js"></script>

It looks like this:

 

 

 

Stupid simple CSS/JavaScript horizontal drop down menu system

I needed a dumb menu system for a project at work and I came up with a stupid one. When I got a chance, I went back to it and worked on it for a while. I needed a system that would work well in most browsers. I needed it to be very simple without having to custom code each menu and sub menu. It had to be just two CSS classes, a container and a menu box. It had to be flexible so that in order to expand it, all I needed to would be to add another link.

I did my testing in Firefox and then when I went back to IE, it was always broken in un-nice ways. I started adding Internet Explorer specific pieces, but that was stupid. I eventually got it to work without any browser specific code.

Here is the css:

.mmm {
  position:relative;
  float:left;
}

.mmmInner {
  visibility:hidden;
  display:none;
  position:absolute;
}

It is simple stuff. I have a div that floats left and the inner menu that is hidden. These go in a div of their own so they stack up to the right. You need to style these a little with a width for each of the two DIVs so that they look pretty, but I took that stuff out.

The code for three columns looks something like this. You can add as many as you like, just cut and paste.

<div>
  <div class="mmm" onmouseover="bigg(this);" onmouseout="litt(this);">Title 1<br>
    <div class="mmmInner">
      line 1<br/>
      line 2<br/>
      line 3
    </div>
  </div>
  <div class="mmm" onmouseover="bigg(this);" onmouseout="litt(this);">Title 2<br>
    <div class="mmmInner">
      line 1<br/>
      line 2<br/>
      line 3
    </div>
  </div>
  <div class="mmm" onmouseover="bigg(this);" onmouseout="litt(this);">Title 3<br>
    <div class="mmmInner">
      line 1<br/>
      line 2<br/>
      line 3
    </div>
  </div>
</div>
<br>

The secret to the whole thing was adding the <br> after each the titles. This forced the hidden div to the left and made things work for both IE and Firefox. I've tested in IE 5, 5.5, 6 and 7. You need the last <br> at the bottom so new stuff clears the menu.

I just have lines, but you can make them links or text boxes or graphics.

Now the javascript. You can see that on the mouseOver and mouseOut that I am passing "this", which gives me the container div, but I need to change the stylings of the inner menu div to make it visible. I have a little DOM search routine that finds child class called mmmInner and returns it. This has not very elegant and I use a try catch so that it doesn't generate any warnings.

Here is the script:

function bigg(t) {
    var ttt=walker('mmmInner',t);
    ttt.style.visibility='visible';
    ttt.style.display='block';
}
function litt(t) {
    var ttt=walker('mmmInner',t);
    ttt.style.visibility='hidden';
    ttt.style.display='none';
}
function walker(classname,t) {
    // walks down the tree looking for a class name
    var cname=null;
    try {cname=t.className;} catch (e) {cname=null;}
    if (cname==classname) return t;
    var j;
    for (j=0;j<t.childNodes.length;j++) {
        var tt=walker(classname,t.childNodes[j]);
        if (tt!=null) return tt;
    }
    return null;
}

Now here it is with some stylin' to make it more obvious:

Title 1
line 1
line 2
line 3
Title 2
line 1
line 2
line 3
Title 3
line 1
line 2
line 3
sub menus??
submenu 1
line 1
line 2
line 3
submenu 2
line 1
line 2
line 3
submenu 3
line 1
line 2
line 3


If it works correctly, this text will be covered by the drop down (don't forget the <br>).

Make sure you give the div a background color.

Make sure that there is room to show the dropped down menu.

Bugs: In Internet Explorer 7, when the menu drops over an image the mouse moving over the links cause a flicker effect. I do not see this in plain vanilla pages, just when there is a background image.