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> 12  2062 
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)
> <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?
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/
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)
"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...
> 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?
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)
> 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.
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)
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/
> > 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...
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/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Peter |
last post by:
Hello,
Two newbie questions:
1) I have a javascript file with a function in it. From this function
I want to access a variable in another javascript file -which is not
inside a function. I...
|
by: Zaidan |
last post by:
I am running Excel2000 under WIN98 2nd edition, and I am writing a VBA
code (I will consider using javascript if I have to) that does the
following, at the user command:
1- Start MS Explorer and...
|
by: Luklrc |
last post by:
Hi,
I'm having to create a querysting with javascript. My problem is that
javscript turns the "&" characher into "&" when it gets used as a
querystring in the url EG:
...
|
by: johkar |
last post by:
When the output method is set to xml, even though I have CDATA around
my JavaScript, the operaters of && and < are converted to XML character
entities which causes errors in my JavaScript. I know...
|
by: Nathan Sokalski |
last post by:
I add a JavaScript event handler to some of my Webcontrols using the
Attributes.Add() method as follows:
Dim jscode as String = "return (event.keyCode>=65&&event.keyCode<=90);"...
|
by: Arne |
last post by:
A lot of Firefox users I know, says they have problems with validation
where the ampersand sign has to be written as & to be valid. I don't
have Firefox my self and don't wont to install it only...
|
by: Rob |
last post by:
I know, I know, don't use frames. Well, I'm stuck with these frames and
I'm trying to add functionality without a complete redsign. You can
look at this as a nostalgic journey.
Anyway, I've got...
|
by: MeerkatInFrance |
last post by:
There comes a time when you know you are not going to be able to work
something out yourself, however hard you try. I have reached that moment.
I have a master page and a slave page (or whatever...
|
by: InvalidLastName |
last post by:
We have been used XslTransform. .NET 1.1, for transform XML document, Dataset with xsl to HTML. Some of these html contents contain javascript and links. For example:
// javascript
if (a > b)...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
