public
Description: Alpha repository for DUI.Stream. When it stabilizes, it will be merged back into DUI.
Homepage:
Clone URL: git://github.com/digg/stream.git
stream / streamDemo.html
100644 84 lines (62 sloc) 2.27 kb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head><title></title>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/DUI.js"></script>
    <script type="text/javascript" src="js/Stream.js"></script>
    
    <style type="text/css">
    body{font-family:arial,helvetica,sans-serif;}
    h1, h2, h3 {text-align:center;}
    .column {width:50%; float:left;}
    #stream {border: 4px solid #90B557; margin: 0pt auto; padding: 4px; width: 300px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #ecffe1;}
    #normal {border: 4px solid #5481AC; margin: 0pt auto; padding: 4px; width: 300px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #edf2ff;}
    </style>
 
</head>
 
<body>
 
<h1>DUI.Stream: Better living through MXHR</h1>
<h3>10 chunks of 10 paragraphs of Lorem Ipsum each</h3>
<div class="column">
    <h2>MXHR Stream</h2>
    <div id="stream"></div>
</div>
<div class="column">
    <h2>Normal</h2>
    <div id="normal"></div>
</div>
 
<script type="text/javascript">
 
//COME WITH ME IF YOU WANT TO LIVE
var s = new DUI.Stream();
 
var content = '';
        
s.listen('text/html', function(payload) {
    content += payload;
});
 
s.listen('complete', function() {
    $('#stream').append('<p>Stream took: ' + ((new Date).getTime() - streamStart) + 'ms</p>' + content);
    
    var normalStart = (new Date).getTime();
    
    for(var i = 0; i < 9; i++) {
        $.ajax({
            'url': 'loremIpsum.html',
            'async': true,
            'type': 'GET',
            'dataType': 'html',
            
            'success' : function(html) {
                $('#normal').append(html);
            }
        });
    }
    
    $.ajax({
        'url': 'loremIpsum.html',
        'async': true,
        'type': 'GET',
        'dataType': 'html',
        
        'success' : function(html) {
            $('#normal').append(html);
            $('#normal').prepend('<p>Normal took: ' + ((new Date).getTime() - normalStart) + 'ms</p>');
        }
    });
});
 
var streamStart = (new Date).getTime();
s.load('testStreamData.php');
 
</script>
 
 
</body>
 
</html>