Home/ Questions/Q 7596423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:54:52+00:00

I am using the exact code seen here: http://gazpo.com/downloads/tutorials/html5/contentEditable/ As you can see, when

  • 0

I am using the exact code seen here:

http://gazpo.com/downloads/tutorials/html5/contentEditable/

As you can see, when the grey box is clicked the save button appears
however after using this exact code on my own site when the page loads
or is refreshed the save button is shown. After clicking somewhere on
the screen (other than the grey box) it is hidden.

Can anyone think of a reason why it is initially showing?

I am pretty new to jquery.

My code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script>
    $(document).ready(function() {

    $("#save").click(function (e) {         
        var content = $('#editable').html();    

        $.ajax({
            url: 'save.php',
            type: 'POST',
            data: {
            content: content
            },              
            success:function (data) {

                if (data == '1')
                {
                    $("#status")
                    .addClass("success")
                    .html("Data received successfully.")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
                else
                {
                    $("#status")
                    .addClass("error")
                    .html("An error occured, the data could not be saved")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
            }
        });   

    });

    $("#editable").click(function (e) {
        $("#save").show();
        e.stopPropagation();
    });

    $(document).click(function() {
        $("#save").hide();  
    });

});

  </script>

  <body>

                                    <div id="status"></div>
                <div id="content3">
                <div id="editable" contentEditable="true">
                Lorem ipsum dolor sit amet...
                </div>
                <button id="save">Save</button>
                </div>
</body>

CSS:

#status{
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}

#save{
display: none;
margin: 5px 10px 10px;
}

#content3{
    background: #f7f7f7;
    border-radius: 10px;
}

Adding an overriding style solves the problem…just not sure why the css isn’t doing the job

    <button id="save" style="display:none;">Save</button>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A quick inspection tells me that the button has a default CSS style of display:none; before JQuery ever even gets ahold of it. That style comes from the head of the document.

    After somewhere on the page is clicked, then the JQuery triggers, applying either display:none; or display:inline; to the button, depending on the target of the click. This is added to the style attribute of the element itself, overriding the style from the document head.

    As a side note, this is often done to prevent the element from briefly appearing on the screen before any Javascript has a chance to run and hide it.

    • 0