ansaurus

Question

jQuery include css

Answer 1

A:

$('body').addClass('popup-bg');

Since there is guaranteed to be only one body element, selecting on the element itself works.

Stefan Kendall 2010-06-14 18:29:46

there are much other styles, all of them must be written in javascript file and added with it to <body> or <head>

Happy 2010-06-14 18:35:12

Answer 2

A:

You can use something like $('body').addClass('popup-bg');

edl 2010-06-14 18:30:36

can't use it, post is updated

Happy 2010-06-14 18:33:48

Answer 3

+1 A:

Use addClass method of jquery:

$('body').addClass('popup-bg');

Update:

  $(function(){
    $('head').append('
      <style type="text/css">
        .popup-bg {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #eee;
        }
      </style>
    ');
  });

Sarfraz 2010-06-14 18:33:07

can't use it, all styles must be written inside js-file

Happy 2010-06-14 18:34:16

@Happy: We don't understand your question, please be more specific.

Sarfraz 2010-06-14 18:35:34

From what I got, he wants to use JavaScript to add the styles into the document after it has been loaded...

animuson 2010-06-14 18:36:54

@animuson, you are true

Happy 2010-06-14 18:37:29

@Sarfraz Ahmed, I have updated the topic, now it should be more clear

Happy 2010-06-14 18:38:57

@Happy: See my updated answer please.

Sarfraz 2010-06-14 18:46:41

tryed to use it, doesn't work

Happy 2010-06-14 18:55:07

seems that it deosn't work with multiline text.

Happy 2010-06-14 19:04:56

@Sarfraz Javascript does not allow multi-line strings.

Pointy 2010-06-14 19:11:24

Answer 4

+1 A:

Pointy 2010-06-14 18:41:32

this doesn't work with multiline text

Happy 2010-06-14 18:58:20

Well, @Happy, that's because Javascript does not allow multi-line strings. You can put together a long string in Javascript by appending them together. If the strings have line separators in them, that will work fine (though I'm not sure what difference it makes).

Pointy 2010-06-14 19:07:37

Answer 5

+1 A:

IF the class is defined in your structure/markup with the class then:

$(".popup-bg").css({ position: fixed, 
        left: 0, 
        top: 0, 
        width: 100%, 
        height: 100%, 
        background: #eee 
 });

OR to add it to a particular tag:

    $("body").css({ position: fixed,  
            left: 0,  
            top: 0,  
            width: 100%,  
            height: 100%,  
            background: #eee  
     });

AND to inject it:

var style = document.createElement('style'); 

style.innerText = '.popup-bg{ position: fixed,  
            left: 0,  
            top: 0,  
            width: 100%,  
            height: 100%,  
            background: #eee  
     }'; 

document.head.appendChild(style);

Mark Schultheiss 2010-06-14 18:42:02

I think he wants to create new `<style>` blocks, not set the style on individual elements.

Pointy 2010-06-14 18:44:12

@Pointy, you are true

Happy 2010-06-14 18:56:29

OK well that last thing is what he wants, but be aware that if you try to set "innerHTML" on a `<style>` element in IE (maybe not IE8 but I haven't tried) you get an exception from the browser. You have to use "innerText" instead.

Pointy 2010-06-14 18:56:50

so a form of my last edit, you could even add multiple text blocks (styles) to the "style" variable, then append it.

Mark Schultheiss 2010-06-14 18:58:01

Yes, forgot the legacy IE error, edit for Text instead of HTML

Mark Schultheiss 2010-06-14 18:59:59

Just an FYI, I believe you can clear the style with .empty(); for any styles aready on the page using jQuery $('style').empty(); IF you need to do that before adding the new style.

Mark Schultheiss 2010-06-14 19:02:38

I don't understand, how to implement with innerText?

Happy 2010-06-14 19:04:12

@Happy you tagged your question with the "jQuery" tag - if you're using jQuery you can just use the `.text()` call as in my answer. Also, `innerText` is not going to help you with your multi-line problem either, because you're still limited by what the programming language allows.

Pointy 2010-06-14 19:10:09

ansaurus

tags:

views:

answers:

jQuery include css

related questions