resize image

[rkoya]

I have a box which is 300x200 in size. I have a maximise button when clicked the box increases to 600x400 in size. There is an image in the box (122x72) which I want doubled in size when the maximised button is clicked. I have used the following bit of code and works perfectly.

document.getElementById("livethumbnail").getElementsByTagName("img")[0].width="224"

document.getElementById("livethumbnail").getElementsByTagName("img")[0].height="144"

However, I intend to put more images on the page within their own box and do not want to give each image a different id.

Is there anyway I can click the maximise button of say box1 and have the image increase in size without affecting image in box 2.

 

[BabyJeffy]

Give the image an ID (which is unique) and target it directly. Then it will only affect the image you want it to. Having said that, your code will only ever alter the first image in that div - because you reference it using [0] (the fist element in the array returned from the getElementsByTagName() call).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[rkoya]

Thanks but is there no way to do it without giving it a unique id.

 

[BabyJeffy]

there no way to do it without giving it a unique id.

Um, that is simply not true. How did you reach that conclusion, by the way? Would you post your code that shows that is the only way?

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[rkoya]

Sorry i don't think I made it clear. Can I do it without giving the image a unique id?

 

[j4606]

[qoute]there no way to do it without giving it a unique id.[/qoute] not true!

 

[rkoya]

Yes like I have said I don't think I made myself clear, can I do it without giving the image a unique id and if so any help would be useful.

Thanks

 

[kaht]

Yes, there are multitudes of ways of doing it w/o giving it a unique id. For starters, you can use the method you've already supplied above - using the array returned by the getElementsByTagName method, you can sift thru the results to find the image you're wanting to modify. Now... how this will correspond to the image you want to resize will depend on how you keep track of which button was clicked and how it will correspond to the array of images returned using getElementsByTagName.

Would I use this suggestion? No way. It's clunky, and completely unnecessary to sift thru the results of all the images. What would make more sense is to do what has already been suggested - give the images unique ids so that you have a direct link to them using the getElementById method. The nice thing about this is that you can make the id of the image correspond with naming scheme of the maximize buttons.

Any reason why you don't want to assign ids to the images? It would save you a lot of work.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B> bites again.[/small]

 

[j4606]

we would need to see your code, or some sample of it and I'll happily try to help you out. I can't exactly tell you how do this because i can think of a few different ways that would all be good depending on how you layout your page.

for example if you posted something like.

I have this html code

<div><img src="maximize.gif" onclick="maximize(this)"/><img src="sompic.gif"</div>

Whats the best way do maximize without haveing to have ids.


then i could answer that you could use something like: use this as your maximize code:

function maximize(){
this.nextSibling.height="144";
ect....
}

but then again this may not be the right solution for you, so I can't really help.

 

[rkoya]

Ok my files are at the following URL:

http://www.mediafire.com/download.php?4h7bsjmxzmh

Please take a look and see if you can help me.

Thanks

 

[j4606]

First thing i noticed in firebug was that this is your click button or w/e

<div id="win1_maximize" class="alphacube_maximize" onclick="Windows.maximize("win1", event); ">
<span id="maxi">
<input type="image" src="../ajaxdaddy/images/button-max-focus.gif"/>
</span>
</div>

nothing wrong but this really you dont need the span or the input. Try adding a backround image to your div, speicifally the alphacube_maximize class, then add a set height and width and you'll get rid of some markup.

Next your have like 5 js includes 3 css files. It's all very sloppy and hard to figure out what you are doing since some of it commented and other parts arn't. Why so many files are they all being used for this one effect? Also your using prototype and im new to its syntax, but anyway lets see what we can figure out. You onclick, you pass in an id and an event. Since you do not want to pass in the id lets pass in the click object. In your window.js change the line starting at 602 to

var maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize([COLOR=red]this[/color], event); '><span id='maxi'><input type='image' src='../ajaxdaddy/images/button-max-focus.gif'></span> </div>" : "";

now you need to change your window.maximize function starting on line 1343 to

  // Maximizes a window with its id
 maximize: function(id, event) {
    var win = this.getWindow(id.parentNode.id)
    if (win && win.visible)
      win.maximize();
    Event.stop(event);
  },

ofcourse I would change id.parentNode.id and function(id, event) to something more descriptive like clickObj.parentNode.id and
function(clickObj, event). Hope that helps. You may be better off scrapping this whole example and using scriptaculus and prototype for your effects. I don't exactly know if they have resizables but im sure there is a prototype built solution. Also clean your mark up I see alot of unessasary tags.

 

[rkoya]

Thanks j4606 I have done what you suggested but am having issues with the image. I have created a function which checks the id of the maximize button, and expands the image which is relevant to it.

var button = '';

function maxbutton(id) {
button = id;
}

function buttonPress () {

if (button='win1_maximize') {
document.getElementById('img1').width="244";
document.getElementById('img1').height="144";
}
else if (button='win2_maximize') {
document.getElementById('img2').width="244";
document.getElementById('img2').height="144";
}
else{
}

So if I was to click max button in win1 it works perfectly. Clicking the max button in win2 just expands the image in win1. What am I doing wrong.

Thanks for all your help.