css help, displaying image with div

Question

EDIT:

its a confirmation div box that when the user click on save button, you typicall see the confirming that they have receivied your inqury.

and the div box look like this:

"[image] We got your email, and you should hear from us within 24 hours."

below is the code that i am using to display div with image but whats happening that, when the page loads i see the image first and than after i save the image i see the div msg and than image and div disappears (as it suppose to)

<div id="divStatus"></div> 

<style type="text/css"> 
#divStatus {
    background:transparent url(../images/ico_confirmation_sml.gif) no-repeat scroll 0 0;
    padding-left: 22px;
    min-height: 27px;
} 


ScriptManager.RegisterClientScriptBlock(this, this.GetType(), key, "$(function() { $('#divStatus').html('" + msg + "').show().fadeIn(800).fadeOut(9000); });", true);

what you want, to display image at last. ie after effect or you dont want any effect just display image. — Pramendra Gupta
– Pramendra Gupta, Commented Sep 27, 2010 at 13:38

graham · Accepted Answer · 2010-09-27 13:50:39Z

1

If I understand your question correctly, that the image shows until you click save, it looks like you need to hide the image in your css.

Try adding opacity: 0 to the divStatus ID

 
#divStatus {
    background:transparent url(../images/ico_confirmation_sml.gif) no-repeat scroll 0 0;
    padding-left: 22px;
    min-height: 27px;
    opacity: 0;
}

answered Sep 27, 2010 at 13:50

graham

9465 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Kahn Over a year ago

does not work, when the page loads i se the image but what i want that only the image and div shows when i click on save.

Pramendra Gupta · Accepted Answer · 2010-09-27 14:20:18Z

0

I have updated your code a bit, check demo

http://jsfiddle.net/69f6H/2/

#divStatus {
    background:url("http://www.lancs.ac.uk/~lubbs/images/home.gif") no-repeat;
    padding-left: 22px;
    min-height: 27px;
    display:none;

}

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), key,
"$(function() { $('#divStatus').html('" + msg + "').fadeIn(800).fadeOut(9000); });",
true);

answered Sep 27, 2010 at 14:20

Pramendra Gupta

14.9k4 gold badges35 silver badges35 bronze badges

Comments

Elliott · Accepted Answer · 2010-09-27 14:26:24Z

0

You may need to set your css to display: none; as others have stated or add abit of javascript.

<script type="text/javascript">


function showImage()
{
     getElementById('divStatus').style.display="block";
}

</script>

Then on the button add : onclick="showImage();"

answered Sep 27, 2010 at 14:26

Elliott

3,87424 gold badges72 silver badges93 bronze badges

Comments

ryryan · Accepted Answer · 2010-09-27 18:53:56Z

0

Try using the display:none function before the use of fading it in. This will hide it before the use, to clarify that you want it fading in.

answered Sep 27, 2010 at 18:53

ryryan

3,91813 gold badges46 silver badges72 bronze badges

Collectives™ on Stack Overflow

css help, displaying image with div

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related