Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics Introducing jQuery Blog Previewer: Getting Values from Form Fields

Nate Baker
Nate Baker
17,247 Points
Posted by Nate Baker
Nate Baker
17,247 Points

JQuery hide() method flickers flashMessage on page load and reload before hiding

Why does my page flicker the flashMessage on a page load or reload prior to hiding the element?

$('#flashMessage').hide() is the very first statement in app.js

2 Answers

paulscanlon
paulscanlon
Courses Plus Student 26,735 Points

Hey

This happens because usually you include the jQuery file at the bottom of your html file just above the closing </body> tag. This means the site is loaded first THEN jquery hides it.

An easy way to get around this is to set the display to none in css

#flashMessage {
  display: none;
}

Then use jQuery to show it later

Hope this helps

Happy coding

Paul

Carlos Lantigua
Carlos Lantigua
5,938 Points
Carlos Lantigua
Carlos Lantigua
5,938 Points

Like paul said In css I added the display: none;

#flashMessage {
    color: white;
    background-color: #64ce83;
    padding: 15px;
    border-radius: 5px;
    display: block;
    display: none;
    width: calc(100% - 100px);
    margin-bottom: 40px;
}

Then for my code I just moved a few things around, now I'm a JQuery Wizard.

//Preveiw Button event
$('#previewButton').click(function() {

//Get values from title and content forms
  const title = $('#blogTitleInput').val();
  const content = $('#blogContentInput').val();

//output captured values
  $('#blogTitlePreview').text(title);
  $('#blogContentPreview').html(content);

//animate changes saved message when clicked  
  $('#flashMessage')
  .slideDown(1000)
  .delay(2000)
  .slideUp();
});
Nikola Lukic
Nikola Lukic
8,061 Points

Carlos, I don't think that you need the display: block; property value pair. It will be overwritten by your next line (display: none;) anyway.

This:

#flashMessage {
    color: white;
    background-color: #64ce83;
    padding: 15px;
    border-radius: 5px;
    display: block;
    display: none;
    width: calc(100% - 100px);
    margin-bottom: 40px;
}

can be this:

#flashMessage {
    color: white;
    background-color: #64ce83;
    padding: 15px;
    border-radius: 5px;
    display: none;
    width: calc(100% - 100px);
    margin-bottom: 40px;
}