Welcome Messages - Tips & Tricks

html

#1

While there are several other guides on creating a welcome message, there isn’t any thread dedicated to small quality of life changes which can make your welcome message much easier for players to use.


Popups

I generally encourage avoiding the use of popups unless you cannot live without them, they can become very annoying for players joining your server multiple times.

The standard syntax to create a popup is:

<script>
alert("Text");
</script>

This will fire every time a player joins your server. A better solution is to only fire the popup if the user is joining for the first time, or if the text has been updated. To do this, use the code below.

<script>
customAlert("Text");

function customAlert(text) {
    if (!localStorage.getItem(document.title) == text) {
        alert(text);
        localStorage.setItem(document.title, text);
    }
}
</script>

Do note that this solution assumes that your server name is unique.


Hidden text

There are many, many ways to do this, but here are two ways that I find the most useful.

Built in method

Note: I was unable to get support data for iOS <7 and Android Browser <4, but it looks like this is supported everywhere that blockheads can be played. Please let me know if you use it and it breaks for someone!

To hide text, simply wrap it in details tags! Example:

<details>
    <summary>Text to click to show hidden text</summary>
    Hidden text here
</details>

If you want to show the hidden text when the page is first loaded, use the following code:

<details open>
    <summary>Text to click to show hidden text</summary>
Hidden text
</details>
JavaScript method

This method can be useful if you don’t like the arrow that using the details method adds to your popups.

Copy this code into the end of your welcome message:

<script>
addEventListener('click', function(e) {
    var t = e.target.dataset.target;
    if (t) {
        document.getElementById(t).classList.toggle('closed');
    }
});
</script>
<style>.closed { display: none; }</style>

Now, anywhere on your welcome message, you can use HTML like this to hide parts of the page.

<span data-target="unique_id">Click me!</span>
<div id="unique_id">
    Content that can be hidden, but will be shown at first.
</div>

The above will be shown by default, if you want to hide the content when the page loads, use this HTML:

<span data-target="unique_id">Click me!</span>
<div id="unique_id" class="closed">
    Content that is hidden when the page loads but can be shown.
</div>

Tabular Layout Of course, there are MANY ways to do this, here's one that should be fairly simple to understand how to modify. You can have as many "layout" `div`s in your page as you want. [jsfiddle demo](https://jsfiddle.net/9f25hgta/)
<div class="layout">
    <nav>
        <span data-tab-name="tab1">Tab 1</span>
        <span data-tab-name="tab2">Tab 2</span>
        <span data-tab-name="tab3">Tab 3</span>
    </nav>
    <div>
        <!-- be sure that at least one div here has a class of visible! -->
        <div data-tab-name="tab1" class="visible">Tab 1 content</div>
        <div data-tab-name="tab2">Tab 2 content</div>
        <div data-tab-name="tab3">Tab 3 content</div>
    </div>
</div>

<!-- Only add the code past here once -->
<script>
    addEventListener('click', function(e) { 
        var s = e.target;
        var n = s.parentElement;
        var p = n.parentElement;
        if (s.dataset.tabName && n.tagName == 'NAV') {
            var t = p.querySelector('div > div[data-tab-name="' + s.dataset.tabName + '"]');
            p.querySelector('.visible').classList.remove('visible');
            t.classList.add('visible');
        }
    });
</script>
<style>
    .layout > div > div { display: none; }
    .layout > div > div.visible { display: block; }
    [data-tab-name] { cursor: pointer; }
</style>

Music Fairly easy to do :) You can change `../gym.mp4` to any of the other listed files, or to an external audio file.
<audio autoplay>
  <source src="../gym.mp4" type="audio/mpeg">
</audio>

Full list of blockheads included songs:
…/gym.mp4
…/divertissment.mp4
…/largo.mp4
…/morning.mp4
…/mountainKingLoop.mp4
…/nightFall.mp4
…/sneakySnitch.mp4
…/sugarPlum.mp4
…/tikopia.mp4


Blockheads Font

Just add this code somewhere in your welcome message:

<style>

@font-face {
    font-family: "blockheads_font";
    src: url("http://theblockheads.net/fonts/BlockheadsFont-Regular.ttf");
}

body {
    font-family: blockheads_font;
}
</style>


HTML; show/hide button?
Welcome message guide
New music
Need welcome message help?
What have you always wanted to do in a welcome message?
Guide to thinking up, building, and "selling" your server
I really need a ton of Welcome Message help
Help about Welcome Messages
What kind of things can I type into welcome message?
Welcome message question - Music
1.7 Font Typing Webpage
Multiple Welcome Message Pages?
#2

i have music in my servr but it breaks if i try to copy and paste it on to another world, so this will help me! :slight_smile:


#3

OP updated with basic tabs (you will probably want to style this with some CSS) and music :slight_smile:


#4

is there any way for the music to automatically play?


#5

Unfortunately, without the user touching the screen, no… iOS doesn’t let you play music until the page has been interacted with.


#6

@Bibliophile
Actually, this works.

<script>
var playing = false;
        var mya = new Audio('../gym.mp4');
        mya.play();
        playing = true;
</script>

#7

On later versions of iOS maybe, it doesn’t work on my iOS 8 iPad though.


#8

do you know how to make it repeat somehow?


#9

This should work

<script>
var playing = false;
window.addEventListener('touchstart', function(){
    if (!playing) {
        var mya = new Audio('../gym.mp4');
        mya.loop = true;
        mya.play();
        playing = true;
    }
});
</script>

#10

@Bibliophile this works too…

<script>
var playing = false;
{
    if (!playing) {
        var mya = new Audio('../gym.mp4');
        mya.loop = true;
        mya.play();
        playing = true;
    }
}
</script>

#11

While that may work on your specific device, I always try to use code that will work for as many people as possible. That code wouldn’t work on my iPad, or on anyone else’s iPad that is on iOS 8.


#12

okay then.


#13

This is a very nice and informative thread! :smiley:


#14

Plzzz help me
I can’t assess music
I put the code that u give up but it doesn’t working


#15

Are you on android or iOS? I haven’t tested the music on android devices, though it’s working on iOS for me still.


#16

I’m using iOS 9.3.5
I know how to put music but it’s play automatic
I want that


Like this
I want that I click on play button it’s play only chosen music


#17

May I ask why your server is called TC Elite?


#18

No EpicGamer101
My world name is not tc


#19

He used that servers WM as a example I think


#20

Yes I use this as a example