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


#26

i already know how to insert css (plus there’s a easier way to do it -
<link rel="stylesheet" href="https://derpmarine168.github.io/blockheads/Standard.css" />)

but what i want is to be able to make uniform the header of all my pages.
for example, i want to be able to insert
https://derpmarine168.github.io/blockheads/notices.txt
into a p tag with the id notices.

and inset this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://derpmarine168.github.io/blockheads/Standard.css" /> 

into the bottom of my head element, or inside a div.

or if i was building a website, being able to insert the header or footer from another master document.


#27

I can do that for you


#28

I just used that as an example, inserting your notice also pretty easy. WM Fiddle

<p id="notices">Loading...</p>

<script>
  fetch('https://derpmarine168.github.io/blockheads/notices.txt')
  	.then(function (r) { return r.text() })
    .then(function (notice) {
      document.getElementById('notices').textContent = notice
  	})
</script>

Inserting this is really easy… there are a few ways you could do it. This is probably the simplest:

<script>
document.head.innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=1.0">\n
<link rel="stylesheet" href="https://derpmarine168.github.io/blockheads/Standard.css" /> '
</script>

#29

Thanks so mutch! There are a million and one applications for this.


#31

put this in the style for the buttons:

position: relative;
    left: 3px;
    top: 3px;

change the px up until the buttons overlay.
sorry if i’m not that helpful, but i can’t do more unless you send me your code.


#33

ok
il join.
edit: send me a invite please, as i cant find it on the server list.


#35

oh thanks!
but it’s still not coming up
found it


#37

is there a way to change the title tags with a similar script to the second example? and does that actually affect the title of the welcome message?


#39

Sorry about that, I must have missed this in the rush of threads yesterday.

You can change the title tags, but it won’t change the title displayed in the popup.

<script>
document.head.querySelector('title').textContent = "Hello"
</script>

This should be fairly easy to do - can you send the HTML structure you use? Might slightly change how the script needs to work.


#40

thanks. that’s what i tried, was wondering if i was wrong. :glasses:


#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?


#48

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


#50

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


#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.


#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!