Syntax Highlight Code On Any Page Using Google Code Prettify
| Posted by watashii | Filed under Programming, Web
The Google Code Prettify is a JavaScript module that allows syntax highlighting of any code snippets on a HTML page. Setting this up on any web page is a simple 3 step process, and is supported on most common browsers.
[Demo] (Based on: prettify-21-May-2009.zip)
[Download Source Files]
Tags: highlight, html, javascript, prettify, syntax
Get URL Variables in JavaScript & HTML
| Posted by watashii | Filed under Programming, WebThe following structure stores variables within a request URL:
http://www.mydomain.com/index.html?month=January&day=Tuesday
To read the variables within the index HTML file, we must process the URL string entirely, since there is no built-in functions which magically does it. The following JavaScript demonstrates this:
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}To use the variables, we run the following to extract the values:
var myHash = getUrlVars();
alert(myHash['month']); // prompts the value 'January'
alert(myHash['day']); // prompts the value 'Tuesday'Tags: html, javascript, url
A Better LightBox Using jQuery
| Posted by watashii | Filed under Programming, Web
The jQuery lightBox plugin (by Leandro Vieira Pinho) uses the jQuery JavaScript library to create an overlay effect of opening up images on top of a web page, and creating a navigable slideshow view. See my demo below.
Setting this up on your own web page is an easy 2-step process: include the JavaScript and CSS on the webpage header, and then call the jQuery function. The only change required is on the header.
This plugin is an improvement over the LighBox2 plugin which was demonstrated earlier, because we didn’t need to modify our link tags to activate it, thanks to the jQuery element selector.
[Demo]
[Download Source Files]
Tags: css, demo, images, javascript, jquery, lightbox
Overlay & Slideshow Images with Lightbox 2
| Posted by watashii | Filed under Programming, Web
The Lightbox2 plugin uses the Prototype and Scriptaculous JavaScript libraries to create an overlay effect of opening up images on top of a web page, and creating a navigable slideshow view.
Setting this up on your own web page is an easy 2-step process: include the JavaScript and CSS on the header, and then on each link tag embed the rel=”lightbox” and title=”my caption” attributes.
[Demo]
[Download Source Files]
Tags: css, images, javascript, lightbox
