Detect URL with Javascript and apply CSS

Question

So I have a page I want to apply some CSS to, but it is dynamically generated by the CMS. The URL remains constant, so I thought I could stick this in the head of the template file to add the CSS to the page I want, but it's not working.

<script type="text/javascript">
jQuery(document).ready(function () {
if(window.location.href.indexOf("/products.html"))
{
document.write("<style type=\"text/css\">
.category-grid li:nth-child(4)
{
margin-left:115px;
}   
</style>");
}
});
</script>

There's probably some syntax off on my document.write statement, as that's where the error seems to occur, but I can't figure it out. Any ideas?

Is there no way you can just write contextual css so that there is no script involved? — Henry, Mar 12 '12 at 15:55

score 3 · Answer 1 · answered Mar 12 '12 at 15:52

You can't use document.write() in a jQuery "ready" handler. After the browser has finished building the DOM (which is what a "ready" handler implies), subsequent calls to document.write will destroy the page.

Instead of doing that, what you could do would be to use some CSS rules that you'd always include, but that are qualified by a body class:

.products .category-grid li:nth-child(4) {
   margin-left: 115px;
}

Then your script would add "products" to the <body> element's class when id decides it's the proper page.

Aha, didn't see this answer. Please for the sake of sanity do it this way. — Henry, Mar 12 '12 at 16:01

score 1 · Accepted Answer · answered Mar 12 '12 at 15:51

The quotes are not properly terminated.

Also, you should not defer document.write, because it overwrites the current document. Also, compare the result from indexOf against -1. If the sub-string is not found, your previous code would still inject the script, because !!-1 is true.

Your code can be fixed in this way:

<script>
if (location.href.indexOf("dev.obtura.com/products.html") !== -1) {
    document.write("<style>" +
    ".category-grid li:nth-child(4){" +
    "    margin-left:115px;" +
    "}" +
    "</style>");
}
</script>

score 1 · Answer 3 · answered Mar 12 '12 at 15:54

Perhaps you are more satisfied with yepnope.js. With this you can chose CSS or JS to load dynamically.

Such as this

yepnope({
  test : function(){return window.location.href.indexOf("dev.obtura.com/products.html") === -1},
  yep  : 'style.css',
  nope : 'products.css'
})

score 0 · Answer 4 · answered Mar 12 '12 at 16:05

if your CSS styles are stored inside a stylesheet file you can use jQuery's append method instead of document.write

<script>
if (location.href.indexOf('dev.obtura.com/products.html') != -1) 
{
   //match!
   $('head').append('<link rel="stylesheet" type="text/css" href="your_stylesheet.css">');
}
</script>

HTH,

--hensson

score 0 · Answer 5 · answered Mar 12 '12 at 16:08

Clearly you can do it this way but I don't think it is a good way of doing it. This way of doing it seems like a pain to maintain and read. Some better ways I can think of:

Add an additional class into the document that you can use to apply a css selector just for that document
Add a style tag statically to just that page
If you do want to use jQuery to apply it do something like this (not tested but should be close):

$('.category-grid li:nth-child(4)').css('margin-left', '115px')
yunzen's suggestion of using yepnope.

Detect URL with Javascript and apply CSS

5 Answers5

Linked