Image Not Appearing in JQuery Script

user_15888910 0
Viewed 40

I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">

Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!

<div class="header">
    <div class="hamburgerWrapper">
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

<div class="EmailsWrapper">
    <div class="ExtendMsg">
        <p>Extended Messages will be placed under here.</p>
    </div>
</div>

<div class="Email">
    <div class="ImgWrapper">
        <img src="Images/Phone Icons/User.png>
        </div>
        <div class=" EmailTitle">
        <p class="EmailTime">9:31 PM</p>
        <h1>Sender</h1>
        <h2>Subject Title</h2>
        <p class="EmailPreview">Email content to be filled out here.</p>
    </div>
</div>

<div class="Email">
    <div class="ImgWrapper">
        <img src="Images/Phone Icons/User2.png">
    </div>
    <div class="EmailTitle">
        <p class="EmailTime">9:29 PM</p>
        <h1>Sender2</h1>
        <h2>Subject Title</h2>
        <p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
    </div>
</div>

<<done>>
    <<script>>
        $(".Email").on("click", function() {
        $(this).addClass("active");
        $(".Email").not(".active").addClass("deactive");
        $(".ExtendMsg").addClass("active");
        $(".ExtendMsg").html($('
        <div />').html($(".EmailPreview", this).text()));
        $(".headerLabel h1").text("MESSAGES");
        });
        $(".hamburgerWrapper").on("click", function() {
        $(".Email.active").removeClass("active");
        $(".Email.deactive").removeClass("deactive");
        $(".ExtendMsg").removeClass("active");
        $(".headerLabel h1").text("MESSAGES");
        });
    <</script>> 
<</done>>
image html jquery javascript
1 Answers

I'm not totally sure what you are trying to achieve. But I'd guess that you want to show and image, when ever you click something above?

If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.

If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:

First assign an identifier to your element to toggle (class or id):

<div class="ImgWrapper">
    <img class="User2Image" src="Images/Phone Icons/User2.png">
</div>

Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.

user_90971340
Related