Getting Around Onload in Flash

March 5th, 2010 by Robert

I’ve been doing some Flash work recently and ran into a conundrum. You can’t create an empty movie clip, load a movie in it, and do a movie.onload=function(){...}. There are lots of work arounds, but here’s the one I just came up with that I liked.

function loadMyMovie(clipName, depth, loadInClip, funcbefore, funcafter) {
	var watchLoad = function() {
		if(_root[clipName].getBytesLoaded() == _root[clipName].getBytesTotal() && _root[clipName].getBytesTotal() > 0) {
			funcafter.call();
		} else {
			setTimeout(watchLoad,1);
		}
	};
	_root.createEmptyMovieClip(clipName, depth);
	_root[clipName].loadMovie(loadInClip);
	funcbefore.call();
	watchLoad();
}

funcbefore and funcafter should be the functions that show and hide your loading message.

I haven’t tested this exact bit of code, but that’s the basic principle.

Tags:
Posted in Web Design | Comments Off

Two Odd IE Behaviors

October 12th, 2009 by Robert

I noticed two odd Internet Explorer (or IE for short) behaviors while I was working on a beta version of a network tools app my boss wanted. I also figured out the workaround.

Dynamically Visible DIVs Don’t Appear

I used a tab-based navigation for the beta version. When you click on a tab (composed of an h2 and an a), the corresponding div would appear, hiding all the others. This was achieved by adding and removing a value in the .className. In IE, though, the tab would work for two tabs, but would only hide tabs after that. The new tab wouldn’t appear.

To make matters worse, if I alerted something in the loop that set or unset the .classNames, it would work. I tried various things like .display="none" while I was modifying things, then setting it back to block when I was done, but none worked.

The solution turns out to be that you need to remove the container element, then reinsert it. For example: 

1
2
3
4

var tabcont = document.getElementById('tab-container'),
	pn = tabcont.parentNode,
	ns = tabcont.nextSibling;
pn.insertBefore(pn.removeChild(tabcont), ns);

DOM Created TABLEs Don’t Show Content

I also needed to dynamically create tables. This can be done via straight text with .innerHTML or via the DOM with document.createElement and .appendChild. In some areas, the tables could use thead because the row headers were on top of the table. Other times, the th was in the same tr as the td it matches.

In instances where there was a thead, I also created a tbody. Where there weren’t, I didn’t bother because the browser usually figures that stuff out. IE does not. So, if you’re using the DOM method of creating tables, make sure you explicitly use a tbody.

For the record, I was also using a caption. So, that may have triggered something in IE that wanted an explicit tbody. If your stuff seems to be working fine without the tbody, it may have more to do with caption being present.

Posted in Uncategorized | Comments Off

Site Specific Hacks

April 8th, 2009 by Robert

The other day, I finally got curious about the Site Specific Hacks option in the Develop menu of Safari. It turns out that browsers do their own hacks to certain known problem sites to make them work. Safari allows developers to turn off these hacks in the event that the developer is fixing a site that has hacks in Safari.

Opera, on the other hand, has a very advanced method for dealing with site specific hacks. It’s worth a read just so to know what kind of stuff goes on in the browser that most people, including developers, never think about. They also link to how other browsers deal with the problem.

Tags: ,
Posted in Web Design, Web Development | Comments Off

Triangles in CSS

March 25th, 2009 by Robert

I was reading Image-free CSS Tooltip Pointers and realized the trick of triangles in CSS. These odd little polygonal things have been around for awhile, but I just now figured out how the triangle works.

Basically, where two borders meet (e.g. border-top and border-left), a diagonal line is drawn where they meet, making a neat bezel effect, rather than having the top border sit above the left border. For example:

On the div above, you can see the diagonal lines where the borders meet. 

1

<div style="margin: auto; border: 10px solid red; border-left-color: blue; border-right-color: green; border-bottom-color: yellow; height: 20px; width: 20px; background: gray;"></div>

Taking advantage of this, it’s easy to set the color of some borders to transparent and end up with a polygon. 

1

<div style="margin: auto; border: 10px solid red; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; height: 20px; width: 20px;"></div>

Take that principle and mess around with it, and you can make triangles. For example:

Above, you have north, south, east, west, northeast, northwest, southeast, and southwest (in no particular order). 

1
2
3
4
5
6
7
8
9
10

 <div style="position: relative; width: 100px; height: 100px; margin: auto;">
  <div style="width:0; height:0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-top: 5px solid blue; border-bottom: 0; position: absolute; bottom: 0px; left: 50%;"></div> 
  <div style="width:0; height:0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-bottom: 5px solid blue; border-top: 0; position: absolute; top: 0px; left: 50%;"></div> 
  <div style="width:0; height:0; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-right: 5px solid blue; border-left: 0; position: absolute; top: 50%; left: 0px;"></div> 
  <div style="width:0; height:0; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-left: 5px solid blue; border-right: 0; position: absolute; top: 50%; right: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid blue;  border-right: 7px solid transparent; border-top: 7px solid transparent; border-bottom: 0; position: absolute; bottom: 0px; left: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid blue;  border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-top: 0; position: absolute; top: 0px; left: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid transparent;  border-right: 7px solid blue; border-bottom: 7px solid transparent; border-top: 0; position: absolute; top: 0px; right: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid transparent;  border-right: 7px solid blue; border-top: 7px solid transparent; border-bottom: 0; position: absolute; bottom: 0px; right: 0px;""></div> 
 </div>

So, as you can see, it’s pretty easy to make a triangle. Adjust the border widths to make them bigger.

Tags: , ,
Posted in Web Design | Comments Off

Internet Explorer 8 Released

March 19th, 2009 by Robert

If you didn’t already hear (and I bet you already did), Internet Explorer 8 has been released. For several months, I’ve been using the release candidates with the Internet Explorer 7 Compatibility Mode to test sites in IE7 and IE8. So far, IE8 seems like a pretty good release. I haven’t had a chance to update yet, but I’m hoping hard that things have only gotten better.

Tags: ,
Posted in Web Design, Web Development | Comments Off

Browsers and Form Collection

February 18th, 2009 by Robert

I’ve been writing a new form hijacker. Since this one is a pretty big deal for me, I wanted to make sure it was properly implemented. I implemented against my interpretation of the HTML 4 specification and did a pretty good job since I’m exactly compatible with Firefox, Opera, and Internet Explorer 8. Safari, Internet Explorer 6, and Internet Explorer 7 seem to have some bugs.

Safari seems to send the values of unnameed selects, despite these elements being invalid. So, you may get a query string like text1=test&=selval if your select that contained an option="selval" doesn’t have a name.

Internet Explorer 6 and 7 both mishandle buttons. Internet Explorer 6 sends all buttons with name attributes set, even though it should only send the button if it was clicked. Internet Explorer 7 doesn’t send unclicked buttons, but any time Internet Explorer 6 or 7 sends a button it sends the button’s innerHTML instead of the value.

So, given the deficiencies above, here’s how to compensate. If you’re using PHP, you don’t need to worry about Safari sending nameless selects as PHP seems to ignore them (or at least in parse_str). If you plan to use buttons, never give them names or values. Use radio controls if you have to do conditional actions based on what the user clicks.

I still have some other testing to do, but these findings should help you cover your bases if you’re working with forms.

Tags: , , , ,
Posted in Web Design, Web Development | Comments Off

Yahoo! Updates Graded Browser Support

January 29th, 2009 by Robert

Yahoo! updated it’s Graded Browser Support yesterday. The changes involved dropping support for non-Safari browsers on Mac OS X 10.4 and non-Internet Explorer browsers on Windows 2000. Support for Internet Explorer 8 was added for Windows XP and Windows Vista.

This has given clout to support Internet Explorer 8 (which is in Release Candidate version now) in addition to versions 6 and 7. Here’s hoping Microsoft forces Internet Explorer 8 upgrades now that version targeting has been implemented.

Tags: , , , , ,
Posted in Web Design, Web Development | Comments Off

Old Stuff Up, New Stuff On The Way

January 20th, 2009 by Robert

I finally finished importing all the relevant old content from Robertdots of yore. It amounted to about 36-ish posts. I’ve set up all the 301 redirects and pulled the 503 I’ve had running for a month or more.

I still have some editing to do on older stuff and I there are still some areas of the CSS that I need to address. The pressing stuff is done, though. In the days ahead, I’ll concern myself with new stuff.

Tags:
Posted in Meta | 4 Comments »

Apologies For Old Content

January 14th, 2009 by Robert

I started working on importing all the old content I planned on keeping on the site. So far, I’ve only posted two or three old stories, but I have another 30-something in the queue. So, I want to apologize to anyone who reads my news feeds for all this old content showing up. At this point, I don’t know how to make WordPress understand that these posts are old and need to (at least) be appended to the feed.

Until I get through all the old stuff (hopefully by the end of the week), please be patient.

Tags:
Posted in Meta | 2 Comments »

Adding Location Awareness to Your Site

January 9th, 2009 by Robert

I recently launched a new personal site.  I wanted to integrate some level of location awareness to it.  My initial design sketches called for the weather information and a position on a map of my last known location.

Initially, I was using a program on my iPhone called Loopt.  Loopt is like Twitter with location.  That involved jumping through hoops, as Loopt’s RSS feed only shows the GPS position of the last post.  Not only would I have to post a message every time I got somewhere, I’d have to reverse geocode my position to grab the zip code to send to get the weather information.  I achieved this through JavaScript with the Google Maps API.  This worked until I found out about Fire Eagle.

All Fire Eagle does is log your location. Luckily, Fire Eagle has an API. Eagle Feed turns your location into a publicly accessible RSS feed. So, getting your location is as easy as parsing an RSS feed. By setting the read level of Eagle Feed to my zip code, the title of the single item in the RSS feed reports my city, state, and zip (e.g. Birmingham, AL 35223), and my GPS coordinates are also in the feed.

You can update Fire Eagle by manually by entering your location on the site. However, there are mobile applications, such as Active Eagle on the iPhone, that use the GPS functionality of your device to update Fire Eagle. In Active Eagle, I simply tap “Update Fire Eagle” to update my location, and my Eagle Feed.

Once you can get your feed there are plenty of cool things you can do.

I wrote a simple PHP script to open my feed (or pull it from a cached file), grab the human-readable location from the title and parse out the zip code and my GPS position. 

1
2
3
4
5
6
7
8
9
10
11

$out = file_get_contents($feed_url);
 
preg_match_all('/<title>(.*?)<\/title>/', $out, $loc_matches);
$human_loc = $loc_matches[1][1];
preg_match('/\d{5}/', $human_loc, $loc_matches);
$human_zip = $loc_matches[0];
 
preg_match('/<abbr class="latitude".*?>(.*?)<\/abbr>/', $out, $lat);
$loc_lat = $lat[1];
preg_match('/<abbr class="longitude".*?>(.*?)<\/abbr>/', $out, $long);
$loc_long = $long[1];

I then pass my zip code to Yahoo’s weather feeds to get weather data. I also pass my GPS position to Google Maps Static API to get a map of where I am.

Another idea would be to show Flickr photos in your area via the Flickr API. I’m sure there are tons of other things that would be fun or useful. Come up with some more ideas and make some cool stuff.

Tags: , , , , ,
Posted in Web Development | Comments Off

« Older Entries