Notes Log » CSS

How to download scripts and stylesheets

Andrea Ercolino — Fri, 25 May 2007 19:59:12 +0000

With the help of some basic DOM manipulation and no AJAX at all it is possible to write some useful functions for downloading scripts and stylesheets after the page has been loaded.

load_javascript = function( uri ) { if( document.createElement ) { var e = document.createElement( "script" ); e.type = "text/javascript"; e.src = uri; document.getElementsByTagName( "head" )[0].appendChild( e ); } }; load_javascript_inline = function( sourceCode ) { if( document.createElement ) { var e = document.createElement( "script" ); e.type = "text/javascript"; e.text = sourceCode; document.getElementsByTagName( "head" )[0].appendChild( e ); } }; load_stylesheet = function( uri ) { if( document.createElement ) { var e = document.createElement( "link" ); e.rel = "stylesheet"; e.type = "text/css"; e.href = uri; document.getElementsByTagName( "head" )[0].appendChild( e ); } }; load_stylesheet_inline = function( sourceCode ) { if( document.createElement ) { var e = document.createElement( "style" ); e.type = "text/css"; if( e.styleSheet ) { // IE e.styleSheet.cssText = sourceCode; } else { var t = document.createTextNode( sourceCode ); e.appendChild( t ); } document.getElementsByTagName( "head" )[0].appendChild( e ); } };

PunchCard 1.3 Released Today

Andrea Ercolino — Fri, 27 Apr 2007 19:20:44 +0000

Changes

Faster Page Loads With Image Concatenation
Updated the code to use version 1.1.2 of the jQuery library (bundled)

Files

(the greeny thing below this line is a punchcard)

How to Highlight Mixed Language Source Code

Andrea Ercolino — Fri, 16 Feb 2007 15:35:29 +0000

Web pages contain many snippets from different languages, like HTML, PHP, CSS, and JavaScript. Chili 1.x cannot highlight mixed language source code automatically, but the forthcoming released Chili 2.0 will be is able to do that.

Meanwhile, if you are using a Chili + Enzymes setup, then it’s possible to write an Enzymes template capable of making Chili 1.x highlight a web page perfectly (expanding on my previous php template).

Here is the new updated (2007/02/19) chili-web.php Enzymes template. At the moment it supports XHTML, and embedded CSS, JavaScript, and PHP snippets.

'.htmlentities( $code ).''; } function snippet_php( $open, $code, $close ) { return snippet_wrap( 'html', $open ).snippet_wrap( 'php', $code ).snippet_wrap( 'html', $close ); } function php_inside_html( $matches ) { list( $all, $before, $open, $code, $close ) = $matches; if( '' == $open ) return snippet_wrap( 'html', $all ); else return snippet_wrap( 'html', $before ).snippet_php( $open, $code, $close ); } function php_inside_css( $matches ) { list( $all, $before, $open, $code, $close ) = $matches; if( '' == $open ) return snippet_wrap( 'css', $all ); else return snippet_wrap( 'css', $before ).snippet_php( $open, $code, $close ); } function php_inside_javascript( $matches ) { list( $all, $before, $open, $code, $close ) = $matches; if( '' == $open ) return snippet_wrap( 'javascript', $all ); else return snippet_wrap( 'javascript', $before ).snippet_php( $open, $code, $close ); } function php_inside( $class, $code ) { return preg_replace_callback( '/(?:(.*?)(\<\?php\s)(.*?)(\?\>))|(?:.+)/si', "php_inside_$class", $code ); } function snippet_web( $class, $open, $code, $close ) { return snippet_wrap( 'html', $open ).php_inside( $class, $code ).snippet_wrap( 'html', $close ); } function format_code( $matches ) { list( $all, $before, $open, $tag, $code, $close ) = $matches; if( '' == $open ) { return php_inside( 'html', $all ); } else { switch( $tag ) { case 'script': $class = 'javascript'; break; case 'style' : $class = 'css'; break; default : $class = 'html'; } return php_inside( 'html', $before ).snippet_web( $class, $open, $code, $close ); } } function format_clean( $out ) { do { $len = strlen( $out ); $out = preg_replace( '/(\[^<]*)\<\/code\>\/is', '$1', $out ); } while( $len != strlen( $out ) ); return $out; } } ?>

)(.*?)(\<\/\3\>))|(?:.+)/is', 'format_code', $this->result );
	echo format_clean( $out );
?>


The WordPress file /wp-content /themes /default /comments-popup.php is a page that uses all the supported languages, so it’s a good test for the previous template:




     <?php echo get_option('blogname'); ?> - Comments on <?php the_title(); ?>

	
	






Comments

RSS feed for comments on this post.

ping_status) { ?>
The URL to TrackBack this entry is: 


post_password) && $_COOKIE['wp-postpass_'. COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
	echo(get_the_password_form());
} else { ?>




	
	
	 by  â€”  @ 
	




	No comments yet.


comment_status) { ?>
Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: 


	
	  
	   Name
	
	" />
	

	
	  
	   E-mail
	

	
	  
	   URL
	

	
	  Your Comment
	

	  
	

	
	  
	
	ID); ?>


Sorry, the comment form is closed at this time.


Close this window.





 Powered by Wordpress




Chili & Enzymes confirm to be a perfect match.



PunchCard 1.2 Released Today
Andrea Ercolino — Sun, 28 Jan 2007 18:27:21 +0000
Changes

Simplified the inclusion of the PunchCard code in a page
The configuration of a widget is now by means of a metaboject, and is compliant with XHTML 1.0 Strict
Updated the code to use version 1.1.1 of the jQuery library (bundled)
The example.html file shows how to put on the same page as many widgets as you like. Each of them can have it’s own style
Simplified the stylesheets. Add new styles for colors and shapes of the widgets to the punchcard.css stylesheet (compare with example.html)

Files

download all in a zip
read the manual

(the greeny thing below this line is a punchcard)



PunchCard 1.1 Released Today – updated
Andrea Ercolino — Thu, 16 Nov 2006 21:11:18 +0000
Changes

implemented a different format for widgets configurations: now it’s xhtml compliant

Files

download all in a zip
read the manual




PunchCard 1.0 Released Today – updated
Andrea Ercolino — Tue, 14 Nov 2006 14:09:03 +0000
see the PunchCard category for updates 
Features

A jQuery widget for displaying in a small area a lot of social bookmarking sites, like del.icio.us, digg, technorati… (there are 45 now)
Punchcard metaphore

Every button is a tiny mark in a punchcard
When the mouse hovers the punchcard a tooltip pops up
The tooltip shows icon and name of the site
If the user punches the mark, the site opens in a new window, and
The punchcard gets a new hole which stays put



{[.test]}

You can add as many punchcards as you like to the same page, each one for submitting a different content: the holes belong to that content
Easy to add

Use a div element with a ‘punchcard’ class
Set its ‘title’ and ‘id’ attributes to the title and URL of your contentFor example, this is the html code used to display the above punchcard







Easy to install

HEAD: reference all the needed scripts and stylesheets
BODY: set the path of the icons folder (relative to your domain)



HEAD





BODY

Easy to customize

Change everything from colors to links, directly in the code and stylesheet files.

Files

download all in a zip




Chili & Enzymes
Andrea Ercolino — Wed, 08 Nov 2006 02:01:32 +0000
UPDATE (2008-03-20): There is a new post about Chili & Enzymes. Thanks to their new versions, it’s now much easier to config WordPress highlighting than described here.
If you post many code snippets, then Chili and Enzymes can work together for making your life simpler.Here is my proposed configuration:
1. Install Enzymes

Download the latest version to your computer, upload it to your server, in the ‘plugins’ directory under ‘/wp-content’, and activate it. No configuration needed.
2. Upload jQuery and Chili

For this configuration I’m going to put the file ‘jquery-1.0.3.pack.js’ in a ‘jquery’ directory under the ‘/wp-content’ directory, and the file ‘chili-1.1.pack.js’ in a ‘chili’ directory under the ‘jquery’ directory. In the ‘chili’ directory I’ll put also any recipes and stylesheets I’ll need.

I recommend to upload and setup at least one of the examples provided with Chili. It’ll be useful for proving that Chili is properly configured (bypassing WordPress).
3. Upload an Enzymes template for each language you’ll use

In fact there are many valid alternatives, but I think that this one is pretty simple and you can eventually expand on it. Here is the template I’m going to use for JavaScript snippets: 
result ); 
?>
Note that the template decides the style of the ‘pre’ tag and that the result is automatically escaped. Anyway this is still a naive template, which is not suitable for javascript snippets mixed into html snippets. Remember that the base directory for Enzymes templates is ‘wp-content’.
4. Add style settings to the stylesheet of your current WordPress theme

You should provide only general format for the tags you are going to use for wrapping your code snippets. For example, I’m going to use a ‘pre’ tag wrapped around the ‘code’ tag. In the style.css file, I’ll add these definitions: pre.chili-all {
	color: #333333; 
	background-color: #f4f4f4; 
	font-size: 9pt; 
	line-height: 120%;
	width: 450px; 
	overflow: auto; 
	}

pre.chili-clip {
	color: #333333; 
	background-color: #f4f4f4; 
	font-size: 9pt; 
	line-height: 150%;
	width: 450px; 
	height: 450px; 
	overflow: auto; 
	}

pre.chili-all code, pre.chili-clip code {
	font-size: 9pt; 
	line-height: 150%;
	}As you see, they are very similar: chili-all adjust the height of the box to the length of the content; chili-clip fixes the height to a maximum.
5. Edit the header.php file of your current WordPress theme

This is to enable support for Chili in each HTML page of the blog. It’s just three script elements: two for loading jQuery and Chili, and one for configuring Chili.
The following two items must appear in the ‘head’ section, maybe just before the closing tag. 
The following two items must appear in the ‘body’ section, maybe just after the opening tag. 
6. Done, now test the configuration

Create a new post titled “Testing Enzymes & Chili”. Hit ‘Save and Continue Editing’
Add a custom field with a Key “js-snippet” and a Value “document.writeln( "Hello World!" );”
Add this Enzymes statement “{[.js-snippet /enzymes/chili-js.php]}” into the post area
Hit ‘Publish’ and then ‘View site’

If it looks like this document.writeln( "Hello World!" ); then all is fine. Enjoy!