Path: csiph.com!newsfeed.hal-mli.net!feeder3.hal-mli.net!newsfeed.hal-mli.net!feeder1.hal-mli.net!npeer02.iad.highwinds-media.com!news.highwinds-media.com!feed-me.highwinds-media.com!border3.nntp.dca.giganews.com!Xl.tags.giganews.com!border1.nntp.dca.giganews.com!nntp.giganews.com!local2.nntp.dca.giganews.com!nntp.posted.grandecom!news.posted.grandecom.POSTED!not-for-mail
NNTP-Posting-Date: Tue, 24 Jul 2012 16:03:33 -0500
User-Agent: Microsoft-Entourage/12.23.0.091001
Date: Tue, 24 Jul 2012 16:03:30 -0500
Subject: Re: Button mouseover is spotty
From: Bint <bint@ign.com>
Newsgroups: comp.lang.javascript
Message-ID: <CC3477D2.C394%bint@ign.com>
Thread-Topic: Button mouseover is spotty
Thread-Index: Ac1p38byIgO/Y+PaMEWI3E2WDerMbw==
References: <CC34639E.C261%bint@ign.com> <XnsA09AE8A77C6BBeejj99@194.109.133.133>
Mime-version: 1.0
Content-type: text/plain; charset="US-ASCII"
Content-transfer-encoding: 7bit
Lines: 70
X-Usenet-Provider: http://www.giganews.com
NNTP-Posting-Host: 216.82.212.181
X-Trace: sv3-IjH/xgoOIEOtqNUY42xo83zRRL8+AKnBoVRNGHklysZwcHbmwyiBWijk6160wWsCkO/H37+PpNpNqnD!MIDQPSeJ6vgdxnFbxlP8sEruISQZqxCQfzt/ExETIYi883Q/PPyo9MZWyCjGjQ4=
X-Complaints-To: abuse@grandecom.com
X-DMCA-Complaints-To: abuse@grandecom.com
X-Abuse-and-DMCA-Info: Please be sure to forward a copy of ALL headers
X-Abuse-and-DMCA-Info: Otherwise we will be unable to process your complaint properly
X-Postfilter: 1.3.40
X-Original-Bytes: 3583
X-Received-Bytes: 3724
Xref: csiph.com comp.lang.javascript:15181

Sorry,  I am a moron.  But I did figure out the problem -- another div
(transparent) was blocking the parts of the div.

I have another question though.  I am creating another element, a span, like
this:

                    var linktext = document.createElement( 'div' );
                    linktext.style.position = 'absolute';
                    linktext.style.top = '50px';
                    linktext.style.width = '100%';
                    linktext.style.textAlign = 'center';
                   
                    linktext.innerHTML = '<span
id="linktext"">'+thisURL+'</span>';
               
                    container.appendChild( linktext );


The box shows up but when I click on it, the mouse events seem to go right
through it.  I would like to be able to select and copy the text with the
mouse.  What do I need to do for that?

I thought that I needed to stop the mouse events from bubbling up to the
parent, so I changed it to this:

            function cancelBubble(e) {
                console.log("cancel Bubble!");
                var evt = e ? e:window.event;
                if (evt.stopPropagation)    evt.stopPropagation();
                if (evt.cancelBubble!=null) evt.cancelBubble = true;
            }
            
            
                    var linktext = document.createElement( 'div' );
                    linktext.style.position = 'absolute';
                    linktext.style.top = '50px';
                    linktext.style.width = '100%';
                    linktext.style.textAlign = 'center';
                   
                    linktext.innerHTML = '<span
id="linktext"">'+thisURL+'</span>';
               
                    linktext.addEventListener("click", cancelBubble,false);
                    linktext.addEventListener("touchstart", cancelBubble,
true);
                    linktext.addEventListener("touchmove", cancelBubble,
true);
                    linktext.addEventListener("touchend", cancelBubble,
true);
                    linktext.addEventListener("touchcancel", cancelBubble,
true);
                    linktext.addEventListener("mousemove", cancelBubble,
true);

                    container.appendChild( linktext );
                }
                

This does stop the event from bubbling back, but it does not let me select
the text.  

Thanks
B