Div appears and disappears

Asked

Viewed 979 times

2

I created a div where there are 2 links, when the page is loaded, both links are hidden and when I click "search" they should appear. The detail, problem is that they appear and disappear! Why this may be happening?

Follows the code:

<input type="submit" name="buscar" id="busca" value="Buscar">

$(document).ready (function(){
    $("#gerar").hide();

    $("#busca").click(function(){
        $("#gerar").show();
    });

});
jquery html5

  • html: <input type="Submit" name="search" id="search" value="Search">

  • the submit is inside a form? it is possible that after the event click is making the request for the form.

1 answer

3

This is called FOUC, flash of unstyled content. This means that the browser shows the content and only later sees/reads the script that hides it, causing a momentary flash. And the user sees, temporarily, this content.

The solution, and the right way to do it, is to use CSS so that the content is not visible when the page loads, via CSS. Inline or in the CSS file.

Must use: 

<div id="gerar" style="display: none;">...conteudo...</div>

or in the CSS:

#gerar{display: none;}

  • Hi Sergio, Just that? And I get the $("#generate"). JQ Hide(); ?

  • @Exact Gustavosevero!

  • Sergio, I did what you suggested <div id="generate" style="display: None;" and it didn’t work.

  • @Gustavoseverwhat didn’t work? can you describe the behavior? the best would be to share your code so we can have an example.

  • @Gustavosevero I am sure of what I suggested. I need to see your code to understand what the problem may be...

  • @Gustavosevero if you want to use this to test: http://jsfiddle.net/Ln3h53vo/

  • <input type="Submit" name="search" id="search" value="Search"> $(Document). ready (Function(){ $("#search"). click(Function(){ $("#generate"). show(); }); });

  • I managed to make the div disappear when the page is loaded, via CSS, but it keeps appearing and disappearing. And it’s actually this, I want the links that are within that generate div, not to appear, and when a search in a generated table, and show the results, so yes, at the end of the report, the links should appear.

  • 1

    @Gustavosevero I say again: via CSS there should be no FOUC. Put your code in a jsFiddle that I help fix.

Show 4 more comments

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.