Forums

AaronPorter

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>

So i went ahead and just put in the background color as a test, but I can't for the life of me get it to work. I don't know much javascript so that is probably why. I contacted Volusion and told them about my problem, but they said they don't provided custom coding. Which doesnt make any sense since they posted this right on their support page yet won't follow through.
But if any one has any suggestions, it would be super helpful!

Thanks!

EDIT: Fixed it with this script:

<script>
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(){
        if(window.location.href.indexOf('ProductDetails.asp?ProductCode=dfhs')!==-1) { try{
            appendStyle("\
                .pricecolor{ background:#000; }\
                body{ background:#f0f }\
            ");
                    }catch(e){ alert('error appending style: '+e) }}; 

}());</script>

Meta_Ing

Each new line within the document.writeln would need to be escaped with a \ (back slash). For example:

<script type="text/javascript">
document.write("This text\
	 is written on\
	 multiple lines"); 
</script>

However, rather than creating an extra style element, you can use javascript to change css directly via the style object. In your case, you would probably want something like the following:

<script type="text/javascript">
//<![CDATA[
if(location.pathname=="/ProductDetails.asp" || location.pathname.match(/[-_]p\//)){
	 p=document.getElementsByClassName("pricecolor");
	 for(i=0;i<p.length;i++){p[i].style.background="#000"; }
}
//]]>
</script>

AaronPorter

Alright i used your second suggestion, but i still can't seem to make it work. I put the script in the template_220.html file, if you want to take a look. Thanks!

Meta_Ing

Could you provide a link? I'm not quite sure what the template_220 file is.

Also, just be aware that the script (if unaltered) will only work if either /ProductDetails.asp, -p, or _p are in the URL's path name.

AaronPorter

It will be in the source of this page: http://dkurf.esxsb.servertrust.com/ProductDetails.asp?ProductCode=dfhs

I put the script in right after the body tag, But i'm having the worst time getting it to work.

Meta_Ing

Sorry to respond to this so late, but I would just like to suggest that scripts within the body should always be placed after any elements being affected by them. This should allow the element(s) to load first and ensure that the script won't attempt to operate on something that doesn't yet exist. (Most likely this was the problem you had with my script.)

Right before the body closing tag, </body>, (if possible) is the safest place.

treehouse : what would you like to learn today?

Forums

[Solved] Javascript styling for a specific url