Simple HTTP Streaming design pattern

Posted on by

If you want to stream server data in the response of a long-lived HTTP connection you can use HTTP Streaming design pattern.

Check out simple DEMO »


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head id="my-head">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>keemor.com - Simple HTTP Streaming design pattern</title>
	</head>
<body>
	Counter: <span id="counter"></span>
</body>
</html>


<?php
for ( $counter = 0; $counter <= 10; $counter++) {
	?>
	<script type="text/javascript">
		document.getElementById('counter').innerHTML = "<?= $counter ?>";
	</script>
	<?
	flush();
	sleep(3);
}
?>
Share

Simple Edit In Place feature using ierange library

Posted on by

Recently I found ierange library which is a great implementation of W3C DOM Ranges for Internet Explorer.

Using it and PrototypeJS I’ve created edit in place feature to easily change the content of a div element.

Check out the DEMO »


<head>
...
<!--[if IE]>
<script type="text/javascript" src="ierange-m2.js"></script>
< ![endif]-->
...
</head>

<body>
	<div id="eip">
		<div id="start">Click to edit and start typing. <br />Enter to confirm. ESC to reset.</div>
		<div id="text">This is some simple text which you can easily change if you want this is some simple text which you can easily change if you want</div>
	</div>
</body>

Continue reading →

Share

Load content while scrolling with Prototype and JSON-P via Yahoo API

Posted on by

Today I’d like to present my solution for loading content while scrolling down the page in the DZone style using PrototypeJS library.

Check out simple DEMO »
Demo was tested in Firefox, Chrome, IE7/8 and Opera.

I used Yahoo Local Search API as a JSON data source for keyword kitesurfing.

Here is simple table where data will be put.


<body id="body">
    <table id="table-scroll">
        <tr><th>Name</th><th>Address</th><th>City</th></tr>
        <tbody id="result"></tbody>
    </table>
    <div id="loader">
        <img src="loader.gif" />
    </div>
</body>

Continue reading →

Share

Twitter API: Stream of messages for query with PHP, JSON and Prototype

Posted on by

Last week Antonio Lupetti presented on his blog turorial on Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery.

I would like to present how I did such widget using PrototypeJS and JSON.
I left html and css unchanged and you can CHECK OUT DEMO HERE.
I used JSON-PHP library to convert $results list of objects into JSON.

search.php 


< ?
header('Content-type: application/json');
//Set header to application/json to easily read JSON in javascript
require_once "lib/twitterapi.php";
require_once "lib/JSON.php";

if($_POST['twitterq']){
	$twitter_query= $_POST['twitterq'];
	$search = new TwitterSearch($twitter_query);
	$results = $search->results();
	foreach($results as $result){
		$result->text=toLink($result->text);
	}
	$json = new Services_JSON();
	echo $json->encode($results);
 }
?>

Continue reading →

Share