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).]
posted 04-25-2003 18:03
