baconbutty.com

Objective

I like to develop my JavaScript, CSS, and HTML using a 2-pane outliner, where my work is broken down into manageable chunks.

This is a link to a screen-shot of what I am referring to: Code Editing in 2-Pane Outliner.

I thought it might be useful if I could present examples of JavaScript etc on this web site in a similar manner, rather than just in a single large .js file.

Solution

I have accordingly come up with a way of doing this, in a way which degrades nicely I hope; or rather, in a way which builds up reasonably, from HTML, to CSS, to JavaScript.

I have only tested this method in Internet Explorer 6, Firefox 1.5 and Opera 9 (being the only browsers currently available to me) so I would be interested to hear whether there are any problems in other browsers.

The basic HTML looks like this:-

<div id="eb_note">

<!-- HEADING -->
<h1 class="eb_note_title">Note Heading</h1>

<!-- INDEX -->
<div id="eb_index" class="eb_index" noWrap=true>
<h2 class="eb_index_title">Index</h2>
<ul class="eb_index_contents">
        <li class="eb_section_li" id="S0_tree"><a class="eb_section_index" sectionId="S0" href="#S0" name="S0_index" id ="S0_index" >html</a></li>
</ul>
</div>

<!-- SECTIONS -->
<div id="eb_sections" class="eb_sections">
<h2 class="eb_sections_title">Sections</h2>

    <div class="eb_section" id="S0">
    	<h3 class="eb_section_name" id="S0_name"><a href="#S0_index" name="S0">html</a></h3>
        <div class="eb_page">
 	       <h4 class="eb_page_name" page="0" id="S0_page0_name">Code</h4>
 	       <div class="eb_page_contents" id="S0_page0_contents" format="Text"><pre>&lt;html&gt; </pre></div>
        </div>
        <div class="eb_page">
 	       <h4 class="eb_page_name" page="1" id="S0_page1_name">Notes</h4>
 	       <div class="eb_page_contents" id="S0_page1_contents" format="HTML"></div>
        </div>
    </div>
</div>

</div>

To trigger the JavaScript, the query string has to have &js=yes added to it, so it is optional whether you want all the fancy script, or just a single plain page.

Examples

Here are some examples for you to try out:-

Example 1 - public.js

This is the file which my blog entries load to provide some JavaScript functionality for CodePlay etc.

public.js without script

public.js with script

Example 2 - sweetButty.js

This is the script from my Sweetbutty entry:-

sweetButty.js without script

sweetButty.js with script

Browser Headaches

For such a simple sounding task, the JavaScript and cross-browser CSS requirements proved to be a challenge; which illustrates that the price of standards and a free web is inconsistent implementations; a price worth paying I believe, but a high price nevertheless.

The only thing I would say is that Internet Explorer was, I found, the most reliable from a rendering point of view; and Internet Explorer beats the field for window resizing. Both Opera and Firefox showed some surprising rough edges in their CSS rendering when I pushed them to their limits, and in odd situations, that Internet Explorer didn't.

Shrink to Fit

For instance, in Firefox, the overflow/shrink-to-fit rules get all messed-up when you click on an a element in my index. See what happens when you click on an index element with &js=yes and the index pane width set smaller than the element you are clicking to see what I mean. I have not solved this problem yet, but grr to Firefox for such a silly bug.

Switch

Another wierd behaviour I spotted was with the switch statement and undefined. If you pass an undefined variable to a switch, it will match the first undefined variable in a case statement.

var a;
var b;

switch(a)
{
	case b:
		alert("there");
		break;

	default:
		alert("here");
		break;
}

Back Button

I thought I would use the back and forward buttons to provide a mechanism for navigating the history of each item you visit within the outline.

It proved too complicated to implement. Firefox and Opera were fine: they would both allow me to use the basic history polling concept to see if the window.location.hash had changed. But Internet Explorer's window.location.hash property does not change when you press the back or forward buttons, even though the address bar does; it is only updated when you click on an anchor. I looked at the IFrame solutions for Internet Explorer but they did not seem feasable, because you cannot use the same url as the page.

So I have implemented an in-page back and forwards functionality.

If anyone knows any really good solutions for IE, I am all ears.

InnerHTML

When used in Internet Explorer it seems to wreck the shrink to fit rules for position:absolute. See the menus for the back and forwards buttons.

Future Developments

I think for the future I need to get a handle on the Back and Forward buttons, and provide some internal linkage within the various sections of the note.