Can I get Javascript to use a .css stylesheet?

[tannhauser]

I run a shop, which uses Shopsite. A feature of their most recent upgrade is a 'mini cart' - where the contents of your cart is displayed... wherever you want it. I've played around with the Javascript and found it works perfectly. I just pasted the code into a table cell.

Shopsite is really designed to be used fully - database driven - but does offer the ability for you to just add 'buy' links to any web page. This is what I do (although I still get a lot of the functionality). If the Java was pasted in the way they intended (into their templates), you get to specify 'includes' and to call .css styles, and I imagine it would respond to the variables - which it is currently ignoring!

Is there any way to get a simple Javascript to recognise my stylesheets? And how do I stop the script calling on my 'page properties' instead? I only want to apply three basic styles (heads, cart contents and subtotal).

I should say, before anyone say 'Can I see the shop?'... it sells adult merchandise.

If anyone thinks they can help, but it's "work", please let me know if I should take this to the 'Marketplace" (I'm new here).

[Jazzee]

So you are saying that your cart contents are being displayed through javascript and you want to style it using CSS?

I don't know what you mean by "And how do I stop the script calling on my 'page properties' instead?".

[tannhauser]

The script contains basic html stying (it responds to the font instruction, but not the size, for some reason). But I noticed that the text was coloured, and the link to the cart had a 'rollover' colour. I eventually realized the script was finding these colours in the 'default' page properties (colours I set up years ago) and are normally over-ridden by the .css styles. Erm... I use Dreamweaver, if that makes it make any more sense.

[Jazzee]

An easy fix for the colors may be to change the default page properties to match the css styles.

You say that the text size is set right in the javascript? Can you post the code here?

[tannhauser]

Here's the start of the code. I've only removed the VARs that identify the merchant. I can post the rest of it, if you like.

See down near the bottom, it responds to changes of 'font family', but the 'size makes no difference.

Is it possble to remove the styling and use css styles?

___________________

/**** REPLACE THE VALUES IN THESE LINES ****/
var textColor="black";
var backgroundColor="transparent";
var showCart="no"; // only "yes" or "no"
var cartColor="black"; // only "black" or "white"
var textAlign="left"; // only "left" "right" or "center"

/**** DON'T CHANGE ANYTHING BELOW HERE ****/

var linkColor=textColor;
var cookies=document.cookie; //read in all cookies
var start = cookies.indexOf("ss_cart_" + serialnum + "=");
var cartvalues = "";
var linecount = 0;
var start1;
var end1;
var tmp;

// Start Output
document.write("<div style=\"color:" + textColor + ";");
document.write("background-color:" + backgroundColor + ";");
document.write("text-align:" + textAlign + ";");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("\">\n");

[tannhauser]

I did adjust the page properties to match the colours, but the font size remains fixed (too big).

[Jazzee]

Does the font size change at all if you change the number? Or does it stay the same no matter what you put in there?

[tannhauser]

I've tried changing the font size to 36pt, 106pt, 7, -3, 8pt... it as no effect. And yet, if I remove the font family and font size lines, the mini cart fails to display.

Is it possible to get Java to reference an external stylesheet - or do I need to use css ID classes in the head section? If I did, how would I apply the styles in Java (and kill the current styling)? I know they should be named with #s.

[tannhauser]

I can get the headings (Shopping cart, Qty, Product, Price, Subtotal) to respond to H6 tags, which makes them small. These work in all browsers.

It's the only thing that has worked so far.

In IE, I can get the substrings (what you've bought and the running subtotal) to respond to H6 tags, too - by placing the H6 tags after TR tags. But these don't show up in other browsers.

Oh... and I removed everything that looked like other formatting info, and the thing stayed the same.

[tannhauser]

By moving some H6 tags to after TD tags (instead of after TR tags) I now have the whole mini cart in the H6 style.

Great (well... nasty looking, actually)! But now I know I can affect the text style, I need to find a way to specify the two styles I need.

[Jazzee]

Instead of using H6, can you stick something like this in there:

<span style="font-size: 12px;">

[tannhauser]

Thanks. I did try that. It wasn't tolerated.

So - even though I don't like workarounds (I always feel they'll fall apart some day) - I used H5 and H6 tags, and redefined them in my external stylesheet, that the rest of the doc calls on. It worked.

I've had a couple of friends check that they see what I see, and it seems to be working.

Is this a 'safe' way to do it?

[Jazzee]

If it works, do it. Isn't everything bold with h5 and h6? If so, I suggest adding a font-weight: normal to the h5 and h6 in your stylesheet.

[tannhauser]

Originally Posted by Jazzee

I suggest adding a font-weight: normal to the h5 and h6 in your stylesheet.

Got there just ahead of you! :wink:

I did have to override the 'bold'.

Thanks for your time.

[Jazzee]

Glad it's working now