Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scrolling Picture Box 1

Status
Not open for further replies.
CassidyHunt

CassidyHunt

IS-IT--Management
Joined
Jan 7, 2004
Messages
688
Location
US
I have a list of thumbnails that I am trying to get to work in filmstrip style without using frames. I almost have it but I do not know how to fix this last issue.

Here is the code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head><title>
	Untitled Page
</title></head>
<body>

    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
       
        <br />
        <table>
            <tr>
                <td><input type="button" value="<<" onmousedown='leftScroll()' /></td>
                <td>
<script type="text/javascript" >
// gets the applied value for the specified styleProp on element.
	function getStyle(element,styleProp)
	{
		if (window.getComputedStyle) var y = window.getComputedStyle(element,null).getPropertyValue(styleProp);
		else if (element.currentStyle) var y = element.currentStyle.getAttribute(styleProp);
		return y;
	}

	var timer = null;

	function init()
	{
		document.body.parentNode.onmouseup = cancelTimer;
	}

	function cancelTimer()
	{
		if (timer) clearTimeout(timer);
	}

	function leftScroll(e)
	{
		var scrollDiv = document.getElementById('clhPicture_pictures');
		if (!scrollDiv.style.setProperty)
		{
			var currentPos = (isNaN(parseInt(scrollDiv.currentStyle.marginLeft) * 1) ? 0 : parseInt(scrollDiv.currentStyle.marginLeft));		
			scrollDiv.style.marginLeft = currentPos - 1;			
		}
		else
		{
			var leftMargin = parseInt(getStyle(scrollDiv, 'margin-left'));
			scrollDiv.style.setProperty('margin-left', leftMargin - 1, null);
		}
		timer = setTimeout('leftScroll()', 30);
	}

	function rightScroll(e)
	{
		var scrollDiv = document.getElementById('clhPicture_pictures');
		if (!scrollDiv.style.setProperty)
		{
			var currentPos = (isNaN(parseInt(scrollDiv.currentStyle.marginLeft) * 1) ? 0 : parseInt(scrollDiv.currentStyle.marginLeft));		
			scrollDiv.style.marginLeft = currentPos + 1;			
		}
		else
		{
			var leftMargin = parseInt(getStyle(scrollDiv, 'margin-left'));
			scrollDiv.style.setProperty('margin-left', leftMargin + 1, null);
		}
		timer = setTimeout('rightScroll()', 30);
	}

	window.onload = init;
</script>
<div id="clhPicture_container" style="width:200px;Height:72px;">
            <div id="clhPicture_pictures" style="overflow:hidden;width:200px;Height:72px;">
                <table style="width: 600px; border-spacing: 0px; border-collapse: collapse;" cellpadding="0" cellspacing="0">
                    <tr>
                        
                    
                
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/CassLookinggood.jpg); background-repeat: no-repeat;'><a href="Images/CassLookinggood.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/Cass_Korb.jpg); background-repeat: no-repeat;'><a href="Images/Cass_Korb.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/desilookinggood.jpg); background-repeat: no-repeat;'><a href="Images/desilookinggood.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/desi_fish.jpg); background-repeat: no-repeat;'><a href="Images/desi_fish.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/korbo_8m.jpg); background-repeat: no-repeat;'><a href="Images/korbo_8m.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/Korbo_Novemeber.jpg); background-repeat: no-repeat;'><a href="Images/Korbo_Novemeber.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/sambigsmile.jpg); background-repeat: no-repeat;'><a href="Images/sambigsmile.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/sam_video_game.jpg); background-repeat: no-repeat;'><a href="Images/sam_video_game.jpg">&nbsp;</a></td>
                    
                        <td style=' cursor:pointer; width: 100px;height: 72px;background-image: url(Images/sam_wild.jpg); background-repeat: no-repeat;'><a href="Images/sam_wild.jpg">&nbsp;</a></td>
                    
                    </tr>
                </table>
                
            </div>
        </div></td>
                <td><input type="button" value=">>" onmousedown='rightScroll()' /></td>
            </tr>
        </table>
        
        
    

</form>

    
</body>
</html>

This scrolls but instead of scrolling the contents in the DIV it expands the DIV and never reveals the images that are in teh overflow hidden portion.

Thanks

Cassidy
 
Sort by date Sort by votes
Perhaps the most curious thing about your code was that you are trying to fit 900px worth of images into a container only 600px wide.

I've fixed that, removed the table, removed the need for the getStyle function, and generally removed other bits you didn't need.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
	<title>Untitled Page</title>
	<style type="text/css">
		#clhPicture_pictures img {
			border: none;
		}
	</style>
</head>

<body>
	<form name="form1" method="post" action="Default.aspx" id="form1">
	<div>
		<br />
		<table>
			<tr>
				<td><input type="button" value="<<" onmousedown='leftScroll()' /></td>
				<td>

					<script type="text/javascript">
					<!--
						var timer = null;
						var speed = 1;		// increase to go faster
						
						function init() {
							document.body.parentNode.onmouseup = cancelTimer;
						}

						function cancelTimer() {
							if (timer != null) {
								clearInterval(timer);
								timer = null;
							}
						}

						function leftScroll(e) {
							var scrollDiv = document.getElementById('clhPicture_pictures');
							var currentPos = parseInt(scrollDiv.style.left, 10);
							scrollDiv.style.left = (currentPos + speed) + 'px';
							if (timer == null) timer = setInterval('leftScroll()', 30);
						}

						function rightScroll(e) {
							var scrollDiv = document.getElementById('clhPicture_pictures');
							var currentPos = parseInt(scrollDiv.style.left, 10);
							scrollDiv.style.left = (currentPos - speed) + 'px';
							if (timer == null) timer = setInterval('rightScroll()', 30);
						}

						window.onload = init;
					//-->
					</script>

					<div id="clhPicture_container" style="width:200px; height:72px; overflow:hidden; position:relative;">
						<div id="clhPicture_pictures" style="overflow:hidden; width:900px; height:72px; position:relative; left:0px;">
							<a href="Images/CassLookinggood.jpg"><img src="Images/CassLookinggood.jpg" width="100" height="72" alt=""></a
							><a href="Images/Cass_Korb.jpg"><img src="Images/Cass_Korb.jpg" width="100" height="72" alt=""></a
							><a href="Images/desilookinggood.jpg"><img src="Images/desilookinggood.jpg" width="100" height="72" alt=""></a
							><a href="Images/desi_fish.jpg"><img src="Images/desi_fish.jpg" width="100" height="72" alt=""></a
							><a href="Images/korbo_8m.jpg"><img src="Images/korbo_8m.jpg" width="100" height="72" alt=""></a
							><a href="Images/Korbo_Novemeber.jpg"><img src="Images/Korbo_Novemeber.jpg" width="100" height="72" alt=""></a
							><a href="Images/sambigsmile.jpg"><img src="Images/sambigsmile.jpg" width="100" height="72" alt=""></a
							><a href="Images/sam_video_game.jpg"><img src="Images/sam_video_game.jpg" width="100" height="72" alt=""></a
							><a href="Images/sam_wild.jpg"><img src="Images/sam_wild.jpg" width="100" height="72" alt=""></a
						></div>
					</div>
				</td>
				<td><input type="button" value=">>" onmousedown='rightScroll()' /></td>
			</tr>
		</table>
	</form>
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thank you for the help. That made all the difference. I guess the reason I was trying to put 900px of pictures in a 600px contianer is that misunderstood overflow. I thought that I need to put more items in the container to ensure the overflow would work.

I now know better. Thank you

Cassidy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

chikwendu
  • Locked
  • Question Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
394
chikwendu
chikwendu
Pudsters
  • Locked
  • Question Question
Populate text box based on other textbox
Replies
2
Views
510
Pudsters
Pudsters
Krus1972
  • Locked
  • Question Question
On-Click Form Input Box Scrolling
Replies
4
Views
423
Krus1972
Krus1972
Krus1972
  • Locked
  • Question Question
Specifying Which Option Tag is Selected Within a Drop-Down Box
Replies
4
Views
405
vacunita
vacunita
leifoet
  • Locked
  • Question Question
How to implement an automatic JS-multiplication in a combo box
Replies
5
Views
380
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top