current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 19 down vote favorite
6

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 with 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 doesnt work.

Thanks

share|improve this question
    
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 to fix the typo using the grey edit link. –  George Bailey Apr 15 '11 at 18:17
    
done................ –  Jay Apr 15 '11 at 18:23

7 Answers 7

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

This should work.

share|improve this answer
    
I am using this popupwindow 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
up vote 3 down vote

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);
            }
        })
share|improve this answer
up vote 2 down vote 
    var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
    });
    css_link.appendTo('head');
share|improve this answer
up vote 1 down vote

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.

share|improve this answer
    
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. –  Feisty Mango 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? –  Feisty Mango Apr 15 '11 at 18:19
up vote 1 down vote

Try doing it the other way around.

$('<link rel="stylesheet" href="css/style2.css" type="text/css" />').appendTo('head');
share|improve this answer
    
just tried it didnt work. Thanks anyways. –  Jay Apr 15 '11 at 18:19
    
what are you using to call the popup? window.open? Or is it a javascript popup? –  Mark Costello Apr 15 '11 at 18:21
    
javascript popup. –  Jay Apr 15 '11 at 18:29
    
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
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
    
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.