How to style an image created using javaScript

Question

Thanks to Stack Overflow I managed to solve an issue I was having with inconsistent transitions by preloading an image using javaScript.

To skip over what is working I won't post all the code. In short, I have an image on my HTML and a button that when clicked triggers a transition in which another image takes its place with a slide down. The inconsistencies I was getting got solved by creating the img in my javascript (as it gets loaded faster that way). I then apply some classes that perform the transition. Here is the relevant code:

HTML

<div class="page page-1"><img src="myFirstImage.jpg" width="100%"></div>
<div id="myDiv"class="page page-2"></div>

CSS

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: block;

}

.page img {
   min-height: 100%;
}

 .pt-page-moveFromTop {
        -webkit-animation: moveFromTop 2s ease both;
        animation: moveFromTop 2s ease both;
    }

.pt-page-moveToBottom {
    -webkit-animation: moveToBottom 2s ease both;
    animation: moveToBottom 2s ease both;
}


@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

javaScript

var image2 = new Image(); 

image2.src = "mySecondImg.jpg";

$(document).ready( function () {

   $('.myButton').click(function(){

       $('.page-1').addClass('pt-page-moveToBottom');
       $('.page-2').append(image2);
       $('.page-2').addClass('pt-page-moveFromTop');

    });  
});

It all works, but my second image doesn't get styled with the classes "page" and "page-2". So my question is, how can I apply those styles to the image() I created in js. I've tried something like

image2.addClass("page page-2");

But that doesn't do it. What is the best way to accomplish this? Thanks for your time.

In css file .page.page-2 img {...}

Germano Plebani
– Germano Plebani

2016-11-14 15:45:06 +00:00
Commented Nov 14, 2016 at 15:45 — Germano Plebani
– Germano Plebani, Commented Nov 14, 2016 at 15:45

hairmot · Accepted Answer · 2016-11-14 15:45:06Z

1

you are mixing javascript and jquery here. The add class function will only work with a jquery element.

You should be doing someting like $(image2).addClass("page page-2");

answered Nov 14, 2016 at 15:45

hairmot

2,9551 gold badge16 silver badges26 bronze badges

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

Comments

Catalin Iancu · Accepted Answer · 2016-11-14 17:03:27Z

1

Since you used

var image2 = new Image(); 
image2.src = "mySecondImg.jpg";

then I guess you may want to use a pure JS solution until the end. Then, you can assign the image class using:

image2.className = "className";

or add another class name like this:

image2.className += " className"; //with a space before

answered Nov 14, 2016 at 17:03

Catalin Iancu

7228 silver badges19 bronze badges

Comments

wscourge · Accepted Answer · 2016-11-14 15:46:36Z

0

$('.page-2').addClass('pt-page-moveFromTop'); adds class to img container, not to img itself. You should do $('.page-2 img').addClass('pt-page-moveFromTop'); instead.

answered Nov 14, 2016 at 15:46

wscourge

11.4k17 gold badges65 silver badges87 bronze badges

Collectives™ on Stack Overflow

How to style an image created using javaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related