html/css/javascript tests and whatever else

[The One Eyed Bandit]

The only reason I made this is so I wouldn't have to log on in other browsers to test compatibility :T


You can use anything here, if you want, code might be a bit messy to work with, though.

 

[The One Eyed Bandit]

Lesson learned from this: JavaScript is the biggest difficultly spike since the Capra Demon, and don't make things outside of RpN. The editor might be better, but... The code doesn't take nicely to the transition... RIP my typesetting.


The letters are tabs. Click them to change the content of the bottom boxes.



 




Personality



History



Skills



Trivia



Personality


History


Skills


Triva





GYEONG


ZAHARD



Personality


History


Skills


Triva





Personality


History


Skills


Triva




.csContainerTOEB{
position: relative;
border: 5px black solid;
height: 1150px;
top: 50px;
margin-left: auto;
margin-right: auto;
background-color: black;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
flex-direction: row;
width: 80%;

}

.navContainerTOEB{
position: relative;
border: 5px white solid;
height: 20px;
top: -7px;
right:-5px;
float: right;
background-color: white;
}

.csPortraitTOEB{
position: relative;
padding-top:23%;
width: 25%;
top: -18px;
left: 9px;
float: left;
border: 5px black solid;
background-image: url(https://www.rpnation.com/uploads/monthly_2016_11/large.aylmao.jpg.7991f6e2dc171c5ba9634df7482b3fb4.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
bottom: 0;
border-radius: 10%;
}

.csMenuTOEB {
border: 5px black solid;
height: 40px;
width: 34px;
margin:5px;
position: relative;
background-size: contain;
background-color: black;
overflow: hidden;
bottom: 20px;
float: right;
}

.headingTOEB{
display: inline-block;
border: 5px black solid;
height: 40px;
margin:5px;
position: relative;
background-size: contain;
background-color: black;
overflow: hidden;
bottom: 20px;
float: right;
}

.csMenuTOEB:hover{
width: 135px;
-transition:width 2s;
-moz-transition:width 2s;
-o-transition:width 2s;
-webkit-transition:width 2s;
}

.csMenuTOEB:hover > .csMenuTextTOEB > .opacityHoverTOEB{
opacity: 1;
-transitionpacity 2s;
-moz-transitionpacity 2s;
-o-transitionpacity 2s;
-webkit-transitionpacity 2s;
}

.csMenuTextTOEB{
position: relative;
font-size: 22px;
bottom: 24px;
letter-spacing: 0px;
opacity: 1;
color:white;
pointer-events: none;
font-family:Times New Roman,Times,serif;
}

.opacityHoverTOEB{
opacity: 0;
}

.csMenuTextTOEB{
left: 5px;
}

.headingContentTOEB{
font-size: 22px;
color: white;
padding: 0px 5px;
margin: 0;
margin-top: -3px;
bottom: 4px;
font-family:Times New Roman,Times,serif;
}

.characterQuoteTOEB{
margin-right: 9px;
width: 73%;
height: 215px;
float: right;
border: 5px black solid;
background-color: white;
}

.nameTOEB{
margin: 0;
padding: 0;
border: 0;
margin-top: auto;
margin-bottom: auto;
margin-left:16px;
}

.sideboxTOEB{
width: 25%;
height: 800px;
float: left;
border: 5px black solid;
margin-left:9px;
clear: left;
background-color: white;
overflow: auto;
}

.bodyboxTOEB{
margin-right: 9px;
width: 73%;
height: 800px;
float: right;
border: 5px black solid;
background-color: white;
overflow: auto;
}

.sidebarContentTOEB{
margin: 10px;
}

.paragraphContentTOEB{
margin: 10px;
}


$('.csMenuTOEB').click(function() {
$('.headingContentTOEB').hide();
$('.headingContentTOEB[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});

$('.csMenuTOEB').click(function() {
$('.sidebarContentTOEB').hide();
$('.sidebarContentTOEB[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});

$('.csMenuTOEB').click(function() {
$('.paragraphContentTOEB').hide();
$('.paragraphContentTOEB[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});

document.addEventListener('DOMContentLoaded', function() {
$('.paragraphContentTOEB').hide();
$('.sidebarContentTOEB').hide();
$('.headingContentTOEB').hide();
});

 

[IctoraPost]

Ooh, interesting. Unfortunately, JavaScript doesn't work on here, which is probably why it's a bit broken.

 

[The One Eyed Bandit]

Hmm? JavaScript works just fine. At least the stuff here, which is admittedly pretty basic.


It's a bit broken because I couldn't figure out how in the hell to set a default data value for the tabs, haha.

 

[IctoraPost]

...JavaScript works fine? It's... really not supposed to. Well.

 

[The One Eyed Bandit]

The stuff I put here does. It's just basic hides and shows, with an equation or two, though.

 

[IctoraPost]

Yeah, I don't think any JavaScript is supposed to work. Well, as long as it's only the non-website-breaking simple stuff, I guess.

 

[The One Eyed Bandit]

Welp.


¯\_(ツ)_/¯

 

[The One Eyed Bandit]

Simpler version because there wasn't much point in having the sidebar while keeping phones in mind, made it flexible too, though after going below a certain size it doesn't matter much. Still no default tab ._. Also added a gate at the start, if someone wants to do away with the html completely and just get the text.

[SIZE= 22px]ARE YOU ON DESKTOP OR MOBILE?[/SIZE]
​

DESKTOP
​

MOBILE
​

.optionTOEB2{
width:40%;
margin-left:auto;
margin-right:auto;
}
.desktopTOEB2{
width:40%;
background-color:grey;
float:left;
}
.mobileTOEB2{
width:40%;
background-color:grey;
float:right;
}


.optionTextTOEB2{
pointer-events:none;
}
.dragonGirlTOEB2{
z-index:500;
position:absolute;
bottom:-50px;
right:-200px;
}


placeholder



View attachment 213554


 




Personality



History



Skills



Trivia



Personality


History


Skills


Triva





DRAGON


GIRL



Personality



History



Skills



Triva










.csContainerTOEB2{
position: relative;
border: 5px #e15a5c solid;
height: 1100px;
width: 65%;
top: 50px;
margin-left: auto;
margin-right: auto;
background-color: #e15a5c;
border-radius: 1%;
}


.navContainerTOEB2{
position: relative;
border: 5px white solid;
height: 20px;
top: -7px;
right:-5px;
float: right;
background-color: #f9ffef;
}


.csPortraitTOEB2{
position: relative;
height: 250px;
width: 250px;
top: -18px;
left: 9px;
float: left;
border: 5px #e15a5c solid;
background-image: url(https://www.rpnation.com/uploads/monthly_2016_12/large.dragon.png.2f72f48022c7592a0f1e6fd75445353d.png);
bottom: 0;
border-radius: 10%;
}


.csMenuTOEB2 {
border: 5px #e15a5c solid;
height: 40px;
width: 34px;
margin:5px;
position: relative;
background-size: contain;
background-color: #e15a5c;
overflow: hidden;
bottom: 20px;
float: right;
border-radius: 10%;
}


.headingTOEB2{
display: inline-block;
border: 5px #e15a5c solid;
height: 40px;
margin:5px;
position: relative;
background-size: contain;
background-color: #e15a5c;
overflow: hidden;
bottom: 20px;
float: right;
border-radius: 5%;
}


.csMenuTOEB2:hover{
border-radius: 5%;
width: 135px;
-transition:width 2s;
-moz-transition:width 2s;
-o-transition:width 2s;
-webkit-transition:width 2s;
}


.csMenuTOEB2:hover > .csMenuTextTOEB2 > .opacityHoverTOEB2{
opacity: 1;
-transitionpacity 2s;
-moz-transitionpacity 2s;
-o-transitionpacity 2s;
-webkit-transitionpacity 2s;
}


.csMenuTextTOEB2{
position: relative;
font-size: 22px;
bottom: 24px;
letter-spacing: 0px;
opacity: 1;
color:white;
pointer-events: none;
font-family:Times New Roman,Times,serif;
}


.opacityHoverTOEB2{
opacity: 0;
}


.csMenuTextTOEB2{
left: 5px;
}


.headingContentTOEB2{
font-size: 22px;
color: white;
padding: 0px 5px;
margin: 0;
margin-top: -3px;
bottom: 4px;
font-family:Times New Roman,Times,serif;
}


.characterQuoteTOEB2{
margin-right: 9px;
width: 70%;
height: 202px;
float: right;
border: 5px #e15a5c solid;
background-color: #f9ffef;
overflow:auto;
}


.nameTOEB2{
margin: 0;
padding: 0;
border: 0;


margin-left:16px;
}


.sideboxTOEB2{
width: 250px;
height: 800px;
float: left;
border: 5px #e15a5c solid;
margin-left:9px;
clear: left;
background-color: #f9ffef;
overflow: hidden;
}


.bodyboxTOEB2{
margin-right: auto;
margin-left: auto;
width: 98%;
height: 800px;
border: 5px #e15a5c solid;
background-color: #f9ffef;
overflow: auto;
}


.sidebarContentTOEB2{
margin: 10px;
margin-right:0;
}


.paragraphContentTOEB2{
margin: 10px;
}


.sideboxTOEB2 > [data-link|=third] {
margin: 0;
background-image: url(https://www.rpnation.com/uploads/monthly_2016_11/large_heyy.png.174d495d04c4e6841a48cdbd9d9a8d0b.png);
}



$('.csMenuTOEB2').click(function() {
$('.headingContentTOEB2').hide();
$('.headingContentTOEB2[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});


$('.csMenuTOEB2').click(function() {
$('.sidebarContentTOEB2').hide();
$('.sidebarContentTOEB2[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});


$('.csMenuTOEB2').click(function() {
$('.paragraphContentTOEB2').hide();
$('.paragraphContentTOEB2[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});


document.addEventListener('DOMContentLoaded', function() {
$('.paragraphContentTOEB2').hide();
$('.sidebarContentTOEB2').hide();
$('.headingContentTOEB2').hide();
$('.csContainerTOEB2').hide();
$('.nohtmlTOEB2').hide();
});




$('.desktopTOEB2').click(function() {
$('.csContainerTOEB2').show();
$('.optionTOEB2').hide();
});


$('.mobileTOEB2').click(function() {
$('.nohtmlTOEB2').show();
$('.optionTOEB2').hide();
});

 

[Azure Sky]

On a different note, this dragon girl is adorable.

 

[The One Eyed Bandit]

On a different note, this dragon girl is adorable.

Yo fam

 

[Azure Sky]

Yo fam

Too many RPs to handle for me unfortunately.

 

[The One Eyed Bandit]

<= has none that are actually moving, other than the one I'm not introduced in yet


Jealous ._.

 

[Azure Sky]

<= has none that are actually moving, other than the one I'm not introduced in yet


Jealous ._.

Once you reach past ep 300 maybe you'll be interested in the One Piece roleplay I'm in. It's slow (I like it that way) but it moves.

 

[The One Eyed Bandit]

Once you reach past ep 300 maybe you'll be interested in the One Piece roleplay I'm in. It's slow (I like it that way) but it moves.

...300?


Yyeeaahh, that'd take a lifetime, lol. If I like the series enough I'm probably going to pick up the manga before I get to 50, for sake of speed.


I checked out that RP earlier today, though, not interested in joining just yet, but a buddy of mine is one of the head honchos apparently, so the chance is decent.

 

[Azure Sky]

but a buddy of mine

Dago, right?

 

[The One Eyed Bandit]

Yeah. How'd ya know?

 

[Azure Sky]

Yeah.

Anyway, I actually belive it's better to read the manga. The anime changes a few elements for the sake of appealing to younger audiences, among other things.

 

[The One Eyed Bandit]

Anyway, I actually belive it's better to read the manga. The anime changes a few elements for the sake of appealing to younger audiences, among other things.

I'll miss Luffy's dub voice, I'll say. He sounds like just as much of a lil shit as he is, lol.

 

[Azure Sky]

dub voice

Dub voice....


Hahahahaha....


Dub voice...


....


....

 

[The One Eyed Bandit]

Dub voice....


Hahahahaha....


Dub voice...


....


....

Funimation dub. It's quite good, imho.