Skip to content

Commit 9782096

Browse files
Adam SingerAdam Singer
Adam Singer
authored and
Adam Singer
committed
Add Floating Clouds Demo
1 parent 1da8a47 commit 9782096

File tree

8 files changed

+54
-5
lines changed

8 files changed

+54
-5
lines changed

‎public/floating_clouds/images/bg.jpg

3.13 KB
Loading

‎public/floating_clouds/images/clouds.png

57.2 KB
Loading

‎public/floating_clouds/images/header-bg.jpg

159 KB
Loading

‎public/floating_clouds/images/top-bg.jpg

20.8 KB
Loading

‎public/floating_clouds/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<html xmlns="http://www.w3.org/1999/xhtml"><head>
2+
3+
4+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
5+
<title>Floating Clouds</title>
6+
<style type="text/css">
7+
body { background: #f1edd0 url('images/bg.jpg') repeat top left; margin: 0; }
8+
#watercolor-bleed { width: 100%; background: url('images/top-bg.jpg') repeat-x 0 0; }
9+
#wrap {width: 100%; background: url('images/header-bg.jpg') no-repeat 50% 0; margin: 0; min-height: 1039px;}
10+
#clouds{ background:transparent url('images/clouds.png') repeat-x scroll 0 0; bottom: 0; left: 0; top: 0; right: 0; position:absolute; height: 210px; width: 100%; }
11+
#header { margin: 0 auto; width: 943px; margin: 0 auto; position: relative; }
12+
</style>
13+
14+
<script src="/javascripts/jquery-1.4.min.js" type="text/javascript"></script>
15+
<script type="text/javascript">
16+
17+
$(document).ready(function(){
18+
19+
// Cloud shifting animation on all page backgrounds
20+
var shift = -330;
21+
function shiftClouds() {
22+
$('#clouds').css({
23+
backgroundPosition: '' + shift + 'px 0'
24+
});
25+
shift -= 1;
26+
}
27+
var timer = setInterval(shiftClouds, 100);
28+
});
29+
30+
</script>
31+
32+
</head>
33+
<body class="home">
34+
<div id="watercolor-bleed">
35+
<div id="clouds" style="background-position: -75387px 0pt;"></div>
36+
<div id="wrap">
37+
<div id="header">
38+
39+
</div>
40+
</div>
41+
</div>
42+
</body>
43+
</html>

‎public/grid_display_switch/images/switch_bg.gif

1.53 KB
Loading

‎public/grid_display_switch/index.html

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,19 @@
121121

122122
a.switch_thumb {
123123
width: 122px;
124-
height: 26px;
124+
height: 16px;
125+
-moz-border-radius: 5px; -webkit-border-radius: 5px;
126+
/* border:1px solid #666;*/
127+
color:#999;
125128
line-height: 26px;
126-
padding: 0;
129+
padding: 6px 0 4px 0;
127130
margin: 10px 0;
128131
display: block;
129-
background: url(images/switch.gif) no-repeat;
132+
background: #444 url(images/switch_bg.gif) no-repeat;
130133
outline: none;
131-
text-indent: -9999px;
134+
text-decoration:none;
135+
text-indent: 8px;
136+
font:12px Arial;
132137
}
133138
a:hover.switch_thumb {
134139
filter:alpha(opacity=75);
@@ -147,7 +152,7 @@ <h1>Switch <span>Display Options</span><small>with CSS &amp; jQuery</small></h1>
147152

148153
<div class="container">
149154

150-
<a href="#" class="switch_thumb">Switch Thumb</a>
155+
<a href="#" class="switch_thumb">Switch View</a>
151156

152157
<ul class="display">
153158
<li>

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<div><a href="/fancy_checkboxes/">Fancy Check Box Replacement</a></div>
2020
<div><a href="/nice_forms/">Nice Forms (extensive styling)</a></div>
2121
<div><a href="/grid_display_switch/">Grid to List Display Switch</a></div>
22+
<div><a href="/floating_clouds/">Floating Clouds</a></div>
2223

2324
</body>
2425
</html>

0 commit comments

Comments
 (0)