DigitalBonsai

File : Static Table Head

Includes : Static Table Head Javascript

There is a problem with large tables on web pages. When scrolling into the table, the table headers scroll out of the viewport. It has been suggested to give the headers a position value of "fixed", but what if there are headers for both x and y values? Unfortunately, there is no position : fixed-x or fixed-y value. The desired effect is a table header that only scrolls to one dimension.

The solution was to separate the headers from the table and use an onscroll event on the table. As the table's scroll position changed, the inverse margin position of the header was applied. For example, if the table scrolled 100px to the right, the header would shift 100px to the left, appearing to travel with the table.

Unfortunately, this means separating the headers from the table content, which does not make for semantic markup for the sake of a useful visual effect. I suppose a solution for this would be in the direction of fixing the position of the individual header cells and adjusting them to table cell scroll positions.

It's the first annual CSS Naked Day!

Yep. If you're wondering why you're not seeing the design on this site, take a look at the calendar. If it's April 5th, it's CSS Naked day. (if it's not, please send me an email and I'll fix that right quick)

It's the day to take a look at how your page is organized and see how well your site separates content from design by removing stylesheet information for a day. I'm sure many of the CSS based code experiments in here break down as they're experiments with stylesheets, but I'm hoping the more Javascript/DOM focused projects still work.

So, show us your text.

File : HTML Select

Includes : HTML Select Javascript

Building on the Dynamic DOM Attributes and Events page, I'm experimenting with retrieving text ranges to store pre-set span ids.

File : DOM Attributes and Event Registration
Includes : Dynamic Attribute and Event Handling Javascript

There's been this issue of how to add attribute information to an object that may be generated dynamically and only where it is necessary at any given time. In this situation, I have a paragraphs with a series of spans in them. Each sentence or sentence fragment is in its own span. I wanted to be able to click on a span and generate a unique id and add some javascript events to it without having to write out the ids or javascript on each span all at once.

» Read More

I've decided to separate the progress text from the functions and place them in a weblog. I'm using Nucleus CMS to handle this and I think I have the stylesheets more or less how I want them.

I'll add the entries with backlogged dates to reflect the timeframe when the page/functions were tested.

File : Importing XML and applying XSLT
Includes : XSLT Processor Javascript, XHR Javascript

Current project under development : import an XML file along with an XSLT transform via XHR and apply the transform post-import. I'll display the getTime() - milliseconds from Jan 1, 1970 UTC - to track the timing.

I'll be using the xhrRequest() function that I used in the Multiple XHR example for XMLHttpRequest capable browsers (Mozilla, Netscape, IE7?, etc). In fact, I'll probably be using that function for my AJAX functions from here on in. For IE6 (ActiveXObject), I'm using the simple load feature.

There will also be an attempt to print just a portion of the webpage. ie. print just the div containing the imported and transformed xml. I'll have to create an <object> and write the imported html to it. From there, printing the object contents shouldn't be a problem. Note, iFrame does this as well, but XHTML 1.1 dropped the iframe tag. Instead, uses the object tag.

Here's the working code so far, sans object and print functions:

Note : Safari does not support XSLT yet.

» Read More

File : xhrmulti.php
Includes : Multi-XHR request Javascript, XHR Javascript

As it turns out, simply declaring the variable local to the creatXMLHttp request function and passing it to the calling function directly was all that I needed. I revised the xhrmulti.php to reflect that. I do the onstatechange handling in the calling function, but that's just an extra if statement.

Here's the code for the new xhrRequest() function and a calling function, doSomething():

» Read More

I have a way to get around the single http_request resource and multiple requests to it. It still uses it as a global variable, but as an array. In a nutshell, it goes through the array and finds an available resource. If there isn't one, it creates a new one.

Here's the code:

» Read More

File : PHP based stylesheets

When I finished reading The Zen of CSS Design I was excited about the use of IE hacks to apply browser specific styles in one stylesheet. No Javascript required to detect browsers and deliver one of many stylesheets. I found maintaining multiple stylesheets cumbersome. I'd always forget to update one of them. I started using the IE hack until I downloaded IE7 beta recently which breaks the hack, but still doesn't comply to standards enough to work like Firefox or Safari.

So, sufficiently annoyed at the idea of going back to multiple stylesheets, I started looking for a way to do PHP detection of the browser (as I mainly work with PHP enabled webhosting services). I figure at least then I don't have to build a "default" stylesheet in case the client had Javascript disabled. It then occurred to me that as I could change a php document's header type to text/xml as I've been doing with AJAX result generation, I should be able to change the header type to text/css just as easily. If I could do that, instead of maintaining multiple stylesheets with php selecting among them, I could use one stylesheet generated by php code by using the text/css mime type.

I used the following code to set up the page. I forget at the moment the URL where I found it originally. I promise to post it as soon as I can find it. I was searching for "PHP Browser Detection".

» Read More

When this page started up, it was just a test file for some DHTML and AJAX with just a text field. Functions were added and it turned into one with spiffy functions, but pretty ugly. The next step was to see the design possibilities with CSS given strict coding standards. A clean and basic layout was put together and the CSS is almost compliant. Opacity and alpha filters still aren't considered within CSS specifications, but work in Internet Explorer, Firefox and Safari. It has yet to be tested in Opera.

Currently, there are three samples: Swap Blocks, Change CSS and Import. There will be more added as things come up. To view the functions within the files, Javascript must be enabled. Server side scripting will be kept to a minimum so the source will be available.

All efforts will be made to keep this page XHTML 1.1 compliant according to W3C standards.