Welcome to my temporary page.
Hi there. I've been working on getting together a proper
page for myself (finally), and while in the process I've run into a
number of frustrations which have led me to cook up some JavaScript
which might be of interest to others. So, without further ado, here's
my code so far. (Oh, and the stuff on this page will probably move
to somewhere else on my site soon ...) If you want to read about me,
scroll past the JS stuff.
Summary (ADD / Executive): Provides a
clean way to include Javascript into pages without significant markup,
thus lending itself to theme-specific script etc... while still
ensuring the code is fully loaded prior to execution.
Background: I built mtjs_loader.js because,
coming from a C/C++ development background, I'm used to being able
to stash frequently used code in libraries, which has many merits. In
JavaScript-land, this presented a problem. I wasn't happy with
cluttering the top of all my markup with loads of <script> tags for
each file, especially since I wanted to be able to have CSS theme-specific
JS. I tried the well-published [citation needed] approach of dynamically
generating script nodes in the header and populating their src property, but
that fell apart when it turned out that some browsers (cough-cough-IE-cough)
apparently don't wait for dynamically added scripts to load before firing
off the onload functions. The quick solution would have been to check for
globals defined in all my included scripts at onload-execution-time, but
that would mean I'd have to pollute any JS I wanted to use in that manner.
Yuck. So, I coded up an alternate approach.
How it works: The loader starts work
as soon as it is loaded into the page. The first thing it does is to
retrieve another segment of JavaScript from the server which functions as a
configuration file. The path for this file is derived from the path to the
page in which the loader was included. Once it's retrieved, include
statements within it prompt the loading of further files, as desired. All
of the transfers are conducted via
XHR
calls and, as such, are asynchronous, but the actual inclusion into the
webpage is forced to be sequential.
How to use it:
- Place the following inside the <head> tag of your
page:
<script type="text/javascript" src="/[path to it]/mtjs_loader.js">
</script>
The "[path to it]" should be replaced with the path to where you
place the mtjs_loader.js on your webserver.
- Set the <body> onload function to mtjs_loader.onloader()
like this:
<body onload="mtjs_loader.onloader();">
This step is important because it allows the loader to delay the
triggering of your onload code until all the code segments are properly
included.
- Create a file in the same directory (folder) as the page in
question with the same name except with anything from a period to the end removed and then
"_includer.js" appended to it. For example, "index.html" would have an
includer file called "index_includer.js". This file should contain:
- The definition of a function (of any name) to call at onload
- A call to designate the onload function:
mtjs_loader.set_onload("[JS onload function name]");
- Optional: Include statements for regular JS files:
mtjs_loader.include("[JS file path]");
At least one of either this call or the next should be present, otherwise
there's not much point to using this script.
- Optional: Include statements for JS files stored in a library folder (this is
just a simple shortcut to make path headaches easier):
mtjs_loader.lib_include("[JS file name]");
- Optional: A library path definition statement:
mtjs_loader.set_lib_path("[JS library path]");
Without this call the path will default to "/jslib/".
- Enjoy.
Version: The first release... so let's call it 1.0
Status: Stable (as far as I know)
Limitations: As XHR is used to load
the extra files, the normal security restrictions imposed by its use apply.
The result is that all files included must be within the
same domain as the page they're loaded into. XHR was not used for
trendiness, as it serves the purpose of providing positive confirmation upon
receipt of the external files, which in turn facilitates the rest of the
script's operations.
Bug Reporting/Suggestions/Patches:
For bugs, just shoot me an email to mtjs at this domain. If you've got
suggestions, patches to improve it, etc... please also feel free to send
those along too.
Known bugs: None right now...
To Do:
- Increased flexibility for the includer file would be nice, to make
dynamically generated include lists easier.
- I was considering nested including support, but that leads to many
more problems than it's worth.
Legal: To save headaches for everyone,
especially me, I've decided to put this out under an
MIT-style
license.
Summary (ADD / Executive): As IE6
requires external DirectX calls to properly handle PNG transparency, this
script provides basic handling of PNG background images without making a mess
of the page. For more extensive support, pair this with
mtjs_iepnghandler.js.
Background: In a much-lamented
turn of events within the web development community, Microsoft did not
include native handling of PNG transparency in IE6. Instead, they require
the use of an external DirectX call to approximate the effect. As a result,
one can either include non-standard CSS in one's page to accommodate their
demands, go without PNG transparency (and, let's face it, GIFs are not
really a viable alternative), or use some kind of scripted solution. That
said, here's what should be considered Stage 1 of my solution. This handles
PNG background images in basic situations, such as positioned at the origin,
and non-repeating. For more extensive support, add on
mtjs_iepnghandler.js, and they will
happily work together to solve your problems.
How it works: mtjs_csswalker_iepnghandler.js
plugs into
mtjs_csswalker.js, rather than
traversing the style tree itself. If it's invoked from IE5-6, it processes nodes
which have PNGs set as their backgrounds, adding CSS rules to handle the simple
cases and storing information about the rest for use by
mtjs_iepnghandler.js if it's available.
How to use it:
- Include mtjs_csswalker.js
into your page. This can be accomplished via
mtjs_loader.js:
mtjs_loader.lib_include("mtjs_csswalker.js");
(assuming it's in your jslib directory/folder otherwise use a regular
mtjs_loader.include call) or a normal <script> tag:
<script type="text/javascript" src="/[path to it]/mtjs_csswalker.js">
</script>
- Include mtjs_css_util.js.
Again, this can be accomplished via
mtjs_loader.js:
mtjs_loader.lib_include("mtjs_css_util.js");
(same assumption holds here) or a normal <script> tag:
<script type="text/javascript" src="/[path to it]/mtjs_css_util.js">
</script>
- Include mtjs_csswalker_iepnghandler.js.
Once more, you can do:
mtjs_loader.lib_include("mtjs_csswalker_iepnghandler.js");
or a normal <script> tag:
<script type="text/javascript" src="/[path to it]/mtjs_csswalker_iepnghandler.js">
</script>
- Add a client entry for mtjs_csswalker_iepnghandler into
mtjs_csswalker.js like this:
mtjs_csswalker.add_client(new mtjs_csswalker_iepnghandler());
- During onload execution, and after any other
mtjs_csswalker.js client
scripts have been added, trigger the walker:
mtjs_csswalker.walk();
Version: 1.0
Status: Stable
Limitations:As stated above, this
script only handles non-positioned, non-repeated PNG backgrounds. Add on
mtjs_iepnghandler.js for nearly
comprehensive PNG support.
Bug Reporting/Suggestions/Patches:
For bugs, just shoot me an email to mtjs at this domain. If you've got
suggestions, patches to improve it, etc... please also feel free to send
those along too.
Known bugs: None
To Do:
- Wait for bug reports... and then fix them.
August 27, 2008:
Two important things to mention:
August 12, 2008:
I've now added a stand-alone, easier-to-use version below. See
mtjs_iepnghandler_solo.js
if you want that kind of thing.
Summary (ADD / Executive): Supplements
mtjs_csswalker_iepnghandler.js's
efforts with much more complex operations, yielding nearly comprehensive PNG
support for IE6.
Background:As my own
mtjs_csswalker_iepnghandler.js
only handles basic PNG background scenarios in IE6, and the other fix
scripts I'd found all seemed to be missing some element of functionality I
wanted, I built a follow-up add-on script. This script strives to offer a
comprehensive solution for PNG usage in IE6 when paired with
mtjs_csswalker_iepnghandler.js.
In this script image tags are supported, both with and
without a blank spacer GIF, and background image PNGs may be positioned, as well as
repeated, even if they're smaller than the content element they're
in. Also, the repeat functionality is implemented to provide
true repeat functionality, rather than just stretching
everything willy-nilly.
How it works: mtjs_iepnghandler.js
traverses the DOM, making adjustments where it runs into PNGs. The
methods used depend on whether a PNG is in use as an image, or as a
background, and, if it's a background, whether it is repeated or positioned.
The script also takes into account the dimensions of the PNG to make
intelligent decisions about how to implement repeats. It should be
noted that, like
mtjs_csswalker_iepnghandler.js,
the script just sits quietly and does nothing on browsers other than IE5-6.
How to use it:
- After the first three steps of the instructions for
mtjs_csswalker_iepnghandler.js,
include this script and
mtjs_dom_util.js
as well. This can be accomplished via
mtjs_loader.js:
mtjs_loader.lib_include("mtjs_dom_util.js");
mtjs_loader.lib_include("mtjs_iepnghandler.js");
(assuming they're in your jslib directory/folder otherwise use a regular
mtjs_loader.include call) or a normal <script> tag:
<script type="text/javascript" src="/[path to it]/mtjs_dom_util.js">
</script>
<script type="text/javascript" src="/[path to it]/mtjs_iepnghandler.js">
</script>
- Optional: If you want the script to use the blank-GIF
technique for image tag handling, configure the URL for the blank GIF in
question like this:
mtjs_iepnghandler.set_blank('[url]');
- After all the steps associated with
mtjs_csswalker_iepnghandler.js,
start mtjs_iepnghandler.js's walk method:
mtjs_iepnghandler.walk();
- If something breaks, please send a bug report to
mtjs at this domain. I'd quite
appreciate the feedback.
Version: 1.0
Status: Stable (Mostly)
Limitations: Due to the obscenely
complex nature of this script, and the root problem's nature itself, there
are a few constraints that need to be understood. First, as this modifies
the DOM extensively, things will not necessarily be where you left them.
This is an important thing to realize when crafting CSS selector statements
to be applied after the initial page load, as well as when walking the DOM
after it has been run. That said, the script won't mangle element ID
attributes, so accessing PNG-related elements via that method makes sense.
Also, at the present time, mtjs_iepnghandler does not include functionality
to reprocess elements after its initial run. This will definitely be a "To
Do" feature for the future, but as it's not there now, avoiding PNGs in
dynamically added content might be a good idea. On a related issue,
the script also currently doesn't handle hover-based background changes.
I'll hopefully have this added in the not too terribly distant future.
Finally, on a practical note, while the script will happily use whatever
size PNG is provided it is strongly recommended that,
for repeating backgrounds, PNG dimensions be either 1px or greater than
approximately 100px. (i.e. 1x200 would be good, 200x1 would be as
well, 1x1 would have limited use, but fine, 150x150 would be great, and
4x4 would just be a really bad idea.) Trust me, the browsers rendering your
page will be FAR happier that way.
Bug Reporting/Suggestions/Patches:
For bugs, just shoot me an email to mtjs at this domain. If you've got
suggestions, patches to improve it, etc... please also feel free to send
those along too.
Known bugs: I'm not sure I really
feel this is a bug, but my method for determining percent and named background
positions yields very slightly different results from the IE6 layout engine.
Let me know if this really gets to be a problem, as right
now I'm not giving this any priority.
To Do:
- Add event triggers and reprocessing hooks.
- Also, add onmouseover, etc... event handlers to replicate hover
behavior.
Solution Comparison: Now that my
PNG fix is largely operational, I thought it'd be neat/handy to see how it
stacks up against the other PNG fixes out there. While this section is by
no means meant to be taken as an attempt at an unbiased comparison, I do
want to point out the XHTML and CSS in question (that I'd made up for the
real version of my page, which I'll hopefully have up soon) render fine in
standards-compliant browsers, validate, and have in no way been tailored to
provide my script an advantage. They existed in their current form before I
started coding it, so it's more that they provided a rigorous functional
requirement that I designed to, rather than being something I'd adjusted
after the fact. I'd like to stress that all these variants are using the
same graphics, and the CSS/XHTML has been kept as much the same as possible
while bringing in these different solutions. Also, hopefully all these
pages will look the same in non-PNG-buggy browsers .... except possibly
recent Opera. I don't know what they're up to over there but I don't like
the smell of it.
So, fire up the crusty old IE6 and
check out the different behaviors.
- For the sake of a nice, scientific control, here's a vanilla version
of the page in question without any PNG fix applied. I should note,
however, that this version (as well as the other example pages) does have
an IE layout fix I've been working on included, but that's definitely not
ready for prime time, so I recommend against using it.
[CLICK]
- Among the fixes, let's start with Angus Turnbull's
iepngfix 1.0. This
was the first PNG fix I'd run across, and I'd used it on a friend's page. I
was impressed with how smoothly it plugs into IE, but was dismayed that I
couldn't use it without either breaking my CSS validation or loading a sheet
conditionally. Also, it didn't handle background position and repeats.
(Yes, I know his 2.0 is out now, keep reading.) Anyway, somehow, here it
also impacts the layout ... odd, no?
[CLICK]
- The next fix I'd run across was Unit Interactive: Labs'
unitpngfix.
Well, given that this one advertises repeat support etc... (though
apparently through scaling), it seemed promising. However, it doesn't
play nicely with other scripts, since it takes over the onload event.
I've gotten it working here, but only after
some modifications to how it's invoked. My apologies to Unit
Interactive for not being able to include it in an untainted manner,
but it just straight-up didn't work otherwise. Either way though, it
doesn't handle a number of the scenarios I needed I'm afraid.
[CLICK]
- From the UI:L page I'd been reminded of the "sleight family" of fixes.
For the sake of brevity I'm only including a demo of Drew McLellan's
SuperSleight, though I do not mean that as lack of respect for
Youngpup's pioneering efforts. As you
may have already guessed from the scripts represented here, I'm limiting
this overview to those that have some degree of background image handling.
Anyway, back to covering SuperSleight. Frankly, I like it. I especially
like how polite it tries to be in terms of the onload attachment.
Unfortunately, with my tendency towards the complex, my page layout really
needs proper positioning and repeat support.
[CLICK]
- Now, as many of you were probably about to point out a
little earlier, Angus Turnbull has recently released an alpha his
2.0
version. I only ran across this after I was mostly done with my own,
and I might not have bothered starting mine if the timing between the two
had been different. I'm quite impressed with how elegantly his handles
dynamic updates. However, that said, he seems to suffer from an opposite
affliction to my own - he makes things too simple. All repeating
backgrounds are processed the same way. So, unlike my solution, which
tiles where appropriate, but handles 1px widthed or heighted (yes, the
English is taking a beating) images efficiently by way of the scaling mode
in the all-important filter, his still attempts to tile them. On my IE6
box, this leads to none-to-pleasant results, though I suspect that may vary
based on system resources. [CLICK]
- Finally, let's address why you're even reading this in the first place.
With just enough further ado to point out that the truncation of
the word "Disambiguation" is a result of a bug in the layout fixing script I
mentioned earlier, and not a bug in the
pnghandler, I present to you a demonstration of mtjs_iepnghandler.js, and
friends. [CLICK]
August 27, 2008:
Two important things to mention:
Summary (ADD / Executive): Stand-alone version of
mtjs_iepnghandler.js. Just plug
it in and call mtjs_iepnghandler_solo.go();
Background: After release of
mtjs_iepnghandler.js there
appeared to be interest in a simpler, standalone version.
This is it. There's a demo page
here.
How it works: This works almost
exactly the same way as the modular version above.
How to use it:
- Include it in your page.
<script type="text/javascript"
src="/[path to it]/mtjs_iepnghandler_solo.js"></script>
- Call mtjs_iepnghandler_solo.go(); either as your onload function
<body onload="mtjs_iepnghandler_solo.go();">
or call it from your existing onload function.
- That's it.
Version: 1.0
Status: Stable (Mostly)
Summary (ADD / Executive): Provides a
number of miscellaneous CSS processing functions.
Background: A number of pieces of
code I was writing had similar CSS operations needs, so I gathered the
common functions together into this (for lack of a better word) library.
This is predominantly here as a support file for my other releases,
so I'll keep the rest of this section brief.
Version: 1.0
Status: Stable (Mostly)
Bug Reporting/Suggestions/Patches:
(In case it's not already obvious, the reporting procedure for any
of these things is the same for all the JavaScript I'm putting out there ...
send email to mtjs at this domain.
Limitations: As I've not really
QAed this as a general purpose library, there could be a large number of
bugs that my present use of it hasn't uncovered. So, it may break
spectacularly if used for other things.
Known Bugs: See above.
Summary (ADD / Executive):
Implements a CSS tree traversal framework into which client code segments
can connect.
Background: I didn't want to have
multiple scripts all traversing the CSS tree each on their own
behalfs, so I wrote this generic walker which accepts notification regexes
from plug-in scripts. When the selector matches the registered regex for
the client code, the selector text and rule text are handed off to it.
Version: 1.0
Status: Stable (Mostly)
Limitations: As I've not really
Unfortunately, many plugins depend on what's in the rule segments of the CSS tree
so, for that case, the pre-check regex works out to be less than useless.
Known Bugs: See above.
Summary (ADD / Executive): Echoing
mtjs_css_util.js, this provides a
number of miscellaneous DOM processing functions.
Version: 1.0
Status: Stable (Mostly)
Summary (ADD / Executive): A
uni-directional broadcast list for news of updates to existing MTJS scripts and
announcements of new ones. Addresses won't be traded, sold, leased, etc... Promise.
Why?: Right now if you search for
"micah tischler" on the web a number of results come up. As a bunch
of them are very much not me, it seems perhaps I should clarify the
situation.
Not-Me References:
- A Micah Tischler on Facebook.
I don't have a Facebook presence at all myself, though I'm sure
we'd have some interesting confusion if I did.
- A Michael Tischler zoominfo which demonstrates how evil
SEO can be as it comes back highly ranked.
- A Micah Tischler who appparently "coach"es the Conejo Valley Youth Orchestras.
- A Micah Tischler who graduated from The Phelps School in 2004.
- A Micah Tischler who is the Executive VP of a
Jewish youth group.
- What is probably the same Micah Tischler as the one on
Facebook also exists on Xanga.
Oh-Yeah-That's-Me Stuff:
- A script I wrote to generate Sandisk Sansa e2x0-series
playlists comes up pretty early.
- The Sansa script pops up again here
at "Grant's Linux/Sansa-e200 Page." I built a vastly improved
Sansa tool a while back ... I guess I should probably release it. Soon.
- I'm also the Micah Tischler mentioned on Scott Murry's
art pages. He
gave me a graphic of what he wanted and I built it for him.
Check his stuff out. It's good.
- In one non-web reference that might be of interest, I *am*
the mtischler mentioned in the
/usr/raptor/bin/whatver output when run against a
number of Axent/Symantec Raptor-derived products.