By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,608 Members | 1,940 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > another css & javascript problem
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,608 IT Pros & Developers. It's quick & easy.

Another CSS & Javascript Problem

P: n/a
Hey,
When I use the code beneath I'm trying to resize a img depending on the
resolution of the visitor.
The images resizes fine, but the table doesn't! That keeps using the widht
of the original image.
I tried to put td { width=60%} in the style tag, but that didn't help
either.
How to fix this???

thnx,

A.T.
<html>
<head>
<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (window.screen.width == "1024") {
document.write("<style>img { width=100%}</style>");
}
else if (window.screen.width == "800") {
document.write("<style>img { width=60%;}</style>");
}
// --></script>
</head>
<body>
<table><tr>
<td><img src='im1.jpg' ></a></td>
<td><img src='im2.jpg' ></a><td>
</tr>
</table>

Jul 20 '05 #1
Share this Question
Share on Google+
12 Replies
P: n/a
Ang Talunin wrote on 10 okt 2003 in comp.lang.javascript:
Hey,
When I use the code beneath I'm trying to resize a img depending on
the resolution of the visitor.
The images resizes fine, but the table doesn't! That keeps using the
widht of the original image.
I tried to put td { width=60%} in the style tag, but that didn't help
either.
How to fix this???

thnx,

A.T.
<html>
<head>
<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (window.screen.width == "1024") {
document.write("<style>img { width=100%}</style>");
}
else if (window.screen.width == "800") {
document.write("<style>img { width=60%;}</style>");
}
// --></script>
</head>
<body>
<table><tr>
<td><img src='im1.jpg' ></a></td>
<td><img src='im2.jpg' ></a><td>
</tr>
</table>


1
width=60%;
should be
width:60%;

2
this is NOT 60% of the original img width, but 60% of the td width !

3
The </a>'s make no sense here.

4
The last <td> should be </td>

=========================

This will do what you probably want:

<style>
table {width:100%;} /* follows the window width */
td {width:50%;} /* follows the table width */
img {width:100%;} /* follows the td width */
</style>

<table><tr>
<td><img src='im1.jpg'></td>
<td><img src='im2.jpg'></td>
</tr></table>

not tested.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #2
P: n/a
> <html>
<head>
<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (window.screen.width == "1024") {
document.write("<style>img { width=100%}</style>");
}
else if (window.screen.width == "800") {
document.write("<style>img { width=60%;}</style>");
}
// --></script>
</head>
<body>
<table><tr>
<td><img src='im1.jpg' ></a></td>
<td><img src='im2.jpg' ></a><td>
</tr>
</table>


1
width=60%;
should be
width:60%;


I tried to change the first if in::

if (window.screen.width == "1024") {
document.write("<style>table{ width:100%} td{ width:50%} img{
width:100%}</style>");
}

But that doesn't work....

any other ideas?
Jul 20 '05 #3
P: n/a
Ang Talunin wrote:
if (window.screen.width == "1024") {
else if (window.screen.width == "800") {
}


What about people with other resolutions?

What about people who don't maximise their browser window?

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #4
P: n/a
Ang Talunin wrote on 10 okt 2003 in comp.lang.javascript:
I tried to change the first if in::

if (window.screen.width == "1024") {
document.write("<style>table{ width:100%} td{ width:50%} img{
width:100%}</style>");
}


the "" around 1024 are unneccessary

This cannot work, because the screen with is only available when the page
is being build, and the document.write() destroys the build.

I showed you earlier, what I think is the best, only using css, but since
perhaps I do not understand what you want, that is just my assumption.

Remember %-width is percent of the container, not of the img itself.

What always should be possible is two pages with clientside relocation:

// this is in "mypageLOW.html"
if (window.screen.width > 1023 ) location.href="mypageHIGH.html"

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #5
P: n/a

"David Dorward" <do*****@yahoo.com> schreef in bericht
news:bm*******************@news.demon.co.uk...
Ang Talunin wrote:
if (window.screen.width == "1024") {
else if (window.screen.width == "800") {
}
What about people with other resolutions?


They are taking care of also, but that's not the problem....
What about people who don't maximise their browser window?


I don't care. If they want to see the foto's I'm displaying correctly,
without scrollbars the just have to maximise...
Jul 20 '05 #6
P: n/a
> the "" around 1024 are unneccessary

ok

This cannot work, because the screen with is only available when the page
is being build, and the document.write() destroys the build.

I showed you earlier, what I think is the best, only using css, but since
perhaps I do not understand what you want, that is just my assumption.


But why is the <style> in the document.write changing the size of the
images, but not the size of the cells of the table?

Jul 20 '05 #7
P: n/a
Ang Talunin wrote on 11 okt 2003 in comp.lang.javascript:
But why is the <style> in the document.write changing the size of the
images, but not the size of the cells of the table?


because you specified 60%, this means that the image wil fill 60% of the
container, and that is the TD:

<style>
IMG {width:60%;}
</style>

If you want to change the size of the td, and fill the td with the img,
you have to specify:

<style>
TABLE {width:70%;}
TD {width:50%;}
IMG {width:100%;}
</style>

<table>
<tr>
<td><img src="..."></td>
<td><img src="..."></td>
</tr>
<tr>
<td><img src="..."></td>
<td><img src="..."></td>
</tr>
</table>
now the TD is, if possible, 50% of the table width. And the table width
is 70% of its container, wich could be the <body>.

================================

If you have more tables or td's or img's that you want to have different
measurements assigned to, work with css classes:
<style>
..tableclass {width:70%;margin-left:15%;}
..tdclass {width:50%;}
..imgclass {width:100%;}
</style>

<table class="tableclass">
<tr>
<td class="tdclass"><img class="imgclass" src="..."></td>
<td class="tdclass"><img class="imgclass" src="..."></td>
</tr>
<tr>
<td class="tdclass"><img class="imgclass" src="..."></td>
<td class="tdclass"><img class="imgclass" src="..."></td>
</tr>
</table>

As you see no javascript at all so:
while the Q is on-topic, the A is off ...

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #8
P: n/a
> because you specified 60%, this means that the image wil fill 60% of the
container, and that is the TD:

<style>
IMG {width:60%;}
</style>

If you want to change the size of the td, and fill the td with the img,
you have to specify:

<style>
TABLE {width:70%;}
TD {width:50%;}
IMG {width:100%;}
</style>

<table>
<tr>
<td><img src="..."></td>
<td><img src="..."></td>
</tr>
<tr>
<td><img src="..."></td>
<td><img src="..."></td>
</tr>
</table>
now the TD is, if possible, 50% of the table width. And the table width
is 70% of its container, wich could be the <body>.
OK, so I tried and made this code::
<html>
<head>
<style>
TABLE {width:70%;}
TD {width:50%;}
IMG {width:100%;}
</style>
</head>
<body >

<h1>Sportdag</h1><p>
<table><tr>
<td><img src='im1.jpg' ></a>
<td><img src='im2.jpg' ></a>

So when i resize my window it should change the size of the td....well it
doesn't....
So I tried to change the value of the table-width and for 100% it enlarged
the picture, and till about 60% it made the picture smaller, but under the
60% it didn't change anything....
might that be the problem?
================================

If you have more tables or td's or img's that you want to have different
measurements assigned to, work with css classes:

I know that, but that's not the case.
Jul 20 '05 #9
P: n/a
Ang Talunin wrote on 11 okt 2003 in comp.lang.javascript:
<h1>Sportdag</h1><p>
<table><tr>
<td><img src='im1.jpg' ></a>
<td><img src='im2.jpg' ></a>

So when i resize my window it should change the size of the td....well it
doesn't....


You are right, I'll have to test further.
Anyone else ?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #10
P: n/a
Ang Talunin wrote:
I don't care. If they want to see the foto's I'm displaying correctly,
without scrollbars the just have to maximise...


Possibly a better solution would be to give the user the choice of image
size. Perhaps a background image with a scale on it showing how wide and
tall "small" and "large" (and whatever other sizes you want) will appear
and ask the user to select one. This has the added benefit that users with
large resolutions but narrow bandwidth can choose a smaller image that
downloads faster.

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #11
P: n/a
> > I don't care. If they want to see the foto's I'm displaying correctly,
without scrollbars the just have to maximise...


Possibly a better solution would be to give the user the choice of image
size. Perhaps a background image with a scale on it showing how wide and
tall "small" and "large" (and whatever other sizes you want) will appear
and ask the user to select one. This has the added benefit that users with
large resolutions but narrow bandwidth can choose a smaller image that
downloads faster.


The images aren't very large, cause they already are thumbnails and linked
to the original image, so i don't think it's an option...
Jul 20 '05 #12
P: n/a
Ang Talunin wrote:
> I don't care. If they want to see the foto's I'm displaying correctly,
> without scrollbars the just have to maximise...


Possibly a better solution would be to give the user the choice of image
size. Perhaps a background image with a scale on it showing how wide and
tall "small" and "large" (and whatever other sizes you want) will appear
and ask the user to select one. This has the added benefit that users
with large resolutions but narrow bandwidth can choose a smaller image
that downloads faster.


The images aren't very large, cause they already are thumbnails and linked
to the original image, so i don't think it's an option...


Its quite possible. Just create images of whatever intermediate sizes you
want, and then dynamically generate the thumbnails pages with links to the
selected image size.

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Question stats

  • viewed: 1941
  • replies: 12
  • date asked: Jul 20 '05
BYTES.COM © 2020 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates