JavaScript Forum

**davlam** · 07-10-2006, 10:21 AM

Hi,

i have a photography forum and i want to use the overflow code to control the visibility of posted images.

I want to then show the full image in place when the partial image is clicked. I think i need to use onclick command.

I can do the overflow bit..

my test example

http://www.digitalimaging-uk.co.uk/misc/

what i want to do is be able to click the image and it show fullsize (overflow:visible). I believe i need some javascript to do this but don't know how.

can anyone please help.

I wish it to toggle between visible and auto on mouseclick starting in the auto state.

thanks in advance..

dave

**funkdaddu** · 11:02 AM

You could do something like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
.box {
	border: solid 1px #aaa;
	width: 300px;
	height: 300px;
	overflow: hidden
	}

.fullbox {
	border: solid 1px #aaa;
	overflow: auto
	}

--></style>
		<script type="text/javascript"><!--
function toggleOverflow(obj) {
	obj.className = (obj.className != "fullbox") ? "fullbox" : "box";
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<div class="box" onclick="toggleOverflow(this);"><img src="http://www.digitalimaging-uk.co.uk/filestore/files/1/Forum_Images/yellow_selective.jpg"></div>
	</body>

</html>

**davlam** · 07-10-2006, 12:08 PM

thanks a lot,

on first pass that looks very promising

i'll feedback once i have had a chance to try it in situ..

cheers

**davlam** · 07-10-2006, 04:41 PM

hi, me again,

i've implemented this in a test forum (copy of my live one)

in firefox it looks and works great exactly how i want it.

images show with small horiz scroll then enlarge and where the res of the user monitor is still not enough the larger image has a scroll bar. Excellent.

however in ie it is a mes..

both horiz and vertical scroll and when fully opened the whole page has a scroll and not just the image..

here is a link to a test page please have a look using both ff and ie and is there anything i can do to get ie to work the same as ff.

http://www.digitalimaging-uk.co.uk/T...7346efd3802129

thanks.

**funkdaddu** · 04:59 PM

Hmmm... I'm not seeing exactly what you are. But I think your .box class needs overflow: hidden, not auto. Otherwise IE will add the scrollbars. And I think IE can only have both scrollbars or none, not one or the other.

**davlam** · 07-10-2006, 05:04 PM

ok thanks on the scroll bars..guess ie users will have to live with that.

if your resolution is larger than 1280 horiz then you'll probably not see the horizontal scroll bars under the 'full' image.

Maybe you could set your res lower to see what i mean ? if that's not too much trouble..

thanks

**davlam** · 07-10-2006, 06:30 PM

hiya,

i have managed to remove the vertical scroller in ie

replaced overflow: auto;

with

overflow-x: auto; overflow-y: hidden;

now if i could only find a way round the other problem

**davlam** · 07-11-2006, 08:28 AM

the overflow doesn't work in opera 9.

when the page open the image is at full size and when clicked goes to the width of the table but not to the specified width (currently 900px)

any thoughts on this ?

**davlam** · 07-22-2006, 11:26 AM

hiya,

i've got a new problem i hope a fresh set of eyes can help with.

I got this mod working in my live forum.

I am now upgrading the forum and have tried to implement it in this.

I have added exactly the same code into the 3 files i need to edit. But it doesn't expand the hidden area.

this is how it should work http://www.digitalimaging-uk.co.uk/p...opic.php?t=679

and this is it in the new forum
http://www.digitalimaging-uk.co.uk/o...opic.php?t=679

can anyone suggest what i have done wrong.

cheers