inserting css based on some condition in a page

Question

I have a page which can behave as a pop up in sharepoint..Now I can using this javascript to identify if it is a pop up if (window.location.search.match("[?&]IsDlg=1")) but what I am not able to figure out is how do I insert some css based on if this condition is true.

One way I am thinking is to have a label in the page and then use code behind to identify the condition and insert the css but I also want to check whether this is possible though javascript.Can someone please guide me .

I think I can do something with jQuery like this

$('<style type="text/css">#foo { background: #000; } </style>').appendTo("head");

Thanks

daniel · Accepted Answer · 2012-12-05 20:22:10Z

1

Not sure I understand your question, perhaps you can show some code? Using jQuery you can set css like so:

$('.my-div').css('display','block');

Or you can just write the css and put it in your stylesheet and then set classes on your elements like so:

$('.my-div').addClass('yellow-border');

answered Dec 5, 2012 at 20:22

daniel

1,4339 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user505210 Over a year ago

Sorry should had give some more details..So I have a page which has can be opened like a regular page or as a pop up..what I want is that when it's opened as a pop there should be some css inserted in the page ..now the way I was thinking is that I can check for the condition that the page is pop up or not but then how do I insert the css.

daniel Over a year ago

Sounds like if you can check that it is a popup, you can add a class to the top of your element hierarchy like so: jsfiddle.net/tfZwU/2

user505210 Over a year ago

This is what I am doing . <body onload="javascript:test()"> firing this function on page load and then doing this .Seems to be working fine .Do you guys think it's a nice or something better function test() { if (window.location.search.match("[?&]IsDlg=1")) { $('<style type="text/css">#foo { background: #000; } </style>').appendTo("head"); } }

user505210 Over a year ago

Actually I can just use this $(document).ready(function () { if (true) { $('<style type="text/css">#foo { background: blue; } </style>').appendTo("head"); } });

daniel Over a year ago

That should work fine, adding a class as in my second example would probably be better performance wise, but if all you need is 1 color then go with it :)

Collectives™ on Stack Overflow

inserting css based on some condition in a page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related