SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrollable Div Help!

    I've grabbed a script off the net which scrolls a div tag up or down depending on which button the mouse is hovered over. It works great in firefox but doesn't work at all in IE (well at least IE7). Can you guys take a look at it to see if you can diagnose why it won't work in IE? It would be awesome if you could fix it. If not, then maybe one of you can write a simple script for me which does the same thing (cross-browser).

    I've attached a html page with the javascript as well as an image which shows what I'll be using it for.

    Cheers!
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may be better off grabbing a cross-browser script from one of the many DOM scripting sites. It'd be easier than fixing a broken one.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know a script that will work for what I need?

    Cheers!

  4. #4
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Come on guys. It's driving me insane trying to find a simple script which does what I want. Can anyone help in my quest to find one or can someone possibly write one for me?

  5. #5
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Wardrop
    Your attachment is pending approval, so we can't look at it yet. You should post the code.
    In the meantime look here for solutions:
    http://www.google.com/search?q=javascript+scroller
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a simple Mootols-based slidey-scroll. it scrolls 3 images per click. (scroll while Mouseover is not a great way to do it, IMHO) Go to http://mootools.net/download/svn and check Fx.Style & Fx.Styles, then download and link the js where I have "mootools.r381.js". You may need to fiddle with the CSS to get exactly 3 images per "page". IE is rendering it a little differently, but you get the idea.


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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"><!--
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #scroller {
    	color: #fff;
    	background-color: #37241a;
    	text-align: center;
    	width: 160px;
    	border: solid 1px #d36b37
    	}
    
    #scrollarea {
    	height: 321px;
    	overflow: hidden
    	}
    
    #scrollarea img  {
    	margin-bottom: 5px;
    	border: solid 1px #d36b37
    	}
    
    #scrollitems {
    	position: relative;
    	top: 0;
    } 
    --></style>
    		<script type="text/javascript" src="mootools.r381.js"></script>
    		<script type="text/javascript"><!--
    function setupScroller() {
    	if (Fx) {
    		theScroller = document.getElementById("scroller");
    		theScrollArea = document.getElementById("scrollarea");
    		theScrollItems = document.getElementById("scrollitems");
    		document.getElementById("scrollUp").onclick = scroll;
    		document.getElementById("scrollDown").onclick = scroll;
    		theScrollItems.style.top = "0px";
    		tEffect = new Fx.Style(theScrollItems, "top", {duration:350});
    	}
    }
    	
    function scroll() {
    	currentTop = parseInt(theScrollItems.style.top);
    	currentHeight = parseInt(theScrollArea.offsetHeight);
    	if (this.id == "scrollUp") {
    		to = parseInt(theScrollItems.style.top) + currentHeight;
    	} else if (this.id == "scrollDown") {
    		to = parseInt(theScrollItems.style.top) - currentHeight;
    	}
    	if (-to < parseInt(theScrollItems.offsetHeight) && to <= 0) {
    		tEffect.custom(currentTop,to);
    	}
    }
    
    window.onload = setupScroller;
    //-->
    </script>
    	</head>
    
    	<body>
    		<div id="scroller">
    			<button id="scrollUp">Scroll Up</button>
    			<div id="scrollarea">
    				<div id="scrollitems">
    					<img src="1.jpg" alt="Image 1" height="100" width="130">
    					<img src="2.jpg" alt="Image 2" height="100" width="130">
    					<img src="3.jpg" alt="Image 3" height="100" width="130">
    					<img src="4.jpg" alt="Image 4" height="100" width="130">
    					<img src="5.jpg" alt="Image 5" height="100" width="130">
    					<img src="6.jpg" alt="Image 6" height="100" width="130">
    					<img src="7.jpg" alt="Image 7" height="100" width="130">
    					<img src="8.jpg" alt="Image 8" height="100" width="130">
    				</div>
    			</div>
    			<button id="scrollDown">Scroll Down</button>
    		</div>
    	</body>
    
    </html>

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    search around dynamic drive. They have many scripts for this kind of thing with good tutorial-esk descriptions.

    www.dynamicdrive.com

  8. #8
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys, thanks for your help.

    I've contacted a guy I met on these forums and he's written me a script for $$ (not too much).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •