need major help

[ljharper62]

I'm working on a web catalog, using a getElementByID to change the product image and description with the onClick event. I would like to also set an anchor to my image location with the onClick event so that the page automatically jumps to where the image and description appear. I currently have the code of:

<tr>
<td bordercolor="#c7ebff" width="78" bgcolor="#ffffff" height="74"><p
align="center">n.08</p></td>
<td width="97" bgcolor="#ffffff" height="74"><p align="center" onclick="document.getElementById('addThumb').innerHTML = '<a name=\'addThumb\'/></a>'; document.getElementById('addThumb').innerHTML = '<img src=\'s_garden.jpg\'/>'; document.getElementById('addDesc').innerHTML = '<p>Close in fighting skills are developed by the routine - using elbows, fingers and hook hands. This is the predecessor to Wing Chun style. Develops the ligaments.</p>';">Crane</p></td>
<td bordercolor="#c7ebff" align="middle" width="146" bgcolor="#ffffff" height="74"><div align="center">$29.95</div></td>
</tr>
The image and description show up as they should but the page does not go to the anchored site. Any ideas? :confused: :confused:

[jscheuer1]

You can't really use an anchor tag to reload the page to that position as, your changes to the innerHTML will be lost in the process. Also, every time you do:

document.getElementById('addThumb').innerHTML =

it will erase whatever addThumb's innerHTML was, even if you just set it. In other words calling:

document.getElementById('addThumb').innerHTML =

twice in a row will leave addThumb's innerHTML containing only the contents of the second call.

If the addThumb element is at or near the bottom of the page or your page is of relatively rigid dimensions (not a good idea to begin with) you could scrollTo() the spot. Otherwise, the y offset of addThumb will have to be calculated for each user, then you can scrollTo() that spot.

To get the idea, let's start simple and just assume a page with rigid dimensions, then your onclick event could be something like so:


onclick="document.getElementById('addThumb').innerHTML = '<img src=\'s_garden.jpg\'/>'; document.getElementById('addDesc').innerHTML = '<p>Close in fighting skills are developed by the routine - using elbows, fingers and hook hands. This is the predecessor to Wing Chun style. Develops the ligaments.</p>';window.scrollTo(0,1000);"

Notice the number 1000 in the above. The page will scroll to 1000 px from the top, if there are that many pixels height to the page, or to the bottom if not. If your 'landing area', the addThumb element is at or very near the bottom of the page, we could use a number like 100000, then it would always scroll to the bottom unless you had a really huge page. If the addThumb element is in a different spot and the page is of rigid dimensions you can just use the a number that reflects addThumb's position on the page. If neither of these two approaches works with your page, let me know and I'll make you up a function that will detect addThumb's y offset for each user, so we can scroll to that number.

[ljharper62]

John,

Thanks so much, it worked!