Help My code is so messed up...

koala · Apr 10, 2018

My code is so messed up I don't even know where to begin. I started off with the new BBCode+ tabs coding, and I just... aedgrfdsbcvgacws. My tabs aren't working and for anyone that even attempts to figure out what's wrong, I commend you. It's all very cluttered and I apologize. It's cluttered, but I can still understand it so I normally don't ask for help. Thank you in advance. :closedeyescryingfrown:

* Please don't steal my crappy coding. Thank you.

Code:

[div=background-color: #AFB7BE;
        width: 665px;
        height: 450px;
        margin: auto;
][div=background-color: #4F6272;
height: 300px;
width: 280px;
margin-left: 20px;
margin-top: 20px;
position: absolute;
border-radius: 5px;
][div=border: 1px solid #F8FDFB;
background-image: url(https://i.imgur.com/LKGLfdq.jpg);
height: 260px;
width: 240px;
margin: auto;
margin-top: 20px;
font-size: 25px;
text-align: center;
color: #F8FDFB;
letter-spacing: 2px;
line-height: 1.5;
text-shadow: 3px 3px #333333;][div=background-image: url(https://i.imgur.com/HiZ8YBQ.png);
background-size: 120%;
background-position: 50%;
height: 150px;
width: 150px;
margin-top: 20px;
margin-left: 45px;
border-radius: 50%;
border: 1px solid #F8FDFB][/div][font=Noto Sans]ITSUKI
TOUMA[/font][/div][/div]

    [class=tabs]
        background-color: #4F6272;
        color: #F8FDFB;
        font-size: 8px;
        line-height: 1;
        min-width: 300px;
        text-align: center;
        width: 300px;
        position: absolute;
        margin-top: 125px;
        margin-left: 20px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    [/class]
   
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 30%;
    [/class]

    [class name=tab state=hover]
        background-color: #41515E;
    [/class]
   
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} General) (show tabsContentGeneral)
        if (eq ${currentTab} Appearance) (show tabsContentAppearance)
        if (eq ${currentTab} Persona) (show tabsContentPersona)
        if (eq ${currentTab} Background) (show tabsContentBackground)
        if (eq ${currentTab} Miscellaneous) (show tabsContentMiscellaneous)
    [/script]
   
    [div class=tabs][div class=tab]GENERAL [fa]fa-circle[/fa][/div][div class=tab]APPEARANCE [fa]fa-circle[/fa][/div][div class=tab]PERSONA [fa]fa-circle[/fa][/div][div class=tab]BACKGROUND [fa]fa-circle[/fa][/div][div class=tab]MISCELLANEOUS [fa]fa-circle[/fa][/div][/div]
   
    [div class="tabsContent tabsContentGeneral;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -230px;
][div=height: 150px;
     width: 285px;
     margin-top: 70px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
][font=Noto Sans]⤳ [b]name:[/b] Itsuki Touma
⤳ [b]age:[/b] 22
⤳ [b]birthday:[/b]
⤳ [b]gender:[/b] Male
⤳ [b]romantic orientation:[/b] Demiromantic
⤳ [b]sexual orientation:[/b] Heterosexual
⤳ [b]ethnicity:[/b] Japanese
⤳ [b]occupation:[/b] University Student, 4th year[/font][/div][div=background-image: url(https://i.imgur.com/IAEXLPR.png);
     background-size: 150%;
     background-position: -90px 180px;
     height: 150px;
     width: 305px;
     margin: auto;
     margin-top: 250px;
     position: absolute;
][/div][/div][/div]

    [div class="tabsContent tabsContentAppearance;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -272px;
][div=height: 350px;
     width: 293px;
     margin-top: 10px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
     border: 1px solid;
][font=Noto Sans][row][column=span5]⤳ [b]faceclaim:[/b] [url=https://www.instagram.com/aymmm_cby/]AYUMU[/url]

⤳ [b]height:[/b]

⤳ [b]weight:[/b]

⤳ [b]hair:[/b] Itsuki's hair is currently black and wavy, however, he's been known for having pastel hair colors in the past. The continuous dying has left his hair a bit drier than it used to be, but it's getting back to its former, healthy state. His hair is also on the shaggier side in length since he unconsciously keeps up with the trends.

⤳ [b]eyes:[/b] Dark Brown

⤳ [b]modifications:[/b] He usually wears small silver hoops in either one ear or both.

⤳ [b]fashion style:[/b] Like his hair, Itsuki's sense of clothing leads towards the dark spectrum. He wears the color black more than anything, but he's not scared of showing a more colorful side. He also will throw on fake glasses when he's not looking his best or feeling a bit lazy.[/column][column=span3][bg=#F8FDFB][img]https://i.imgur.com/XI9HFGt.png[/img]
[img]https://i.imgur.com/XMA8iUQ.png[/img]
[img]https://i.imgur.com/KemFUnf.png[/img]
[img]https://i.imgur.com/NwDa28p.png][/img]
[img]https://i.imgur.com/tb9JxmM.png[/img]
[img]https://i.imgur.com/HZmJTex.png[/img]
[img]https://i.imgur.com/t0QCYDe.png[/img][/bg][/column][/row][/font][/div][/div]
    
    [div class="tabsContent tabsContentPersona;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -272px;
][div=height: 350px;
     width: 293px;
     margin-top: 10px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
     border: 1px solid;
][/div][/div][/div]
   
    [div class="tabsContent tabsContentBackground;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -272px;
][div=height: 350px;
     width: 293px;
     margin-top: 10px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
     border: 1px solid;
][/div][/div][/div]

    [div class="tabsContent tabsContentMiscellaneous;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -272px;
][div=height: 350px;
     width: 293px;
     margin-top: 10px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
     border: 1px solid;
][/div][/div][/div][div=background-color: #4F6272;
height: 25px;
width: 300px;
position: absolute;
margin-top: 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;][/div]
[/div][/div]

Alteras · Apr 11, 2018

The problem is that it is getTexting the space as well as the tab name. Remove the space or add the space in the string when it tests for it: “GENERAL “

koala · Apr 11, 2018

Alteras said:
The problem is that it is getTexting the space as well as the tab name. Remove the space or add the space in the string when it tests for it: “GENERAL “

I vaguely understand what you're talking about. :ghostl:

...

Alteras · Apr 11, 2018

Err... so when it does getText, it'll copy all the text in the div, say for example: [div class=tab]GENERAL [fa]fa-circle[/fa][/div]

Since getText can't pick up fa icons, what it'll get is "GENERAL " instead of "GENERAL [fa]fa-circle[/fa]". In your code, you have it as if (eq ${currentTab} General), which is actually being read as if (eq ${currentTab} "General"). Ah... not only is it being stopped by the space, it also isn't capitalized. So what you really should have there is if (eq ${currentTab} "GENERAL ")

koala · Apr 11, 2018

Like this?

Alteras · Apr 11, 2018

Yep. Ah you didn't need to get rid of the fa icons. you can give them some extra space by inserting fa-fw like [fa]fa-circle fa-fw[/fa] if you want.

koala · Apr 11, 2018

I see, I see. Thank you very much!

koala · Apr 11, 2018

Frustratingly enough, the tabs still aren’t working. I might just trash the code and create something new. xD

Alteras · Apr 11, 2018

I can see the code if you'd like.

koala · Apr 11, 2018

Alteras said:
I can see the code if you'd like.

If you could, that would be wonderful. I will dedicate a shrine in your name.

Alteras · Apr 11, 2018

Koala said:
If you could, that would be wonderful. I will dedicate a shrine in your name.

haha, no need to do that. May I see your code?

koala · Apr 11, 2018

Alteras said:
haha, no need to do that. May I see your code?

Yes, of course! Here's the code or feel free to drop into my "Male Characters" workshop thread and scroll all the way down.

Code:

[div=background-color: #AFB7BE;
        width: 665px;
        height: 450px;
        margin: auto;
][div=background-color: #4F6272;
height: 300px;
width: 280px;
margin-left: 20px;
margin-top: 20px;
position: absolute;
border-radius: 5px;
][div=border: 1px solid #F8FDFB;
background-image: url(https://i.imgur.com/LKGLfdq.jpg);
height: 260px;
width: 240px;
margin: auto;
margin-top: 20px;
font-size: 25px;
text-align: center;
color: #F8FDFB;
letter-spacing: 2px;
line-height: 1.5;
text-shadow: 3px 3px #333333;][div=background-image: url(https://i.imgur.com/HiZ8YBQ.png);
background-size: 120%;
background-position: 50%;
height: 150px;
width: 150px;
margin-top: 20px;
margin-left: 45px;
border-radius: 50%;
border: 1px solid #F8FDFB][/div][font=Noto Sans]ITSUKI
TOUMA[/font][/div][/div]

    [class=tabs]
        background-color: #4F6272;
        color: #F8FDFB;
        font-size: 8px;
        line-height: 1;
        min-width: 300px;
        text-align: center;
        width: 300px;
        position: absolute;
        margin-top: 125px;
        margin-left: 20px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    [/class]

    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 30%;
    [/class]

    [class name=tab state=hover]
        background-color: #41515E;
    [/class]

    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} GENERAL) (show tabsContentGENERAL)
        if (eq ${currentTab} APPEARANCE) (show tabsContentAPPEARANCE)
        if (eq ${currentTab} PERSONA) (show tabsContentPERSONA)
        if (eq ${currentTab} BACKGROUND) (show tabsContentBACKGROUND)
        if (eq ${currentTab} MISCELLANEOUS) (show tabsContentMISCELLANEOUS)
    [/script]

[div class=tabs][div class=tab]GENERAL[fa]fa-circle fa-fw[/fa][/div][div class=tab]APPEARANCE[fa]fa-circle fa-fw[/fa][/div][div class=tab]PERSONA[fa]fa-circle fa-fw[/fa][/div][div class=tab]BACKGROUND[fa]fa-circle fa-fw[/fa][/div][div class=tab]MISCELLANEOUS[fa]fa-circle fa-fw[/fa][/div][/div]

[div class="tabsContent tabsContentGENERAL;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -230px;
][div=height: 150px;
     width: 285px;
     margin-top: 70px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
][font=Noto Sans]⤳ [B]name:[/B] Itsuki Touma
⤳ [B]age:[/B] 21
⤳ [B]birthday:[/B] August 12th
⤳ [B]gender:[/B] Male
⤳ [B]romantic orientation:[/B] Demiromantic
⤳ [B]sexual orientation:[/B] Bisexual (female preference)
⤳ [B]ethnicity:[/B] Japanese
⤳ [B]occupation:[/B] University Student, 3rd year[/font][/div][div=background-image: url(https://i.imgur.com/IAEXLPR.png);
     background-size: 150%;
     background-position: -90px 180px;
     height: 150px;
     width: 305px;
     margin: auto;
     margin-top: 250px;
     position: absolute;
][/div][/div][/div]

[div class="tabsContent tabsContentAPPEARANCE;"][div=background-color: #7F8C98;
     width: 305px;
     height: 390px;
     padding: 10px;
     position: absolute;
     margin-left: 320px;
     margin-top: -272px;
][div=height: 350px;
     width: 293px;
     margin-top: 10px;
     padding: 10px;
     font-size: 12px;
     color: #333333;
     overflow-y: auto;
     position: absolute;
     display: inline-block;
     line-height: 1.6;
][font=Noto Sans][row][column=span5]⤳ [B]faceclaim:[/B] [URL='https://www.instagram.com/aymmm_cby/']AYUMU[/URL]

⤳ [B]height:[/B] 179.5 cm

⤳ [B]weight:[/B] 65 kg

⤳ [B]hair:[/B] Itsuki's hair is currently black and wavy, however, he's been known for having pastel hair colors in the past. The continuous dyeing has left his hair a bit drier than it used to be, but it's getting back to its former, healthy state. His hair is also on the shaggier side in length since he unconsciously keeps up with the trends.

⤳ [B]eyes:[/B] Dark Brown

⤳ [B]modifications:[/B] He usually wears small silver hoops in either one ear or both.

⤳ [B]fashion style:[/B] Like his hair, Itsuki's sense of clothing leads towards the dark spectrum. He wears the color black more than anything, but he's not scared of showing a more colorful side. He also will throw on fake glasses when he's not looking his best or feeling a bit lazy.[/column][column=span3][bg=#F8FDFB][IMG]https://i.imgur.com/XI9HFGt.png[/IMG]
[IMG]https://i.imgur.com/XMA8iUQ.png[/IMG]
[IMG]https://i.imgur.com/KemFUnf.png[/IMG]
[IMG]https://i.imgur.com/NwDa28p.png][/IMG]
[IMG]https://i.imgur.com/tb9JxmM.png[/IMG]
[IMG]https://i.imgur.com/HZmJTex.png[/IMG]
[IMG]https://i.imgur.com/t0QCYDe.png[/IMG][/bg][/column][/row][/font][/div][/div]

[div class="tabsContent tabsContentPERSONA;"][/div]

[div class="tabsContent tabsContentBACKGROUND;"][/div]

[div class="tabsContent tabsContentMISCELLANEOUS;"][/div][div=background-color: #4F6272;
height: 25px;
width: 300px;
position: absolute;
margin-top: 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;][/div]
[/div][/div]

Alteras · Apr 11, 2018

ahh, you had a semi-colon when you put the class names in the div. That's what is causing the problem here.

koala · Apr 11, 2018

Ohh, goodness. I can’t believe I missed that.

Help My code is so messed up...

koala

™

Alteras

The Sleepy Prisoner

koala

™

Alteras

The Sleepy Prisoner

koala

™

Alteras

The Sleepy Prisoner

koala

™

koala

™

Alteras

The Sleepy Prisoner

koala

™

Alteras

The Sleepy Prisoner

koala

™

Alteras

The Sleepy Prisoner

koala

™

Users who are viewing this thread

Similar threads