Nyctophilia; a coding thread (new/old coders are encouraged to join!)

The Artists' Showroom Coding Wizards
,
229

i’m good!! what about yourself?
and thamk :> i’m very new to coding lolol

3 Likes
230

That’s great to hear!! <3 xD
I’m doing pretty good, multitasking between WW and practicing Pythagorean theorem LOLOL (thankfully a good mix of both hehe)
Oh? :eyes: lookies at intro form

3 Likes
231

oh god i do not understand math my brain hurts already and im not even the one doing it ;; i wish you luck with that LOL

3 Likes
232

xD Thanks!
And I wish you luck with coding! :four_leaf_clover:

2 Likes
233

ofc and thank u :>

3 Likes
234

Hello Jade! Welcome:3

2 Likes
235

Ooh, pretty:0

2 Likes
236

The Pythagorean theorem is something I surprisingly found fun in school…

3 Likes
237

hewwo! thank you :>

3 Likes
238

Hehe, thanks! :laughing:

LOLOL That was me when I first learned it but I hate it when I have to find the hypotenuse’s square root (when it involves decimals) xD

3 Likes
239

Also: proofs for Pythagorean theorem are great.

4 Likes
240

Yuck just use simplified radicals

3 Likes
241

I wish I could :sob: :sob:
But then it’s counted as wrong :pleading_face:

3 Likes
242

Conclusion: your teachers can suck it up

4 Likes
243

Took a quick peek at the post:

  1. It appears you might’ve accidentally deleted a section of your code, find the string “height;” and replace that with “height: 40px;”. That should fix your first link not working.
  2. To change the height look for the line “scaleY(210)” and insert your height there. Yes it’s a confusing way of stating the height but necessary since ‘scale’ animations can be done cheaply whilst animating ‘height’ will force the browser to recalculate the position of every single element in the SVG for every single frame <— can be slow and expensive and result in janky animations
  3. If you’re changing the height, you might also have to change the code for the trigger mechanism but I’ll get to that in a bit.

Currently rewriting the code for the menu feature to try make it as easy to customise as possible.

4 Likes
244

Thanks a lot! :pray:

attempt 2:

 Sidera...
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mi lobortis tortor ullamcorper laoreet. Maecenas in magna risus. Nulla ultrices porttitor magna, ultricies gravida enim tempus at. Donec non cursus urna. Nulla sit amet arcu leo. Etiam consequat et magna convallis vehicula.

There is a menu icon on the upper-left corner. Vivamus lacinia felis felis, ac ornare ipsum fermentum quis. Sed in arcu urna. Nunc molestie sapien id laoreet iaculis. Aliquam tempor commodo eros eget volutpat.

Maecenas pharetra leo eu mi tincidunt auctor. Vivamus molestie vitae arcu non mollis.

I think it works! :smiley:

raw code 
<span style="font-size: 3vmin; font-family: Garamond; display: block; border: 3px solid; border-color: #ffffff; box-shadow: 10px 10px 0px #000000; padding: 20px; margin-left: 5%; margin-right: 5%; text-align: center; background-image: url('https://lh5.googleusercontent.com/proxy/p9OQH5sMn3StgSjSwnReE04NIUFTnLLZlCXXb-qeYn2C0jODl2x-qTtQ755axiBeshQ=s0-d'); background-size: cover; background-position: bottom;">
<span style="font-size:; color: rgb(50, 50, 50); display: block; padding: 50px 30px 30px 30px; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
  <span style="font-size:; display: block; width: 100%; position: absolute; top: 0; left: 0;">
    <span style="font-size:; display: block; box-sizing: border-box; padding-left: 20px; height: 100%; width: 100%; position: absolute; pointer-events: none;">
      <span style="font-size:; display: block; position: relative; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%%27 height=%27100%%27><rect id=%27menublock%27 width=%2740px%27 height=%2738px%27 y=%2712%27 fill=%27transparent%27/><defs><rect id=%27menubar%27 width=%2730px%27 x=%275%27 height=%274px%27/></defs><use id=%27menubar_one%27 href=%27%23menubar%27 y=%2720%27 style=%27transform-origin: 5px 20px;%27/><use id=%27menubar_two%27 href=%27%23menubar%27 y=%2730%27/><use id=%27menubar_three%27 href=%27%23menubar%27 y=%2740%27 style=%27transform-origin: 5px 42px;%27/><rect id=%27menubody%27 height=%271%27 width=%27250%27 fill=%27rgb(60, 60, 60)%27></rect><g id=%27menuitem_one%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%2790%27 fill=%27white%27>Item 1</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27110%27/></g><g id=%27menuitem_two%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27150%27 fill=%27white%27>Item 2</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27170%27/></g><g id=%27menuitem_three%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27210%27 fill=%27white%27>Item 3</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27230%27/></g><g id=%27menuitem_four%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27270%27 fill=%27white%27>Item 4</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27290%27/></g><g id=%27menuitem_five%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27330%27 fill=%27white%27>Item 5</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27350%27/></g><g id=%27menuitem_six%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27390%27 fill=%27white%27>Item 6</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27410%27/></g><g id=%27menuitem_seven%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27450%27 fill=%27white%27>Item 7</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27470%27/></g><animate/><style>.menuitem { font: 1.2em Arial; transform: translateX(-220px); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } %23menubar_one, %23menubar_two, %23menubar_three, %23menubar_four, %23menubar_five, %23menubar_six, %23menubar_seven, %23menublock { -webkit-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.2s 0.3s ease; } %23menubody { transform: translateY(50px) scaleY(0); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.3s ease; } @media (min-height: 291px) { .menuitem { transform: translateX(20px); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } %23menuitem_one { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } %23menuitem_two { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } %23menuitem_three { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } %23menuitem_four { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } %23menuitem_five { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } %23menuitem_six { -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; } %23menuitem_seven { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } %23menubar_one, %23menubar_two, %23menubar_three, %23menubar_four, %23menubar_five, %23menubar_six, %23menubar_seven, %23menublock { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } %23menubody { transform: translateY(50px) scaleY(440); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; } %23menublock { fill: rgb(60, 60, 60); } %23menubar_one { fill: rgb(170, 170, 170); transform: translateX(5px) rotateZ(45deg); } %23menubar_two { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_three { fill: rgb(170, 170, 170); transform: translateX(5px) rotateZ(-45deg); } %23menubar_four { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_five { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_six { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_seven { fill: rgb(170, 170, 170); opacity: 0; } }</style></svg>')"></span>
    </span>
    <span style="font-size:; display: block; margin: 12px 0 0 20px; width: 40px; position: relative; color: transparent;">
      <details>
        <summary>
          <span style="font-size:; display: block; height: 40px; width: 100%; position: absolute; top: 12px; cursor: pointer;"></span>
        </summary>
        <span style="font-size:; display: inline-block; min-height: 300px; width: 250px; position: relative;">
           <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/1"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 14px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/2"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 13px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/3"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 12px;"></span></a>
<span style="font-size:; display: inline-block; min-height: 300px; width: 250px; position: relative;">
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/4"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 9px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/5"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 9px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/6"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 7px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/7"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 6px;"></span></a>
        </span>
      </details>
    </span>
  </span>
<span style="font-size: 6vmin; display: block; font-family: Garamond; color: white; margin-bottom: 18px; letter-spacing: 2.2px;">Sidera...<br></span>
<span style="font-size: 3vmin; font-family: Garamond; display: block; border: 3px transparent; color: #ffffff; padding: 12px; margin: auto; margin-bottom: 10px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mi lobortis tortor ullamcorper laoreet. Maecenas in magna risus. Nulla ultrices porttitor magna, ultricies gravida enim tempus at. Donec non cursus urna. Nulla sit amet arcu leo. Etiam consequat et magna convallis vehicula.<br><br>
There is a menu icon on the upper-left corner. Vivamus lacinia felis felis, ac ornare ipsum fermentum quis. Sed in arcu urna. Nunc molestie sapien id laoreet iaculis. Aliquam tempor commodo eros eget volutpat.<br><br>
Maecenas pharetra leo eu mi tincidunt auctor. Vivamus molestie vitae arcu non mollis.</span>
</span></span>

EDIT: It works! It looks good on mobile too. Thanks again :heart:

3 Likes
245

doesn’t work either ;-;

2 Likes
246

ok so i still seem to require some assistance, here’s the thread i got

hey, i’m ana welcome to this smol shop where i’ll make covers ig???
i take fakes, just mention somewhere it’s a fake request :+1:t3:

there are no RULES, this is a CHAOS REGION and we love MAKING A MESS

form

form

( ) fake | ( ) real
title:
subtitle:
author:
theme:
ideas:
other
interesting fact:

raw code 
<span style="font-size:8px;font-family:calibri;background:#fff;color:#EE6C4D;display:block;margin:auto;width:300px;text-transform:uppercase;letter-spacing:0.5px;line-height:13px;border-radius:5px;line-height:10.5px;padding:15px"><span style="font-size:; background-image: url('https://cdn.discordapp.com/attachments/854452066093367366/859493359731343360/IMG_4034.PNG'); background-size: 100px; background-repeat: no-repeat; background-position: center; height: 100px; width: 100px; outline: 1px solid #364463; margin-top: 10px; padding: 5px; display:block;"></span> <span style="font-size:;margin:-110px 0px 10px 120px;display:block;height:110px;overflow-y: scroll;"> hey, i'm *ana*  welcome to this smol shop where i'll make covers ig??? <br>i take fakes, just mention somewhere it's a fake request 👍🏼 <br> <br> [u]there are no RULES, this is a CHAOS REGION and we love MAKING A MESS[/u] <br><br>**form** 
<details>
<summary>form</summary>

( ) fake | ( ) real
title:
subtitle: 
author:
theme:
ideas:
other
interesting fact:
</details> </span></span></span>
3 Likes
247

so, u can see the form details bit doesn’t go in the thread, and i can’t for the life of me figure out why. please help

2 Likes
248

I copied your raw code and pasted it. What I did was I pressed “enter” after the first <span> and before the second <span>, so that the second <span> is on a different line from the first one.

I also changed the ** around “form” into <b> </b> since the bold didn’t work

hey, i'm *ana* welcome to this smol shop where i'll make covers ig???
i take fakes, just mention somewhere it's a fake request 👍🏼

[u]there are no RULES, this is a CHAOS REGION and we love MAKING A MESS[/u]

form
form

( ) fake | ( ) real
title:
subtitle:
author:
theme:
ideas:
other
interesting fact:
raw code 
<span style="font-size:8px;font-family:calibri;background:#fff;color:#EE6C4D;display:block;margin:auto;width:300px;text-transform:uppercase;letter-spacing:0.5px;line-height:13px;border-radius:5px;line-height:10.5px;padding:15px">
<span style="font-size:; background-image: url('https://cdn.discordapp.com/attachments/854452066093367366/859493359731343360/IMG_4034.PNG'); background-size: 100px; background-repeat: no-repeat; background-position: center; height: 100px; width: 100px; outline: 1px solid #364463; margin-top: 10px; padding: 5px; display:block;"></span> <span style="font-size:;margin:-110px 0px 10px 120px;display:block;height:110px;overflow-y: scroll;"> hey, i'm *ana*  welcome to this smol shop where i'll make covers ig??? <br>i take fakes, just mention somewhere it's a fake request 👍🏼 <br> <br> [u]there are no RULES, this is a CHAOS REGION and we love MAKING A MESS[/u] <br><br><b>form</b>
<details>
<summary>form</summary>

( ) fake | ( ) real
title:
subtitle: 
author:
theme:
ideas:
other
interesting fact:
</details> </span></span></span>

I also find hiding details under span to be a pain, you’re not alone :joy:

2 Likes