This repository has been archived by the owner on Oct 22, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
53 lines (46 loc) · 1.72 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<title>Responsive Images</title>
<style type="text/css">
html { margin: 0; padding: 0; border-top: 5px solid lime; }
body { font-family: monospace; width: 800px; margin: 0 auto;}
a { color: magenta; }
a:hover { color: cyan; }
</style>
</head>
<body>
<h1>Responsive Images</h1>
<img id="responsive" alt="image has not responded yet" />
<a href="https://github.com/jennschiffer/Ask-a-Cop-Responsive-Images-Solution"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<p>This solution was implemented by <a href="http://twitter.com/jennschiffer" target="_blank">Jenn Schiffer</a> for her upcoming Kindle Single <a href="https://medium.com/p/d9a47f94eea7" target="_blank">"XML Is The Only High-Level Programming Language You Need"</a>.</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var mobileOrDesktop = prompt("Is this a mobile device (y) or desktop (n)? y/n");
var $responsiveImage = $('img#responsive');
switch ( mobileOrDesktop ) {
case 'y':
$responsiveImage.attr({
'src' : 'mobile.jpg',
'alt' : 'mobile image'
});
break;
case 'n':
$responsiveImage.attr({
'src' : 'desktop.jpg',
'alt' : 'desktop image'
});
break;
default:
$responsiveImage.attr({
'src' : 'trojanhorse.jpg',
'alt' : 'hack the planet'
});
$responsiveImage.after('<h1>TOLD YA TO CHOOSE Y OR NO BUT YOU DIDN\'T SO<br />~ * V I R U S * ~');
break;
}
})
</script>
</body>
</html>