www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: mouseup / mouseout complications

  1. #1
    Join Date
    Dec 2005
    Posts
    492

    mouseup / mouseout complications

    Hi there. Below is a series of scripts that I'm using for custom css/javascript scrollbars on my page. They aren't finished yet but I've hit an IE snag that I need help with.

    I'm not sure if reading through all of my code will help or not.

    My problem is that after I press and hold the mouse, if I drag it outside of the document window (toward the address bar or elsewhere), IE doesn't detect when I release it.

    It also stops the scrollbar from moving any further (once the mouse is outside of the window).

    Can anyone provide me with a better perspective of why this happens? I'm using IE 7+

    My scripts ...

    Code:
    var bSr, w3c = 0;
    if ((bSr = navigator.userAgent.indexOf("Gecko")) >= 0) w3c = 1;
    
    var sBj = new Object(), el, y;
    sBj.zIndex = 0;
    
    function ScrollStart(event) {
    sBj.elNode = sBr;
    if (w3c) y = event.clientY + window.scrollY;
    else y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    sBj.cursorStartY = y;
    sBj.elStartTop = parseInt(sBj.elNode.style.top, 10);
    if (isNaN(sBj.elStartTop)) sBj.elStartTop = 0;
    sBj.elNode.style.zIndex = ++sBj.zIndex;
    if (w3c) {
    document.addEventListener("mousemove", ScrollDrag, true);
    document.addEventListener("mouseup", ScrollStop, true);
    event.preventDefault();
    } else {
    document.attachEvent("onmousemove", ScrollDrag);
    document.attachEvent("onmouseup", ScrollStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    }
    ScrollCursor('default');
    }
    
    function ScrollDrag(event) {
    var mSe;
    var l = cCh - (sCh + ($sbb * 2));
    if (w3c) y = event.clientY + window.scrollY;
    else y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    mSe = sBj.elStartTop + y - sBj.cursorStartY;
    if (mSe >= 0 && (mSe + sCh + ($sbb * 2)) <= cCh) sBj.elNode.style.top = mSe + 'px';
    else if (mSe < sBr.offsetTop) sBr.style.top = '0px';
    else sBr.style.top = l + 'px';
    if (w3c) event.preventDefault();
    else {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    }
    cVs.scrollTop = Math.round((pCh - cCh) * (sBr.offsetTop / l));
    }
    
    function ScrollStop() {
    ScrollCursor('');
    if (w3c) {
    document.removeEventListener("mousemove", ScrollDrag, true);
    document.removeEventListener("mouseup", ScrollStop, true);
    }
    else {
    document.detachEvent("onmousemove", ScrollDrag);
    document.detachEvent("onmouseup", ScrollStop);
    }
    }
    There may be more to my problem. My localhost server (not always up) can be viewed at http://localhost/index.php?display=javascript&pretty=1
    Last edited by robindean; 09-24-2008 at 03:27 PM.

  2. #2
    Join Date
    Aug 2008
    Location
    404 File Not Found
    Posts
    62
    try mousedown event perhaps instead of mouseout

    your w3 detection unless you chopped a bunch off is not going to detect properly either

  3. #3
    Join Date
    Dec 2005
    Posts
    492
    I don't use mouseout ANYWHERE. Further more, my w3c code simply detects gecko (regardless of whether the browser is lying).

    Your response suggests that you haven't really read anything about my problem.

  4. #4
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    Post the entire file so I can test it for myself...it's difficult to tell just from the snippet you have provided.

  5. #5
    Join Date
    Dec 2005
    Posts
    492
    Here's the entire .js file ... thanks for requesting it!

    Code:
    var mainpage = 'http://robindean.dyndns.info/';
    
    if (top.location != mainpage && top.location != (mainpage + '?pretty=1')) top.location.replace(mainpage);
    
    function GetSWF(d,i,s,b) {
    document.getElementById(d).innerHTML = '<embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" id="' + i + '" src="' + s + '" wmode="opaque" menu="false" quality="high" bgcolor="#' + b + '" allowscriptaccess="samedomain"></embed>';
    }
    
    var page, nav = 0, hDl = 0, pDg, sLn = 0, ocode, pCh, aTc, oSt, cCh;
    
    function GetPage(p,t,e) {
    if (t == 'onsite') {
    if (page != p) {
    page = p;
    if (nav) nav.style.cursor = 'pointer';
    nav = document.getElementById('nav_' + p);
    nav.style.cursor = 'default';
    if (hDl) {
    pDg.style.visibility = 'hidden';
    }
    if (sLn) {
    sLn.style.display = '';
    sLn.innerHTML = ocode;
    }
    sLn = document.getElementById(p);
    ocode = sLn.innerHTML;
    sLn.style.display = 'block';
    cVs.scrollTop = '0';
    if (hDl) {
    cCh = cVs.clientHeight;
    pCh = pDg.clientHeight;
    aTc = document.getElementById('news' + '_' + e);
    oSt = aTc.offsetTop - 15;
    if (pCh - oSt < cCh) ost = pCh - cCh;
    cVs.scrollTop = oSt;
    pDg.style.visibility = '';
    hDl = 0;
    }
    if (e == 'curtain') document.getElementById('curtain').style.display = 'none';
    }
    }
    else if (t == 'offsite') window.open(p);
    else top.location = p;
    }
    
    var bSr, w3c = 0;
    if ((bSr = navigator.userAgent.indexOf("Gecko")) >= 0) w3c = 1;
    
    var sBs, sBr, sCh;
    
    function ScrollUpdate() {
    cCh = cVs.clientHeight;
    pCh = pDg.clientHeight;
    sCh = sBr.clientHeight + (1 * 2);
    if (cCh < pCh) {
    sBr.style.height = Math.round(cCh * (cCh / pCh)) + 'px';
    if (!sBs.style.visibility) sBs.style.visibility = 'visible';
    }
    else if (sBs.style.visibility == 'visible') {
    sBs.style.visibility = '';
    sBr.style.top = '';
    }
    }
    
    function ScrollWheel(d) {
    if (d < 0 && d > -1) d = -1;
    else if (d > 0 && d < 1) d = 1;
    var s = Math.round(d);
    if (s < 0) s = s * -1;
    d = -Math.round(d) * s;
    var l = cCh - sCh;
    var a = d * (13 - Math.round(l * (13 / cCh)));
    var t = sBr.offsetTop + a;
    if (t < 0) sBr.style.top = '0px';
    else if (t > l) sBr.style.top = l + 'px';
    else sBr.style.top = t + 'px';
    cVs.scrollTop = Math.round((pCh - cCh) * (sBr.offsetTop / l));
    }
    
    function ScrollDelta(event) {
    var d = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) d = event.wheelDelta/120;
    else if (event.detail) d = -event.detail/3;
    if (d) ScrollWheel(d);
    if (w3c) event.preventDefault();
    event.returnValue = false;
    }
    
    var dVs, sPs, tGt;
    
    function ScrollCursor(c) {
    for (i = 0; i < dVs.length; i++) {
    tGt = dVs[i];
    if ((c || (!c && tGt != nav)) && tGt.style.cursor != c) tGt.style.cursor = c;
    }
    for (i = 0; i < sPs.length; i++) {
    tGt = sPs[i];
    if (tGt.style.cursor != c) tGt.style.cursor = c;
    }
    }
    
    var sBj = new Object(), el, y;
    sBj.zIndex = 0;
    
    function ScrollStart(event) {
    sBj.elNode = sBr;
    if (w3c) y = event.clientY + window.scrollY;
    else y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    sBj.cursorStartY = y;
    sBj.elStartTop = parseInt(sBj.elNode.style.top, 10);
    if (isNaN(sBj.elStartTop)) sBj.elStartTop = 0;
    sBj.elNode.style.zIndex = ++sBj.zIndex;
    if (w3c) {
    document.addEventListener("mousemove", ScrollDrag, true);
    document.addEventListener("mouseup", ScrollStop, true);
    event.preventDefault();
    } else {
    document.attachEvent("onmousemove", ScrollDrag);
    document.attachEvent("onmouseup", ScrollStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    }
    ScrollCursor('default');
    }
    
    function ScrollDrag(event) {
    var mSe;
    var l = cCh - sCh;
    if (w3c) y = event.clientY + window.scrollY;
    else y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    mSe = sBj.elStartTop + y - sBj.cursorStartY;
    if (mSe >= 0 && (mSe + sCh) <= cCh) sBj.elNode.style.top = mSe + 'px';
    else if (mSe < sBr.offsetTop) sBr.style.top = '0px';
    else sBr.style.top = l + 'px';
    if (w3c) event.preventDefault();
    else {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    }
    cVs.scrollTop = Math.round((pCh - cCh) * (sBr.offsetTop / l));
    }
    
    function ScrollStop() {
    ScrollCursor('');
    if (w3c) {
    document.removeEventListener("mousemove", ScrollDrag, true);
    document.removeEventListener("mouseup", ScrollStop, true);
    }
    else {
    document.detachEvent("onmousemove", ScrollDrag);
    document.detachEvent("onmouseup", ScrollStop);
    }
    }
    
    var mYp = 0;
    
    function mouseY(e) {
    if (e.pageY) mYp = e.pageY;
    else mYp = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    }
    
    function ScrollPage() {
    var a = sBr.offsetTop;
    var b = a + sCh;
    var c = (13 - Math.round((cCh - sCh) * (13 / cCh))) * 2;
    if (mYp < a) {
    if (a - sCh + c < 0) sBr.style.top = '0px';
    else sBr.style.top = a - sCh + c + 'px';
    }
    else if (mYp > b) {
    if (b + sCh - c > cCh) sBr.style.top = cCh - sCh + 'px';
    else sBr.style.top = a + sCh - c + 'px';
    }
    var l = cCh - sCh;
    cVs.scrollTop = Math.round((pCh - cCh) * (sBr.offsetTop / l));
    }
    
    function RandomLink() {
    var lKs = document.getElementById('talent').getElementsByTagName('span'), lNk = lKs[Math.floor(Math.random() * lKs.length)];
    var hTp = lNk.getAttribute('onclick').toString(), hTp = hTp.substring(hTp.indexOf('h'),hTp.indexOf("',"));
    document.getElementById('random').innerHTML = '<span class="link" onclick="GetPage(\'' + hTp + '\',\'offsite\');">' + lNk.innerHTML + '</span>';
    }
    
    var gCt, gNr, lDe, gTl, gDa, gVs, vBd, url;
    
    function GetImage(d,g) {
    gCt = document.getElementById('gallery_c' + g);
    gNr = parseFloat(gCt.innerHTML);
    gTl = parseFloat(document.getElementById('gallery_t' + g).innerHTML);
    gDa = document.getElementById('gallery_' + g);
    gVs = document.getElementById('gallery_v' + g);
    vBd = gVs.style.background;
    if (d == 'back') {
    if (gNr > 1) lDe = gNr - 1;
    else lDe = gTl;
    } else {
    if (gNr < gTl) lDe = gNr + 1;
    else lDe = 1;
    } gNr = lDe;
    if (lDe < 10) lDe = '0' + lDe;
    url = 'index.php?display=img&f=gallery/' + g.substring(0, 4) + '_' + g.substring(4, 6) + '_' + g.substring(6, 8) + '_' + document.getElementById('gallery_i' + g).innerHTML.substring(0,5).toLowerCase() + '_' + lDe + '.png&w=450&h=338', img = new Image();
    img.onload = function() {
    if (gDa.style.background != vBd) gDa.style.background = vBd;
    gVs.style.background = 'url(' + url + ')';
    gCt.innerHTML = gNr;
    };
    img.src = url;
    }
    
    function GetVideo(g) {
    if (document.getElementById('gallery_c' + g)) gNr = parseFloat(document.getElementById('gallery_c' + g).innerHTML);
    else gNr = 1;
    if (gNr < 10) gNr = '0' + gNr;
    alert('Playing Video ' + gNr + ' from ID ' + g);
    }
    
    var main, cVs, kCd;
    
    window.onload = function() {
    main = document.getElementById('main');
    cVs = document.getElementById('canvas');
    if (typeof cVs.style.MozUserSelect != 'undefined') cVs.style.MozUserSelect = 'none';
    else if (typeof cVs.onselectstart != 'undefined') cVs.onselectstart = function() {return false;};
    else cVs.onmousedown = function() {return false;};
    pDg = document.getElementById('padding');
    dVs = document.getElementsByTagName('div');
    sPs = document.getElementsByTagName('span');
    GetSWF('form_flash_newsletter','form_newsletter','form.swf','e4c67e');
    RandomLink();
    sBs = document.getElementById('scrollbase');
    sBs.onmousedown = function() {ScrollPage();};
    sBr = document.getElementById('scrollbar');
    if (w3c) {
    document.addEventListener('DOMMouseScroll', ScrollDelta, false);
    document.addEventListener('mousemove', mouseY, false);
    }
    document.onmousewheel = function() {ScrollDelta();};
    document.getElementById('form_target').innerHTML = '<iframe name="form_iframe" frameborder="0" scrolling="no"></iframe>';
    setInterval("if (document.body.clientWidth < 1053) {main.style.left = '67%'; scrollTo(1053,0);} else main.style.Left = '';if (window.getSelection) window.getSelection().removeAllRanges(); else document.selection.empty();ScrollUpdate();",1);
    GetPage('home','onsite','curtain');
    };
    The html code for my scrollbar is as follows:

    <div id="scrollbar" onmousedown="ScrollStart(event);"></div>
    Last edited by robindean; 09-24-2008 at 06:13 PM.

  6. #6
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    Need the entire page to try it myself - HTML and all - or a link to your page.

  7. #7
    Join Date
    Aug 2008
    Location
    404 File Not Found
    Posts
    62
    Quote Originally Posted by robindean
    I don't use mouseout ANYWHERE. Further more, my w3c code simply detects gecko (regardless of whether the browser is lying).

    Your response suggests that you haven't really read anything about my problem.
    Read what you wrote and look at your first post text including your title. Since I could tell this is only part of the code, and you stated you had problems with a mouse out, my assumption from your incomplete information is that you had a mouse out elsewhere in the code.

    If you are trying to add listener events it matters since detecting the browser improperly will make your script attach the event improperly. You should always try to do it the DOM way and then do it the proprietary IE way since IE does actually support some DOM methods contrary to popular belief =)

    BTW if you leave the contents of the web browser with your mouse, IE ignores further input, not being able to catch the cursor cordinates / events etc. since you are no longer within the bounds of the window / web page.

  8. #8
    Join Date
    Dec 2005
    Posts
    492
    The server is slow, sorry ... but you want this:

    http://robindean.dyndns.info/?pretty=1

    Without the pretty=1, everything gets condensed to a single line.

    The server may or may not be on (localhost) depending on when you try to connect (Chicago).

  9. #9
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    Ok. I see what you mean now. How about using a mouseout on the body to detect whether the button is down when leaving the window. Then on re-entry check to see if the button is down. If it is bind to the scroll bar again - if not stop dragging. This won't drag the scroll bars when outside the window, but will at least not start dragging them again if the user enters the window without having the button pressed.

    This only leaves the following scenario undetected
    1: Button down
    2: Leave window
    3: Mouse up
    4: Mouse down
    5: Re-entry in window
    which you can then choose to ignore...not a likely maneuvre with a mouse.
    Last edited by Dok; 09-24-2008 at 06:52 PM.

  10. #10
    Join Date
    Dec 2005
    Posts
    492
    @ avitar: Now that I've provided a link to the entire code, can you give me a better version of my own attempt in terms of coding grammer?

    @ Dok (and avitar): That is, indeed, the problem I'm faced with. I don't know how to detect the following:

    1) a mouseup event that occurs outside of the document/html area.
    2) the mouse status upon re-entry over the document/html area.

    Suggestions?

  11. #11
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    1) a mouseup event that occurs outside of the document/html area.
    It is not possible. You can't detect something which happens outside the browser.
    2) the mouse status upon re-entry over the document/html area.
    Just add a mouseover on the body element.

  12. #12
    Join Date
    Dec 2005
    Posts
    492
    I don't understand.

    For starters, I don't mean outside the browser ... just in places like over the address bar or status bar. If that's impossible, so be it (although FF does detect it).

    Otherwise, how (in code) do I say:

    body.onmouseover = function() {

    if the mouse is down do something.

    }

    ???

    My point being, if I mouse down within the document, then drag outside of the window and mouse up, any variable that I've set using document.onmousedown will REMAIN in mouse-down status.

    Then, if I mouse over the document and the mouse is NOT down, the document will still believe that it is, right? Wouldn't this cause the problem to remain?

    I ask this because this script: http://www.hesido.com/web.php?page=customscrollbar - let's you mouseup outside of the document window while dragging the custom scrollbars and, if you mouseup then, upon returning to the window, the scrollbars are not "latched".
    Last edited by robindean; 09-25-2008 at 01:56 PM.

  13. #13
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    Otherwise, how (in code) do I say:

    body.onmouseover = function() {

    if the mouse is down do something.

    }
    Code:
    body.onmouseover =
      function(e) {
        if (!e)
          e = event;
        // If right button
        if (e.button == 2) {
          // Do whatever ...
        }
    }
    My point being, if I mouse down within the document, then drag outside of the window and mouse up, any variable that I've set using document.onmousedown will REMAIN in mouse-down status.
    You still have the mouseout of the body element. This you can use as I explained ealier.
    Then, if I mouse over the document and the mouse is NOT down, the document will still believe that it is, right? Wouldn't this cause the problem to remain?
    No that is incorrect.
    I ask this because this script: http://www.hesido.com/web.php?page=customscrollbar - let's you mouseup outside of the document window while dragging the custom scrollbars and, if you mouseup then, upon returning to the window, the scrollbars are not "latched".
    I see what you mean. If you notice the scrollbar will stop moving when the mouse leaves the viewport area. This is likely because the mouseout event is used somewhere to detach the mouse from the scrollbars.

  14. #14
    Join Date
    Aug 2008
    Location
    404 File Not Found
    Posts
    62
    Dok beat me to the events, but I can offer this:

    For most browsers, they stop detecting events when you leave the page. This means if you are still over the browser window technically such as over the address bar, but not within the bounds of the page content it usually doesn't catch the event.

    It is frustrating though I agree - which is why animation plugins like flash are popular as opposed to coding it the harder way through javascript.

    Another thing you can do which may help you out is to have a function that is on a timer to attempt to detect idle time / bluring of the element, although I need to think about how to actually pull this off.

    -----

    ...back to events, if you use DOM event listeners you can attach multiple functions to a single event. If you do not want to use DOM events (or if you detect the browser may not support it) you can use a messenger function which you attach your other functions too, or detach from. The messenger in turn would be the only function attached to the event. I will see if I can dig one of these out of my notes.

    -----

    I can't find the notes off the top of my head, but you can do something to the effect of:

    Code:
    function Messenger(){
    	this.Talk(){
    		for(var a = 0; a < this.Events.length; a++){
    			this.Events[a];
    		}
    	}
    	if(!this.Loaded){
    		this.Events = [];
    		this.Loaded = true;
    	}
    }
    
    var oMessenger = new Messenger();
    var o = document.GetElementById('SomeDiv');
    o.AddEventListener('click',oMessenger.Talk(),false);
    for(var a = 0; a < 5; a++){
    	oMessenger.Events[a] = function(){alert('event '+a);}
    }
    Last edited by avitardotnet; 09-25-2008 at 10:29 PM.

  15. #15
    Join Date
    Dec 2005
    Posts
    492
    I'm just not experienced enough to really grasp the promise of success here. I'm more of a "hack compiler" and, thus, the argument in my head as to whether or not my issues are making sense vs. the responses I'm getting leaves me confused.

    I appreciate the help but, let me try and be more specific about my problem (although I can tell you both have some idea about it).

    Let's say we have a blank page but validated page. I mousedown and proceed to drag the mouse away from the document window into the address bar area. I then drag the mouse back (still down) ... I would like to see an alert ('mouse is down') for document.onmouseover, if the case is true. Otherwise, I'd like to see an alert('mouse is up').

    I've dabbled minimally with doks code but am inexperienced/unsuccessful with it's behavior.

    I realize I may need a mouseout event as well. Can anyone or either of you think of a way to compile such code that would amount to this output?

    What is this guy doing that makes it work for him (mind you, I'm only talk about the mouse-up outside of document window success): http://www.hesido.com/web.php?page=customscrollbar

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles