CODEWITHSUNDEEP
javascriptcsshtml
kami nelson
kami nelson

Reputation: 15

Show image via javascript after page load

I am trying to create an image which is initially hidden - but reveals itself once the document has loaded completely via the JavaScript file.

$(document).ready(function () {
    document.getElementById("theImage").style.visibility = "visible";
});
#theImage {
    visibility:hidden;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kami Nelson Bio </title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="KNelson-Styles.css" rel="stylesheet" type="text/css">

<script src="respond.min.js"></script>
<script src="KNelson_reveal.js"></script>

</head>
<body>
	<div class="gridContainer clearfix">
		<div id="theImage">
        <img src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
        </div>
      
      <div id="div1" class="fluid">
        <h1>Bio for Kami Nelson</h1>
        <p>Text</p>
        </div>
	</div>
</body>
</html>

Why is this not working?

Thank you in advance.

Upvotes: 0

Views: 5321

Answers (3)

Prashant G
Prashant G

Reputation: 4900

  • You are missing the jQuery library reference
  • You are not properly using selecter to select image of id theImage.
  • theImage is supposed to be for the img tag.

JavaScript

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
    $("#theImage").css('display':'block');
});
</script>

CSS

#theImage {
    display: none;
}

HTML

<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>

Upvotes: 0

BradleyIW
BradleyIW

Reputation: 1358

why don't you just draw the image when the window loads? give your image an id i'll use "image" for this example.

<script>
window.onload = function () 
{
$('#image').css({"display":"block";});
}
</script>

Upvotes: 0

nicael
nicael

Reputation: 18997

You should either include jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or use native window.onload() instead of $(document).ready()

window.onload=function () {
    document.getElementById("theImage").style.visibility = "visible";
}

Upvotes: 2

Related Questions