Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Browser compatibility problems

    Hello,
    I've been lurking on these forums for a while, but now I really need some help. A client I'm making a page for needs a div to scroll but doesn't want traditional scroll bars. I came up with some quick code for scrolling a paragraph inside a div by hovering over hyperlinks (now I can obviously make the scrollbar look however I want) and it works just fine in firefox but not at all in IE. I've been testing this with FF 2.0.0.3 and IE 6 as thats all I have at home so there may be issues with other browsers I don't know about.
    You can take a look at the test page here.
    Keep in mind that I'm just going for functionality. Pretty CSS and real content will be added latter.
    Here is the code so you can look it over.
    Thanks so much.

    Code:
    <html>
    <head>
    	<script type="text/javascript">
    	<!--
    	var timerObj = null;
    	var speed = 3;
    	var obj;
    	
    	function scrollUp()
    	{
    		if(document.getElementById)
    		{
    			if(parseInt(obj.style.top) < 0)
    			{
    				obj.style.top = parseInt(obj.style.top) + speed + "px";
    			}
    			timerObj = setTimeout(scrollUp, 30);
    		}
    	}
    	
    	function scrollDown()
    	{
    		if(document.getElementById)
    		{
    			if(parseInt(obj.style.top) > document.getElementById('stuff').offsetHeight - obj.offsetHeight)
    			{
    				obj.style.top = parseInt(obj.style.top) - speed + "px";
    			}
    			timerObj = setTimeout(scrollDown, 30);
    		}
    	}
    	
    	function init()
    	{
    		if(document.getElementById)
    		{
    			obj = document.getElementById("pa");
    			obj.style.top = 0;
    			if(document.addEventListener)
    			{
    				obj.style.position = "relative";
    			}
    		}
    	}
    	
    	function scrollStop()
    	{
    		if(document.getElementById)
    		{
    			clearTimeout(timerObj);
    		}
    	}
    	//-->
    	</script>
    	<style type="text/css">
    		#stuff
    		{
    			width: 200px;
    			height: 100px;
    			overflow: hidden;
    			border: 1px solid black;
    			position: absolute;
    			top: 400px;
    			left: 400px;
    		}
    	</style>
    </head>
    <body onLoad="init()">
    	<div id="stuff">
    		<p id="pa">stuff stuff stuff stuff stuff 
    		stuff stuff stuff stuff stuff stuff 
    		stuff stuff stuff stuff stuff stuff 
    		stuff stuff stuff stuff stuff stuff 
    		stuff stuff stuff stuff stuff stuff 
    		blah blah blah blah blah blah blah 
    		blah blah blah blah blah blah blah 
    		blah blah blah blah blah blah blah 
    		blah blah blah blah blah blah 
    		blah blah blah blah blah blah blah blah 
    		blah blah blah blah blah blah blah blah 
    		blah blah blah blah blah blah blah blah </p>
    	</div>
    	<a href="#" onMouseOver="scrollUp()" onMouseOut="scrollStop()">up</a>
    	<a href="#" onMouseOver="scrollDown()" onMouseOut="scrollStop()">down</a>
    </body>
    </html>
    Last edited by Rubby; 05-03-2007 at 10:22 PM. Reason: Typo

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It works for me in IE6
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    In your posted code :
    Code:
    if(document.addEventListener||document.attachEvent)
    for IE

  • #4
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by Rubby View Post
    Hello,
    I've been lurking on these forums for a while, but now I really need some help. A client I'm making a page for needs a div to scroll but doesn't want traditional scroll bars. I came up with some quick code for scrolling a paragraph inside a div by hovering over hyperlinks (now I can obviously make the scrollbar look however I want) and it works just fine in firefox but not at all in IE.
    I would check that your copy of I.E. is JS enabled. It's works OK with Opera too, but I would test it with different doctypes.
    This type of code is best written as class, so that you can save private references to objects and avoid repetitve calls to document.getElementById, not to mention testing its availability every 30 ms.
    Attached Files Attached Files
    Last edited by Arty Effem; 05-04-2007 at 03:26 AM.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know this is a little late but thanks.
    I never even thought of implementing a class. Mostly because I'm very pour with javascript classes.
    It's weird though, I've been writing classes in C++/Java for the past year and a half, but I still don't know the syntax for a javascript class.
    I guess I have some reading to do.


  •  

    Posting Permissions

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