CODEWITHSUNDEEP
javascriptjquerycss
Jay
Jay

Reputation: 707

adding css file with jquery

I am creating a popupwindow and I want to add a css file to that popupwindow. Below is the code for popupwindow. I have a JavaScript which creates a popupwindow.

<a href="popupwindowcontent.xhtml" title="Print" class="popupwindow">Print1</a>

Now I want to add a css file to this popupwindow. I tried something like

$('.popupwindow').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');


 $('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');

but it doesn't work.

Upvotes: 69

Views: 159702

Answers (8)

A. Wheatman
A. Wheatman

Reputation: 6378

Just my couple cents... sometimes it's good to be sure there are no any duplicates... so we have the next function in the utils library:

jQuery.loadCSS = function(url) {
    if (!$('link[href="' + url + '"]').length)
        $('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
}

How to use:

$.loadCSS('css/style2.css');

Upvotes: 6

zuzuleinen
zuzuleinen

Reputation: 2634

    var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
    });
    css_link.appendTo('head');

Upvotes: 14

Dilip Rajkumar
Dilip Rajkumar

Reputation: 7074

This is how I add css using jQuery ajax. Hope it helps someone..

$.ajax({
            url:"site/test/style.css",
            success:function(data){
                 $("<style></style>").appendTo("head").html(data);
            }
        })

Upvotes: 16

Etienne Dupuis
Etienne Dupuis

Reputation: 13796

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

This should work.

Upvotes: 164

fehays
fehays

Reputation: 3167

Have you tried simply using the media attribute for you css reference?

<link rel="stylesheet" href="css/style2.css" media="print" type="text/css" />

Or set it to screen if you don't want the printed version to use the style:

<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />

This way you don't need to add it dynamically.

Upvotes: 0

FatherStorm
FatherStorm

Reputation: 7183

I don't think you can attach down into a window that you are instancing... I KNOW you can't do it if the url's are on different domains (XSS and all that jazz), but you can talk UP from that window and access elements of the parent window assuming they are on the same domain. your best bet is to attach the stylesheet at the page you are loading, and if that page isn't on the same domain, (e.g. trying to restyle some one else's page,) you won't be able to.

Upvotes: 0

Mark Costello
Mark Costello

Reputation: 4394

Try doing it the other way around.

$('<link rel="stylesheet" href="css/style2.css" type="text/css" />').appendTo('head');

Upvotes: 2

Matthew Cox
Matthew Cox

Reputation: 13672

Your issue is that your selector is for an anchor element <a>. You are treating the <a> tag as if it represents the page which is not the case.

$('head') will work as long as this selector is being executed by the page that needs the css.

Why not simply add the css file to the page in question. Any particular reason to attempt this dynamically from another page? I am not even familiar with a way to inject css to remote pages like this ... seems like it would be a major security hole.

ADDENDUM to your reasoning:

Then you should simply pass a parameter to the page, read it using javascript, and then do whatever is needed based on the parameter.

Upvotes: 1

Related Questions