Javascript styling for a specific url

Question

Here is my site: http://dkurf.esxsb.servertrust.com/ I need to create specific styling for this page: http://dkurf.esxsb.servertrust.com/ProductDetails.asp?ProductCode=dfhs I don't have access to the html for that page so i need to override the styles that are throughout the site only for that page.

This is the bit of javascript the company that hosts my ecommerce store provided (Volusion, p.s. don't ever use them they are a css nightmare!)

<script type="text/javascript"> 
//<![CDATA[ 
if (location.pathname == "/ProductDetails.asp" || 
    location.pathname.indexOf("-p/") != -1 || 
    location.pathname.indexOf("_p/") != -1) 
    document
        .writeln("\n<style type='text/css'>.pricecolor{ background:#000; }</style>\n\n"); 
//]]> 
</script>

But if any one has any suggestions, it would be super helpful!

Thanks!

Alright so the updated script worked great! But now my page is all jacked up. Any help? — user1510719
– user1510719, Commented Jul 9, 2012 at 0:37
document.write* whatever is generally a bad idea and should be considered deprecated. Use DOM methods instead. — Jared Farrish
– Jared Farrish, Commented Jul 9, 2012 at 0:38
@JaredFarrish I'm not very well versed in javascript. Any suggested write ups? — user1510719
– user1510719, Commented Jul 9, 2012 at 0:42

Silviu-Marian · Accepted Answer · 2012-07-09 00:46:39Z

1

Untested, but should work. Should theoretically fail if there's no <head> tag.

var appendStyle= function(css){

    var code = document.createTextNode(css);
    var style = document.createElement('style');
    style.type='text/css';
    style.media='all';
    style.appendChild(code);
    document.getElementsByTagName('head')[0].appendChild(style);

};

(function(){
    var _ol = typeof(window.onload)==='function' ? window.onload : function(){};    
    window.onload = function(){ 
        _ol.apply(this,arguments);  
        if(window.location.href.indexOf('ProductDetails.asp?ProductCode=dfhs')!==-1) { try{
            appendStyle("\
                .pricecolor{ background:#000; }\
                body{ background:#f0f }\
            ");
            alert('new style appended successfully');
        }catch(e){ alert('error appending style: '+e) }};
    }; 

}());

answered Jul 9, 2012 at 0:46

Silviu-Marian

10.9k7 gold badges56 silver badges76 bronze badges

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

6 Comments

Jared Farrish Over a year ago

Shouldn't it be document.getElementsByTagName('head')[0].?

Silviu-Marian Over a year ago

@JaredFarrish absolutely. fixing now

user1510719 Over a year ago

Ok so that works! But, the effect is delayed. If you go to the page it will look normal, but after a couple seconds a pop-up will come up saying: style appended successfully. Any way to fix it so their is no delay and no pop up?

Silviu-Marian Over a year ago

@user1510719 remove var _ol = ... 3 lines including that one, and the corresponding end bracket. window.onload makes it work after page has loaded completely but you'll have to make sure this code is in your body tag.

Silviu-Marian Over a year ago

@user1510719 just remove the alert() calls

|

Collectives™ on Stack Overflow

Javascript styling for a specific url

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related