adding css file with jquery

Question

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.

Unless you're using some kind of plugin or technique I'm not familiar with, you can't specify the size of the popup by using the `rel` attribute on the `a`. — sdleihssirhc, Apr 15 '11 at 18:10
Yup rel is just a typo the popup is getting height and width from the javascript. — Jay, Apr 15 '11 at 18:11
You can [edit your question](http://stackoverflow.com/posts/5680657/edit) to fix the typo using the grey [edit] link. — 700 Software, Apr 15 '11 at 18:17
Youve gotta set the href attr after the is appended to the or it wont work across browsers. — ekerner, Aug 16 '17 at 10:19

Etienne Dupuis · Accepted Answer · 2011-04-21T17:56:44.507

163

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

This should work.

edited Apr 21 '11 at 17:56

answered Apr 15 '11 at 18:18

Etienne Dupuis

13,548
6
47
58

I am using this popupwindow https://github.com/rip747/popupwindow you can create a local .xhtml file and link it to any example and try changing the styles of the popupwindow. Let me know if that works. The site in on our local server so no outsider can access it. – Jay Apr 15 '11 at 18:39
it applies styles to both the file I just want that css to be applied to the popup. – Jay Apr 15 '11 at 18:46
will this apply for – ChickenWing24 Jun 18 '15 at 03:05
2

Worth noting, this does not seem to allow the regular level of "cascading rules" normally applied in css. If the same selector is used in two stylesheets, it will take the previous rule entered normally by way of link tag in the head instead of the one in the new, further down the list, injected stylesheet. Im not sure why or even if it will do this in all browsers. So....plan on using more specific selectors in the secondary style sheet. :) – Jun 20 '18 at 15:22

score 16 · Answer 2 · answered Sep 12 '12 at 12:32

16

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);
            }
        })

answered Sep 12 '12 at 12:32

Dilip Rajkumar

7,006
6
60
76

score 14 · Answer 3 · answered Nov 19 '13 at 08:58

14

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

answered Nov 19 '13 at 08:58

zuzuleinen

2,604
5
38
49

score 6 · Answer 4 · answered Mar 30 '15 at 21:24

6

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');

answered Mar 30 '15 at 21:24

Mr. Pumpkin

6,212
6
44
60

`loadCSS` could even be told to load the CSS file from cache or not by adding or not a timestamped query parameter to the url. – Stephan Mar 04 '16 at 18:20

score 2 · Answer 5 · answered Apr 15 '11 at 18:14

2

Try doing it the other way around.

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

answered Apr 15 '11 at 18:14

Mark Costello

4,334
4
23
26

what are you using to call the popup? window.open? Or is it a javascript popup? – Mark Costello Apr 15 '11 at 18:21
oh, then just add the css file when you load your page, then give the popup the style in the css file. – Mark Costello Apr 15 '11 at 18:35
but its the same page in the popup and the current – Jay Apr 15 '11 at 19:28
So? you can style the elements on the page and the popup differently by using classes – Mark Costello Apr 15 '11 at 19:47
thats what I am trying to do. – Jay Apr 15 '11 at 19:52
That's not what it looks like. Just add it when the parent page loads... You're not making it easy on yourself. – Mark Costello Apr 15 '11 at 20:05
is it possible for you to code it for me please. I really dont understand where to include it as its executed in the head section of the parent and preview page. – Jay Apr 15 '11 at 20:58
you said below that the content is in a local xhtml file... Put the css in the head of this file. – Mark Costello Apr 15 '11 at 21:16

Matthew Cox · Answer 6 · 2011-04-15T18:14:00.317

1

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.

edited Apr 15 '11 at 18:14

answered Apr 15 '11 at 18:08

Matthew Cox

13,566
9
54
72

the popup is basically a "Print Preview" so I want to add a css file specifically for the print preview. – Jay Apr 15 '11 at 18:12
$('head') adds the css to the both the pages (preview and actual) – Jay Apr 15 '11 at 18:14
@Jay I would assume that is happening is because you also have that code executing on the preview page as well? I seriously doubt that it would inject it onto both pages just by calling it on the parent page. – Matthew Cox Apr 15 '11 at 18:16
do you have any links which can help me with that I am not sure how to pass a parameter to the page. Thanks – Jay Apr 15 '11 at 18:16
@Jay what language are you using? Is it a server side language? Or are you strictly using HTML and JQuery? – Matthew Cox Apr 15 '11 at 18:19
@Jay Also, this page popupwindowcontent.xhtml ... is it only used for print preview? Is there an issue with just adding the css file directly to it? – Matthew Cox Apr 15 '11 at 18:20
In preview I am using the same file just modifying the the structure with css file. – Jay Apr 15 '11 at 18:22

score 0 · Answer 7 · answered Apr 15 '11 at 18:15

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.

score 0 · Answer 8 · answered Apr 15 '11 at 18:35

0

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.

answered Apr 15 '11 at 18:35

fehays

3,147
1
24
43

but the popupwindow is generated by a javascript. – Jay Apr 15 '11 at 18:41
Isn't the popup window displaying the content in the popupwindowcontent.xhtml file? Can't you just put the stylesheet in there? – fehays Apr 15 '11 at 19:46
its the same file. maybe its the name thats confusing you. But I am displaying the same file I just want to add some style to modify its look in the popup. – Jay Apr 15 '11 at 19:48

adding css file with jquery

8 Answers8

Linked

Related