473,238 Members | 1,762 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,238 software developers and data experts.

Another CSS & Javascript Problem

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

"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
> 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
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
> 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
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
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
> > 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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
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...
1
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...
4
by: Luklrc | last post by:
Hi, I'm having to create a querysting with javascript. My problem is that javscript turns the "&" characher into "&amp;" when it gets used as a querystring in the url EG: ...
4
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...
8
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);"...
14
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 &amp; to be valid. I don't have Firefox my self and don't wont to install it only...
11
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...
17
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...
12
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 &gt; b)...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.