Onscroll isn't always onscroll
In continuation of my experimentation with position:fixed from yesterday, I decided to try and enhance the form slightly by having it check to see how close the comment form was to the top of the page. If it got too high, I'd change from position:absolute to position:fixed like I did yesterday.
This should certainly resolve the issue for those at a resolution of 1024 by 768 that weren't able to fit the form onto the screen.
But what should have been a fairly simple procedure of using window.onscroll turned into confusion, only to realize that, in Firefox 1.0.3, the onscroll event only fires when you physically drag the scroll bar. Wheel mouse doesn't fire anything. Well, I use my wheel constantly so that just wouldn't do. Instead, I set up a constant loop that calculates where I am. This works somewhat well. Except it's a little jerky with the slight delay in the scroll script.
UPDATE: I've updated the JavaScript once more to now calculate the available window height. If I don't have enough then the comments area can be found in it's usual spot underneath the comments. Try resizing the window to test it out. Next on the to-do list: add support for IE.
UPDATE (Feb 23, 2007): The code is available in this article on handling onscroll.
Conversation
Hmm, this sounds like a bug (in Firefox) to me.
I'm not aware of the exact semantics of 'onScroll', but it seems reasonable to expect that the event fires when you scroll the page. Since using the mouse wheel definately scrolls the page (you can use the scrollbar for this?), I'd say Fx should definately fire onScroll when the wheel's used.
Have you tested the behaviour in other browsers?
Oh, and I'm definately FOR the new comment box. It looks great!
Calrion: it's definitely a bug. I checked BugZilla and they know about it and are working on it. Hopefully it'll show up in 1.0.4.
Oh, and in using the comment form on my own site... it's true: you don't really look for it on the sidebar. It took me a half-second to find it! I might adjust the sidebar style to make it more noticeable.
Very nice.
There is a bit of a jump the first time that the JS kicks in to reposition the div (it at first scrolls slightly out of view and then corrects), but I suppose that's unavoidable.
In Firefox 1.0.3 on Mac, the mouse wheel works with onScroll properly (although it seems to take half a second to react after I roll the wheel, but I think that's just Ffx being junky).
Anything you do to further enhance the sidebar will just be that much more added usability.
I didn't notice your comment block right away either but once you start scrolling the magic happens. It was a very pleasant experience. Very good idea, users will definately get a kick out of it.
I have had troubles working with the onscroll event in Firefox. however I have been tinkering with the idea of using an timer checking the position of the scroll bar as a hack.
ps the comment box idea is fantastic. but it seems you are overestimating the size you need for the comment box by a fraction and sadly it isnt appearing although it has room.
The overestimation is the calculation of the comment box if it were at the top of the page (which includes the search box and the background). I'll have to look into revising that and possibly adjusting the style of the comment area to make it more compact.
No comment, just a test.
Another test, just curious
I found a small bug, but I dont know if you know about that one yet. Resize this page to something small (lets say 800x600). The horizontal scroll bar will pop up. Now instead of using the horizonal scroll bar, press the middle button of your button (or the wheel) and drag the mouse to the right and see what happens.
Apparently, you are always redesigning this site. So is there any way you could provide a permanent example of this comment system. It's pretty damn cool.
The search system is ace too. :-)
Dean: that's a good idea. I'll try to put up a permanent example this evening of what I had originally done. I didn't think I would redesign so quickly after posting this article. :)
I'm now using FF1.5. On your page for "experimentation with position:fixed", the comment box doesn't appear at all. (Which is I'm replying on the wrong page.)
Obviously it's working fine on the "Onscroll isn't always onscroll" page. Otherwise I wouldn't be able to tell you this :-)
This design is really kewl and so is the comment box, really well done. Gratz!
nbmbvmbvnmbnmvbm m
I think you guys are looking for the onMouseWheel event. If you use onMouseWheel in conjunction with onMouseScroll it works fine.
Your new article is suffered from the peekobo IE bug. It could be fixed by setting the height of the container to 1%.
very nice site design... i like the light switch... good work!!
This doesnt work with IE?
quite nice with FFOX, with new version of FFOX the bug u speak of is already fixed :)
hello,i need a code that moves the scroll horizonally
can you help me please?
Can you tell me how to get this working in IE as it is a really cool feature?
I've posted the code to do the horizontal and vertical scrolling in an article on handling onscroll.
hello, cool site, i love your work this is my blog: http://yandex.ru - look at it now!
hello, cool site, i love your work this is my blog: http://yandex.ru - look at it now!
Да, довольно интереÑÐ½Ð°Ñ ÑтатьÑ.
гордах, Ñто тоже тема и иÑториÑ, переÑмотрите темы.Я почту проÑматриваю, мне шлют не пойми что, не знаю кто, Ñтолько муÑора, может оно и нужно, но не в дневнике.Я так понимаю, дневник Ñто чаÑÑ‚ÑŒ твоей души.Ðам даетÑÑ Ð¿Ñ€Ð°Ð²Ð¾ выбирать - пользуйтеÑÑŒ. Ð Ð¸Ð½Ñ„Ð¾Ñ€Ð¼Ð°Ñ†Ð¸Ñ Ð±ÐµÑполезной не бывает