...

View Full Version : Browser compatibility problems



Rubby
05-03-2007, 10:16 PM
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 (http://www.ajdstudios.com/main/scrolltest.html).
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.



<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>

glenngv
05-04-2007, 12:39 AM
It works for me in IE6

rwedge
05-04-2007, 01:04 AM
In your posted code :
if(document.addEventListener||document.attachEvent)for IE

Arty Effem
05-04-2007, 01:13 AM
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.

Rubby
05-06-2007, 08:54 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum