Adding visual page breaks to your web page
Today I was working on a project where I needed to add some visual "page breaks" to the screen—very similar to the page breaks Microsoft Word shows in "Normal" view. The goal is for visual indicator to show on the screen, but actually trigger page breaks when printing.
After playing around with the HTML and CSS for a few minutes, here's what I came up with:
My BlogCFC mods for Windows Live Writer
When I re-launched my blog last year I mentioned that I made several changes to the XML-RPC code in order to make blogging from Windows Live Writer simpler. I didn't release the XML-RPC mods at the time, because I wanted to make sure they were nice and stable. Now that I've been using the mods for almost a year, I think their stable enough to share.
The changes I made most involved trying to simplify blog posting. My key objective was to try and avoid having to drop down to the "source code" mode altogether, but still be able to use the custom tags that BlogCFC supports such as the <more/>, <code> and <textblock> tags.
To solve this problem I build some parsing functions which look at the incoming HTML and look for these special tags written in escaped HTML. When it finds these tags, it then converts the escaped HTML into their unescaped format. This allows me to just cut-n-paste or type in my <code> blocks directly into Windows Live Writer and never have to go into "View Source" code. This means I can use the "Normal" (Design View) and just type into Live Writer:
<code>
<h1>Hello World!</h1>
</code>
To produce:
I can also just type in the <more/> tag into Live Writer in the place where I want to split text into two.
You may be wondering how I'm able to use the type in these special tags without the parsing functions picking them up. Since I knew I may want to actually blog these tags at some time, I build in some escape characters you can use to avoid processing and have the tags displayed correctly. In order to display one of the special tags, just write the tags with brackets (i.e. "[" and "]") just inside the < and > characters, for example: <[specialTag]>. This only works with the <code>, <more/> and <textblock> tags.
I have not tested this code with that latest BlogCFC code, but this should work with BlogCFC v5.9 (released Oct 12, 2007.) Either way, before implementing I recommend making a backup of your "xmlrpc" folder and even doing a diff on the folders to compare the changes.
The one change you'll need to make to your Live Writer setup, is you must add the query string "?parseMarkup=true" to your XML-RPC URL in order for BlogCFC to use the parsing functions. I did this to make it easy to toggle this functionality on or off on a per blog basis.
If you download my XML-RPC mods and use them, let me know how they work out for you! Perhaps if the mods are well received, I'll tidy them up even more to see if Raymond Camden wants to include them in the official release.
Using jQuery to determine if an element is a child of another element
I seem to be writing a lot of code as of late that needs to check if a certain element is a child of another element. This is extremely useful in drag and drop operations (for determine where an element is being dropped) or if you want to make sure that a global event was trigger on a specific set of elements (I use this to check if a document.click occurred on a specific container.)
While jQuery makes this easy enough to do, I don't find the code very readable or reusable so I started using the following snippet:
return (this.parents(b).length > 0);
};
What this does is checks to see if the current element is a child of the specified selector. For example:
$("#list > li > a").isChildOf("#list > li"); // return true
$("#list > li").isChildOf("#list > li > a"); // return false
This function definitely comes in handy when doing any sort of event delegation and I hope it eventually makes its way into the jQuery core in some form or another.
A quick and dirty swap() method for jQuery
A few weeks ago I needed a jQuery swap() function for some drag and drop code I was writing. While it would have been easy enough to whip up a quick little function, I found this little snippet courtesy of Brandon Aaron's blog:
b = jQuery(b)[0];
var a = this[0];
var t = a.parentNode.insertBefore(document.createTextNode(''), a);
b.parentNode.insertBefore(a, b);
t.parentNode.insertBefore(b, t);
t.parentNode.removeChild(t);
return this;
};
This particular method only works with the first DOM element in each of the jQuery objects. Using the code is easy enough, the following example would swap the first and last nodes in an unordered list who's id is "list".