- Create Account

Scrolling scroller as well as Browsewith wheel on wheelmouse

Forums > DHTML Scroller > Scrolling scroller as well as Browsewith wheel on wheelmouse
Author
Message

1) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Anybody got any ideas on how to have the scroller scroll by the mousewheel when pointing at the scroller and have the browser window scroll when pointing somewhere else other than the scroller.

I find scrolling the scroller with the mousewheel is very convinient but having to use the browser elevator bar to scroll the page is tedius.

Angus i sent a small donation and hope to send more sometime when my hobby finances allow... thanks for the great scrips they made it possible to create a much nicer site than i couls ever have done under my own steam!

Thanks in advance for any help

-Wayne
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

2) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 202.137.--.--
It does scroll with the mousewheel, just not in all browsers (only where the event is supported).

Good luck - Angus.

3) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
There is no question that it scrolls with the mouswheel. The question is how do i also make the mousewheel also scroll the main page as well.

Desirably when pointing at the scroller the wheel should scroll it... but when pointing at anywhere else on the Browser window should scroll the browser not the scroller.

Sorry for repeating most of my original post but seems you did not understand what it was asking.

Thanks again for your help with this
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

4) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 125.236.--.--
Oh, sorry for the misinterpretation, I was answering posts at work and clearly missed the point :).

Anyway,  you can see the mousewheel handler function beneath the scroller setup. What I recommend you do is:

1) Put this on the scroller DIV element:

onmouseover="content.mOver = true"  onmouseout="content.mOver = false"

2)  Insert this into the scroll handler near the start of the function:

if (!content.mOver)  return true;

which will make it active only when the mouse is over the scroller area.

Also, thank you for your donation :).

Good  luck - Angus.

5) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Thanks for the help

However this only partly works.

When  i point at the scroller both the Internet Explorer 7 window scrolls as well as the scroller... how perculiar.

But  when i point away from the scroller only the IE 7 windows scrolls which is correct.. Any ideas??

- Wayne
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

6) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
I tried some things and didnt fix it but shead som light on whats going on.

as an experiment I added the code below
onmouseover="content.mOver = true" onmouseout="content.mOver  = false"
to the ContentBar and ContentThumb Divs to see what happened.

When i point at these it scrolls with the wheel corectly as long as i stay away from the thumb ie only point at the BAR! If i point at t he thumb and scroll the wheel then both the IE window and the Scroll scrolls

It  seems that as the redraws of the thumb or the html content is redrawn random mouseOut events happen causing scroll messages to go to the Window rather than just the scroller

Any Ideas? Thanks

-Wayne
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

7) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 202.137.--.--
I'd add it to the content DIV area and ignore the bar maybe :).

With  transparent backgrounds to the content div area though I found some bugs in MSIE when I initially developed this script -- that's why this feature is not in the default script. Your luck might be better.

- Angus.

8) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Hi Angus

I only added it to the bar area and the Thumb area so i could try and track down what was going on. It seems that as the text scrolls or the Thumb moves the onmouseout event is triggered every time the scroller divs are redrawn so the mousewheel events jump back and forth between the div and the main page. Basically this aproach does not work no mater what i try.

I have got it going however by not having anything in the Divs at all but by testing the location of the mousepointer in the wheelscroll handler and if its left of the scroll or right of the scroll or above or below the scroller then abort the handler. This works like a dream a bit messy as you haveto maintain te region of the scroller both in the Dives as well as in the handler.

I include the code in this post so you can see what im getting at. Any sugestions on how to implement more elegantly would be apreciated.

The  code is in my next post
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

9) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Angus here is my code tat works a treat

You can try it at http://www.ridgebacks.com.au

// *** SCROLLING  BY MOUSEWHEEL HANDLER - delete if you want to restore normal mousewheeling ***
var mwHandler = function(evt)
{// Following checks that the mouse is pointing over the Scroll area and if not it aborts the scroll
// so that the main IE window will scroll instead
//Set the numbers here to basedon the Left and Top and Height and Width of the scroller
var ScrollerTop = 437;
var ScrollerHeight = 300;
var ScrollerLeftOffset = 170;
var ScrollerBarWidth = 17;
var ScrollerBarOffset = 354;
var MouseX = event.clientX;
var MouseY = event.clientY;
if (MouseX  < (((page.winW()/2) - ScrollerLeftOffset) - (document.body.scrollLeft  + document.documentElement.scrollLeft))) return true;
if (MouseX >  (((page.winW()/2) + ScrollerBarOffset) + ScrollerBarWidth) - (document.body.scrollLeft  + document.documentElement.scrollLeft)) return true;
if (MouseY <  (ScrollerTop - (document.body.scrollTop + document.documentElement.scrollTop))) return true;
if (MouseY >  ((ScrollerTop + ScrollerHeight) - (document.body.scrollTop + document.documentElement.scrollTop)))  return true;
 evt=evt?evt:window.event;
  // You  have to manually specify a scroller name in here (like 'content').
 if  (evt.wheelDelta) content.scrollBy(evt.wheelDelta / (window.opera ? 3 : -3));
else if (evt.detail) content.scrollBy(evt.detail * 12);
 return false;
};
if (window.addEventListener  && !window.opera)
 window.addEventListener('DOMMouseScroll', mwHandler, false);
else window.onmousewheel = document.onmousewheel = mwHandler;
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

10) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 125.236.--.--
Cool, that's one way of fixing it :). Be aware that event.clientX is IE-only, you might want to use the script's built-in cross-browser stuff for mouse and browser position detection (scan through the "commented" script file).

- Angus.

11) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Whoa!

I read the commented JS ad way to hyragliphic for a simple bloke like me! cant even get a clue where a function to return current mouse pointer possition on the window or a function to return te amount the page is scrolled are hiding!

Any hints what these functions are called and how i may use them?

BTW i tried my page wich uses the scroller as well as your photomorpher and it doesnt fade the picures or load the HTML into the scroller in the latest version of Firefox at all. The Milonic menu system i used however does work in firefox. Any comments?

Regards

- Wayne
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

12) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 125.236.--.--
On second thoughts my whole cross-browser code library isn't in this script (it's a bit old and messy), probably just stick with what you have as long as it works OK In Firefox too :).

-  Angus.

13) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Any thoughts why the scroller and/or photomorpher doesnt work in Firefox?

The page is http://www.ridgebacks.com.au

-Wayne
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

14) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 125.238.--.--
No need to duplicate every post in a new topic :).

I  viewed source on the page and it needs a little fixing. Firefox is barfing on the fact that you've got a few unmatched comment tags like here:

<!--<div id="loadMessage" style="position: absolute; left: 200px; top: 200px">
 <font face="Arial, Helvetica" size="5">Please Wait, Loading...</font>
</div>

That's  going to knock out a fair whack of the document following it and break the scripts. Firefox's nicely coloured "View Source" is a good way of seeing where the breakage happens.

I recommend you run your document through the W3C HTML validator http://validator.w3.org which is an awful lot of work but is a great learning experience and will mean that when errors occur you can start blaming browser vendors ;). It spits out a lot of errors, usually multiples of the same kind of problem.

- Angus.

15) wilsonw Group: Members
Posts: 14 Joined: 20 Feb 2007 Location: Sydney Australia IP: 202.172.--.--
Thanks for your advice

Scroller still not working in Firefox (im sure its my fault though)

I have made some progress based on your advice - now your photomorpher works in firefox

I removed all the incorrect comment stuff and put it through the page validator and corrected many things that could matter. Some minor stuff i cant correct yet but should be not related to my current problem as they are not to do with the areas associated with the Scroller code.

The scroller Divs still do not appear this includes the main HTML text in the scroller as welll as the slider, thumb, up and down arrows.

Any thoughts? is this someting to do with layers i need to install in firefox?? its the lates firefox by the way.

Any help apreciated

the test page is http://www.ridgebacks.com.au/indexff.html

-Wayne
Wayne Wilson
HodariRafiki Rhodesian Ridgebacks
http://www.ridgebacks.com.au

Post a Reply:

You are not logged in, and will be posting anonymously as a guest. If you want to post using an account, please login at the top of this page.