Changing CSS styles with javascript

**ASM** · Sep 13 '05, 10:55 AM

Re: Changing CSS styles with javascript

dan.vendel@gmai l.com wrote:[color=blue]
> 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.[/color]

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 ?
[color=blue]
> 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)[/color]

so ... no more problem, no ?
[color=blue]
> 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.[/color]

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

i.e. resetting TD

var T = document.getEle mentsByTagName( 'TD');
for(var i=0;i<T.length; i++) {
T[i].className = '';
var D = T[i].style;
D.fontFamily = 'arial,geneva,h elvetica,verdan a';
D.fontSize = '0.9em';
D.color = 'navy';
D.fontVariant = 'small-caps';
// etc ... etc ...
}

while in css

td, td.foo {
font : "arial,geneva,h elvetica,verdan a" 0.9em navy small-caps;
}

--
Stephane Moriaux et son [moins] vieux Mac

**dan.vendel@gmail.com** · Sep 13 '05, 12:25 PM

Re: Changing CSS styles with javascript

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
misunderstandin g:

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:

Separation of CSS and Javascript - Unobtrusive Javascript

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

**Zoe Brown** · Sep 13 '05, 12:45 PM

Re: Changing CSS styles with javascript

[color=blue]
> 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.[/color]

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

**Mick White** · Sep 13 '05, 02:05 PM

Re: Changing CSS styles with javascript

dan.vendel@gmai l.com wrote:
[color=blue]
> 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.
>[/color]

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

**ASM** · Sep 13 '05, 02:45 PM

Re: Changing CSS styles with javascript

dan.vendel@gmai l.com wrote:[color=blue]
> 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
> misunderstandin g:
>
> 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.[/color]

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?
[color=blue]
> 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.[/color]

except example they give

Separation of CSS and Javascript example

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.fram e_1.document.cr eateTextNode){r eturn;}
var p=parent.frame_ 1.document.crea teElement('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

--
Stephane Moriaux et son [moins] vieux Mac

**Dr Clue** · Sep 14 '05, 02:55 AM

Re: Changing CSS styles with javascript

dan.vendel@gmai l.com wrote:[color=blue]
> 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.[/color]

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.

CSS Tutorial – DrClue.net

http://www.drclue.net/projects/jsDHTMLlib/Examples/OperaCSS/OperaCSS.html

Heres another that tears a page apart and translates it to another form

HTML Tutorial – DrClue.net

http://www.drclue.net/projects/jsDHTMLlib/Examples/HTML2CSS/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@gmail.com** · Sep 14 '05, 10:15 AM

Re: Changing CSS styles with javascript

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>

<styles>
..1 {blah blah}
#2 { blah blah}
td {blah blah}
</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>

<styles>
..3 {blah blah}
#4 {blah blah}
..5 {blah blah}
</styles>



<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>



<script type="javascrip t">
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>

</body>
</html>

**dan.vendel@gmail.com** · Sep 14 '05, 10:25 AM

Re: Changing CSS styles with javascript

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@gmail.com** · Sep 14 '05, 10:25 AM

Re: Changing CSS styles with javascript

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** · Sep 14 '05, 03:15 PM

Re: Changing CSS styles with javascript

dan.vendel@gmai l.com wrote:[color=blue]
> 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.[/color]

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** · Sep 15 '05, 05:05 AM

Re: Changing CSS styles with javascript

Dr Clue wrote in message news:FdMVe.9742 $4P5.2400@newsr ead2.news.pas.e arthlink.net...
[...]
[color=blue]
> 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[/color]

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="#fffff f">
<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** · Sep 15 '05, 05:45 AM

Re: Changing CSS styles with javascript

Robi wrote:[color=blue]
> Dr Clue wrote in message news:FdMVe.9742 $4P5.2400@newsr ead2.news.pas.e arthlink.net...[color=green]
>>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[/color]
>
>
> 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.[/color]

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
--.

Changing CSS styles with javascript

Changing CSS styles with javascript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment