What have you always wanted to do in a welcome message?


#43

I ended up just starting from scratch :slight_smile: Here’s a WM Fiddle

Code

<div id="hero">
  <div class="hero-text">
    EM - Eternal Memories
  </div>
  <div class="slider">
    <img src="https://picsum.photos/1200/200?image=220">
    <img src="https://picsum.photos/1200/200?image=200">
    <img src="https://picsum.photos/1200/200?image=210">
  </div>
  <nav>
    <button>About</button>
    <button>Updates</button>
    <button>Staff</button>
  </nav>
</div>

<style>
  #hero {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
  }
  
  #hero > .hero-text {
    position: absolute;
    top: 2em;
    left: 1em;
    color: #ffffff;
  }
  
  #hero > .slider {
    height: 100%;
  }
  #hero img {
    height: 100%;
    width: 100%;
  }
  #hero img:not(.visible) {
    display: none;
  }
  
  #hero > nav {
    position: absolute;
    bottom: 1em;
    left: 1em;
    display: flex;
    width: calc(100% - 2em);
  }
  
  #hero button {
    background: rgba(196, 196, 196, 0.8);
    border-radius: 5px;
    padding: 0.5em;
    border: 0;
    flex-grow: 1;
    margin: 2px;
  }
</style>

<script>
  document.querySelectorAll('.slider').forEach(function (wrapper) {
    if (!wrapper.querySelector('.visible')) {
      wrapper.firstElementChild.classList.add('visible')
    }
    
    setInterval(function () {
      var last = wrapper.querySelector('.visible')
      var next = last.nextElementSibling || wrapper.firstElementChild
      last.classList.remove('visible')
      next.classList.add('visible')
    }, 5 * 1000)
  })
</script>


#45

I’m not sure I understand - did the code I posted not work for you?


#46

It does work but I decided to rip it out of the wm script so you could do your majic on it:)


#47

Instead of you remaking the code I am going to not be lazy and make you do it. Instead I have started to fiddle around with the code to suit my needs. This is what I got :slight_smile:


So I don’t damage my wm I did it on my new sp world

Edit: still working on it but I am having an issue trying to put it into the code


#48

That… looks broken alright. Did you remove the css to hide non visible images?


#49

No.

I have made a change. This will be the last request for now

Could you make the slideshow fade to another image using this code I posted before?

Code
<html>
<head>
<style>
.container {
    position: relative;
    text-align: center;
    color: white;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}
</style>
</head>
<body>

<div class="container">
<style>
.roundImg2 {
 border-radius:10px;
}
</style>
  <img class="roundImg2" src="http://i65.tinypic.com/28ingpw.jpg" alt="Norway" style="width:100%;">
  <div class="top-left"><h4>EM - ETERNAL MEMORIES.</h4></div>

</div>

</body>
</html>



<style>
  #navBar {
    background: linear-gradient(#008ae6, #004d80);
    height: 60px;
    width: 100%;
    color: white;
  }
  .navButton {
    opacity: 0.7;
    background-color: rgb(120, 120, 120);
    margin: 0.5px;
    padding: 5px 0px;
    width: 150px;
    text-align: center;
    position: relative;
    left: 0px;
    top: -3em;
    border-radius:5px;
  }

  .navPage:not(.visible) {
    display: none;
  }

  .navWrapper {
    display: flex;
    justify-content: center;
  }

  [to-page] {
    cursor: pointer;
  }
</style>

<script>
  function showPage(pageName) {
    var oldPages = Array.from(document.querySelectorAll('div.navPage.visible'))
    oldPages.forEach(function (page) { page.classList.remove('visible') })

    var page = document.querySelector('[page="' + pageName + `"]`)
    if (!page) return

    page.classList.add('visible')
  }

  document.addEventListener('click', function (event) {
    if (!event.target) return;
    if (event.target.getAttribute('to-page')) {
      showPage(event.target.getAttribute('to-page'))
    }
  })
</script>

#50

There needs to be multiple image elements if fading to a new image is going to work.


#51

Oh… but is it possible?


#52

Yes, it’s possible. Keeping just the required code and adding a second image element. This code assumes all your images are the same size (really, aspect ratio):

Code
<style>
  .container {
    position: relative;
    color: white;
  }

  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
  }
  
  .container img {
	width: 100%;
    border-radius: 10px;
    transition: opacity 2s;
  }
  .container img:not(:first-child) {
    top: 0;
    position: absolute;
  }
  .container img:not(.visible) {
    opacity: 0;
  }
</style>

<div class="container">

  <img class="visible" src="http://i65.tinypic.com/28ingpw.jpg">
  <img src="https://picsum.photos/1599/890?image=200">
  <div class="top-left"><h4>EM - ETERNAL MEMORIES.</h4></div>

</div>

<script>
  var container = document.querySelector('.container')
  setInterval(function () {
    var oldImg = container.querySelector('.visible')
    var newImg = oldImg.nextElementSibling.tagName === 'IMG' ? 
      oldImg.nextElementSibling : container.firstElementChild
    
    oldImg.classList.remove('visible')
    newImg.classList.add('visible')
  }, 5000)
</script>

A couple notes:

  • You should not use <html>, <body>, or <head> in your welcome message. This is already present on the page and thus when you include it you make the page invalid.
  • Change the 1s under .container img to change how long the fade is
  • Change the 5000 in the script to change how often it changes photos.

If you need to have images under the container div that should not be part of the slider, this code won’t work.


#53

Thanks :slight_smile:

I can add it to my welcome message and hopefully the buttons will be present. But I may use duplicates to display slideshow images in the welcome message.


#54

I think there is an issue.


Is it the buttons that I grabbed the code from a thread or did I copy the code wrong?

Edit: I removed the button to test but it still had the issue.


#55

I have no clue what would cause that. There is most likely another part of your welcome message interfering. If you send the full code (in PM if you don’t want to post here) I can fix it.


#56

Would it be possible to add the world creation date to to rest of the info that is shown in the “Show More Info” button on the welcome page? Maybe under the world size?


#57

How to make a pure white welcome message background? I already used “advance” html codes and nothing worked


#58

I have a simple white picture as a background. Try doing that?


#59

I did try that but that didn’t work

Edit: I already know how. Thank you!


#60

The only reason mine is white is I have no ideas of what background I want it to be because they all look bland.


#61

Is there a way to make Javascript popups have different buttons other than ok and cancel? Such as for the server voting popup?


#62

Nope. Not the native browser popup at least.

It is possible to make your own “popup” and style however you like, but you can’t modify the browser’s default confirm / alert implementations.


#63

Something I have always wanted is a working auto updating staff list
(Auto-updating .txt file)