Fadeout a echo message after couple of seconds

[pavdhu]

Hello everybody,

I made a script but it isn’t working. When the user clicks the buttons 2 variables go into a database. The user get a message and that message should disappear after 3 seconds. But the message stays on the screen. I used .fadeOut(3000) but that seems not to be working.

Anyone a solution? The used code can be seen when clicked on the codepen link.

https://codepen.io/anon/pen/wxbeYa

[Beverleyh]

Try loading the JS from page load, and bind the fadeOut effect/function to a click event when the button is pressed https://api.jquery.com/click/

[Atelierbram]

Alternatively ISO an anonymous function pass a named function instead, and then call it after the jQuery library is inserted

  echo '
Je verzoeknummer is al aangevraagd en ontvangen door de DJ. Je wordt na 5 seconden automatisch teruggestuurd.
';
  echo "";
  echo "function readyFn( jQuery ) {";
  echo "$('#echo').fadeOut(3000);";  
  echo "};";
echo "";

<!-- jquery library here -->

$( document ).ready( readyFn );

  </body>
</html>

[pavdhu]

Can you give a code example?

[Atelierbram]

https://www.tehplayground.com/dxFNT9qyVyEx3WLq

Click “Save and Run” to render ;)

[pavdhu]

Hmm doens’t work with my code somehow. Tried it but the div shows en then disappeared without clicking the submit button.

[Atelierbram]

Then better also do as @beverleyh wrote: bind a click event to the submit button and have that trigger the fadein/fadeout

[Atelierbram]

In the head of the document within style tags (or in a stylesheet):

  #echo { opacity: 0; }

Down at the bottom of the document within script tags, just above the closing body tag:

$( "input[type='submit']" ).on( "click", function() {
  $( "#echo" ).css('opacity','1');    
  $( document ).ready( readyFn );
  // console.log( "click" );
});

[pavdhu]

Somehow still doens’t work. :(

[Atelierbram]

I adapted my code at https://www.tehplayground.com/2bmmLiLfNjRryYYd

Works for me …

[pavdhu]

It only works when you press the button 1 time. But then I need to reload the page in order to get the script working again.

[Atelierbram]

What have you tried so far?

[Author]

Posts