User:JohnDR/gm

<<<<< Back to jsmain = HTML =
 * HTML4.01 Reference
 * HTML Validator
 * Color maps here, Cross Platform Colors, Experiment all colors (Change the URL)
 * Text formatting are in here: http://www.w3schools.com/html/html_formatting.asp
 * URL Encoding Characters: http://www.w3schools.com/html/html_urlencode.asp
 * Entities reference in: http://www.w3schools.com/tags/ref_entities.asp

Basic

 * html tags are case insensitive. However, lowercase is recommended
 * Do not put formatting in .html. Use styles instead!

Defines an HTML document Defines the head section. Put "initialization" javascripts here. Title section. Must be under head. Defines the document's body to  Defines header 1 to header 6. h6 is smallest Defines a paragraph Inserts a single line break Defines a horizontal rule Pre-formatted Text quoted from somesource DONT USE THIS AS THIS IS DEPRECIATED!!!          Defines a comment WWW   Displays "World Wide Web" as tooltip.

   Defines an ordered list  (numbered by default. Types are: "A","a","I","i") Defines an unordered list (bullets. Types are "disc","circle","square")             Defines a list item             Defines a definition list             Defines a definition term             Defines a definition description
 * Lists (Can be embedded):

Defines information about the document Defines the document title Defines a base URL for all the links on a page e.g.     // Open all links using target. Defines a resource reference Defines meta information <!DOCTYPE>  Defines the document type. This tag goes before the start tag.
 * Head:

Defines a script Defines an alternate text if the script is not executed Defines an embedded object Defines run-time settings (parameters) for an object. e.g. , In XHTML the tag must be properly closed.
 * Scripts:

Core Attributes - Not valid in base, head, html, meta, param, script, style, and title elements. Attribute Value                       Description ========= =========================   =================================     class      class_rule or style_rule    The class of the element id        id_name                     A unique id for the element style     style_definition            An inline style definition title     tooltip_text                A text to display in a tool tip
 * Attributes

Language Attributes - Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. dir       ltr | rtl                   Sets the text direction lang      language_code               Sets the language code

Keyboard Attributes accesskey character                   Sets a keyboard shortcut to access an element tabindex  number                      Sets the tab order of an element

text        // Can be used as href="#chapter4" later ...                          // yellow background bgcolor="#000000" bgcolor="rgb(0,0,0)" text              // New window target="_top"                         // Break out of a frame         // image link Send Mail                    // Send Mail <img src="constr4.gif" width="144" height="50" border="0"   // settings alt="Big Boat"                       // alternate text (will display when image failed to load) align="middle|top|bottom"            // default is bottom. Alignment of image wrt text align="left|right"                   // alignment of image wrt paragraph ismap                                // Display the mapping on the statusbar (Will work if usemap is not used) usemap="#planetmap">                 // use a mapping <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
 * Tags:

Forms / Tables
<form name="input" action="html_form_action.asp" method="get"> First name:  <input type="text"     name="firstname" size="10" value="default_value"> Password:    <input type="password" name="lastname"> Radio:       <input type="radio"    name="sex" value="male"> Male      // Make the name="sex" to be the same for the female. Checkbox:    <input type="checkbox" name="bike" checked="checked">I have a bike    // checked="checked" will set it to default SubmitButton: <input type="submit"  value="Submit"> ResetButton: <input type="reset"    value="Reset"> Button:      <input type="button"   value="Hello world!"> TextArea:    The cat was playing in the garden. Drop down: Volvo Saab <option value="fiat" selected="selected">Fiat
 * Forms

// This puts a border around the form Personal information: ......

Last Name:                // label example <input type="text" name="lastname" id="lname" />

<button onclick="load; refocus;" onmouseover="foo" onmouseout="foo1">Load

<table border=nPixel cellpadding=nPixel        // cellpadding is spacing around the cells. cellspacing=nPixel        // cellspacing is the border size around cells. bgcolor="red"             // background color  (applicable to td/th) background="bgdesert.jpg" // background image  (applicable to td/th/body). Could put URL here width="400" or "100%">     // pixel width or % width // table row <th/td rowspan="2" align="center"  // table header / will occupy two rows / set the alignment (left,right,center) // table cell My Caption   // Put this just after the
 * Tables

Style
style=" font-family:verdana;        font-size:8pt;         color:green"
 * Basic

//External <link rel="stylesheet" type="text/css" href="mystyle.css">
 * Styles

//Internal <style type="text/css"> body {background-color: red} p {margin-left: 20px}

// inline <p style="color: red; margin-left: 20px">This is a paragraph

Meta / URL / Characters
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">  // used by search engines <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  // keywords
 * Meta: Document information

// Auto-Redirect: in 5 Seconds <meta http-equiv="Refresh" content="5;url=http://www.w3schools.com">

mailto sends email e.g. "mailto:someone@w3schools.com" file   a file on your local PC ftp     a file on an FTP server http   a file on a World Wide Web Server https  a file on a World Wide Web Server, secure gopher a file on a Gopher server news   a Usenet newsgroup e.g.  "news:alt.html" telnet a Telnet connection WAIS   a file on a WAIS server
 * URL Schemes

Result Description  	Entity Name  	Entity Number non-breaking space & nbsp;     & #160; <      less than          & lt;        & #60; >      greater than       & gt;        & #62; &      ampersand          & amp;       & #38; "      quotation mark     & quot;      & #34; '       apostrophe         & apos; (does not work in IE)   & #39;
 * Common characters. Complete reference in: http://www.w3schools.com/tags/ref_entities.asp

Frames
<frameset cols="25%,50%,25%"    // change this to "rows" for vertical framespacing="0" frameborder="0" border="0"> <frame noresize="noresize"    // Do not resize name="showframe"       // Can be used with: <a href="frame_c.htm" target="showframe">Frame c</a> frameborder="1" scrolling="auto"       // "auto"/"no"   (scrollbar) marginwidth="0" marginheight="0" src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> Your browser does not handle frames! <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <iframe src="filename.html">
 * Cannot use and together.
 * Basic frames:
 * Combined horizontal/vertical:
 * Inline Frames

= GreaseMonkey =

General
if (!GM_xmlhttpRequest) { alert('Please upgrade to the latest version of Greasemonkey.'); return; } GM_log('message');  // Log in console window (debugging) function GM_setValue(key, value);          // Cookie function GM_getValue(key, defaultValue);   // Cookie function GM_registerMenuCommand(menuText, callbackFunction);  // Adds a menu item in Greasemonkey->User Script Commands GM_xmlhttpRequest -> http://diveintogreasemonkey.org/api/gm_xmlhttprequest.html
 * Greasemonkey help: http://diveintogreasemonkey.org/, UserScripts
 * Testing for greasemonkey functionality (version check)
 * Built-in Functions:

print( window.location.host );                 // Domain name e.g. www.google.com print( window.location.href );                 // Complete URL path if (doLoadAll) { doLoadAll; }
 * Important variables:
 * It is a nice habit to check a function before calling it (e.g. if multiple frames, execute the func only on the frame that the func exist)

Getting elements
function xpath(query) { return document.evaluate(query, document, null,       XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); } var textareas = document.getElementsByTagName('textarea'); if (textareas.length) { // there is at least one textarea on this page } else { // there are no textareas on this page } var allElements, thisElement; allElements = document.getElementsByTagName('*');   // change the '*' with 'textarea' for textarea only. for (var i = 0; i < allElements.length; i++) { thisElement = allElements[i]; // do something with thisElement } allLinks   = xpath('//a[@href]');      // ALL links on a page allElements = xpath('//*[@title]');    // ALL the elements with a title attribute allClassSpon= xpath("//div[@class='sponsoredlink']");   // all s with a class of sponsoredlink postforms  = xpath("//form[translate(@method, 'POST ', 'post')='post']");    // case insensitive
 * The xpath function. xpath tutorial
 * Testing for a page if it contains HTML element:
 * Loop thru all elements
 * Doing something with an element

for (var i = 0; i < allLinks.snapshotLength; i++) { thisobj = allLinks.snapshotItem(i);

// do something with thisobj

switch (thisobj.nodeName.toUpperCase) { case 'A': // this is a link, do something break; case 'IMG': // this is an image, do something else break; default: // do something with other kinds of HTML elements } }

var main, newElement; main = document.getElementById('main'); if (main) { newElement = document.createElement('hr'); main.parentNode.insertBefore(newElement, main);             // BEFORE the main content main.parentNode.insertBefore(newElement, main.nextSibling); // AFTER  the main content } var adSidebar = document.getElementById('ads'); if (adSidebar) { adSidebar.parentNode.removeChild(adSidebar); }
 * Insert an before/after the main content . This presumes that there is an element whose ID is "main".
 * Deleting an element

var theImage, altText;         // Replace an image with its alt text theImage = document.getElementById('annoyingsmily'); if (theImage) { altText = document.createTextNode(theImage.alt); theImage.parentNode.replaceChild(altText, theImage); }
 * Replacing an element

var logo = document.createElement("div"); logo.innerHTML = '<div style="margin: 0 auto 0 auto; ' +   'border-bottom: 1px solid #000000; margin-bottom: 5px; ' +    'font-size: small; background-color: #000000; ' +    'color: #ffffff;"><p style="margin: 2px 0 1px 0;"> ' + 'YOUR TEXT HERE ' + ' '; document.body.insertBefore(logo, document.body.firstChild); -or- var logo = document.createElement('img'); logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+ 'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D'; document.body.insertBefore(logo, document.body.firstChild);
 * Inserting HTML quickly

Styles
function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); }
 * Adding CSS styles

addGlobalStyle('p { font-size: large ! important; }');

Style test page <style type="text/css"> p { background-color: white; color: red; } This line is red. <p id="p2" style="color: blue">This line is blue.
 * Getting an element's style

var p1elem, p2elem; p1elem = document.getElementById('p1'); p2elem = document.getElementById('p2'); alert(p1elem.style.color); // will display an empty string alert(p2elem.style.color); // will display "blue"
 * Get & Set the styles defined by an element's style attribute:

p1style = getComputedStyle(p1elem, ''); p2style = getComputedStyle(p2elem, ''); alert(p1style.color); // will display "rgb(255, 0, 0)" alert(p2style.color); // will display "rgb(0, 0, 255)"

p1elem.style.marginTop = '2em'; p1elem.style.backgroundColor = 'white'; p1elem.style.color = 'red';

Post processing
var newBody = '  My New Page   ' + ' This page is a complete replacement of the original. '; window.addEventListener( 'load', function { document.body.innerHTML = newBody; }, true);
 * Post processing a page after it renders

var a = document.getElementById('article'); if (a.href.match(/\?/i)) { // link already contains other parameters, so append "&printer=1" a.href += '&printer=1'; } else { // link does not contain any parameters, so append "?printer=1" a.href += '?printer=1'; }
 * Replace links

window.location.href = window.location.href.replace(/^http:/, 'https:');
 * Redirecting the entire URL!

document.addEventListener('click', function(event) {   // event.target is the element that was clicked.    // Do whatever you want here!    // if you want to prevent the default click action    // (such as following a link), use these two commands:    event.stopPropagation;    event.preventDefault; }, true);
 * Intercepting User clicks:

function newsubmit(event) { var target = event ? event.target : this;
 * Overriding a java method (submit)

// do anything you like here alert('Submitting form to ' + target.action);

// call real submit function this._submit; }

// capture the onsubmit event on all forms window.addEventListener('submit', newsubmit, true);

// If a script calls someForm.submit manually, the onsubmit event does not fire, // so we need to redefine the submit method of the HTMLFormElement class. HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit; HTMLFormElement.prototype.submit = newsubmit;

Parsing XML
var xmlString = ' ' + ' ' + '    mark ' + '   ' + '    Mark Pilgrim ' + '   /home/mark/ ' + '   /bin/bash ' + ' ' + ' ' var parser = new DOMParser; var xmlDoc = parser.parseFromString(xmlString, "application/xml");
 * See also for a sample atom example

var entries = xmlDoc.getElementsByTagName('passwd'); var title; for (var i = 0; i < entries.length; i++) { title = entries[i].getElementsByTagName('login')[0].textContent; alert(title);  // output is mark }

Examples
var a, thisdomain, links; thisdomain = window.location.host; links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { a = links[i]; if (a.host && a.host != thisdomain) { a.target = "_blank"; } }
 * force offsite links to open in a new window

var wiki; wiki = document.getElementById('wpTextbox1'); if (main) { wiki.value=' john'; }
 * wiki textbox change