3

i have specific theme css which is required only when popup window is launches, nowhere else i'm using that css. Simply loading at the launch of website launch is waste.

Is there a way to load css only when required i.e upon opening popup window i can load the stylesheet?.

Naruto
  • 9,476
  • 37
  • 118
  • 201
  • 1
    You could load it from the codebehind of the aspx page displayed in your popup (cfr [this answer](http://stackoverflow.com/questions/7488678/to-add-an-external-css-file-from-the-code-behind)), or (but it's less clean) put the bit of CSS inside `style`tags in your aspx. – Laurent S. Oct 17 '13 at 10:24

4 Answers4

11

Create a new element like this

var lnk=document.createElement('link');
lnk.href='path/sheet.css';
lnk.rel='stylesheet';
lnk.type='text/css';
(document.head||document.documentElement).appendChild(lnk);

Hope this helps.

chandaniitr
  • 185
  • 6
  • Hi Chandaniitr thanks for your help, here 'link' means what?. and if i have 2 stylesheets, then i need to repeat the same code twice with different params right – Naruto Oct 17 '13 at 10:38
  • Here, 'link' is the type of element you want to create. The code will add . And, yes, you have to repeat this 2 times. You can wrap this in a function, something like add_stylesheet('path/sheet.css'). You can also play around with id, and change href, to change style-sheet at run-time. Hope this helps. – chandaniitr Oct 28 '13 at 09:45
1

You might want to try this approach How to load up CSS files using Javascript? (the code below)

But it does add a significant amount of stuffing to the site, maybe the CSS takes up less space anyway?

var $ = document; // shortcut
var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}
Community
  • 1
  • 1
Alex
  • 4,744
  • 2
  • 17
  • 21
  • 1
    Worth noting also that the $ variable is used by a number of popular JS libraries, including jQuery, so you may want to try a different one/just using document itself if you are using any of those. – Owen C. Jones Oct 17 '13 at 10:27
  • Alex thanks for your answer, this code i need to place at the start of my website popup page javascript right – Naruto Oct 17 '13 at 10:27
  • in this what does var cssId = 'myCss'; // you could encode the css path itself to generate id.. this line do, can you explain us – Naruto Oct 17 '13 at 11:11
  • If you would like the ID to be guaranteed unique and/or can be remembered, you could use the path as an ID itself, so for instance set the ID to be website_com_css_stylesheet_css or similar. I think that is what he meant. But you don't need to do this :-) – Alex Oct 17 '13 at 12:30
1

Add this in your code behind using GetWebResourceUrl

HtmlLink css= new HtmlLink();
css.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), "yourstyle.css");
css.Attributes["type"] = "text/css";
css.Attributes["rel"] = "stylesheet";
Page.Header.Controls.Add(css);

Or

Literal cssFile = new Literal() 
          {Text = @"<link href=""" + page.ResolveUrl("~yourstyle.css") + @"""  
            type=""text/css"" rel=""stylesheet"" />" };
page.Header.Controls.Add(cssFile);
Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
0

You can do this the jQuery way:

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

Luke Madhanga
  • 6,871
  • 2
  • 43
  • 47