Plain Page Flip Effect
up vote
2
down vote
favorite
I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book.
It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't work on IE8 and similar old browsers, it still doesn't look messy. I want to use this presentation method on a website.
- Are there any parts of the code that I need to create a fallback for?
- Could this page be faster?
- Are there any accessibility concerns?
- Are there any 'Best Coding Practices' that I need to include here?
- Any other improvements?
New Question:
- Will this effect make viewing a page uncomfortable on touch devices?
CodePen: https://codepen.io/ZechariahRaman/pen/NOYbXL/
var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>javascript performance css animation user-interface
asked Oct 18 at 6:59
Zechariah Raman
113
add a comment |
up vote
2
down vote
favorite
I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book.
It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't work on IE8 and similar old browsers, it still doesn't look messy. I want to use this presentation method on a website.
- Are there any parts of the code that I need to create a fallback for?
- Could this page be faster?
- Are there any accessibility concerns?
- Are there any 'Best Coding Practices' that I need to include here?
- Any other improvements?
New Question:
- Will this effect make viewing a page uncomfortable on touch devices?
CodePen: https://codepen.io/ZechariahRaman/pen/NOYbXL/
var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>javascript performance css animation user-interface
asked Oct 18 at 6:59
Zechariah Raman
113
"It works OK on browsers I have (Firefox, Chrome, IE8). But I want to use this presentation method on a website." Yes, websites are usually viewed with a browser. Is there a problem?
– Mast
Oct 18 at 7:17
That's my personal opinion - just about browser compatibility. I want a second opinion on whether the code/method could be better. Or perhaps more user friendly. I'm new to coding, so I was also hoping to see if there is anything I shouldn't have used or could have implemented differently.
– Zechariah Raman
Oct 18 at 7:54
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book.
It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't work on IE8 and similar old browsers, it still doesn't look messy. I want to use this presentation method on a website.
- Are there any parts of the code that I need to create a fallback for?
- Could this page be faster?
- Are there any accessibility concerns?
- Are there any 'Best Coding Practices' that I need to include here?
- Any other improvements?
New Question:
- Will this effect make viewing a page uncomfortable on touch devices?
CodePen: https://codepen.io/ZechariahRaman/pen/NOYbXL/
var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>javascript performance css animation user-interface
asked Oct 18 at 6:59
Zechariah Raman
113
I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book.
It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't work on IE8 and similar old browsers, it still doesn't look messy. I want to use this presentation method on a website.
- Are there any parts of the code that I need to create a fallback for?
- Could this page be faster?
- Are there any accessibility concerns?
- Are there any 'Best Coding Practices' that I need to include here?
- Any other improvements?
New Question:
- Will this effect make viewing a page uncomfortable on touch devices?
CodePen: https://codepen.io/ZechariahRaman/pen/NOYbXL/
var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>javascript performance css animation user-interface
javascript performance css animation user-interface
asked Oct 18 at 6:59
Zechariah Raman
113
asked Oct 18 at 6:59
Zechariah Raman
113
edited Oct 19 at 7:28
asked Oct 18 at 6:59
Zechariah Raman
113
asked Oct 18 at 6:59
Zechariah Raman
113
asked Oct 18 at 6:59
Zechariah Raman
113
113
"It works OK on browsers I have (Firefox, Chrome, IE8). But I want to use this presentation method on a website." Yes, websites are usually viewed with a browser. Is there a problem?
– Mast
Oct 18 at 7:17
That's my personal opinion - just about browser compatibility. I want a second opinion on whether the code/method could be better. Or perhaps more user friendly. I'm new to coding, so I was also hoping to see if there is anything I shouldn't have used or could have implemented differently.
– Zechariah Raman
Oct 18 at 7:54
add a comment |
"It works OK on browsers I have (Firefox, Chrome, IE8). But I want to use this presentation method on a website." Yes, websites are usually viewed with a browser. Is there a problem?
– Mast
Oct 18 at 7:17
That's my personal opinion - just about browser compatibility. I want a second opinion on whether the code/method could be better. Or perhaps more user friendly. I'm new to coding, so I was also hoping to see if there is anything I shouldn't have used or could have implemented differently.
– Zechariah Raman
Oct 18 at 7:54
"It works OK on browsers I have (Firefox, Chrome, IE8). But I want to use this presentation method on a website." Yes, websites are usually viewed with a browser. Is there a problem?
– Mast
Oct 18 at 7:17
"It works OK on browsers I have (Firefox, Chrome, IE8). But I want to use this presentation method on a website." Yes, websites are usually viewed with a browser. Is there a problem?
– Mast
Oct 18 at 7:17
That's my personal opinion - just about browser compatibility. I want a second opinion on whether the code/method could be better. Or perhaps more user friendly. I'm new to coding, so I was also hoping to see if there is anything I shouldn't have used or could have implemented differently.
– Zechariah Raman
Oct 18 at 7:54
That's my personal opinion - just about browser compatibility. I want a second opinion on whether the code/method could be better. Or perhaps more user friendly. I'm new to coding, so I was also hoping to see if there is anything I shouldn't have used or could have implemented differently.
– Zechariah Raman
Oct 18 at 7:54
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Declare variables in the smallest possible scope
It's recommended to declare variables in the smallest scope where they are needed.
That way, the variable will not be visible where it should not be,
and therefore it cannot be modified accidentally by mistake.
It also makes understanding a program easier when you don't need to keep more variables in your head than necessary.
Therefore, since most of the variables are not needed in the global scope,
move those declarations to the functions that need them.
Be careful with variable scope in JavaScript.
Looking at this code,
you may be mislead that the variable i is only visible within the loop:
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
But that's not the case. The variable is visible after the loop,
and even before the loop (with value undefined).
In this particular example you want to replace the var with the let keyword,
if your version of JavaScript supports it (like any non-ancient implementation).
Using let, the variable will only be visible within the loop.
Avoid redundant variable initializations
In the posted code all variables are initialized at the time of declaration.
But if the variables don't need an initial value, then this is just noise.
Order conditional terms by their values
It can improve readability when the terms in conditionals are in a consistent order. Take for example this piece:
if (y >= 0 && y < h) {
// ...
}
if (y >= h && y < h * 2) {
// ...
}
The first condition means y is between 0 and h,
and the second means y is between h and h * 2.
Although this is easy enough to see,
the current writing style doesn't really help to see it.
Consider this alternative:
if (0 <= y && y < h) {
// ...
}
if (h <= y && y < h * 2) {
// ...
}
Now, the meaning hasn't changed, but it's much easier to see.
And with this writing style,
it's also easier to see that the two conditions will not be true at the same time,
so the second if should in fact be an else if.
answered Oct 18 at 18:23
janos
96.5k12122349
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Declare variables in the smallest possible scope
It's recommended to declare variables in the smallest scope where they are needed.
That way, the variable will not be visible where it should not be,
and therefore it cannot be modified accidentally by mistake.
It also makes understanding a program easier when you don't need to keep more variables in your head than necessary.
Therefore, since most of the variables are not needed in the global scope,
move those declarations to the functions that need them.
Be careful with variable scope in JavaScript.
Looking at this code,
you may be mislead that the variable i is only visible within the loop:
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
But that's not the case. The variable is visible after the loop,
and even before the loop (with value undefined).
In this particular example you want to replace the var with the let keyword,
if your version of JavaScript supports it (like any non-ancient implementation).
Using let, the variable will only be visible within the loop.
Avoid redundant variable initializations
In the posted code all variables are initialized at the time of declaration.
But if the variables don't need an initial value, then this is just noise.
Order conditional terms by their values
It can improve readability when the terms in conditionals are in a consistent order. Take for example this piece:
if (y >= 0 && y < h) {
// ...
}
if (y >= h && y < h * 2) {
// ...
}
The first condition means y is between 0 and h,
and the second means y is between h and h * 2.
Although this is easy enough to see,
the current writing style doesn't really help to see it.
Consider this alternative:
if (0 <= y && y < h) {
// ...
}
if (h <= y && y < h * 2) {
// ...
}
Now, the meaning hasn't changed, but it's much easier to see.
And with this writing style,
it's also easier to see that the two conditions will not be true at the same time,
so the second if should in fact be an else if.
answered Oct 18 at 18:23
janos
96.5k12122349
add a comment |
up vote
0
down vote
Declare variables in the smallest possible scope
It's recommended to declare variables in the smallest scope where they are needed.
That way, the variable will not be visible where it should not be,
and therefore it cannot be modified accidentally by mistake.
It also makes understanding a program easier when you don't need to keep more variables in your head than necessary.
Therefore, since most of the variables are not needed in the global scope,
move those declarations to the functions that need them.
Be careful with variable scope in JavaScript.
Looking at this code,
you may be mislead that the variable i is only visible within the loop:
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
But that's not the case. The variable is visible after the loop,
and even before the loop (with value undefined).
In this particular example you want to replace the var with the let keyword,
if your version of JavaScript supports it (like any non-ancient implementation).
Using let, the variable will only be visible within the loop.
Avoid redundant variable initializations
In the posted code all variables are initialized at the time of declaration.
But if the variables don't need an initial value, then this is just noise.
Order conditional terms by their values
It can improve readability when the terms in conditionals are in a consistent order. Take for example this piece:
if (y >= 0 && y < h) {
// ...
}
if (y >= h && y < h * 2) {
// ...
}
The first condition means y is between 0 and h,
and the second means y is between h and h * 2.
Although this is easy enough to see,
the current writing style doesn't really help to see it.
Consider this alternative:
if (0 <= y && y < h) {
// ...
}
if (h <= y && y < h * 2) {
// ...
}
Now, the meaning hasn't changed, but it's much easier to see.
And with this writing style,
it's also easier to see that the two conditions will not be true at the same time,
so the second if should in fact be an else if.
answered Oct 18 at 18:23
janos
96.5k12122349
add a comment |
up vote
0
down vote
up vote
0
down vote
Declare variables in the smallest possible scope
It's recommended to declare variables in the smallest scope where they are needed.
That way, the variable will not be visible where it should not be,
and therefore it cannot be modified accidentally by mistake.
It also makes understanding a program easier when you don't need to keep more variables in your head than necessary.
Therefore, since most of the variables are not needed in the global scope,
move those declarations to the functions that need them.
Be careful with variable scope in JavaScript.
Looking at this code,
you may be mislead that the variable i is only visible within the loop:
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
But that's not the case. The variable is visible after the loop,
and even before the loop (with value undefined).
In this particular example you want to replace the var with the let keyword,
if your version of JavaScript supports it (like any non-ancient implementation).
Using let, the variable will only be visible within the loop.
Avoid redundant variable initializations
In the posted code all variables are initialized at the time of declaration.
But if the variables don't need an initial value, then this is just noise.
Order conditional terms by their values
It can improve readability when the terms in conditionals are in a consistent order. Take for example this piece:
if (y >= 0 && y < h) {
// ...
}
if (y >= h && y < h * 2) {
// ...
}
The first condition means y is between 0 and h,
and the second means y is between h and h * 2.
Although this is easy enough to see,
the current writing style doesn't really help to see it.
Consider this alternative:
if (0 <= y && y < h) {
// ...
}
if (h <= y && y < h * 2) {
// ...
}
Now, the meaning hasn't changed, but it's much easier to see.
And with this writing style,
it's also easier to see that the two conditions will not be true at the same time,
so the second if should in fact be an else if.
answered Oct 18 at 18:23
janos
96.5k12122349
Declare variables in the smallest possible scope
It's recommended to declare variables in the smallest scope where they are needed.
That way, the variable will not be visible where it should not be,
and therefore it cannot be modified accidentally by mistake.
It also makes understanding a program easier when you don't need to keep more variables in your head than necessary.
Therefore, since most of the variables are not needed in the global scope,
move those declarations to the functions that need them.
Be careful with variable scope in JavaScript.
Looking at this code,
you may be mislead that the variable i is only visible within the loop:
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
But that's not the case. The variable is visible after the loop,
and even before the loop (with value undefined).
In this particular example you want to replace the var with the let keyword,
if your version of JavaScript supports it (like any non-ancient implementation).
Using let, the variable will only be visible within the loop.
Avoid redundant variable initializations
In the posted code all variables are initialized at the time of declaration.
But if the variables don't need an initial value, then this is just noise.
Order conditional terms by their values
It can improve readability when the terms in conditionals are in a consistent order. Take for example this piece:
if (y >= 0 && y < h) {
// ...
}
if (y >= h && y < h * 2) {
// ...
}
The first condition means y is between 0 and h,
and the second means y is between h and h * 2.
Although this is easy enough to see,
the current writing style doesn't really help to see it.
Consider this alternative:
if (0 <= y && y < h) {
// ...
}
if (h <= y && y < h * 2) {
// ...
}
Now, the meaning hasn't changed, but it's much easier to see.
And with this writing style,
it's also easier to see that the two conditions will not be true at the same time,
so the second if should in fact be an else if.
answered Oct 18 at 18:23
janos
96.5k12122349
answered Oct 18 at 18:23
janos
96.5k12122349
answered Oct 18 at 18:23
janos
96.5k12122349
answered Oct 18 at 18:23
janos
96.5k12122349
96.5k12122349
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f205793%2fplain-page-flip-effect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"It works OK on browsers I have (Firefox, Chrome, IE8). But I want to use this presentation method on a website." Yes, websites are usually viewed with a browser. Is there a problem?
– Mast
Oct 18 at 7:17
That's my personal opinion - just about browser compatibility. I want a second opinion on whether the code/method could be better. Or perhaps more user friendly. I'm new to coding, so I was also hoping to see if there is anything I shouldn't have used or could have implemented differently.
– Zechariah Raman
Oct 18 at 7:54