Code snips

spacer gif
These are some Javascript and CSS code snips I have come across over time, and while none of them were written or developed by me I use them frequently in my sites. I have also been learning AppleScript and Automator Actions for OS X, which are both powerful ways to automate high level operations, and will post some of those here soon.

spacer gif
A fix for the “Flash of Unstyled Content:”

The Flash of Unstyled Content (FOUC) is the not very good appearing thing that happens with Safari when a user loads a web page and the first flash of the site is plain text without any styling, usually all skewed toward the left. Sometime graphics appear, sometimes not. But the flash of plain text looks bad until the style sheet is loaded and the page is redrawn, and then the site looks like it is supposed to look. The FOUC mostly seems to efect sites that load slowly because of server speed or user connectivity; but the FOUC looks bad (and appears unprofessonal to the obsessive among us.)

The fix is to force the style sheet to not take over until most of the page has been loaded, thanks to this solution from Jon Aquino. There are a few different methods, including one that works via PHP. But this is the one that works for me:

Put this in the <head> of your page:

<style type="text/css">body { display: none; }</style>

And then put this at the very bottom of your CSS file:

body { display: block; }

spacer gif

Frame Buster:

This snip of javascript in the <head> of your pages will break your site out of frames that enclose your page within another site. Adapted from a WordPress Plugin called FrameBuster from semiologic.com.

<script type="text/javascript">
<!--
try
{
var parent_location = new String(parent.location);
var top_location = new String(top.location);
var cur_location = new String(document.location);
parent_location = parent_location.toLowerCase();
top_location = top_location.toLowerCase();
cur_location = cur_location.toLowerCase();

if ( ( top_location != cur_location ) && parent_location.indexOf('{$home_url}') != 0 )
{
top.location.href = document.location.href;
}
}
catch ( err )
{
top.location.href = document.location.href;
}
//-->
</script>

spacer gif

Stop right click and select/drag/drop copying:

There are different methods for preventing right click copying and these work differently according to the browser. This combination of javascripts will make it a bit tougher to copy and paste by disabling right click menus.

<script type="text/javascript">
<!--
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->

function disSel(target){
if (typeof target.onselectstart!="undefined")
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined")
target.style.MozUserSelect="none"
else
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>

And then add this to the bottom of your page, just before the </body> tag:

<script type="text/javascript">
disSel(document.body)
</script>

spacer gif