Closed Thread Icon

Topic awaiting preservation: Gesture Driven Scrolling - Woo Hoo! (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=8618" title="Pages that link to Topic awaiting preservation: Gesture Driven Scrolling - Woo Hoo! (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Gesture Driven Scrolling - Woo Hoo! <span class="small">(Page 1 of 1)</span>\

 
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted posted 04-25-2003 18:03

I have now captured the mouse within my scroller's area to some degree, and I have converted it to a percentage and can use this percentage to control direction but not yet speed. Many glitches have been thrown up in the code (due to my bad coding for certain) including one that has stopped it from working in mozilla (something minor probably).

I have posted an update with the code in the hopes that one of you guys or more, if you want to all chip in, will help refine the code and smooth the bugs (for you lot this should be easy as you know lots, I'm still getting confused with loops and functions!). Remember that the code is a combination of two other pre-written scripts and my own 'bodge-tastic' additions to poorly blend them together.

Demo Here:
http://www.cryokinesis.co.uk/demo.htm (N.B. Mozilla chokes at the moment so if you want to see it *ahem* 'working' then you'll need IE or Opera 7)

I'm desperately hoping one of you guys or all of you can fix this and make it work proper without so much of the useless skuz I'm to naive to be able to remove. HELP ME PLEEEEEEASE!

Please don't take a dislike to me for being crap, pity I can cope with but not bad feeling.

visit my CryoKinesis Online Gallery

[This message has been edited by smonkey (edited 04-25-2003).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 04-26-2003 03:24

The problem with "fixing" stuff like this is that it takes a good deal of time to sift through code before we can work how what's actually going on.

Someone here might be willing to do that but I don't like you chances. Coding stuff like this is all good and well but if you don't understand the basis and take things slowly then you'll never really learn the language and your going to hit walls left right and centre.

To be honest, you really don't need to be using the "viewsrc" api, it's a serious overkill for what your doing. It's also OO (object orientated) which will be good if you want to construct multiple instances of the scroller on the one page but since you said your not really a programmer so using scripts like this probably just confusing you, unless of course you happen to have a good grasp of OO concepts.

Anyways, my advice would be to start off small. Make a function that moves an element, something like:

moveX(id,n) {
document.getElementById(id).style.left = n + "px"
}

moveY(id,n) {
document.getElementById(id).style.top = n + "px"
}

Then make you mouse coordinate function:

var mouseXpos = 0
var mouseYpos = 0

function getMouseXY(e)
{
e = (e && !window.event)? e : window.event
mouseXpos = e.clientX
mouseYpos = e.clientY
}

document.onmousemove = getMouseXY


It's simple but it works and you should be able to understand it, which is the most important part. Then build the next little bit, then the next little bit and so on. Eventually you'll have the whole script done and it'll be 100% yours and you'll understand 100% of it. You can make it more cross-browser and compatible later, but you need to grasp the basics first. You'd be surprised as to how simple it is to build complex scripts. Sure it takes a little while but hey, you've gotta start somewhere.


If you run into a problem along the way then you can come in here and ask a more specific question like, Hey guys, IE always seems to be 2px out on the mouse position, why's that?... Cause that way, we don't have to kill time digging through your code (and other peoples code) to find a problem, we just have to find a solution to the problem.

It's not that I don't want to help, I do but if I spend an hour or so fixing your problem your not really going to learn much and 2 days from now you might run into another problem and then your back here again asking someone to fix that for you too. This way, you'll learn to fix or at least identify your problems so that you can ask for more specific help and well, you?ll be a much better coder too. Javascript isn?t really that hard but it does take a bit of time and effort.

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted posted 04-26-2003 18:47

You are exactly right, I know that. I understand everything you say and totally agree. My troubles comes from having ideas beyond my capabilities. I was an art and design student and I am now just about to head off to study Multimedia at Uni. I have run into many problems in this time and have normally got through by sheer determination and very long days and no sleep. This JavaScript deal however is probably my biggest challenge as it is a very precise 'art' with an awful lot to it and involving maths which I have always been good with but it eats my brain up and drives me crazy. I am learning, I have learnt many tricks with arrays and loops and the document.write thing (although I still get a little bit confused at times). I also wrote my first complete script the other day that (well I have written other smaller ones by they are just ways to use javascript to speed up my site and save me time upadting it). That script was an age counter, very basic and I dislike that, I like to produce good stuff that impresses, not boring stuff that people take for granted. Trouble is you have to start with the boring stuff in order to learn, I tend to jump headfirst into something good and thrash away trying not to sink and if I don't then I have learnt stuff and if I do then I'm fed up. I'm impatient I know, and I appreciate people have better things to do than clean up code for me coz I haven't bothered to learn how it works. I always hope that someone will have the answer already and be able to help me out without me having to struggle for weeks and still possibly fail.

Thanks for all the tips tho.

visit my CryoKinesis Online Gallery

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted posted 04-26-2003 20:12

Ok I'm working on it now, but I'm stuck already *sighs all round*

Basically it works fine as written (bar the missing 'function' statements on the top two - was that a test?). I'm not using the XY thing to control movement yet, but I have set up a little mouseover button.

But here are my probs:

1: I need a way to loop the 'move n pixels left' so that it continues to move (would this be a loop that somehow checks if the user is still 'mouseovering') - how would that be accomplished?

2: I need a way to loop the 'get X Y positions' so it reads more than just the starting position (presumably similar to above but checking for mousemovement no?)

3: I may be jumping ahead here but is this type of scroll gonna produce the jerky horrible scroll that varies in speed from browser to browser? I want as smooth a scroll as possible preferably.

4: From studying what people have said and looking at the ViewSrc script (amongst others) I have seen that OffsetWidth, OffsetHeight, OffsetLeft and OffsetTop etc. get used a lot, but what are they and what do they do? I'm guessing they give some kind of read out as to the position of the element on the page or in the document.

5: Another thing that has got me worried (again jumping ahead) is that of ScrollTop etc. I'm guessing that this gives some kind of readout as to how much the page has already been scrolled which is obviously very useful when calculating scrolling of a div as I also read that some browsers use the document for the width/height while others use the viewport (nice technical term).

6: How can speed be controlled? merely adjusting the number of pixels moved would make the scroll very jerky at faster speeds, so I'm guessing I need to always scroll 1px at a time but increase or decrease the time between the position changes so that the effective 'framerate' is less or more. How does that work and am I thinking correctly?

Ok that's it for my problems for now, I realise that my persistent comments are probably bugging the guys that know JavaScript well but I have to ask. I'm a newbie and don't even know where to look to find answers to my questions apart from here - most places seem to write like they are communicating with programmers only and I'm a young, student, designer-type person who got a G in french GCSE and sucks at anything related to communicating via a language other than my own native English. Please don't write me off, consider me your challenge, I can think logically but have just not yet managed to define my logic as JavaScript.

[This message has been edited by smonkey (edited 04-26-2003).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 04-27-2003 21:10

I typed this up earlier and when I went to reply my connection had dropped out. Lucky for you the back button brought me back to the reply I typed or this would have been a lot shorter. Heh =)

1: I need a way to loop the 'move n pixels left' so that it continues to move (would this be a loop that somehow checks if the user is still 'mouseovering') - how would that be accomplished?

You'd want to control the movement through a control function that you set an setInterval() function on. If you need basic syntax and function reference for Javascript then do a google search for "netscape javascript reference". It's a handy indexed PDF file, I use it all the time.

In that setInterval() you?ll have a loop that will increase the position of a single DIV each time through, then you check that DIV?s positon and if it reached the edge then you move it back to the start. You?ll probably want to build an array of pointer so that you can loop easier like:

myDivs = []
myDivs[0] = ?element0?
myDivs[1] = ?element1?
myDivs[2] = ?element2?

the ?elementn? is the ID value of each div. Then use a for loop:

for (i=0; i< myDivs.length; i++) {
newX = document.getElementById(myDivs[i]).offsetLeft - 5
if (newX < -document.getElementById(myDivs[i]).offsetWidth) {newX = statOfLine} //this is where the last DIV?s left position first starts, I?ll let you figure that out
moveDivX(myDivs[i],newX)
}

The coded above, while being very simple and limited, will work if you want to have a never-ending loop of thumbnails to scroll by from left to right. Altering it based on the mouse position will simply involve adding a few more if() statments and stuff. Also remember that window.status = "whatever you want" + jsVaruable + "some more text"... is a good way to report variables to the status bar so you can see what's going on theorughout the execution of your script.


2: I need a way to loop the 'get X Y positions' so it reads more than just the starting position (presumably similar to above but checking for mousemovement no?)

Get the x/y positions of what?... The mouse? If you set "document.onmousemove = getMouseXY" then that will update the global variables of mouseX and mouseY every time the mouse moves anywhere on the page, then in your controller function you just check if the mouse is inside the main DIV holding your thumbnails.


3: I may be jumping ahead here but is this type of scroll gonna produce the jerky horrible scroll that varies in speed from browser to browser? I want as smooth a scroll as possible preferably.

Nothing is ever going to scroll/animate at the same rate when using JavaScript. If you want to be dead sure it does use flash at 10 frames a second. This should work fast enough in IE, Opera and Mozilla in non-Windows OS's. Mozilla is still a little slow on windows but it works fine for everything else. IE/Mac isn?t as fast as it should be but it's not too bad. Running any DHTML animation on windows 9x will always be slow. Win95/98 and Win ME just seem to suck at DHTML for some reason. Windows 2000 and XP are much faster.

In any event, there's onyl ever one way to animate with DHTML. You move something to a new position then several 1000's of a second you move it again. This is what the number on the end of your setTimeout() and setInterval() calls are for, the lower the number the faster but while IE may be able to hit rates of 25 (40 frames a second) Mozilla won't go much faster then 50 or 100 (20 to 10 frames a second) It all depends on how many caculations and how many elements (and of what size) you alter each time around.


4: From studying what people have said and looking at the ViewSrc script (amongst others) I have seen that OffsetWidth, OffsetHeight, OffsetLeft and OffsetTop etc. get used a lot, but what are they and what do they do? I'm guessing they give some kind of read out as to the position of the element on the page or in the document.

offsetWidth, offsetHeight, offsetLeft and offsetTop (don't capitalise the first letter) will give you the current width of an element regardless of weather or not it's an absolutely positioned element or regardless of any previous style definitions. If you don't set a style rule for an elements height, style.height will be "" (nothing) but offsetHeight will still give you a value. so it's better to use the offset values (if the browser supports the offset values) to read the height/width etc... but you can't write to these values. In order to set an elements height/width you have to use the proper style pointer which is style.height = value + "px" or whatever ever measurement type your using. Also remember that if you do need to read style.height into a number you need to parse.int() the value to remove the "px" bit. Some browsers like IE and Opera also have a style.pixelTop/pixelWidth set of values which are for pixels only and can be read and set. These values are of integer type only.

Another handy rule to remember is that in JavaScript you can usually access any CSS element through the .style object. These properties are always lowercase except when the property is more then one word like background-color:#000000 in CSS becomes myObject.style.backgroundColor = ?#000000? in JavaScript.

5: Another thing that has got me worried (again jumping ahead) is that of ScrollTop etc. I'm guessing that this gives some kind of readout as to how much the page has already been scrolled which is obviously very useful when calculating scrolling of a div as I also read that some browsers use the document for the width/height while others use the view port (nice technical term).

Yeah, I think IE has a habit of doing this. I didn't put it into the example above because with your current example you didn't need it. Just leave it out for now and if you run into a problem then you can add it in later. Feel free to make some test pages figure out which browsers do what. Oh yeah, it?s a good idea to constantly test your work in different browsers as you go or you?ll have a horrid time debugging your scripts.

6: How can speed be controlled? merely adjusting the number of pixels moved would make the scroll very jerky at faster speeds, so I'm guessing I need to always scroll 1px at a time but increase or decrease the time between the position changes so that the effective 'frame rate' is less or more. How does that work and am I thinking correctly?

I explained this above but leaving it at 1px all the time isn't a good idea. If you have it at 1px constantly then Mozilla will only move at most 20px per second which is really damn slow. Your best leaving the speed adjustments to the pixel values and leaving the timeout / interval rates as static as possible. This way you could be able to keep a desired frame rate to a certain degree but change the speed. After all, you see animations that move something from one side of the screen to the other in less than a second, do you honestly think their doing 1000+ frames a second?... Even todays high end 3D accelerators can't run quake1 that fast.


Like I said before, Javascript isn't hard (god knows I even failed English and almost failed math in high school, heh, that's probably why I'm still at University) it just takes time. Nothing happens overnight. Netscape?s JavaScript reference will also help with the core language structure. DHTML on the other hand is all about knowing what the different browsers can and can't do, and how to work around it.


Anyways, I hope that clears up some issues.



[This message has been edited by Dracusis (edited 04-27-2003).]

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted posted 04-27-2003 22:36

Wow, that's a long but exceptionally great reply, I guess you don't hate me too much after all

I've read through it and it seems clear but I will need to read it quite a few times and fiddle around before I've fully understood it all, but rest assured , I WILL BE BACK

Thanks to all especially Dracusis.

« BackwardsOnwards »

Show Forum Drop Down Menu