Tag Archives: html

Use PHP to subStr to cut length in whole words

In work, we often output a section of content and don’t always either want the whole content, or want a quick summary;

Below is a quick piece of code that will create a quick clean summary of a full HTML page from our ( or any ) content Management System.
This doesnt actually use PHP’s substr function, but has the same effect.

function summary($content, $length = 20, $finish = '…') {
	// Clean and explode our content, Strip all HTML tags, and special charactors.
	$words = explode(' ', strip_tags(preg_replace('/[^(\x20-\x7F)]*/','', $content)));
	// Get a count of all words, and check we have less/more than our required amount of words.
	$count = count($words);
	$limit = ($count > $length)?$length:$count;
	// if we have more words than we want to show, add our ...
	$end   = ($count > $length)?$finish:'';
	// create output
	for($w = 0;$w< =$limit;$w++) {
		$output .= $words[$w];
		if($w < $limit) $output .= ' ';
	}
	// return end result.
	return $output.$end;
}

Sample Usage:

// our page cntent from our SQL database... example.
$page_content = '

Page title

lorem... ...ipsum home page'; echo summary($page_content, 5);

This will output…

‘Page title lorem lemon…’

This will output full words rather than cutting at a certain amount of letter, and some times ending half way trough a word.

Non-Ascii charactors in my AJAX responses !?

A while ago, I co-wrote a large site with Ryan while I was working at Zipline Interactive, this site uses Mootools 0.98 as we found to be getting a lot of �������� all through the JAX requested response code.

For the life of US, we couldn’t figure out why? it’s not in the output if we called the data via a normal http request, so I looked for a fix.

  1. Upgrade the Mootools to version 1.2.2
  2. Add an enc type to the AJAX functions
    	new Request.HTML({
    		method: 'get',
    		url: '/examples/ajax.php',
    		data: { 'example': 'ajax-ascii' },
    		encoding: 'iso-8859-1',
    		onRequest: function() {
    			$('calendarMainEvent').empty().removeClass('calendarClosed');
    			$('calendarMainEvent').set('html', 'Loading');
    		},
    		onComplete: function(responseTree, responseElements, responseHTML, responseJavaScript) {
    			$('calendarMainEvent').empty().set('html', responseHTML);
    			$('calendarMainEvent').setProperty('class','calendarOpen');
    		},
    		onFailure: function() {
    			$('calendarMainEvent').empty().removeClass('calendarClosed');
    		}
    	}).send();
    
  3. Specifying the charset in the PHP that is outputting the AJAX response!

    < ?php
    
    if($_GET['ajax_request']) {
    
    header('Content-Type: text/html; charset=iso-8859-1');
    echo('

    Success'); /* More output code */ }

Matching the Character set

It didn’t occur to me right away that I need to specify the charset more than just in the <head> section of the page, but that was all it took.

Of course you want to match your PHP header, Javascript encoding and xHTML charsets all to the same with it is iso-xxx or utf-xx

Alternating row styles with Javascript

I am writing a list that outputs a large amount of data in a vertical structure, with many rows the list gets hard to tell which entry is which.

Now, normally I would do this via PHP, something like

	< ?php $messages = SQL('QUERY TO GET MY MESSAGES'); ?>
	< ?php $style    = "on"; ?>
	< ?php if($messages): ?>
	

Messages

< ?php foreach($messages as $message): ?>
>

< ?=date('d/m/Y', strtotime($message->last_modified))?> < ?=$message->firstname?> < ?=$message->lastname?>

< ?=$message->message?>

< ?=$message->status?>

< ?php if($style=='on') { $style = 'off' } else { $style = 'on'} ?> < ?php endforeach; ?> < ?php endif; ?>

But I decided today to write it in Javascript. Mootools 1.2 in fact, as the site I am working on had a lot of cool JS effects.

The HTML

	< ?php $messages = SQL('QUERY TO GET MY MESSAGES'); ?>
	< ?php if($messages): ?>
	

Messages

< ?php foreach($messages as $message): ?>

< ?=date('d/m/Y', strtotime($message->last_modified))?> < ?=$message->firstname?> < ?=$message->lastname?>

< ?=$message->message?>

< ?=$message->status?>

< ?php endforeach; ?> < ?php endif; ?>

The Javascript

	$$('.message').each(function(message, row) { // find all elements the have a class called 'message' and loop trough them.
		if(row%2) message.setStyle('background', '#eceff1'); // assign my style to it
	});

You can assign more than one style, by using Mootools setStyles({ }); function. or add events. Eg;

	$$('.message').each(function(message, row) {
		if(row%2) message.setStyle('background', '#eceff1');
		var background = message.getStyle('background');
		message.setStyle('padding', '5px');
		message.addEvents({
			'mouseenter': function() { message.setStyle('background', '#d2d2d2'); },
			'mouseleave': function() { message.setStyle('background', background); }
		});
	});

This will assign a different style and an event back to each element.

Demo:

Hover over any of the below messages :)

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

SPAW WYSIWYG was showing HTML characters not HTML

I noticed when installing the SPAW Editow recently that on the Design tab in SPAW, the HTML was showing as converted HTML Symbols like &lt; and &gt; rather than < and >.

After a bit of playing, i found this hidden piece of information on the SPAW FAQ’s.


You should use getHtml() method instead of show(). It returns the code which you can store into variable and use whenever you need it.

SPAW getHTML() Rather than show()

SPAW getHTML() Rather than show()

An Amazing use of Javascript.

When I looked at Ryan Stemkoski’s technology blog about 11.26 javascript frameworks I though oh yeah, I have used a couple of those, and there was a couple there that I havn’t.

But today I came across this site, Zazzle.com, this site uses some AMAZING javascript ideas, you can create your own mouse pad and when you hover over portfolio or gallery images, there is some great interactivity.

I think for fun I will be trying to reproduce some of these effects, it will be a fun task as I am not going to look at their source code, nor see what libraries that they are using, if any.

I will post some examples as soon as I have even a semi bug free version working, in the mean time, check out the site, and give me some ideas on what to try re-creating first.