DOCTYPE affects iframe scrollbar styles
Sep 18th
An application I am currently working on has been specifically targeted towards Internet Explorer and a technical design requirement is that the browser window the application is being run in is a fixed size. So inevitably, there will be scrolling.
As part of the design we decided to use a document divided up into sections using DIV tags and absolutely positioning rather than using frames all around. This leaves the primary content area of the application as an iframe taking up the majority of the page.
A week or so ago I put some styles in my CSS which were intended to color the scrollbars on the iframe. Oddly… this didn’t work. I didn’t really attempt to follow up on it until today, at which point I found an interesting solution.
Before, I had the following document definition in my HTML:
1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
I changed the definition to:
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
And now things work great. I’m not sure why, maybe when I get some time to look it up I’ll modify this post to reflect whatever reasons I find.
However, if you are having problems with your iframe scrollbars not taking your styles, this could help.
Assigning a CSS class to a dynamically created DOM element
Aug 27th
I recently discovered that Internet Explorer and Firefox don’t agree on the possibilities of assigning a CSS class to a dynamically created DOM element (created via JavaScript) using the “setAttribute” method. It took me a little time to figure out what was going on and how to fix it, so in the hopes that I can save someone else some time I decided to provide this post.
First, I should outline what I was trying to accomplish. I have a need for a web page which has completely dynamic display properties. During the use of the page many of the DOM elements will behave according to the user’s input, so I need to have each of them accessible in JavaScript. The goal is to have a page which can adjust, update and move all of its elements without ever reloading the page or any data which has already been loaded. The page is being written using .NET, JavaScript, (D)HTML and CSS.
Now, for the approach I decided to take. Since JavaScript will need to have access to all the elements anyhow, I decided the better approach would be to have a JavaScript object for each “module” that will exist in the page. This object carries some details about the object as well as a reference to a DOM object that will be associated with each module. The goal here is to keep from duplicating code, so I either write the DOM object in the HTML (and use server side logic to manage it) or I write it in JavaScript (and use the client’s memory to manage it), but not both.
My page is made up of three files, I’ve simplified them for illustrative purposes below…
My JavaScript source file, script.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | d = new Array(); d[0] = new Display("Header", "Header"); function initializeDisplays() { for (var i = 0; i < d.length; i++) { container = document.getElementById("FrameworkContainer"); d[i].dome = document.createElement("div"); d[i].dome.setAttribute("id", d[i].id); d[i].dome.setAttribute("class", "moduleBody"); d[i].dome.innerHTML = d[i].name; container.appendChild(d[i].dome); } } function Display(name, id) { this.name = name; this.id = id; } |
My CSS stylesheet, style.css:
1 2 3 | .moduleBody { color: Green; } |
And finally, my HTML file, test.html:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhmtl"> <head> <title>Test Page</title> <script type="text/javascript" src="script.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body onload="initializeDisplays();"> <div id="FrameworkContainer"></div> </body> </html> |
Now this code works fine in Firefox, the new div is loaded into the document as expected and the text is green, as expected. However, using the same code in IE provides slightly different results. The div is loaded as expected, but no styles are applied to it. The reason, is that IE doesn’t support the following line of code:
d[i].dome.setAttribute("class", "moduleBody");
Instead, IE demands you use the following syntax:
d[i].dome.className = "moduleBody";
Is it a big deal? No, not really. But it can still be very, very frustrating to find that IE has issues when applying styles to a dynamically created element which uses the consistent approach of setAttribute as a means to set a style class. You will probably find that the className property is the recommended approach in tutorials and will find that it works in most browsers, but being a stickler for consistency I tried a different approach and ended up with this article to show for it!
Spoofing your browser’s user agent
Aug 22nd
If you are a web developer (or anyone doing any programming which involves web browsers, which is just about everyone nowadays) you really are doing yourself a disservice if you don’t include Firefox in your toolbox for diagnosing issues and testing sites. The community provided Addons for Firefox are just invaluable in day to day tasks. A great example is the ability to spoof your browser’s user agent, pretending to be any browser you want, all from one browser.
My quest to do this started as a curiosity when I found a blog post titled “Search Engine Marketeers are the new script kiddies” discussing a WordPress blog which was hacked in such a way that it invisibly provided more traffic to the hacker’s site whenever a search engine bot crawled the site. The hack was pretty impressive, actually but more impressive was the ability for the blogger to diagnose what had happened and track down the culprit.
Having a few WordPress blogs of my own, I decided to look into checking mine for the same issues. It took me an hour or so of toying and poking around to get everything I needed, so I figured I would take a shot at documenting the steps that went into my adventure in the hopes that someone else would be able to get this done more quickly if they ever needed it. Plus… it will provide a reference for me when I inevitably do this on more computers in the future.
First, you’re going to need to get the User Agent Switcher Addon for Firefox (written by Chris Pederick). Installation should be fairly straight forward, so just click the button while in Firefox and let it do its thing.
Now for the part which took some searching…
The default installation of the Addon doesn’t provide a lot in the way of user agents to switch to. A couple of examples are all that are there, so in order to be really useful you’ll need to add agents of your own or find them somewhere. I found a very complete set of agents conveniently compiled into an XML file which can be imported into the Addon (Options > Options > User Agents > Import) over on Tech Patterns.
Once you have installed the Addon and loaded a complete set of user agents, you can test them out with the QuirksMode Browser Detect page.
There are a lot of uses for this ability, from security to verifying code which reacts to a specific browser. Whatever you use it for, hopefully this short guide made it easier to get your results.
Ajax Rain: A collection of JS / DHTML / AJAX code
Aug 20th
I remember a time… waaaaaay back in, oh… say… 1997 when the internet was really just starting to get “cool.” We would drink the latest caffeine laden beverage, take the latest “keep you wide-eyed” herbal supplement and write code until we were all convinced our hair was moving all over our skulls of its own volition. Back then, we would eagerly watch for the latest release notes for Netscape Navigator and relish any additions they made to JavaScript (bonus points for anyone who can remind me what the name of the scripting language was originally). As soon as a new change was in place we would attack it and put it somewhere… anywhere… on our sites. The code was raw, usually poorly formatted and documented and almost always protected by the author like it was going to be the next billion dollar idea.
That was then. In the ten years since that time we, as web developers, have evolved. Not quite far enough to exist only on a temporal plane but far enough to consider when writing code that other people may find it useful. No longer is the “cool” stuff of a proprietary variety. Now, developers more commonly take a little extra time to make their code understandable and customizable… then they do what was unthinkable ten years ago and (gasp) distribute it for free!
In steps Ajax Rain. A new resource style site that provides the coolest in JavaScript, DHTML and AJAX code for discerning veteran and budding rookie web developers alike. All of these snippets are downloadable for free and anyone can add their latest creation to the database.
So saddle up and ride some else’s code horse for a change. Quit reinventing the wheel (never mind that Good Year and Michelin continue to make millions doing exactly that) and get with the times. Go download and implement someone else’s code and take full credit for it yourself when praise is dished out at your next company picnic! After all… all the kids are doing it and they’re making you look lame in the process.
You too can thwart digital terrorism!
Aug 8th
Today, while researching some issues in our production environment… without having access to the production environment, data, error messages or logs… I stumbled across a really, really cool article over on the Wired blogs.
If you’re a fan of “24″ or any counter-terrorism / crime-fighting / detective fiction you’ve long been shown what the writers and set designers of the material consider “super top secret cool software” which in the end amounts to nothing more than rudimentary Flash animations on a Windows XP machine.
Now, however, according to this article we have all been given the source code to graphics processing software which will outline anything in the image or video which was added after the original filming or snapshot.
I won’t rehash the entire article here, you’d be much better off to head to the link above and check out the pictures and article credits… as things should be.
My first Wii experience
Dec 19th
I knew the day would come, it had to.
For a long, long time I have accused console games and the overlords who control them of ruining everything that was once sacred in video games. In a rush to make more money the big console companies would blitz right past all of the important things in games: fun, originality, playability, FUN; and instead focus on the quick fix items such as graphics and speed of play.
While graphics and speed of play are a necessary component to any great game, losing the fundamentals of what a game is, by definition, loses the purpose to have a game in the first place.
Then Nintendo decided to change everything. More after the flip…
Anti-war protests… Where are they?
Dec 14th
I stumbled across an article hosted on Slate today written by
France is in trouble
Dec 4th
This article actually started about three years ago, when a coworker and I were discussing the move by the French government to outlaw the word “e-mail.” At the time, in 2003, I found it very odd that a government would be taking such drastic measures against a seemingly low payoff end (there’s no way to enforce it and people are going to call it what they call it, regardless of what they should call it). During our very casual lunch conversation, I mentioned how odd I found this and a discussion began that intrigued me even more than the French government’s seemingly misplaced energy.
As it turns out, this coworker’s father was a very, very high ranking official in the U.S. military (yes, I verified it). As part of his responsibilities he maintained contact with officials from all European countries, including France. Not long before our discussion my coworker’s father had been discussing with his son the sad shape the French government was getting itself into.
According to him, France was losing all cultural identity. The constant concessions shown to special interest and minority groups had begun to give those groups powers which far outweighed their position within the society. In turn, the majority of the society was bearing the brunt of the loss of their power. The minority and special interest groups were holding much more sway than would normally rightfully be theirs.
After our discussion, my coworker revisted the issue with his father and mentioned our discussion. His father’s take on the issue was… again… interesting.
More >
Ray Beckerman interview
Nov 29th
Who is Ray Beckerman? He’s a lawyer attempting to defend people against the blanket, John Doe style lawsuits the RIAA is perpetrating all over the place. I’ve only kept up with this information in a general sense (compared to some others I know) but haven’t seen any information on the lawsuit side as detailed as what he provided in an interview he did with DefectiveByDesign.org.
Probably about 10 minutes of reading that will enlighten you to some pretty interesting stuff:
RIAA finally defeats allofmp3.com?
Nov 28th
In what can only be described as unsurprising the U.S. Government has released a document which outlines a new relationship with the Russian government that will rule how the two interact based on intellectual property.
I didn’t provide a link, because the one I found was a PDF. Check here if you would like to read it.
I’ll summarize as best I can without causing an unnecessary loss in interest to those who are barely hanging on anyway, but nothing beats reading the original for yourself if you are someone who is interested.
The gist of the document is that Russia has agreed to begin to more aggressively chase down and penalize the people who would allow others to gain what the U.S. government would consider “intellectual property.” The most interesting thing about the document, of course, is that on page two, the first bullet point specifically names allofmp3.com as a target. Among other interesting, valid and needed points it seems questionable that allofmp3.com would be specifically targeted. Anyone who has ever been to Russian can tell you about the rampant illegal CD sales that go on, surely there were factories making these illegal CD’s which could be named as well? Instead, those points are glossed over and vague enough to actually allow continued violations while allofmp3.com takes the brunt of a direct reference, assuring that they will be specifically targeted and made an example of.
While I would be hesitant to say that the negotiations are in direct response to RIAA’s repeated demands even in the face of Allofmp3′s repeated justification it is hard to ignore the constant crowing the RIAA does about the site. Why would the U.S. government have any interest in specifically naming allofmp3.com as an enemy unless it is because of the constant complaints from the RIAA?
Now don’t get me wrong. While I like the idea behind allofmp3 much better than the blatant ripoff (I’ll write an article about that soon enough) that is our DRM overlords, I think the idea has been taken to an extreme and as such doesn’t compensate artists properly (or at all, actually). As such, it isn’t an acceptable solution to everyone and some changes should be in order.
I guess this is just another case, building on the suing of minors and people who don’t even own computers, which points out the complete and utter failure which is the RIAA. At some point artists are going to realize that they can make much, much more money by selling the bandwidth to download their songs rather than paying the RIAA and its minions to market the songs for them. I, for one, will be glad when the money I spend on music goes directly to the artist who created it instead of the executives who greedily mark up the prices to distribute the music.
Do the math… the DRM controlled music you buy is a ripoff.