Changing CSS styles with javascript

[dan.vendel]

Hi,

I know nothing about javascript, but quite a lot about regulat html and
CSS.
Have bumped into a problem that people in this fine congregation
perhaps can help me with.

I'm making a webshop. When user eventually ends up at the credit card
processor's secure pages, the styles are quite different from the
actual site's. I have managed to change some basics through a control
panel, but not everything that needs to be changed to make it look OK.

The pages are generated dynamically. In the head section, there's the
CSS which I cannot access/change. Many tags also have inline styles
(e.g. <span style="font-family: Times...blah blah">

What I'm trying to do is to...

1) Add styles AFTER the body tag (I can do that, but not in the head)
2) Use a javascript, placed in the body, that substitutes the classes
and styles in the head to the corresponding styles defined in the body.

I have Googled a lot, and eventually found this page:
http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
which I think is addressing a similar (or the same?) issue.

But if someone can point to a tutorial or some help for me who is a
complete ignoramus about javascript, and that will help me achieve what
I want, that would be highly appreciated.

Cheers,

 

[ASM]

Hi,

I know nothing about javascript, but quite a lot about regulat html and
CSS.
Have bumped into a problem that people in this fine congregation
perhaps can help me with.

I'm making a webshop. When user eventually ends up at the credit card
processor's secure pages, the styles are quite different from the
actual site's. I have managed to change some basics through a control
panel, but not everything that needs to be changed to make it look OK.

Wouldn't it be a good idea to keep differet design of secured page ?
That buyer well understand he is on a really different part of site ?

The pages are generated dynamically. In the head section, there's the
CSS which I cannot access/change. Many tags also have inline styles
(e.g. <span style="font-family: Times...blah blah">

What I'm trying to do is to...

1) Add styles AFTER the body tag (I can do that, but not in the head)

so ... no more problem, no ?

2) Use a javascript, placed in the body, that substitutes the classes
and styles in the head to the corresponding styles defined in the body.

But if someone can point to a tutorial or some help for me who is a
complete ignoramus about javascript, and that will help me achieve what
I want, that would be highly appreciated.

on my idea, it is too difficult and needs to much heavy code

i.e. resetting TD

var T = document.getElementsByTagName('TD');
for(var i=0;i<T.length;i++) {
T.className = '';
var D = T.style;
D.fontFamily = 'arial,geneva,helvetica,verdana';
D.fontSize = '0.9em';
D.color = 'navy';
D.fontVariant = 'small-caps';
// etc ... etc ...
}

while in css

td, td.foo {
font : "arial,geneva,helvetica,verdana" 0.9em navy small-caps;
}

 

[dan.vendel]

Hi Stephane,

Thanks for reply.
The user will see a HUGE headline when he's entering the secure pages
telling him where he is.
But it seems as if I haven't explained well, or that you are
misunderstanding:

Yes, it is of course easier to do in CSS. But that's the problem: I can
NOT use pure CSS. I MUST have a javascript to "force" my styles into
existing (and dynamically generated) code.

And I don't have a clue how to do that, or if it's even possible. But
as I wrote, this page:
http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
seems to deal with it and, if so, might be a hint about what I think I
need.

Cheers,
Dan

 

[Mick White]

Hi,

I know nothing about javascript, but quite a lot about regulat html and
CSS.
Have bumped into a problem that people in this fine congregation
perhaps can help me with.

I'm making a webshop. When user eventually ends up at the credit card
processor's secure pages, the styles are quite different from the
actual site's. I have managed to change some basics through a control
panel, but not everything that needs to be changed to make it look OK.

The pages are generated dynamically. In the head section, there's the
CSS which I cannot access/change. Many tags also have inline styles
(e.g. <span style="font-family: Times...blah blah">

What I'm trying to do is to...

1) Add styles AFTER the body tag (I can do that, but not in the head)
2) Use a javascript, placed in the body, that substitutes the classes
and styles in the head to the corresponding styles defined in the body.

I have Googled a lot, and eventually found this page:
http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
which I think is addressing a similar (or the same?) issue.

But if someone can point to a tutorial or some help for me who is a
complete ignoramus about javascript, and that will help me achieve what
I want, that would be highly appreciated.

As noted, you've answered your own question.
Email me, no BOGUS, old friend.
Mick

 

[ASM]

Hi Stephane,

Thanks for reply.
The user will see a HUGE headline when he's entering the secure pages
telling him where he is.
But it seems as if I haven't explained well, or that you are
misunderstanding:

Yes, it is of course easier to do in CSS. But that's the problem: I can
NOT use pure CSS. I MUST have a javascript to "force" my styles into
existing (and dynamically generated) code.

OK, I do understand you want to add code to a page which isn't yours.
This page probably is on an other domain :
a normal browser will refuse to do something to this page.
This page is securized : don't believe you can acceed to the code, no?

And I don't have a clue how to do that, or if it's even possible. But
as I wrote, this page:
http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
seems to deal with it and, if so, might be a hint about what I think I
need.

except example they give
http://www.onlinetools.org/articles/unobtrusivejavascript/demo_cssseparation.html
has everything hard coded (any external action)

if the secured page is opened in a frame
perhaps could you try to modify it ? :

function collapse() {
if(!parent.frame_1.document.createTextNode){return;}
var p=parent.frame_1.document.createElement('p');
etc ...

name of frame with secured page = 'frame_1'
acces to this page = parent.frame_1.document

and don't forget last line of this demo :
parent.frame_1.onload=collapse;

Have a look here this little demo if that can help you :
http://perso.wanadoo.fr/stephane.moriaux/truc/copi_clone_popup/
in french ... goal is to copy an element (a div and its children)
several times in a popup from mother window
The only 1st cloned element has some of its children changed
1st violet button = launch the trick
2nd violet button = download demo

 

[dan.vendel]

Hi Stephane,

Hmmm.. you are assuming things I haven't even mentioned and reasoning
from that standpoint. Perhaps I'm still not explaining well enough:

It's not two domains involved, but one: the credit card processor's
domain. I am able to add a header and footer to all dynamically
generated pages. The header I can add starts from <body> and own.
That's where I intend to place the substitute styles. W3C don't like
it, which is irrelevant since every browser will read the styles
anyway.

To clarify further, here's a mockup example:

<html>
<head>
<!------ original styles below ----->
<styles>
..1 {blah blah}
#2 { blah blah}
td {blah blah}
</styles>
<!------ end original styles ----->
</head>
Code is generated dynamically. But I can add code from here and
downward. The code I add will be placed in every page.
<body>
<!------ substitute styles below ----->
<styles>
..3 {blah blah}
#4 {blah blah}
..5 {blah blah}
</styles>
<!------ end substitute styles ----->

<!----- elements below ----->
<p class="1">blah blah</p>
<div id="2">blah blah</div>
<td>blah blah</td>
<span style="font-family: Times, serif"> blah blah</span>
<!----- end elements ----->

<!----- javascript below ----->
<script type="javascript">
find: class="1", replace with: class="3"
find: id="2", replace with: id="4"
find: td, replace with: class="5"
find: style="font-family: Times, serif", replace with:
style="font-family: Verdana, sans-serif"
</script>
<!----- end javascript ----->
</body>
</html>

 

[dan.vendel]

Hi Clue,

With my limited knowledge about javascript, it seems to me as if both
examples require code in the head section, no? If so, I'm sorry to say
that I can't use neither.

Cheers,
Dan

 

[dan.vendel]

Hullo Mick!

Well, as I don 't know squat about javascript, I tried to make you
confirm that the script actually is doing what I think. I suppose, by
the replies, that it does, even if I haven't seen a clear confirmation.

I've mailed you off-list!

Cheers,
Dan

 

[Robi]

Dr Clue wrote in message [...]

Heres a demo that loads new CSS stylesheet files on the fly.
It can be raided for all the basic components to beat on yourpage.
http://www.drclue.net/projects/jsDHTMLlib/Examples/OperaCSS/OperaCSS.html

Heres another that tears a page apart and translates it to another form
http://www.drclue.net/projects/jsDHTMLlib/Examples/HTML2CSS/HTML2CSS.html

Your examples (and work) are impressive, I have a small remark/comment
on the HTML2CSS.html page(s)

I loaded "lesson 4" and realized how horribly mis<tag>ged the page was.
I don't know if it's on purpose or if you took the pages as they were
and didn't validate them.
example 1:

<body bgcolor="#ffffff">
<p>
<table border="0" width="100%">
<tbody>
[...]

</tbody></table>
</p><p></p>
^^^
endtag without opening tag. According to the DTDs the P element cannot contain
table elements.
<!ELEMENT P - O (%inline* -- paragraph -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">
<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
in other words, the <p> tag was closed when before <table>
and now </p> is there all by itself.

The same applies to the following (<h2> within <h5>):

<h5>
<center>
<h2><font face="Verdana, Arial, Helvetica, sans-serif">Lesson 4 -- Tools to
Use in Selecting Materials</font> </h2>
</center>
</h5>

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!ELEMENT (%heading - - (%inline* -- heading -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">
<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

only here the closing tag is mandatory. You cannot nest certain block elements.