Skip to content

Commit ab74339

Browse files
Adam SingerAdam Singer
Adam Singer
authored and
Adam Singer
committed
add grid view
1 parent 141fcb5 commit ab74339

File tree

9 files changed

+205
-0
lines changed

9 files changed

+205
-0
lines changed

‎public/grid_display_switch/images/sample.gif

22 KB
Loading

‎public/grid_display_switch/images/sample2.gif

22.8 KB
Loading

‎public/grid_display_switch/images/sample3.gif

19.3 KB
Loading

‎public/grid_display_switch/images/sample4.gif

22.6 KB
Loading

‎public/grid_display_switch/images/sample5.gif

24.1 KB
Loading

‎public/grid_display_switch/images/sample6.gif

21.1 KB
Loading

‎public/grid_display_switch/images/switch.gif

3.08 KB
Loading

‎public/grid_display_switch/index.html

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5+
<title>Switch Display Optionswith CSS &amp; jQuery - by Soh Tanaka</title>
6+
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
7+
<script type="text/javascript">
8+
$(document).ready(function(){
9+
10+
$("a.switch_thumb").toggle(function(){
11+
$(this).addClass("swap");
12+
$("ul.display").fadeOut("fast", function() {
13+
$(this).fadeIn("fast").addClass("thumb_view");
14+
});
15+
}, function () {
16+
$(this).removeClass("swap");
17+
$("ul.display").fadeOut("fast", function() {
18+
$(this).fadeIn("fast").removeClass("thumb_view");
19+
});
20+
});
21+
22+
});
23+
</script>
24+
25+
<style type="text/css">
26+
body {
27+
margin: 0;
28+
padding: 50px 0 0;
29+
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
30+
background: #111;
31+
color: #fff;
32+
}
33+
* {
34+
margin: 0;
35+
padding: 0;
36+
}
37+
38+
img {
39+
border: none;
40+
}
41+
h1 {
42+
font: 5em normal Georgia, 'Times New Roman', Times, serif;
43+
text-align:center;
44+
margin-bottom: 20px;
45+
}
46+
h1 span { color: #e7ff61; }
47+
h1 small{
48+
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
49+
text-transform:uppercase;
50+
letter-spacing: 1.5em;
51+
display: block;
52+
color: #ccc;
53+
}
54+
55+
.container {
56+
width: 758px;
57+
margin: 0 auto;
58+
padding-bottom: 100px;
59+
overflow: hidden;
60+
}
61+
ul.display {
62+
float: left;
63+
width: 756px;
64+
margin: 0;
65+
padding: 0;
66+
list-style: none;
67+
border-top: 1px solid #333;
68+
border-right: 1px solid #333;
69+
background: #222;
70+
}
71+
ul.display li {
72+
float: left;
73+
width: 754px;
74+
padding: 10px 0;
75+
margin: 0;
76+
border-top: 1px solid #111;
77+
border-right: 1px solid #111;
78+
border-bottom: 1px solid #333;
79+
border-left: 1px solid #333;
80+
}
81+
ul.display li a {
82+
color: #e7ff61;
83+
text-decoration: none;
84+
}
85+
ul.display li .content_block {
86+
padding: 0 10px;
87+
}
88+
ul.display li .content_block h2 {
89+
margin: 0;
90+
padding: 5px;
91+
font-weight: normal;
92+
font-size: 1.7em;
93+
94+
}
95+
ul.display li .content_block p {
96+
margin: 0;
97+
padding: 5px 5px 5px 245px;
98+
font-size: 1.2em;
99+
}
100+
ul.display li .content_block a img{
101+
padding: 5px;
102+
border: 2px solid #ccc;
103+
background: #fff;
104+
margin: 0 15px 0 0;
105+
float: left;
106+
}
107+
108+
ul.thumb_view li{
109+
width: 250px;
110+
}
111+
ul.thumb_view li h2 {
112+
display: inline;
113+
}
114+
ul.thumb_view li p{
115+
display: none;
116+
}
117+
ul.thumb_view li .content_block a img {
118+
margin: 0 0 10px;
119+
}
120+
121+
122+
a.switch_thumb {
123+
width: 122px;
124+
height: 26px;
125+
line-height: 26px;
126+
padding: 0;
127+
margin: 10px 0;
128+
display: block;
129+
background: url(images/switch.gif) no-repeat;
130+
outline: none;
131+
text-indent: -9999px;
132+
}
133+
a:hover.switch_thumb {
134+
filter:alpha(opacity=75);
135+
opacity:.75;
136+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
137+
}
138+
a.swap { background-position: left bottom; }
139+
140+
141+
</style>
142+
</head>
143+
144+
<body>
145+
146+
<h1>Switch <span>Display Options</span><small>with CSS &amp; jQuery</small></h1>
147+
148+
<div class="container">
149+
150+
<a href="#" class="switch_thumb">Switch Thumb</a>
151+
152+
<ul class="display">
153+
<li>
154+
<div class="content_block">
155+
<a href="#"><img src="images/sample.gif" alt="" /></a>
156+
157+
<h2><a href="#">Image Name</a></h2>
158+
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
159+
</div>
160+
</li>
161+
<li>
162+
<div class="content_block">
163+
<a href="#"><img src="images/sample2.gif" alt="" /></a>
164+
<h2><a href="#">Image Name</a></h2>
165+
166+
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
167+
</div>
168+
</li>
169+
<li>
170+
<div class="content_block">
171+
<a href="#"><img src="images/sample3.gif" alt="" /></a>
172+
<h2><a href="#">Image Name</a></h2>
173+
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
174+
175+
</div>
176+
</li>
177+
<li>
178+
<div class="content_block">
179+
<a href="#"><img src="images/sample4.gif" alt="" /></a>
180+
<h2><a href="#">Image Name</a></h2>
181+
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
182+
</div>
183+
</li>
184+
<li>
185+
<div class="content_block">
186+
<a href="#"><img src="images/sample5.gif" alt="" /></a>
187+
<h2><a href="#">Image Name</a></h2>
188+
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
189+
</div>
190+
</li>
191+
<li>
192+
<div class="content_block">
193+
<a href="#"><img src="images/sample6.gif" alt="" /></a>
194+
<h2><a href="#">Image Name</a></h2>
195+
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
196+
</div>
197+
</li>
198+
</ul>
199+
200+
<div style="text-align:center; padding: 20px 0; display: block;float: left;">Display Switch w/ <a href="http://www.sohtanaka.com/web-design-blog/" target="_blank" style="color: #fff;">CSS</a> &amp; <a href="http://www.SohTanaka.com" target="_blank" style="color: #fff;">jQuery</a> by <a href="http://www.sohtanaka.com/web-design-blog/" target="_blank" style="color: #fff;">Soh Tanaka</a>. Check out his <a href="http://www.sohtanaka.com/web-design-blog/" target="_blank" style="color: #fff;">Web Design Blog</a> for more tutorials.</div>
201+
</div>
202+
203+
</body>
204+
</html>

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<div><a href="/airport_text_flipper/">Airport Text Flip Effect</a></div>
1919
<div><a href="/fancy_checkboxes/">Fancy Check Box Replacement</a></div>
2020
<div><a href="/nice_forms/">Nice Forms (extensive styling)</a></div>
21+
<div><a href="/grid_display_switch/">Grid to List Display Switch</a></div>
2122

2223
</body>
2324
</html>

0 commit comments

Comments
 (0)