Skip to content

Commit 6909025

Browse files
PascalPixelPascalPixel
committed
Responsive, working buttons
1 parent db113ad commit 6909025

File tree

1 file changed

+145
-103
lines changed

1 file changed

+145
-103
lines changed

‎index.html‎

Lines changed: 145 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -4,144 +4,186 @@
44
<meta charset='utf-8'>
55
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
66
<meta content="width=device-width, initial-scale=1.0" name="viewport">
7-
<style>
7+
<style>
88
body {
9-
background: #eeeeee;
10-
padding: 20px;
11-
color: #979374;
9+
background:#eee;
10+
color:#979374;
11+
padding:20px
1212
}
13-
.browser *, .browser *:before, .browser *:after {
14-
-webkit-box-sizing: border-box;
15-
-moz-box-sizing: border-box;
16-
box-sizing: border-box;
13+
.browser {
14+
-webkit-font-smoothing:antialiased;
15+
background-color:#FFF;
16+
border:1px solid #BBB;
17+
border-radius:0;
18+
border-top-left-radius:7px;
19+
border-top-right-radius:7px;
20+
box-shadow:0 3px 5px rgba(0,0,0,0.1);
21+
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
22+
font-size:14px;
23+
line-height:19px;
24+
position:relative;
25+
text-rendering:optimizeLegibility;
26+
vertical-align:baseline
27+
}
28+
29+
.browser *,.browser :before,.browser :after {
30+
-moz-box-sizing:border-box;
31+
-webkit-box-sizing:border-box;
32+
box-sizing:border-box
1733
}
34+
1835
.browser .pull-right {
19-
float:right;
36+
float:right
37+
}
38+
39+
.browser a {
40+
text-decoration:none
41+
}
42+
43+
.browser .address {
44+
background:#FFF;
45+
border:1px solid rgba(0,0,0,0.4);
46+
border-radius:5px;
47+
box-shadow:inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.7);
48+
display:inline-block;
49+
height:25px;
50+
font-size: 12px;
51+
left:70px;
52+
padding:3px 6px;
53+
position:absolute;
54+
right:7px
55+
}
56+
57+
.browser .back {
58+
border-bottom-left-radius:5px;
59+
border-top-left-radius:5px
60+
}
61+
62+
.browser .content {
63+
height:400px;
64+
overflow:hidden;
65+
position:relative
66+
}
67+
68+
.browser .forward {
69+
border-bottom-right-radius:5px;
70+
border-top-right-radius:5px
71+
}
72+
73+
.browser .reload {
74+
color:#788083;
75+
font-weight:700
2076
}
77+
78+
.browser .toolbar {
79+
border-bottom:1px solid rgba(0,0,0,0.4);
80+
border-top-left-radius:7px;
81+
border-top-right-radius:7px;
82+
box-shadow:inset 0 1px 0 #FFF;
83+
height:40px;
84+
padding:7px
85+
}
86+
87+
.browser .toolbar,.btn {
88+
background:linear-gradient(to bottom,#e2e2e2 0%, #c8c8c8 100%);
89+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2',endColorstr='#c8c8c8',GradientType=0)
90+
}
91+
2192
.browser .btn {
22-
cursor: pointer;
93+
border:1px solid rgba(0,0,0,0.3);
94+
box-shadow:inset 0 1px 0 white, 0 1px 0 rgba(255,255,255,0.7);
95+
color:#788083;
96+
cursor:pointer;
97+
display:inline-block;
98+
height:25px;
99+
margin-right:-5px;
100+
padding:2px 6px;
101+
text-shadow:0 1px 0 rgba(255,255,255,0.7);
102+
width:28px;
103+
transition: background 0.2s;
23104
}
24-
.browser a {
25-
color: inherit;
26-
text-decoration: none;
105+
106+
.browser .btn:hover {
107+
background:linear-gradient(to bottom,#ededed 0%,#c8c8c8 100%);
108+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#c8c8c8',GradientType=0)
27109
}
28-
.browser a:hover, .browser a.hover {
29-
text-decoration: none;
110+
111+
.browser .btn:active,.browser .btn.active {
112+
background:linear-gradient(to bottom,#c8c8c8 0%,#e2e2e2 100%);
113+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c8c8c8',endColorstr='#e2e2e2',GradientType=0)
30114
}
31-
.browser {
32-
border: 1px solid #BBB;
33-
border-radius: 0px;
34-
border-top-left-radius: 7px;
35-
border-top-right-radius: 7px;
36-
background-color: white;
37-
box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
38-
position: relative;
39-
color: #788083;
40-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
41-
font-size: 14px;
42-
line-height: 19px;
43-
vertical-align: baseline;
44-
text-rendering: optimizeLegibility;
45-
-webkit-font-smoothing: antialiased;
46-
}
47-
.browser-toolbar {
48-
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
49-
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
50-
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
51-
box-shadow: inset 0px 1px 0px white;
52-
border-bottom: 1px solid rgba(0,0,0,0.4);
53-
border-top-left-radius: 7px;
54-
border-top-right-radius: 7px;
55-
height: 50px;
56-
padding: 10px;
57-
}
58-
.browser-back, .browser-forward {
59-
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
60-
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
61-
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
62-
border: 1px solid rgba(0,0,0,0.3);
63-
box-shadow: inset 0px 1px 0px white, 0px 1px 0px rgba(255,255,255,0.7);
64-
height: 30px;
65-
width: 35px;
66-
padding: 5px 10px;
67-
display: inline-block;
68-
margin-right: -5px;
69-
text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
70-
}
71-
.browser-back {
72-
border-top-left-radius: 5px;
73-
border-bottom-left-radius: 5px;
74-
}
75-
.browser-forward {
76-
border-top-right-radius: 5px;
77-
border-bottom-right-radius: 5px;
78-
}
79-
.browser-address {
80-
background: white;
81-
border: 1px solid rgba(0,0,0,0.4);
82-
display: inline-block;
83-
position: absolute;
84-
left: 90px;
85-
right: 10px;
86-
border-radius: 5px;
87-
padding: 5px 10px;
88-
height: 30px;
89-
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2), 0px 1px 0px rgba(255,255,255,0.7);
90-
}
91-
.browser-content {
92-
position: relative;
93-
overflow: scroll;
94-
height: 400px;
95-
overflow: hidden;
96-
}
97-
.browser-reload {
98-
font-weight: bold;
99-
}
100-
.css3-browser {
115+
116+
.browser .css3-browser {
117+
border:none;
118+
height:100%;
101119
position:absolute;
102120
top:0;
103-
border: none;
104-
position: absolute;
105-
width: 100%;
121+
transition:top 240s;
122+
width:100%
123+
}
124+
125+
@media (min-width: 768px) {
126+
127+
.browser .toolbar {
128+
height:50px;
129+
padding:10px
130+
}
131+
132+
.browser .address {
133+
height:30px;
134+
left:90px;
135+
padding:5px 10px;
136+
right:10px
137+
}
138+
139+
.browser .btn {
140+
height:30px;
141+
padding:5px 10px;
142+
width:35px;
143+
}
144+
145+
}
146+
147+
/* Animation stuff */
148+
.browser .css3-browser {
106149
height: 3000px;
107-
transition: top 240s;
150+
transition: top 200s;
108151
}
109-
.css3-browser.moving{
152+
.browser .css3-browser.moving{
110153
top:-3000px;
111154
}
112155
</style>
113156
</head>
114157
<body>
115158
<div class="browser">
116-
<div class="browser-toolbar">
117-
<a class="browser-back" href="#">&#9668;</a>
118-
<a class="browser-forward" href="#">&#9658;</a>
119-
<div class="browser-address">
120-
<span class="url">http://polygon.com</span> <a class="browser-reload pull-right" href="#">&#x21bb;</a>
159+
<div class="toolbar">
160+
<a class="btn back" href="#">&#9668;</a>
161+
<a class="btn forward" href="#">&#9658;</a>
162+
<div class="address">
163+
<span class="url">http://rrrrrrrroll.tumblr.com/</span> <a class="reload pull-right" href="#">&#x21bb;</a>
121164
</div>
122165
</div>
123-
<div class="browser-content">
124-
<iframe class="css3-browser" name="iframe" src="http://www.polygon.com/"></iframe>
166+
<div class="content">
167+
<iframe class="css3-browser" name="iframe" src="http://rrrrrrrroll.tumblr.com/"></iframe>
125168
</div>
126169
</div>
127170
<script src="http://code.jquery.com/jquery-latest.js"></script>
128171
<script type="text/javascript">
129172
$(document).ready(function() {
130173

131-
//Start autoscroll code
174+
//Animation
132175
$('.css3-browser').addClass('moving');
133-
//End autoscroll code
134176

135-
//Make the buttons work on older browsers (new security doesn't allow this in modern browsers sadly)
136-
$('.browser-back').click(function(event) {
177+
//Buttons only work if iframe is on the same website
178+
$('.back').click(function(event) {
137179
event.preventDefault();
138180
iframe.history.back();
139181
});
140-
$('.browser-forward').click(function(event) {
182+
$('.forward').click(function(event) {
141183
event.preventDefault();
142184
iframe.history.forward();
143185
});
144-
$('.browser-reload').click(function(event) {
186+
$('.reload').click(function(event) {
145187
event.preventDefault();
146188
iframe.location.reload();
147189
});

0 commit comments

Comments
 (0)