Closed Thread Icon

Topic awaiting preservation: weird scrolling glitch in simple image scroller Pages that link to <a href="https://ozoneasylum.com/backlink?for=8990" title="Pages that link to Topic awaiting preservation: weird scrolling glitch in simple image scroller" rel="nofollow" >Topic awaiting preservation: weird scrolling glitch in simple image scroller\
 
Author Thread
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 01-15-2004 00:23

http://www.cryokinesis.co.uk/demo/scrollDemo.htm

***EDIT*** - the below NEW link has math that works properly
http://www.cryokinesis.co.uk/demo/scrollDemo2.htm

Ok I have been working on numerous ways to scroll thumbnail images for a while now, I have recently started to develop this based on a principle I saw a long time ago.

The principle is that the mouse position is detected over the thumbnails area, this position is then translated into a pixel distance to move the thumbnails.

Firstly it's shoddy code and it only works (albeit badly) in moz and opera, I have narrowed down all the problems to these:

1. movement works in moz and opera but hyperlinks on images fail
2. movement doesn't work in IE but hyperlinks don't fail
3. the movement math is glitchy, it seems ok up to 1024 screen res, after that (my res is 1280) the movement does a weird 'double back' as you move the mouse to the right hand side.N.B. this was fixed for scrollDemo2

Please can somebody help me? I have been posting numerous posts about scrolling thumbnails since I joined this forum over a year ago [EDIT - ok not quite a year ago], I have worked on many scrollers and tried to adapt many but never got what I wanted. This isn't exactly what I want but it will do if I can get it working correctly. The principle behind it is so simple it surely can't be that hard for someone better than me (you guys) to figure out what I'm doing wrong.

Thanks again guys,

Jon

***EDIT***
If you resize your browser window remember to refresh the page or the scrolling will be even more odd (in the final version there will be a resize fix already so no probs there)

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-16-2004 08:54

<html>
<base href="http://www.cryokinesis.co.uk/demo/">
<head>
<style type="text/css">
<!--
#container {
background: #CCCCCC;
height: 75px;
width: 70%;
position: relative;
overflow: hidden;
}
#content {
position: absolute;
white-space: nowrap;
height: 75px;
left: 0px;
top: 0px;
}
-->
</style>

<script type="text/javascript">
// browser sniff
IE5=NN6=false
if(document.all){IE5=true}
else if(document.getElementById){NN6=true}

var containerDiv = null;
var contentDiv = null;
function moveHandler(e) {
if(typeof(e) == 'undefined') e = event;
mPosX = e.clientX - containerDiv.offsetLeft;
// sets the position of the content layer - N.B. 1500 is the total width of content
contentDiv.style.left = 0 - (1500-mPosX) / (containerDiv.offsetWidth / mPosX) + 'px'
}

function _attachToEvent(obj, name, func){
name = name.toLowerCase();
// Add the hookup for the event.
if(typeof(obj.addEventListener) != "undefined"){
if(name.length > 2 && name.indexOf("on") == 0) name = name.substring(2, name.length);
obj.addEventListener(name, func, false);
} else if(typeof(obj.attachEvent) != "undefined"){
obj.attachEvent(name, func);
} else {
if(eval("obj." + name) != null){
// Save whatever defined in the event
var oldOnEvents = eval("obj." + name);
eval("obj." + name) = function(e) {
try{
func(e);
eval(oldOnEvents);
} catch(e){}
};
} else {
eval("obj." + name) = func;
}
}
}
function ImageClicked(e){
if(typeof(e) == 'undefined') e = event;
var obj = (e.target)?e.target:e.srcElement;
alert("Handle Click on " + obj.src);
}

function init() {
// find divs
containerDiv = document.getElementById('container')
contentDiv = document.getElementById('content')
var arr = containerDiv.getElementsByTagName("img");
for(var i=0; i<arr.length; i++){
_attachToEvent(arr[i], "onmousemove", moveHandler);
_attachToEvent(arr[i], "onclick", ImageClicked);
}
}
</script>
</head>
<body onload="init()">
<div id="container">
<div id="content">
<img src="thumb0.jpg" width="75" height="75" border="0"/><img src="thumb1.jpg" width="75" height="75" border="0"/><img src="thumb2.jpg" width="75" height="75" border="0"/><img src="thumb3.jpg" width="75" height="75" border="0"/><img src="thumb4.jpg" width="75" height="75" border="0"/><img src="thumb5.jpg" width="75" height="75" border="0"/><img src="thumb6.jpg" width="75" height="75" border="0"/><img src="thumb7.jpg" width="75" height="75" border="0"/><img src="thumb8.jpg" width="75" height="75" border="0"/><img src="thumb9.jpg" width="75" height="75" border="0"/><img src="thumb10.jpg" width="75" height="75" border="0"/><img src="thumb11.jpg" width="75" height="75" border="0"/><img src="thumb12.jpg" width="75" height="75" border="0"/><img src="thumb13.jpg" width="75" height="75" border="0"/><img src="thumb14.jpg" width="75" height="75" border="0"/><img src="thumb15.jpg" width="75" height="75" border="0"/><img src="thumb16.jpg" width="75" height="75" border="0"/><img src="thumb17.jpg" width="75" height="75" border="0"/><img src="thumb18.jpg" width="75" height="75" border="0"/><img src="thumb19.jpg" width="75" height="75" border="0"/>
</div>
</div>
</body>
</html>
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 01-16-2004 20:53

Yossi you are the man - you consistently seem to be able to fix things others can't.

If you want a real challenge then you could try to make this scroller work glitch free:
http://www.cryokinesis.co.uk/galleries/illustration/thomas_meldgaard/index.htm

Ok that link goes straight into my gallery site that I have been working on slowly for some time, it was my javascript learning project (the whole site is mostly built using reusable javascript code - this makes it fast, although the main reason for me doing it was coz I didn't know enough PHP)

The scroller is in the page where it should be and it is based on doc ozones 404 page ( http://www.ozones.com/lost/ ) . I hacked up doc ozones scroller (and used a bit of code from my buddy Rod Morelos) and came up with a scroller that sorta works but is very glitchy and doesn't have acceleration (the idea was that the scrolling movement would get faster as the mouse pointer moves away from the center of the scrolling area). The page it is in is just a test page, so not everything works or is correct, it is mostly just an 'in situ' trial for the scroller.

The code is a real mess and if you try to save the page the whole lot will screw up I reckon, so it's not an easy task at all. If you know what you are doing well enough you might want to start from scratch or just take a look at doc ozones lost page. I chose the lost page as a basis for my scroller coz it loops continually which is cool!

So thanks again Yossi, and if you do fancy a challenge (or anyone else does) then try to make a scroller like mentioned and linked above, but one that actually works well.

Cheers,

Jon

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-26-2004 16:08
code:
<html>

	<base href="http://www.cryokinesis.co.uk/demo/">

	<head>

		<style type="text/css">

		<!--

			#container {

				background: #CCCCCC;

				height: 75px;

				width: 70%;

				position: relative;

				overflow: hidden;

			}

			#content {

				position: absolute;

				white-space: nowrap;

				height: 75px;

				left: 0px;

				top: 0px;

			}

		-->

		</style>

		<script type="text/javascript">

			IE5=NN6=false

			if(document.all){IE5=true}

				else if(document.getElementById){NN6=true}



			var containerDiv = null;

			var contentDiv = null;



			function moveHandler(e) {

				if(typeof(e) == 'undefined') e = event;

				var posX = e.clientX - containerDiv.offsetLeft;

				// xFactor will be bigger when moving out from the images div center.

				var xFactor = Math.abs((containerDiv.offsetWidth/2)-posX);

				var xFactor = Math.abs((containerDiv.offsetWidth/2)-posX) + (containerDiv.offsetWidth/2);				

				contentDiv.style.left = 0 - ((xFactor) /(containerDiv.offsetWidth/xFactor)) + 'px';

			} 



			function _attachToEvent(obj, name, func){

				name = name.toLowerCase();

				// Add the hookup for the event.

				if(typeof(obj.addEventListener) != "undefined"){

					if(name.length > 2 && name.indexOf("on") == 0) name = name.substring(2, name.length);

						obj.addEventListener(name, func, false);

				} else if(typeof(obj.attachEvent) != "undefined"){

					obj.attachEvent(name, func);

				} else {

					if(eval("obj." + name) != null){

						// Save whatever defined in the event

						var oldOnEvents = eval("obj." + name);

						eval("obj." + name) = 	function(e) {

													try{

														func(e);

														eval(oldOnEvents);

													} catch(e){}

												};

					} else {

						eval("obj." + name) = func;

					}

				}

			}



			function ImageClicked(e){

				if(typeof(e) == 'undefined') e = event;

				var obj = (e.target)?e.target:e.srcElement;

				alert("Handle Click on " + obj.src);

			}



			function init() {

				// find divs

				containerDiv = document.getElementById('container')

				contentDiv = document.getElementById('content')

				var arr = containerDiv.getElementsByTagName("img");

				for(var i=0; i<arr.length; i++){

					_attachToEvent(arr[i], "onmousemove", moveHandler);

					_attachToEvent(arr[i], "onclick", ImageClicked); 

				}

			}

		</script> 

	</head>

	<body onload="init()">

		<div id="container">

			<div id="content">

				<img src="thumb0.jpg" width="75" height="75" border="0"/><img src="thumb1.jpg" width="75" height="75" border="0"/><img src="thumb2.jpg" width="75" height="75" border="0"/><img src="thumb3.jpg" width="75" height="75" border="0"/><img src="thumb4.jpg" width="75" height="75" border="0"/><img src="thumb5.jpg" width="75" height="75" border="0"/><img src="thumb6.jpg" width="75" height="75" border="0"/><img src="thumb7.jpg" width="75" height="75" border="0"/><img src="thumb8.jpg" width="75" height="75" border="0"/><img src="thumb9.jpg" width="75" height="75" border="0"/><img src="thumb10.jpg" width="75" height="75" border="0"/><img src="thumb11.jpg" width="75" height="75" border="0"/><img src="thumb12.jpg" width="75" height="75" border="0"/><img src="thumb13.jpg" width="75" height="75" border="0"/><img src="thumb14.jpg" width="75" height="75" border="0"/><img src="thumb15.jpg" width="75" height="75" border="0"/><img src="thumb16.jpg" width="75" height="75" border="0"/><img src="thumb17.jpg" width="75" height="75" border="0"/><img src="thumb18.jpg" width="75" height="75" border="0"/><img src="thumb19.jpg" width="75" height="75" border="0"/>

			</div>

		</div>

	</body>

</html>
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 01-26-2004 19:17

Eh?

Well Yossi mate, it looks like some nice code and I appreciate the tim that you have spent on it too. You have even madeit work cross-browser.

However, it is really odd, it scrolls with seemingly no idea of where it wants to go, it does it nicely tho

Your previous post worked fine so I'm not sure why you have tried to do it again, I like the fact you have tried tho, but if you want to try anything then the weird looping, gesture driven scroller I mentioned would be time well spent: http://www.cryokinesis.co.uk/galleries/illustration/thomas_meldgaard/index.htm (at the bottom)

It works (ish) at the moment, but is buggy as hell if you play with it, plus it doesn't have any kind of acceleration as the mouse pointer moves further from the center of the scrolling area. This is my ambition, to have a scroller like that working well cross-browser - nobody seems to be able to do it tho, but that just makes me more determined. As I said before also, the code is pretty much based around the Doc's 404 'lost' page on his site ( http://www.ozones.com/lost/ ).

If you are interested in trying to make something like that, or just make that work well then I will dig out a better example of the scroller without all the other non-related crap in it too.

Cheers buddy, I really appreciate all your time,

Jon

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-26-2004 19:50

I've seen the Site and it looks neat!!!

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 01-26-2004 23:52

Cheers Yossi, but do you reckon you might have an idea how to fix the unresponsiveness of the scroller on the site?

It's a horrible mess of code and it doesn't work that well at all, it sometimes refuses to stop moving and other time moves the wrong way - it is just unresponsive and a little jerky.

Do you have a website Yossi?

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit

« Backwards — Onwards »

Show Forum Drop Down Menu