ansaurus

Question

I can't assign a class to an element opened in new window

Answer 1

A:

On a side note, you will also want to include in this new page some css otherwise this class="larger" will not do anything.

OpenWindow.document.write('<html><link href="css/style.css"/><body>');
OpenWindow.document.write('<img src="{source URL}" id="img1" class="larger" />');
OpenWindow.document.write('</body></html>');

Chris 2010-08-01 11:05:17

first of all thanks a lot for your fast response, but i have included the class as internal style in my page this is the full code:<style>.larger{ width:1000px; }</style><script type="text/javascript"> function larger() { OpenWindow.document.write('<html><body>');OpenWindow.document.write('<img src="webfonts.jpg" id="img1" class="larger" />');OpenWindow.document.write('</body></html>'); }</script><body><img id="img1" src="webfonts.jpg" border="0" /><button onclick="larger()">larger</button></body>

loll 2010-08-01 11:30:24

<body><img id="img1" src="webfonts.jpg" border="0" /><button onclick="larger()">larger</button></body>

loll 2010-08-01 11:31:44

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>resize image </title><style>.larger{ width:1000px; }</style><script type="text/javascript"> function larger() { OpenWindow.document.write('<html><body>');OpenWindow.document.write('<img src="webfonts.jpg" id="img1" class="larger" />');OpenWindow.document.write('</body></html>'); }</script></head><body><img id="img1" src="webfonts.jpg" border="0" /><button onclick="larger()">larger</button></body></html>

loll 2010-08-01 11:32:00

As others have noted, please update the code in the original question - trying to assemble 12 separate code fragments is very difficult

scunliffe 2010-08-01 11:51:33

I have updated my question, but unfortunately it isnt allowed to add this code as new user :and this my code in body tag:<body><img id="img1" src="webfonts.jpg" border="0" /><button onclick="larger()">larger</button></body>

loll 2010-08-01 11:54:56

<body><img id="img1" src="webfonts.jpg" border="0" /><button onclick="larger()">larger</button></body>

loll 2010-08-01 11:55:42

the image is opened successfully in the new window but the class is not working at all

loll 2010-08-01 11:56:44

Answer 2

+2 A:

First, the code you wrote is wrong. There's an apostrophe too much behind img.

Second, you didn't assign an ID to your img element, so you can't access it with document.getElementById.

Use something like

var docHead = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'+
    'http://www.w3.org/TR/html4/strict.dtd"&gt;'+
    '<html><head><title>Test page</title>'+
    '<style type="text/css">'+
    '  .larger { width: 10px }'+
    '</style></head><body>';
var docFoot = '</body></html>';

OpenWindow=window.open("", "newwin", "height=100,width=1000");
OpenWindow.document.write(docHead);
OpenWindow.document.write('<img id="img1" src="webfonts.jpg">');
OpenWindow.document.write(docFoot);
OpenWindow.document.close();
OpenWindow.document.getElementById('img1').className = "larger";

Marcel Korpel 2010-08-01 11:19:02

plz reread the code I have assigned an id to my image:<img id="img1" src="webfonts.jpg" border="0" />in the body

loll 2010-08-01 11:33:28

I have tried your code

loll 2010-08-01 11:34:00

but it doesn't work also, listen it seems to be better if i send u an attached file, but I am a new user, could u plz tell me how to do this.

loll 2010-08-01 11:35:00

I use fire fox 3.6.8 on windows platform

loll 2010-08-01 12:08:35

could u plz paste me ur code

loll 2010-08-01 12:12:02

@loll – This *is* my code; I just surrounded it with `<script>` tags in an HTML file and ran it. The window appeared and checking with Firebug revealed that the class name was indeed set to ‘larger’.

Marcel Korpel 2010-08-01 12:20:15

and the image has been re sized to have a width=1000px? this my problem the class has no effect on the image size.

loll 2010-08-01 12:27:30

but if u rried this document.getElementById("img1").className = "larger"; (with out OpenWindow) the image will be resized successfully in the main page.

loll 2010-08-01 12:29:48

document.getElementById("img1").className = "larger";

loll 2010-08-01 12:30:09

@loll – That's a completely different problem. Did you embed a style sheet in the new window? The code above doesn't. I'll rework it a bit.

Marcel Korpel 2010-08-01 12:30:44

yes I have embedded an internal style using this line code:<style>.larger{ width:10px; }</style>

loll 2010-08-01 12:36:27

@loll – It's not in your code above. Perhaps you embedded it to the page that opens the new window, but you have to embed it there, too. See my revised answer.

Marcel Korpel 2010-08-01 12:39:05

aha ok I'll try it immediately

loll 2010-08-01 12:40:32

YES That's it, t finally works successfully thaaaaaaaaaaanks alot

loll 2010-08-01 12:45:22

@scunliffe – Thanks for editing, but in HTML 4.01 (the OP didn't specify the version and variant he's using) the end tag of the `img` element is [forbidden](http://www.w3.org/TR/html401/struct/objects.html#h-13.2). ;-)

Marcel Korpel 2010-08-01 22:31:37

ansaurus

tags:

views:

answers:

I can't assign a class to an element opened in new window

related questions