I took the time earlier in the week to write a html/javascript sudoku solver. This code could be either used to cheat at sudoku or used as a basis for creating an online sudoku game.

Either way, have fun: http://www.bizzeh.com/solver/

You can replace target=_blank with jquery, or prototype or with raw javascript if you like. Here is the code i came up with to do just this.

jQuery

$(function() {
	$('a[rel*=external]').click(function() {
		var w = window.open(this.href);
		if(!w) alert("Boo! A popup blocker stopped our window from opening");
		return false;
	});
});

Licence: BSD

This is a piece of code that i wrote for replacing the target=”_blank” for xhtml, as the target blank method of creating popup URLS for anchors within websites has been removed in xhtml 1.0. This code finds all links within a web page that have a href tag (an actual link) and that contain a rel=”external” tag (telling the element that the relationship to the current site is external), once it has done this it creates a dynamic function for the anchor and attaches it to the anchor. When a user clicks on the anchor, the script now attempts to create a new window and navigate to the url via the new window. If it is unable to create a new window, an alert will let the user know that a popup blocker has prevented the window from opening (unlike the rest of the scripts like this, which simply try and open the window and do nothing if it fails).

step 1. create a file named xhtmltb.js and paste the following code in to it.

function externalLinks() {
  //we need getElementsByTagName for this to work
  if (!document.getElementsByTagName) return;

  //get all the anchors within the document
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++) { //loop through all the anchors
    var anchor = anchors[i]; 

    //check to make sure that we have a href, so its a real hyperlink
    //and make sure that we have a ref and its set to external
    if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {

      //assign the dynamic function to the onclick event.
      anchor.onclick = function(x) {
        //store the variable so that we can actually use it within each function
        var p = x;
        return function() {
          var w = window.open(p); //try and open up a new window with the url
          if(!w) { //check to see if the window opened
            //let the user know that a window didnt open
            alert("A popup blocker seems to have blocked the window from opening");
          }

          //return false to make sure the browser doesnt navigate away in the current window also
          return false;
        }
      }(anchor.getAttribute("href")); //pass through the href for this anchor
    }
  }
} 

//make sure we only set everything up on load
//after the DOM has been inited
window.onload = externalLinks;

step 2. place it in the same directory as your html files.

step 3. add the following code into the head part of your html file.

<script type="text/javascript" src="xhtmltb.js"></script>

step 4. add rel=”external” to the anchor link, e.g.

<a href="http://www.bizzeh.com" rel="external">bizzeh's portfolio</a>

now you will notice that when you click on the links that have rel external, open up in a new window. though, this version will detect a window that did not open, due to a popup blocker and warn the user that the window did not open.

Licence: BSD

When you have large scale websites that span many servers, sometimes servers go down, and you get a missing image, even if the server is up, you can get corruption loading to a broken image that does not display correctly. This piece of javascript aims to fix broken images on each page load, giving an overall more profesional look. Quite simply, the javascript adds a hook into each image and checks to see if the image has loaded properly or not, and if not, a replacment images is put there instead to make sure that the missing image is auto-fixed for you and the site does not have any missing images.

step 1. add this piece of code as the very last thing before the body close tag within a <script> tag

  var i = 0;
  var img = new Image();
  for (i = 0; i < document.images.length; i++) {
    img = document.images[i];
    img.onerror = function (evt) {
      this.src = "soon.gif";
    }
  };

step 2. “soon.gif” image and drop it within the same directory as the file that is using the script (i.e. the root web directory)

now you will notice that when you have missing images within the site, they will now be replaced by “soon.gif”.

Notes. you can put the replacement image within a directory and use any filename you wish as long as you reflect the changes within the javascript.