-6

Good day to all of you!

I am working on a site in all European languages. After you click enter on the home page a map loads (that's page 2) and obviously a click on a country takes you to that countries' language. It's a super cool map but it takes 2 seconds to load. If you're on a slow connection, longer.

On that page I want to add one line of text.

European map loading, ONE second please!

So after you click enter on the main page and go to page 2 (the map page) the page doesn't stay black for 2 seconds but the above line shows up in white AND disappears after 2 seconds (without clicking or anything).

Is there anyone out there who can give me a code for that so I can paste it into an empty html page and try out?

Thank you,

Marc

squancy
  • 565
  • 1
  • 7
  • 25
Marc
  • 1
  • 2
  • 2
    Could you please provide some code examples, what have you written in js? – Martin M Jul 19 '18 at 13:39
  • 6
    *"give me a code for that so I can paste it"* ...No. That's not how Stackoverflow works. This isn't a free code writing service or a *"how to"* tutorial service – charlietfl Jul 19 '18 at 13:39
  • 1
    https://www.w3schools.com/howto/howto_css_loader.asp Here is the place to start. Instead of spinner loader, put text. come back with your codes when you encountered issues. – jmag Jul 19 '18 at 13:39
  • 3
    https://stackoverflow.com/questions/25253391/javascript-loading-screen-while-page-loads – Wamadahama Jul 19 '18 at 13:39
  • Nothing Martin. I haven't written anything. I was just wondering if there was a working example. I am not a web designer, I have a business to run and work too often until 3 or 4 am, no time to figure all out by myself. – Marc Jul 19 '18 at 14:09
  • Charlietfl: Ok, maybe there is somebody who will do it for a fee. No problem. Like I said, I am writing texts in many languages, putting in pics etc and simply lack the time. – Marc Jul 19 '18 at 14:12
  • I will check the other tips. Thank you. – Marc Jul 19 '18 at 14:13

1 Answers1

0

Try this.

  • Use some basic vanilla javascript
  • Set a timeout for 2 seconds to display the text, after 2 seconds remove the text and load the map.

I attached a sample here, but you'll want to do some research on event handling in javascript: https://jsbin.com/zegozemiwe/edit?html,js,output

Edit The same concept still applies but rather than a button click bind directly to the load event for the page.

Snippet added to post here:

function makeText() {
  console.log('title');
  document.getElementById("result").innerHTML = "European map loading, ONE second please!";
  setTimeout(function() {
    document.getElementById("result").innerHTML = "";
  }, 2000)
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body onload="makeText()">
   <!--Use the above call for the loading of the page, use the below call for execution on click-->
  <button onclick="makeText()">
Click to prompt
</button>
  <p id='result'>

  </p>
</body>

</html>
Callat
  • 2,928
  • 5
  • 30
  • 47
  • I pasted this in an empty page and YES, that works! Only thing is, the text should appear at page load, not after clicking a button. – Marc Jul 19 '18 at 14:30
  • Then remove the button and bind to the onload event in the body of the page, it'll execute once the page loads. See my updated answer – Callat Jul 19 '18 at 14:38
  • Haaaaa! You have no idea how proud this amateur is! (And thankful) I spent the last 20 minutes copying and pasting but finally, at page load, the text appears and disappears! Yahoo! With CSS I should now be able to colour the text white and position it? – Marc Jul 19 '18 at 15:02
  • Yes, if you gave it an id you can just apply whatever you styles you like. I'm glad I was able to help. Please accept my answer and welcome to stack overflow – Callat Jul 19 '18 at 15:08
  • Thank you Callat – Marc Jul 19 '18 at 15:41
  • oops, something went wrong here. trying to post html but that's not allowed for some reason – Marc Jul 19 '18 at 16:13
  • In comments to post code you have to wrap it in back ticks which are next to the 1 key on your keyboard ````. Like this `var x = "Hello world";` This is called markdown formatting: Read more here, https://stackoverflow.com/editing-help#comment-formatting. If your post is longer than a single line you should post a separate question. Asking multiple questions in one query is strongly prohibited here. – Callat Jul 19 '18 at 16:23
  • Right .......can I post a link to the page (I uploaded to test)? – Marc Jul 19 '18 at 17:11
  • Yes but in a new question, accept this answer to close this one by clicking the checkmark under the up down arrows. Once you do that, ask your new question with your link and I'll see it in the new questions queue and try to help you more. – Callat Jul 19 '18 at 18:34