FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » Javascript » Javascript Snippet to Add HTML, CSS, and FEED Validation Links

by comment

Javascript Techniques to add HTML, CSS, FEED, validation

Here's an example of validation links from the AskApache footer.

RSS | XHTML 1.1 | CSS 2.1

document.getElementById("validat").innerHTML += ' | <a href="http://feedvalidator.org/check.cgi?url=http://www.askapache.com/feed/">RSS</a>  | <a href="http://validator.w3.org/check/referer?ss=1;outline=1;sp=1;debug">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=0">CSS 2.1</a>';

Main Javascript Object

Now here's the object that contains all the functions and variables. This is smart to do as a function (all javascript really) because it makes it much safer as it won't conflict with other scripts or having naming collisions. And portable code is always something to strive for.

var AskApacheJS = new Object({

  /* Runs on page load.  Initializes ajs as being an alias for AskApacheJS,
  * and runs the append_validation_links function after 5 seconds. */
  _init: function () {
    /*console.log('Running _init');*/
    window.ajs = this;
    setTimeout(ajs.append_validation_links, 5000);
  },

  append_validation_links: function () {
    var ac=ajs.gi('validatelinks');

    if(ac) {
      var url=encodeURI(window.location).toString().replace(/&/g,"&");

      ac.innerHTML =
        "<a href="http://jigsaw.w3.org/css-validator/check/referer?warning=0&profile=css21&warning=1"></a> | "
      + "<a href="http://validator.w3.org/feed/check.cgi?url="+url+""></a> | "
      + "<a href="http://validator.w3.org/check/referer?ss=1;outline=1;sp=1;debug"></a> | "
      + "<a href="http://validator.w3.org/checklink?check=Check&hide_type=all&summary=on&uri="+url+""></a> | "
      + "<a href="http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=-1&url1="+url+""></a> | "
      + "<a href="http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=2&url1="+url+""></a>";
    }
  },

  /* gi stands for get item, and returns an element by id. Very robust: if it cant find the object it logs to the console. */
  gi: function (B) {
    /*console.log('Running gi '+B);*/
    try {var b = document.getElementById(B);}
    catch(e1) {b = null;try {b = document.all(B);}
    catch(e2) {b = null;try {b = document.layers[B];}
    catch(e3) {b = null;}}}
    return (ajs.isobj(b)) ? b : ajs.er("ERR gi " + B);
  },

  /* This function writes the passed msg to the console as type 'error'
  *  and then returns false since it was afterall an error. */
  er: function (msg) { console.error(msg); return false; },

  /* Returns true or false based on whether the passed item was an object, used by gi. */
  isobj: function (_1e) { return (typeof _1e != "undefined" && typeof _1e === "object") ? true : false;  }
});

Initialize the Object

;(function () {
  if (!window.ajs)var ajs=AskApacheJS;window.ajs=ajs=AskApacheJS;
  try{ajs._init();}catch(e){AskApacheJS._init();}
})();

FireBug Logging

First things first, this sets up all the logging and debugging needed. This lets you control debugging output displayed in the console used by debuggers like FireBug. Add this to the very top of your javascript.

if(!this["console"]){this.console = {};}
var i=0,tn,cn=["assert","count","debug","dir","dirxml","error","group","groupEnd","info",
"profile","profileEnd","time","timeEnd","trace","warn","log"];
while ((tn = cn[i++])) {
  if (!console[tn]) {
    (function () { var a = tn + "", console[a] = ("log" in console) ?
    function(){var a=tn+"";console[a]=("log" in console) ?
    function(){var b=Array.apply({},arguments);b.unshift(a+":");
    console["log"](b.join(" "))} : function(){}})()
  }
};

Turning On/Off Debugging

It's useful to quickly be able to switch between having the console logging turned on or off. The downside to keeping it on of course is overhead. Here's a very simple method that I use, advanced users use more sophisticated methods than this. Here are the regexes (Adobe CS4 DreamWeaver).

# To turn console logging on
Search for: /*console.log([^;]*);*/
Replace with: console.log$1;

# To turn console logging off
console.log([^;]*);
/*console.log$1;*/

Console Logging Commented Out

Here's an example of howto log the isobj function from the above object. isobj: function (_1e) { /*@console@*console.log('Running isobj ');**@console@*/ return (typeof _1e != ajs.undefined && typeof _1e === "object") ? true : false; },

Quick and Easy Example

  document.getElementById('validatelinks') && document.getElementById('validatelinks').innerHTML =
        "<a href="http://jigsaw.w3.org/css-validator/check/referer?warning=0&profile=css21&warning=1"></a> | "
      + "<a href="http://validator.w3.org/feed/check.cgi?url="+url+""></a> | "
      + "<a href="http://validator.w3.org/check/referer?ss=1;outline=1;sp=1;debug"></a> | "
      + "<a href="http://validator.w3.org/checklink?check=Check&hide_type=all&summary=on&uri="+url+""></a> | "
      + "<a href="http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=-1&url1="+url+""></a> | "
      + "<a href="http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=2&url1="+url+""></a>";

Tags

Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman


It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | htaccess.io | htaccess.guru

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain