Mark Brown - Web Standards & CSS

Menu’s built by javascript and Menu’s with text-decoration: blink;

If anyone is looking for a job in software development, you should strongly consider this software development position at pageup people

Please Contact me if you’re interested in finding out more - Or just go ahead and apply at the page above.

I’ve only been with pageup 3 months but i’m thoroughly enjoying my work.
The company itself is a rapidly growing one which specialises in creating web applications to help manage an organisations talent… What does that mean?
We offer recruitment and management tools to help employers get the right employees and to get the best out of those employees throughout their time within the organisation.

PageUp is made up of a very talented bunch of young employees with a wide range of skills.

The Development team is looking to find someone with an interest in back-end web development, a knowledge of ASP, .NET and SQL would be ideal - but if you feel you have something that you could add to the team - then what are you waiting for?

Having some fun with the html canvas element. linky linky

There’s many incarnations of lightbox js that have popularized this approach as a kind of dialog box.
It turns out it’s wonderfully simple to achieve in modern browsers:

<div id=“overlay”></div>
<div id=“dialog”>
  <p>Some content</p>
</div>

#overlay {
	position: fixed; /* A marvelous property */
	z-index: 100;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}
#dialog {
	height: 400px;
	width: 700px;
	margin: 0 auto;
	position: fixed;
	z-index:101;
	background: #F2F2F3;
	left: 50%;
	top: 50%;
	margin-top: -200px; /* half total height - could be scripted if unknown but css is smoother and cooler */
	margin-left: -350px; /* half total width */
}

With a bit of unobtrusive js to show/hide these two elements and wallah!

IE6 craziness:

/* IE6< fixed positioning - kind of */
* html #overlay, * html #dialog {
	position: absolute;
}
* html #dialog {
	top: expression(ignoreMe = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)+ (document.documentElement.clientHeight / 2));
}

It’s a little jumpy but all scripted versions of this kind of positioning have that effect.

Easy peasy Japanesey.

Firstly, PageUp People has a new website and it’s pretty sexy. The menu’s took some work to get right in IE6< - but nothing unusual there.

I have an interesting challenge at work at the moment, we are creating a new application that will act as a kind of portal for all the different applications we offer.
In this 'portal thingy', we'll have a collection of 'widgets'.
To allow for rapid development and customisation of these widgets we need to be able to create a new one simply by adding a new entry into the Widget table. This in itself poses interesting design challenges - You can't use background-images specific to any widget - they all need to be generic - The colors, number of rows, columns and amount of content is all unknown. It means that I can't use background images like I normally would.

As it turns out PNG 8's support for Alpha Transparency enables us to create some nice images with gradient highlights to make generic images sexier.
Using overflow to crop content and sizing all font's / padding in em's will mean we can control all aspects of the design from the CSS and a couple of inline widget-specific styles.

I'll put up an example at some point to put this in context.. But, PNG 8's alpha transparency has full support in all modern browsers except IE6< - But it degrades nicely in those browsers, all alpha channels are completely transparent similiar to .gif - on or off transparency. Similar to this Sitepoint example but a bit more complex.
I’ve had a quick look at using IE’s Alpha Image Loader filter to make the same thing work in IE6< but couldn’t seem to get it work..

If all goes well we’ll have an efficient widget making machine.

Prototype has been given the go-ahead for testing in page up admin system. Yay, as it makes my job more enjoyable.

May be more difficult than building it..

The rich text editor is built into an ASP ‘control’ so it can be re-used and customized server-side, currently all of the HTML for the textarea, iframe and toolbars are put into the page through this control depending on it’s properties. A script tag is embedded into the page just below this HTML and links to an ASP page and the js is customized depending on variables in the session.

<script type=“text/javascript” src=“functions.asp”></script>

This is a fairly hefty script and I imagine, not being able to cached would slow down the pages considerably.

Putting the new editor into this control was pretty straightforward, include the link to the javascript if the control is used. Edit the Draw() function to output:

<textarea name=“{id}”, id=“{id}” style=“height: {height}; width: {width};” class=“PURichText”>{content}</textarea>

Simple, change those things and correct the links to the css and images and it should just work..

And it did, in Firefox, Safari and Opera.. IE had soiled it’s undergarments though.
Ahhh, Quirks Mode!

The admin system was designed to work in Internet Explorer only, it was probably first built at a time when IE5.5 was the most widely used browser - And of course when IE6 came out it didn’t make much sense supporting two separate box models.

Don’t add a doctype and the page will continue to look the same in IE6 and any future releases of IE - it was probably the most logical choice at the time. But of course now, we know better

The only way to get cross-browser consistency and some of the more advanced features out the browser - you must render the page in standards-mode. So it seems incorporating the editor has put another task on my agenda. Fixing the styles across the whole admin system to work in standards-mode. This is a fairly big undertaking as the stylesheet is about 4000 lines and some of the styles are rendered out inline by the controls, so there will be lots of digging to fix all of the styling that was relying on IE’s buggy implementation.

It was interesting to see how badly the page broke just by adding the doctype.

After fixing the styling issues to work in Standards-mode and incorporating the editor, I will continue to make the rest of the controls and pages cross-browser compatible. It’s not a goal too unrealistic - The system as a whole is not all too far off being cross-browser, just A Lot of little things that are sometimes hard to get to.

document.all[] is used all over the place, so I just need to go through and add id’s to all the elements that were being referenced by name attribute alone - and change the document.all’s to document.getElementById()

Any traces of Active X controls need to be killed, burned and holy water sprinkled on the ashes.

Any attachEvent’s will need to become a cross-browser alternative.

Dialogs are opened using IE’s showModalDialog functions these all need to be replaced with the standard window.open method.

The innerText property is used to get just the textNode’s values from within an element, being IE only i’ll need to change any uses of this to a little DOM walking.

Just lots of little things.. may the force be with me.

The Rich Text Editor in all it’s glory..

One thing I haven’t figured out is how to register key event listeners on the iframe’s in Opera.
I managed to get editorKeyUpHandler being called in Safari and Firefox but haven’t yet tamed Opera - Any clues?

I am loving Prototype, as I’ve learnt more about it over the last week - I’ve updated the script to use more of it’s Class, DOM and Event functions. Writing cross-browser OO javascript has never been so easy.

The pageup website is about to get a facelift which is looking really good. Also, a section of the pageup people application named ‘the Hiring Manager Interface’ which is a subset of features of the app - Is soon to be put into a testing environment so my browser-compatible updates can be tested.

I’m enjoying my work at pageup, and enjoying doing more work with javascript.

finebynature had a nasty error message being displayed yesterday..

Fatal error: Cannot re-assign $this in /home2/finebyn/public_html/classes/cart.php on line 28

That was it, all that was displayed on the site.

My first thought was - I really should have provided a nice fallback page for fatal errors
Looking back at the offending line of code - i’m surprised it Ever worked in Any version of PHP.

class Cart() {
 
  function Cart() {
    session_start();
    if (empty($_SESSION[‘cart’])) {
      // init object and things..
      $_SESSION[‘cart’] = $this;
    }
    $this = $_SESSION[‘cart’];
  }
}

From within the objects constructor I was re-setting The Object that holds that constructor.
I fixed the problem by re-setting the properties of the object from those in the session and not the Whole object itself.

linky linky .. let me know what you think.

I’m finished with this little project now.

I ended up going back to a global array to hold references to the editors, IE made things difficult.
I also reverted to using inline javascript commands on the buttons in the toolbar as IE was losing the selection in the editor required for them to function properly. IE is on it’s ownsome in how it handles Selection and Range objects to give you information about text selections in a document. An iframe holds a separate document to holding page, There should be 2 documents and 2 active Selection Objects to play with if you have a webpage with an iframe in it.

If I were looking at re-writing this editor I would two distinct versions - one standard compliant and one IE version. The IE version would not use an iframe but use contentEditable - It’s the approach that WYMEditor takes.

Javascript is fun and frustrating.
My general rule is, do things ‘The Right Way’ and code to the standards - not to a browser, separate html/css/javascript completely, use the modern event model, use one code base - not browser sniffed alternatives. But I find I am always having to twist this perfect solution into a less elegant solution as javascript is ever reliant to the browser manufacture’or’er’e’s..

It’s fun because.. is a scripting language - And I hate waiting for things to compile.
It’s popular, free and with all the hype around web 2.0 it’s quite glamourous as far as IT jobs go.
Quick to develop, easy to share.. and easy to peek at the javascript kung’fu masters code
Collaborative - Frameworks etc..
I actually quite like it’s object model, the syntax is unique but it’s got a decent enough oo model to get things componentised and well structured.