Tricks nd Tweaks: September 2016

Saturday, September 24, 2016

Better Broken Image Handling

Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible, because images that a browser can't find fire off an "error" JavaScript event we can watch for.

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Change WMode with jQuery

If you don't set the wmode on a flash embed it will float over the top of an overlay which can be a pretty big deal. This is ideal in environment with lots of legacy video code or where users will be posting new code and teaching them about wmode is a lost cause. This should work in all browsers.

$("embed").attr("wmode", "opaque");
var embedTag;
$("embed").each(function(i) {
       embedTag = $(this).attr("outerHTML");
       if ((embedTag != null) && (embedTag.length > 0)) {
               embedTag = embedTag.replace(/embed /gi, "embed wmode="opaque" ");
               $(this).attr("outerHTML", embedTag);
       } else {
               $(this).wrap("<div></div>");
       }
});

Saturday, September 17, 2016

Button to refresh web page

Allow visitors of your web page to interface with the browser reload function to get the latest information and to interface with other JavaScript's, such as ourrandom quote script.

Send viewer back to where they came from

Is your web page under construction or do you not want visitors, or want to make your visitor get a little mad? Copy this script that makes the browser go back to the page that the viewer came from.
<script type="text/javascript">
setTimeout("history.back();", 7000);
</script>

Disable mouse right-click

<script language="JavaScript" Type="text/javascript">
<!--
function popupMsg(theMsg) {
alert(theMsg);
}
//-->
</script>

Change background color depending on time of day

Create a random website background color every five seconds