homepage Welcome to WebmasterWorld Guest from 54.196.24.103
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
im going crazy please help! :D
image resizing..
erkutacar




msg:4394181
 10:37 pm on Dec 4, 2011 (gmt 0)

ive researched a lot and couldnt get it to work. here is the situation.. ive got some images loaded via php and they r inside a table id'd as "gallery". and i want the images to resize automatically 70% height of the browser window.. ill paste both my script and html below:


function resize_images()
{
var gallery = getElementById("gallery");
var img = gallery.getElementsByTagName("img");
var window_height = document.body.clientHeight;
var image_height = img.style.height;
if(image_height <= window_height / 100 * 70)
{
image_height = window_height / 100 * 80 + "px";
}
else
{
image_height = window_height / 100 * 80 + "px";
}

}

this works if i get elementbyid for the images but since id is a unique value it works only for the first image. here is the html code:

<!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="resizing_images()" onresize="resizing_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 class="resizing" src="'.$num.'" alt=""></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>


if anyone wants to preview here is the link: www.erkutacar.com/senol/beauty.php i put varius sizes of images to see if the script actually makes each one 70% of the height of the browser window...

 

lucy24




msg:4394194
 11:22 pm on Dec 4, 2011 (gmt 0)

Tangential question: What are you doing here?

var image_height = img.style.height;
if(image_height <= window_height / 100 * 70)
{
image_height = window_height / 100 * 80 + "px";
}
else
{
image_height = window_height / 100 * 80 + "px";
}


That is, what's happening in the if/then loop that wouldn't happen equally well with the single line

var image_height = window_height * .8

?

(Setting aside the "px" issue because the midstream change from number to string makes me nervous.)

this works if i get elementbyid for the images but since id is a unique value it works only for the first image.

Will getElementsByName (plural) work? I ask this with hesitation because separating name from id also makes me nervous ;) Or even ...TagName if you're resizing all images.

Do you have an earlier routine that makes sure the window_height is returning a valid number, and sets a default number if not?

:: wandering off to perform further experiments on Tristram Shandy ::

erkutacar




msg:4394202
 11:50 pm on Dec 4, 2011 (gmt 0)

lol i obviously sent u one with 80 value just to see if it worked but i forget to change the first 70.. what i wanted to do was image height is equal to window height divided by hundred and multiplied by 70... if u can just type me a script that will do that for all the images inside the id'gallery' or images classed=whatever would be really helpful :D

birdbrain




msg:4394313
 10:02 am on Dec 5, 2011 (gmt 0)

Hi there erkutacar,

and a warm welcome to these forums. ;)

here is the script that you desire...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.webmasterworld.com/theme/default/gfx/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
img{
border:1px solid #000;
}
</style>

<script type="text/javascript">

function resize_images(){

var gallery=document.getElementById('gallery');
var img=gallery.getElementsByTagName('img');
var window_height=document.getElementsByTagName('html')[0].clientHeight;

for(var c=0;c<img.length;c++) {
if(img[c].offsetHeight<=window_height*0.7) {
img[c].style.height=window_height*0.7+'px';
}
else {
img[c].style.height=window_height*0.7+'px';
}
}
}

window.onresize=function() {
resize_images();
}
window.addEventListener?
window.addEventListener('load',resize_images,false):
window.attachEvent('onload',resize_images);
</script>

</head>
<body>

<div id="gallery">
<img src="wilk.gif" alt="">
<img src="happy.gif" alt="">
<img src="sad.gif" alt="">
</div>

</body>
</html>

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved