CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

Integrate style tag using css

I try to add the <style type="text/css"></style> to head using jquery. I tried like this

 $("<style type='text/css'></style>").appendTo("head");

Previously, i have this type of 

<style type="text/css">
img{ 
    -moz-animation:.6s rotateRight infinite linear; 
    -webkit-animation:.6s rotateRight infinite linear; 
}

@-moz-keyframes rotateRight{
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
    100%{ -moz-transform:rotate(360deg); }
}

@-webkit-keyframes rotateRight{
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
    100%{ -webkit-transform:rotate(360deg); }
}
</style>

That above style worked when I tried this with jquery like this:

$("<style type='text/css'>img{ 
    -moz-animation:.6s rotateRight infinite linear; 
    -webkit-animation:.6s rotateRight infinite linear; 
}

@-moz-keyframes rotateRight{
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
    100%{ -moz-transform:rotate(360deg); }
}

@-webkit-keyframes rotateRight{
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
    100%{ -webkit-transform:rotate(360deg); }
}</style>").appendTo("head");

but i get error in editor itself. Here is the pic enter image description here I think i messup something :( http://jsfiddle.net/jSvUE/

Any suggestion would be great Thanks, vicky

Upvotes: 6

Views: 233

Answers (4)

Scott
Scott

Reputation: 5369

Try

$("<style type='text/css'>img{ \
    -moz-animation:.6s rotateRight infinite linear; \
    -webkit-animation:.6s rotateRight infinite linear; \
} \
@-moz-keyframes rotateRight{ \
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; } \
    100%{ -moz-transform:rotate(360deg); } \
} \
@-webkit-keyframes rotateRight{ \
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; } \
    100%{ -webkit-transform:rotate(360deg); } \
}</style>").appendTo("head");

Working example: http://jsfiddle.net/jSvUE/2/

Really hackish, but for a quick-n-dirty solution, that'll work. The idea here is that you are escaping the new line. A more elegant way to accomplish this, though, is to put that img as a class, and use http://api.jquery.com/toggleClass/ to toggle the animation.

Update 2016

Here in 2016, ES6 is widely supported, and the above hack can be replaced with this still-horrendous blob:

$(`<style type="text/css">
img {
    animation: 600ms rotateRight infinite linear;
}
@keyframes rotateRight {
    0% { transform: rotate(0deg); transform-origin: 50% 50% }
    100% { transform: rotate(360deg) }
}
</style>`).appendTo("head");

Upvotes: 4

Warlock
Warlock

Reputation: 7471

The only valid way is string concatenation:

$("<style type='text/css'>img{ " +
" -moz-animation:.6s rotateRight infinite linear; " +
" -webkit-animation:.6s rotateRight infinite linear; " +
"}" + ...
).appendTo("head");

Please pay attention that it's not recommended to do something like this:

$("<style type='text/css'>img{ \
    -moz-animation:.6s rotateRight infinite linear; \
    -webkit-animation:.6s rotateRight infinite linear; \
} \
...

The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript.

Google JavaScript Style Guide

Upvotes: 1

David Randall
David Randall

Reputation: 770

The issue is with the line breaks in the JS. You can store the styles in a variable and then append that to the head so that the styles are re-usable:

var $styles = '<style type="text/css">img{-moz-animation:.6s rotateRight infinite linear;-webkit-animation:.6s rotateRight infinite linear;}@-moz-keyframes rotateRight{0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }100%{ -moz-transform:rotate(360deg); }}@-webkit-keyframes rotateRight{0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }100%{ -webkit-transform:rotate(360deg); }}</style>';

$("head").append($styles);

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10260

Im not sure why your doing this but your problem is you cant break lines in javascript try this

$("<style type='text/css'>img{-moz-animation:.6s rotateRight infinite linear;-webkit-animation:.6s rotateRight infinite linear; }"+

"@-moz-keyframes rotateRight{0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }100%{ -moz-transform:rotate(360deg); }}"+

"@-webkit-keyframes rotateRight{ 0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; } 100%{ -webkit-transform:rotate(360deg); }}</style>").appendTo("head");

An example is here either stick everything on one line if it is a string. Or if you want to keep nice formatting break the line with +

Upvotes: 1

Related Questions