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/...eparation.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]

da********@gmail.com wrote:

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[i].className = '';
var D = T[i].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;
}


--
Stephane Moriaux et son [moins] vieux Mac

[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/...eparation.html
seems to deal with it and, if so, might be a hint about what I think I
need.

Cheers,
Dan

[Zoe Brown]

http://www.onlinetools.org/articles/...eparation.html
seems to deal with it and, if so, might be a hint about what I think I
need.

it would seem that you have answered your own question !!

[Mick White]

da********@gmail.com wrote:

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/...eparation.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]

da********@gmail.com wrote:

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/...eparation.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/...eparation.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.mor...i_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

--
Stephane Moriaux et son [moins] vieux Mac

[Dr Clue]

da********@gmail.com wrote:

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.

If one can indeed inject some of their own content into this page
delivery , you should be able to do what ever you like to the styles.

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/jsDHT.../OperaCSS.html

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

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

[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

[Dr Clue]

da********@gmail.com wrote:

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.

You can do this approach without placing any code
in the <head></head> at all, as long as you can get some of your content
delivered inside that page delivery.
--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

[Robi]

Dr Clue wrote in message news:Fd*****************@newsread2.news.pas.earthl ink.net...
[...]

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/jsDHT.../OperaCSS.html

Heres another that tears a page apart and translates it to another form
http://www.drclue.net/projects/jsDHT.../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.

[Dr Clue]

Robi wrote:

Dr Clue wrote in message news:Fd*****************@newsread2.news.pas.earthl ink.net...

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/jsDHT.../OperaCSS.html

Heres another that tears a page apart and translates it to another form
http://www.drclue.net/projects/jsDHT.../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.

The purpose of the tool was to aid someone converting nearly a thousand
yucky pages of tag soup, so the ditty was developed in one evening
to work with the pages as they existed, and therefore w/o the benefit
of any validation.


--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.