iframe资源是异步加载的,要监听它的资源加载完成后操作。用load方法:
由于jQuery3以后不支持 .load()方法,所以使用on

$(function(){
$("#iframe").on('load', function(){
$(this).contents().find("#header").css('display','none');
});
});

这样就可以控制iframe里内容的样式了。

纯 CSS 实现时间线

代码解读

1. 基础的 HTML 结构

<div class="timeline">
<h1>文档时间线</h1>
<div class="cards">
    <section class="card"></section></div>
</div>

常规样式初始化:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
}

h1 {
text-align: center;
}

2. 基础 card 样式
总体布局的 timeline 暂时不用考虑,首先完成 card ,之后将多个 card 组合时才需要考虑。
card 分为两部分 header 存放标题,article 存放内容详情。
修改 DOM 结构

<section class="card">
  <header class="card__header">
<div class="header__number">
      <span>1</span></div>
<h2 class="header__title">
      <span class="title__date">2019-03-09</span>
<span class="title__sub">副标题</span></h2>
</header>
<article class="card__article">今天是个好日子

</article>
</section>

修改 card 样式

.card {
position: relative;
width: 400px;
height: 200px;
display: flex;
flex-direction: column;
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);

/* 观测用,待删除 */
border: 1px dashed darkorange;
}

这样一个基础的 card 就实现了。

3. 完善 card 样式
header 结构

.card__header {
display: flex;
align-items: center;
width: 100%;
height: 35%;
color: #fff;
background-color: #134857;
overflow: hidden;
}

header 内部

.header__number {
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
padding: 6px 14px;
font-size: 2rem;
background-color: rgba(0,0,0,0.17);
}
.header__title {
display: flex;
margin-left: 10px;
flex-direction: column;
font-size: 0.6rem;
}
.title__sub {
padding-top: 6px;
font-size: 1.2rem;
}

article 结构
article 初步的想法还是比较简单的:

.card__article {
width: 100%;
height: 65%;
background-color: #fff;
border: 1px solid rgba(200,200,200,0.5);
border-top: none;
padding: 10px;
}

4. 多个 card
修改 DOM 结构
在 .cards 中增加多个 card ,此处仅显示 DOM 结构省略了部分内容。

<div class="timeline">
<h1>飞越高山与大洋的鱼</h1>
<div class="cards">
  <section class="card">
    <header class="card__header">
<div class="header__number">
        <span>1</span></div>
<h2 class="header__title">
        <span class="title__date">2019-03-09</span>
<span class="title__sub">副标题</span></h2>
</header>
<article class="card__article">今天是个好日子

</article>
</section>
<section class="card"></section>
<section class="card"></section>
<section class="card"></section></div>
</div>

.cards 时间线
修改 .cards 、.card 大小,并利用伪元素增加中间线:

.cards {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
/* 观测用,待删除 */
border: 1px solid #000;
}
.cards::after {
z-index: 9;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: 1px solid rgba(200,200,200,0.5);
}

.card {
width: 46%;
}

card 分列两侧\

.card:nth-child(odd) {
align-self: flex-start;
}
.card:nth-child(even ) {
align-self: flex-end;
}

增加三角标识
利用 header 的伪元素实现

.card:nth-child(odd) .card__header::after {
position: absolute;
left: 100%;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent #134857;
}
.card:nth-child(even) .card__header::after {
position: absolute;
right: 100%;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 18px 10px 0;
border-color: transparent #134857 transparent transparent;
}

中间线上增加标识点

.card:nth-child(odd) .card__header::before {
z-index: 10;
position: absolute;
left: calc(111.11% - 2.5px);
content: "";
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #bdbdbd;
box-shadow: 0 0 2px 6px #fff;
}
.card:nth-child(even) .card__header::before {
z-index: 10;
position: absolute;
right: calc(111.11% - 5px);
content: "";
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #bdbdbd;
box-shadow: 0 0 2px 6px #fff;
}

5. 美化
去除 border 注释
直接删除即可。
header 赋予不同颜色

设置默认色:

:root {
--bg-color: #10aec2;
}

.card__header {
background-color: var(--bg-color);
}
.card:nth-child(odd) .card__header::after {
border-color: transparent transparent transparent var(--bg-color);
}
.card:nth-child(even) .card__header::after {
border-color: transparent var(--bg-color) transparent transparent;
}

修改为 4 种颜色循环(若想要循环更多颜色增加 n 即可):

.card:nth-child(4n) {
--bg-color: #10aec2;
}
.card:nth-child(4n+1) {
--bg-color: #fbc82f;
}
.card:nth-child(4n+2) {
--bg-color: #74759b;
}
.card:nth-child(4n+3) {
--bg-color: #346c9c;
}

修改间隔

h1 {
margin-bottom: 10px;
}

.cards {
padding: 10px 16px;
}

最后
其实这个只完成了一半,还有进一步适配移动端还未完成,之后会补上。
移动端效果已更新:效果,具体的实现之后补上。

[转载]https://segmentfault.com/a/1190000018445517?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader0

一、使用 :not() 在菜单上应用/取消应用边框

我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零

/* add border */
.nav li {
border-right: 1px solid #666;
}

//* remove border */
.nav li:last-child {
border-right: none;
}

一般浏览器不会出现下载按钮,只有谷歌浏览器会(低版本的右下角没有下载按钮,比如53.0版本) 。
  如果你的谷歌浏览器版本是54.0~,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。

解决方法:

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

jQuery 2018年最好用的轮播插件

2018年最好用的jQuery轮播插件

JavaScript使用简单,但是从零开始编写代码是非常困难的。 因此,使用大家通常使用框架和库,其中jQuery具有很强的普及性。
jQuery插件可以通过简单地加载插件来实现大部分的基本功能,这是初学者非常喜欢的。
这一次,我们介绍了9个简单方便的jQuery轮播插件。 在2018让这些插件丰富我们的网站吧。

1. slick

jQuery slick slider

slick 是最方便和易于使用的jQuery轮播插件。 这是一个全能的插件,大多数你想要的功能都够被实现。
轮播功能能够完美的响应,并根据容器的大小而变化。 通过设置断点,还可以根据设备的大小显示不同的方式,还可以在智能手机上打开/关闭滑动操作。 您也可以设置一个无限循环,令人惊喜的是,您还可以使用键盘进行控制。
即使你是个新手,我们可以使用最少的代码来实现非常完美的效果。

2. Felicity

jQuery  slick slider

Felicity 首先支持自适应,可手控滑动的jQuery轮播插件。
轮播的设置侧重于CSS侧而不是jQuery侧的设置,所以非程序员也可以很容易地设置“我不知道jQuery或JavaScript,但是我可以使用CSS设置”。
这个插件有很多选择和API,这不仅令初学者满意,而且对于有经验的人也是如此。 它也支持自动播放和无限循环。

利用CSS3动画制作你的动画加载页面

制作工具

  1. WOW.js
  2. Animate.css

制作方法

将css及js加载到页面

<link rel="stylesheet" type="text/css" media="all" href="/js/animate.css" />
<script type="text/javascript" src="/js/wow.min.js"></script>

在HTML中需要加载动画的部分,添加class名

<div class="wow slideInLeft"></div>  
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>  
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div> 

执行js

var wow = new WOW({  
    boxClass: 'wow',  /*指定动画元素的class名*/
    animateClass: 'animated',  
    offset: 0,  /*距离可视区域多少开始执行动画*/
    mobile: true,  /*是否在移动设备上执行动画*/
    live: true  /*异步加载的内容是否有效*/
});  
wow.init();  

1、鼠标移进网页里,不见了= =

*{
    cursor: none!important;
}

2、简单的文字模糊效果

*{ 
    color: transparent;
    text-shadow: #111 0 0 5px;
}

3、多重边框

.div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

4、实时编辑CSS

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>

5、CSS中简单运算

.div{
    width: calc(100% - 500px);
}

6、border-radius

因为基本上很多人都是这么用的:

.div {
     border-radius: 4px;
}

稍微高端一点的是这样的:

.div {
    border-radius: 4px 6px 6px 4px;
}

然而,终极黑科技是这样用的:

.div {
     border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

border-radius 它可以赋8个值:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,
各个数字就分别代表四个不一样的方向。

7、outline-offset

在input下写CSS的时候对下面的语句会很熟悉:

input {
    outline : none;
}

input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。

CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离:

input {
    outline-offset: 4px ;
}
 

调节该属性值的大小你就可以看到outline的距离变化了。

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}
<div class="rect"></div>

前言

Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。

用户权限

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用,避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的?

Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:

  • default :不知道用户的选择,默认。
  • granted :用户允许。
  • denied :用户拒绝。
if(Notification.permission === 'granted'){
    console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择,去向用户申请权限吧');
}

请求权限

当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用(当然在现在的浏览器中还是能用的),最新的规范已将此方法更新为基于 promise 的语法:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

推送通知

获取用户授权之后,就可以推送通知了。

var notification = new Notification(title, options)

参数如下:

  • title:通知的标题
  • options:通知的设置选项(可选)。
    • body:通知的内容。
    • tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。
    • icon:要在通知中显示的图标的URL。
    • image:要在通知中显示的图像的URL。
    • data:想要和通知关联的任务类型的数据。
    • requireInteraction:通知保持有效不自动关闭,默认为false。

还有一些其他的参数,因为用不了或者没什么用这里就没必要说了。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true
})

通知消息的效果图如下:

关闭通知

从上面的参数可以看出,并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话,这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧'
})

setTimeout(function() {
    n.close();
}, 3000);

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件,比如打开一个网址,引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }
})
n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知
}

应用场景

前面说那么多,其实就是为了用。那么到底哪些地方可以用到呢?

现在网站的消息提醒,大多数都是在消息中心显示个消息数量,然后发邮件告诉用户,这流程完全没有错。不过像我这种用户,觉得别人点个赞,收藏一下都要发个邮件提醒我,老是要去删邮件(强迫症),我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification,毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时,可以推送给用户实时新闻。以腾讯体育为例,它就使用了 Notification API。在页面中引入了一个 notification2017_v0118.js,有兴趣可以看看别人是怎么成熟的使用的。

一进入页面,就获取授权,同时自己页面有个浮动框提示你允许授权。如果允许之后,就开始给你推送通知了。不过它在关闭标签卡的时候,通知也会被关闭,那是因为监听了页面 beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();
}
if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

兼容

说到兼容,自然是倒下一大片,而且各浏览器的表现也会有点差异。移动端的几乎全倒,PC端的还好大多都能支持,除了IE。所以使用前,需要先检查一下浏览器是否支持 Notification。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>html5+css3实现上拉和下拉刷新</title>

<script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script>

<script type="text/javascript">

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

<style type="text/css" media="all">
body,ul,li {
	padding:0;
	margin:0;
	border:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}

#header {
	position:absolute; z-index:2;
	top:0; left:0;
	width:100%;
	height:45px;
	line-height:45px;
	background-color:#d51875;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}

#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
	position:absolute; z-index:2;
	bottom:0; left:0;
	width:100%;
	height:48px;
	background-color:#222;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
	padding:0;
	border-top:1px solid #444;
}

#wrapper {
	position:absolute; z-index:1;
	top:45px; bottom:48px; left:-9999px;
	width:100%;
	background:#aaa;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

#myFrame {
	position:absolute;
	top:0; left:0;
}



/**
 *
 * Pull down styles
 *
 */
#pullDown, #pullUp {
	background:#fff;
	height:40px;
	line-height:40px;
	padding:5px 10px;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	font-size:14px;
	color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
	display:block; float:left;
	width:40px; height:40px;
	background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat;
	-webkit-background-size:40px 80px; background-size:40px 80px;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:250ms;	
}
#pullDown .pullDownIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon  {
	-webkit-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
	-webkit-transform:rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
	background-position:0 100%;
	-webkit-transform:rotate(0deg) translateZ(0);
	-webkit-transition-duration:0ms;

	-webkit-animation-name:loading;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg) translateZ(0); }
	to { -webkit-transform:rotate(360deg) translateZ(0); }
}

</style>
</head>
<body>

<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
	<div id="scroller">
		<div id="pullDown">
			<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
		</div>

		<ul id="thelist">
			<li>Pretty row 1</li>
			<li>Pretty row 2</li>
			<li>Pretty row 3</li>
			<li>Pretty row 4</li>
			<li>Pretty row 5</li>
			<li>Pretty row 6</li>
			<li>Pretty row 7</li>
			<li>Pretty row 8</li>
			<li>Pretty row 9</li>
			<li>Pretty row 10</li>
			<li>Pretty row 11</li>
			<li>Pretty row 12</li>
			<li>Pretty row 13</li>
			<li>Pretty row 14</li>
			<li>Pretty row 15</li>
			<li>Pretty row 16</li>
			<li>Pretty row 17</li>
			<li>Pretty row 18</li>
			<li>Pretty row 19</li>
			<li>Pretty row 20</li>
			<li>Pretty row 21</li>
			<li>Pretty row 22</li>
			<li>Pretty row 23</li>
			<li>Pretty row 24</li>
			<li>Pretty row 25</li>
			<li>Pretty row 26</li>
			<li>Pretty row 27</li>
			<li>Pretty row 28</li>
			<li>Pretty row 29</li>
			<li>Pretty row 30</li>
			<li>Pretty row 31</li>
			<li>Pretty row 32</li>
			<li>Pretty row 33</li>
			<li>Pretty row 34</li>
			<li>Pretty row 35</li>
			<li>Pretty row 36</li>
			<li>Pretty row 37</li>
			<li>Pretty row 38</li>
			<li>Pretty row 39</li>
			<li>Pretty row 40</li>
		</ul>
		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
		</div>
	</div>
</div>
<div id="footer"></div>

</body>
</html>