CODEWITHSUNDEEP
javascripthtmliframe
user3332692
user3332692

Reputation: 41

Javascript open iframe and hide image?

I am trying to open an iframe on click and hide the image. Any help as to why this does not work would be great! Thanks

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>test</title>
</head>

<body>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').click(function () {
                if (!$('#iframe').length) {
                    $('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
                    document.getElementById('loadingimage').style.visibility = 'hidden';
                }
            });
        });
    </script>

    <div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
            alt="test image" width="860" height="474" /></div>
    <div id="iframeHolder"></div>

</body>

Upvotes: 1

Views: 95

Answers (2)

RoToRa
RoToRa

Reputation: 38400

Several points:

  • As @stud3nt noted, your HTML is invalid. Also a space is missing between "loadingimage" and class. You should be using an editor that highlights HTML and JavaScript syntax errors.

  • Use proper the HTML elements for the proper job. If you want to have a button, then use a <button> element and not a <div> element.

  • Hiding the image inside the "button" with visibility: hidden is strange thing to do. This won't remove the button element, so it's still there and still can be clicked. Learn the difference between visibility: hidden and display: none. When you are using jQuery you can use .hide() and you should use it on the "button" itself and not its content.

  • jQuery 1.6.0 is ancient. Either use a current version, or better, don't use jQuery at all. For one jQuery isn't really necessary anymore and also as a beginner you should learn how to write plain JavaScript.

Upvotes: 1

stud3nt
stud3nt

Reputation: 2143

There is typo in your img html element.
You forgot to add = in <img id "loadingimage" ...
Correct code - <img id="loadingimage" ...

Upvotes: 0

Related Questions