Building on Mud

No doctype and window.name

2011-02-10T13:58:00.000-08:00

No doctype in an HTML doc forces quirksmode. This makes IE behave like IE5. I couldn't figure out why this didn't work:
Parent frame:


<script>
var iframe = document.createElement('iframe');
iframe.name = 'no_worky';
iframe.src = 'childframe.html';
document.body.appendChild(iframe);
</script>

childframe.html:
<script>
alert(window.name);
</script>

That will alert nothing in IE! Wow, this took a long time to find. Fixing it was just a matter of tricking it a bit. All you need to do is set the name on the contentWindow after appending the child:
Parent frame:


<script>
var iframe = document.createElement('iframe');
iframe.src = 'childframe.html';
document.body.appendChild(iframe);
iframe.contentWindow.name = 'worky';
</script>

Also, make sure that the iframe.contentWindow.name comes After the iframe.src is set

first-child last-child and negative margin fixes for IE

2011-01-21T09:35:00.000-08:00

Want to use the CSS selectors first-child or last-child but are having compatibility problems?
first-child is supported by current version browsers as of this post, including IE8.
last-child is also supported by current version browsers, excluding IE8.

For backward compatibility with IE to mimic first and last child, try:


<!--[if lt IE 8]>
<style type="text/css">
.className {
  margin-bottom: expression(this.nextSibling==null?'0px':'12px');
}
</style>
<![endif]-->

You can swap previousSibling with nextSibling.

Another note: IE6 and 7 do not allow negative margins.

IE iFrame refresh and back button problem

2010-06-02T15:34:00.000-07:00

Have you ever noticed that in all IE's, when you refresh a page (or click the back button) the iFrames are automatically populated? This can be a problem if you are trying to pass unique args into the iFrames.

Here's a short example.
parent.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
</head>
<body>
  <div id="content"></div>
  <script type="text/javascript" charset="utf-8">
  var iFrame = document.createElement('iframe');
  var random = Math.random() * 1000;
  iFrame.name = random;
  iFrame.id = random;
  iFrame.src = 'http://path/to/child.html?r=' + random;
  document.getElementById('content').appendChild(iFrame);
  </script>
</body>
</html>

child.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
</head>
<body>
  <script type="text/javascript" charset="utf-8">
  alert(window.location.search);
  </script>
</body>
</html>

When you go to parent.html then child.html will alert the random number that was put into it's SRC. When you refresh the page, it will alert the same number! This is because IE does some funky things with browser history. In this case, it thinks it's saving you some trouble by repopulating the exact iFrame that was there before. Really, it's causing a whole lot of trouble!

To trick it, use this
parent.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
</head>
<body>
  <div id="content"></div>
  <script type="text/javascript" charset="utf-8">
  var iFrame = document.createElement('iframe');
  var random = Math.random() * 1000;
  iFrame.name = random;
  iFrame.id = random;
  iFrame.style.display = 'none';
  document.getElementById('content').appendChild(iFrame);
  iFrame.src = 'http://path/to/child.html?r=' + random;
  iFrame.style.display = '';
  </script>
</body>
</html>

By not giving the iFrame a src and having it hidden when it's appended, IE will not try to populate it with what it has in the history. Then, immediately after we append it, we can set the src to what we want and display it!

Magic!

Convert a String to Unicode in Javascript

2009-06-19T14:03:00.000-07:00

I had to do some searching to figure out how to turn strings into unicode in Javascript. In the end, I had to piece multiple different explanations together, and write my own function. Here's that function:

function toUnicode(theString) {
  var unicodeString = '';
  for (var i=0; i < theString.length; i++) {
    var theUnicode = theString.charCodeAt(i).toString(16).toUpperCase();
    while (theUnicode.length < 4) {
      theUnicode = '0' + theUnicode;
    }
    theUnicode = '\\u' + theUnicode;
    unicodeString += theUnicode;
  }
  return unicodeString;
}

It will output a string in the form '\uXXXX'. Take that and put it in your Javascript as a string, and it will convert it to the correct character for you.

New Favorite Javascript Editor

2008-12-09T20:07:00.000-08:00

I love TextMate. I started using TextMate a few years ago when it was proclaimed as the "best" editor in the Ruby on Rails community. Long since I stopped writing RoR, I'm still using TextMate for HTML, CSS and Javascript. It's got great snippets, hot themes, I like the indenting, it's very light-weight, it's got great tag matching and people write cool plugins/scripts for it. There are definitely 1,001 things I like about it.

But as I have been writing a lot of code each day for a few months now, I have begun to realize how many of my errors are caused by misspellings (p.s. I just had to spell-correct that) and stupid forgetfulness. I can't even tell you how many times 'I've' renamed a function and had to go digging around the code for 5-10 minutes to see what else needs to be changed. I would say that around 70% or more of my errors are stupid errors. This sucks. I shouldn't be wasting my time because I don't type perfectly, or because I don't have all of my variable names memorized, or even because I forget that I'm working with an object, not an array, so I can't for (i=0; i<object.length; i++) through it.

What I wanted was code completion with introspection and an as-I-type error checker that is more powerful than JSLint. See, JSLint only checks for boring syntax errors. It checks for the things that are the 30-second-to-fix-Firebug-found-it-immediately-anyways errors. And since Firebug is just as good as JSLint then why bother with JSLint?

I wanted error checking for the gotcha's, the things like:
<body>
<script type="text/javascript">
document.write("<script>alert('hi');</script>");
</script>
</body>
In that code, the </script> in the document.write should be <\/script>, otherwise it will escape the parent <script> tag. I want something that will check for unused functions/variables, deprecated Javascript, using a reserved word as a name. I wanted a real IDE for Javascript.

I played around with 4 IDE's that I thought would be good for Javascript: Komodo Edit/IDE, Eclipse, IntelliJ and Aptana. Hands down IntelliJ is the best. It had practically everything I wanted.

My Love for IntelliJ is as follows:

Introspection for auto-complete. IntelliJ not only knows that <code>document</code> has a method <code>write</code>, it also knows that up above you have a variable named <code>myVar</code> and an object with 6 prototype methods. And when you try to use them it autocompletes for you. But what's more is that it checks your script includes and autocompletes those for you. So if I am in a.html and I'm writing in a script block, if I am typing a method for object <code>myObj</code> then it will auto-complete that for me.
Error checking. IntelliJ yells at me every time I misplace those semi-colons and commas. This saves me from having to waste my time refreshing my code in the browser.
Easy refactoring of method/variable names.
Auto-cleans up extra white spaces.
Millions of options. Literally everything is configurable. There is a search box Just For The Preferences
You can debug Javascript just like with Firebug, without having to switch to your browser. Breakpoints included.
Easy finding of definition/use of objects. If I want to see where a method is defined, it's just one click away.

So go download the free trial and try it out for yourself. It's really the best.

Drop shadow on any div, scalable

2008-10-24T10:35:00.000-07:00

Drop shadows are undeniably cool. It really brings a new element to a page. I generally suck at UI and when I was talking to someone about making UI, one interesting thing he said was: "Make the page feel 3D. Design your page so that you can imaging closing your eyes, running your fingers over it and being able to feel the different buttons and layers."

Since I have no eye for design, this was a really interesting idea to me -- I had never thought about the look of the layers. Drop shadows and gradients can really help with this. But just don't go overboard on them.

Anyways, I had a draggable and resizable div (thanks, jQuery UI!) and I wanted to put a drop shadow on it so that you can tell that it is lifted off the page and is meant to be moved around. It turns out doing this isn't straightforward like is should be. There were a few approaches I took at first that failed (hey, I wanted to try all of the shortcuts first).

First I tried having one image that was slightly bigger than my div. It would have the blurred edges and I would simply put it behind my div and position it appropriately. When I moved/resized my div, I do the same for my image. The problem here is that when you scale up/down the image then the width/density of the blur (which causes the shadow) changes. So a huge div with my image background has a really wide shadow, and a small div would have a tiny shadow. That made it seem like the bigger the div got, the more it popped out at me.

The next thing I tried was to just have the drop shadow on the bottom and right of the div. I was going to create one image for the bottom, and one image for the right. That way when I scaled the div's height, the right div's height would expand and it wouldn't distort the width of the shadow as well (like in my previous attempt). This failed, too, because as you scale the divs their density of pixels still changes, and makes them look goofy when they are extreme sizes.

The approach I totally tried to avoid and had to end up settling for was 5 images. A bottom left, 1px wide bottom, bottom right, 1px right side and a top right image. I just really, really didn't want to create all of these images. Admittedly, I'm terrible with Photoshop (there are too many buttons!). I used GIMP and it wasn't too painful. This approach made it it so that I never had to scale the corner images so they would never distort. Then, with the 1px repeating images as the backgrounds for the bottom middle and right middle divs, I could just scale those divs and have my whole drop shadow scale nicely without distortion.

Talk is cheap though, so here's how I did it:
1) Create your drop shadow image. I didn't realize how easy this was until I tried it. Just draw the shape you want a drop shadow for (aka a square, or a square with rounded corners) on top of a transparent background, fill it in black, then find the filter tool on your favorite image editor and start blurring your image. I used a 10px by 10px blur 5 times in a row.

2) Start cropping your individual images. Cut out the upper right corner, cut out a 1px segment of the right side that's the same width as the upper right etc. etc. Take a look at my bottom left, bottom middle, bottom right, middle right, upper right pieces.

3) Setup your CSS & HTML. Lay down your content div, put your shadow div under it and put the image divs in. Fiddle with some CSS and whammo, you can move your shadow div to the same coordinates as the content div and it will always have a drop shadow. My code:

<head>
  <title>Drop Shadow Maddness</title>
  <style type="text/css" media="screen">
    #shadowContainer {
      width: 500px;
      height: 500px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    
    .brShadow {
      background: url(imgs/br.png) no-repeat;
      width: 58px;
      height: 50px;
      position: absolute;
      right: -17px;
    }
    
    .bottomShadows {
      top: 467px;
    }
    
    .rightShadows {
      right: -17px;
    }
    
    .blShadow {
      background: url(imgs/bl.png) no-repeat;
      width: 45px;
      height: 51px;
      position: absolute;
      left: 0px;
    }
    
    .bShadow {
      background: url(imgs/b1px.png) repeat;
      height: 51px;
      width: 414px;
      position: absolute;
      right: 41px;
    }
    
    .trShadow {
      background: url(imgs/tr.png) no-repeat;
      width: 58px;
      height: 51px;
      position: absolute;
      right: -17px;
      top: 0px;
    }
    
    .rShadow {
      background: url(imgs/r1px.png) repeat;
      height: 416px;
      width: 58px;
      position: absolute;
      right: -17px;
      top: 51px;
    }
    
    #topDiv {
      position:absolute;
      background-color:white;
      left: 10px;
      top: 10px;
      width: 500px;
      height: 500px;
      border: 1px solid #999;
    }
  </style>

</head>
<body>
  <div id="shadowContainer">
    <div class="blShadow bottomShadows">&nbsp;</div>
    <div class="bShadow bottomShadows">&nbsp;</div>
    <div class="brShadow bottomShadows rightShadows">&nbsp;</div>
    <div class="rShadow rightShadows">&nbsp;</div>
    <div class="trShadow rightShadows">&nbsp;</div>

  </div>
  <div id="topDiv">This is my awesome DIV</div>
</body>

4) OK if you have a static sized div you are done. If you want your div to move around, and the drop-shadow with it, you're going to have to add some more CSS, or setup some event handlers to change the size. Check out my code with jQuery UI so that the div is resizable:

<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css" media="screen">

    #shadowContainer {
      width: 500px;
      height: 500px;
      position: absolute;
      top:0px;
      left:0px;
    }
    
    .brShadow {
      background: url(imgs/br.png) no-repeat;
      width: 58px;
      height: 50px;
      position: absolute;
      right: -17px;
    }
    
    .bottomShadows {
      top: 467px;
    }
    
    .rightShadows {
      right: -17px;
    }
    
    .blShadow {
      background: url(imgs/bl.png) no-repeat;
      width: 45px;
      height: 51px;
      position: absolute;
      left: 0px;
    }
    
    .bShadow {
      background: url(imgs/b1px.png) repeat;
      height: 51px;
      width: 414px;
      position: absolute;
      right: 41px;
    }
    
    .trShadow {
      background: url(imgs/tr.png) no-repeat;
      width: 58px;
      height: 51px;
      position: absolute;
      right: -17px;
      top: 0px;
    }
    
    .rShadow {
      background: url(imgs/r1px.png) repeat;
      height: 416px;
      width: 58px;
      position: absolute;
      right: -17px;
      top: 51px;
    }
    
    #topDiv {
      position:absolute;
      background-color:white;
      left:0px;
      top:0px;
      width:500px;
      height:500px;
      border: 1px solid #999;
      padding-top: 5px;
      padding-left: 5px;
    }
    
    .proxy {
     border: 1px dashed #000;
     z-index:9999;
    }
  </style>
  
  
  <script type="text/javascript" charset="utf-8">
    function expandDiv(containerName, newWidth, newHeight) {
      containerName = '#' + containerName;
      var shadowContainer = $(containerName);
      var oldWidth = $(shadowContainer).width();
      var oldHeight = $(shadowContainer).height();
      
      var changeWidth = newWidth - oldWidth;
      var changeHeight = newHeight - oldHeight;
      
      // Make bottom 1px shadow width change
      var bShadow = $(containerName + " div.bShadow")[0];
      var bShadowWidth = $(bShadow).width();
      var newBShadowWidth = bShadowWidth + changeWidth;
      $(bShadow).css('width', newBShadowWidth + 'px');
      
      // Make right 1px shadow height change
      var rShadow = $(containerName + " div.rShadow")[0];
      var rShadowHeight = $(rShadow).height();
      var newRShadowHeight = rShadowHeight + changeHeight;
      $(rShadow).css('height', newRShadowHeight + 'px');
      
      var bShadows = $(containerName + " .bottomShadows");
      var bShadowsCurTop = $(bShadows[0]).position().top;
      // alert(bShadowsCurTop);
      var newBShadowsTop = bShadowsCurTop + changeHeight;
      $(bShadows).css('top', newBShadowsTop + 'px');
      
      $(shadowContainer).css('width', newWidth + 'px').css('height', newHeight + 'px');
    }
    
    
    
    
    
  </script>

</head>
<body>
  <div id="shadowContainer">
    <div class="blShadow bottomShadows">&nbsp;</div>
    <div class="bShadow bottomShadows">&nbsp;</div>
    <div class="brShadow bottomShadows rightShadows">&nbsp;</div>
    <div class="rShadow rightShadows">&nbsp;</div>
    <div class="trShadow rightShadows">&nbsp;</div>
  </div>

  <div id="topDiv">This is my awesome DIV</div>
  
  
  
  <input type="button" style="position:absolute; top:1000px;" value="bigger" onclick="expandDiv('shadowContainer', 600, 700);"/>

  
  
  <script type="text/javascript" charset="utf-8">
    $("#topDiv").resizable({
      handles: "s,se,e",
      helper: "proxy",
      stop: function(e, ui) {expandDiv('shadowContainer', ui.size.width, ui.size.height);}
    });
  </script>

</body>

5) Please, shadow responsibly.