need urgent help on a small script!!!

[erkutacar]

hey everyone im new to this site and javascript. i really need help coz ill go blind soon for researching

what im trying to accomplish is simple but i couldnt.. i have a set of images with the id 'resizing' its in the middle row of a 3 row table. top and bottom rows have fixed heights.

now i need a script that will calculate the window height and resize the height of images with the id 'resizing' to 70% of window height.. here is what ive written but it doesnt work and i call that function on body onload.. should i call it on img onload once ive got a working script?

function resize_images()
{
var img = document.getElementById('resizing')
var window_height = document.body.clientHeight
var image_height = document.getElementById('resizing').height
if(image_height = window_height / 100 * 70)
{
img.style.height = window_height / 100 * 70
}
else
{
img.style.height = window_height / 100 * 70
}
}

[pactor21]

I'm guessing you're confusing between = and ==?

== is a comparison operator, whereas = is a substitution operator. Try to use comparison in the if conditional.

Besides you could have said

var image_height = img.height;

insead of

var image_height = document.getElementById('resizing').height;

Another advice. It is always a good practice to put a semi-colon after each statement.

[erkutacar]

well ive done it may way coz i want the script to affect only the elements with the id 'resizing'... thanks a lot ill try ur suggestion and report back

[erkutacar]

nope... didnt work.. look here is the link of the site http://www.erkutacar.com/senol/beauty.php and u already know the scriptcode.. (image the borders visible to see whats going on :] )

[JunkMale]

I don't think you understand what was suggested and why.

var img = document.getElementById('resizing');
var image_height = document.getElementById('resizing').height; // this is not needed

var image_height = img.height; // this is what you need.

the object image when accessing a property of that object like img.height is only the same as saying document.getElementById('resizing').height;

[JunkMale]

The point I am making is that you already have "Grabbed" an instance of the object, pointless duplication of an objects information.

[erkutacar]

I don't think you understand what was suggested and why.

var img = document.getElementById('resizing');
var image_height = document.getElementById('resizing').height; // this is not needed

var image_height = img.height; // this is what you need.

the object image when accessing a property of that object like img.height is only the same as saying document.getElementById('resizing').height;

hmm ok but then how do i refer only to the images with the id #resizing?

[JunkMale]

You can only refer to ONE id as ALL ID's have to be UNIQUE

It is NAME tags in elements that can share, your alternative would be to use the getElementsByClass workaround and give only those elements you want changes a class name and an empty entry in the css table.

[erkutacar]

ok ive changed it the way u said but still not working.. oh and ive tried img.height instead of im.style.height but still didnt work..

function resize_images()
{
var img = document.getElementById('resizing');
var window_height = document.body.clientHeight;
var image_height = image.height;
if(image_height == window_height / 100 * 70);
{
img.height = window_height / 100 * 70;
}

}

[JunkMale]

1. your posting only your script.
2. we have no HTML to associate with your function.
3. we have no way of knowing how you have implemented your script and code.
4. its img.height not image.height

function resize_images()
 {
 var img = document.getElementById('resizing');
 var window_height = document.body.clientHeight;
 var image_height = image.height; // <---- Pardon me!
 if(image_height == window_height / 100 * 70);
 {
 img.height = window_height / 100 * 70;
 }

 }

So please post your HTML so we can see what it is thats causing the function to not work in addition to the changes in the code as indicated.

[erkutacar]

oh damn it worked then i changed image for img but only for the first pic.. as u mentioned every object should have a unique id.. so would giving a class name instead of id work?

here is my html: (i posted the link of the page so u could see the code but i guess u didnt bother)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/resize.js"></script>
<link rel="stylesheet" type="text/css" href="stl/stl.css" />
<title>SENOL KOC '12</title>
</head>

<body onload="resize_images()">

<table id="siteContainer" cellpadding="0" cellspacing="0">
<tr>
<td id="header">
<div id="menuContainer">
<a href="index.php" target="_top"><img id="title" alt="Senol Koc" src="pix/senol.png" /></a>
<br /><br />
<div id="menu">

<div id="buttonContainer1">
<div id="button1" style="background-color:#666;">&nbsp;</div>
<div id="menuButton1"><a href="beauty.php">Beauty</a></div>
</div>

<div id="buttonContainer2">
<div id="button2">&nbsp;</div>
<div id="menuButton2"><a href="fashion.php">Fashion</a></div>
</div>

<div id="buttonContainer3">
<div id="button3">&nbsp;</div>
<div id="menuButton3"><a href="celeb.php">Celebrity</a></div>
</div>

<div id="buttonContainer4">
<div id="button4">&nbsp;</div>
<div id="menuButton4"><a href="portrait.php">Portraits</a></div>
</div>

<div id="buttonContainerSpace">
<div id="menuSpaceThin">&nbsp;</div>
<div id="menuSpace">&nbsp;</div>
</div>

<div id="buttonContainer5">
<div id="button5">&nbsp;</div>
<div id="menuButton5"><a href="contact.php">Contact</a></div>
</div>

</div>
</div>
</td></tr>






<tr><td id="galleryContent">

<table id="gallery" cellpadding="0" cellspacing="0"><tr>
<?php
$files = glob("beauty/*.jpg");
for ($i=1; $i<count($files); $i++)
{
$num = $files[$i];
echo '<td><img id="resizing" src="'.$num.'" alt="random image"></td>';}
?>
</tr>
</table>

<td></tr>






<tr><td id="footer">
<div id="galleryFooter">
<span id="site"><a href="index.php">www.senolkoc.com</a></span><span id="rights">&copy;&nbsp;2012&nbsp;&reg;Tum haklari saklidir.</span>
</div>
</td></tr>


</table>


</body>
</html>

[JunkMale]

This bit in your PHP

<img id="resizing" src="'.$num.'" alt="random image"></td> 

the id could be changed to name and you use the document.getElementsByName which means you could then do...

<img name="resizing" src="'.$num.'" alt="random image"></td> 

and BTW...

<img id='resizing' src='{$files[$i]}' alt='random image'></td> 

is easier to read and open your strings and close string with " first and inner quotes of ' and where you need to have a value, as illustrated, the $num is replaced directly with $files[$i]

Then when you got your PHP pumping out code correctly, you can then worry about the javascript as its pointless dealing with that until the underlying HTML is working or properly formatted.

[erkutacar]

ClassName nor Name worked.. but ById worked (only for the first img) and what u said about php stopped my script it was working fine the original way..

[JunkMale]

Search the internet for the function getElementByClass and also the getElementByName

With the "Class" you use this with an empty stylesheet entyr, call it imagesize, then you apply the class="imagesize" to the <img tag you generate, then the getElementByClass will pull all elements with the class name of "imagesize" ready for your script to manipulate.

With the getElementsByName will pull all elements by the name tag.

Again, we have no script to see how you implemented the changes, so its stabbing in the dark time again, talking of which, I have been up since 4am and its coming up to midnight and I am offski to bedski.

I suggest that you understand how to use these functions and the importance of getting your HTML output error free first then worry about the javascript.

You have herd of the term / expression "Running before you can walk", well this is just that scenario, your transfixed by the javascript end of the programming which is pointless unless you have the underlying HTML sorted out.

[erkutacar]

thnx a lot for the effort man.. ive also tried document.getElementById('gallery').getElementsByName('resizing'); but didnt work. i havent made any other changes to the html and it doesnt have any errors.. i validated it... sleep well