Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15178 > unrolled thread

Button mouseover is spotty

Back to article view | Back to comp.lang.javascript

Contents

  Button mouseover is spotty Bint <bint@ign.com> - 2012-07-24 14:37 -0500
    Re: Button mouseover is spotty "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-07-24 20:52 +0000
      Re: Button mouseover is spotty Bint <bint@ign.com> - 2012-07-24 15:56 -0500
      Re: Button mouseover is spotty Bint <bint@ign.com> - 2012-07-24 16:03 -0500
        Re: Button mouseover is spotty RobG <rgqld@iinet.net.au> - 2012-07-31 19:33 -0700

#15178 — Button mouseover is spotty

Hello,

 Boy this newsgroup sure is spammed out!

I have not much experience in javascript (or html, really) and am coming
back to work on a little project I started last year.

I've got a couple of buttons onscreen, they are supposed to be rollover
buttons that light up. But the mouse detection only works on about half the
button.

Here's the code I used to make the button:
            function insert_linkbutton(container) {
                var linkbutton = document.createElement( 'div' );
                linkbutton.style.position = 'absolute';
                linkbutton.style.top = '10px';
                linkbutton.style.margin = 0;
                linkbutton.style.padding = 0;
                linkbutton.style.textAlign = 'left';
                
                linkbutton.innerHTML = '<ul id="nav"><li id="linkbutton"><a
href="javascript:showlink(container)">Show Link to Model</a></ul>';
                container.appendChild( linkbutton );
                container.showinglink = 0;
                return linkbutton;
                
            }

Anyone know what I am doing wrong?  As you scroll the mouse across the face
of the button, it lights up and responds to the mouse only at certain points
on the button, not over the whole rectangle.

Thanks
B 

[toc] | [next] | [standalone]

#15179

Bint wrote on 24 jul 2012 in comp.lang.javascript:

>  Boy this newsgroup sure is spammed out!



 
> I have not much experience in javascript (or html, really) and am
> coming back to work on a little project I started last year.
> 
> I've got a couple of buttons onscreen, they are supposed to be
> rollover buttons that light up. But the mouse detection only works on
> about half the button.
> 
> Here's the code I used to make the button:
>             function insert_linkbutton(container) {
>                 var linkbutton = document.createElement( 'div' );
>                 linkbutton.style.position = 'absolute';
>                 linkbutton.style.top = '10px';
>                 linkbutton.style.margin = 0;
>                 linkbutton.style.padding = 0;
>                 linkbutton.style.textAlign = 'left';
>                 
>                 linkbutton.innerHTML = '<ul id="nav"><li
>                 id="linkbutton"><a 
> href="javascript:showlink(container)">Show Link to Model</a></ul>';
>                 container.appendChild( linkbutton );
>                 container.showinglink = 0;
>                 return linkbutton;
>                 
>             }
> 
> Anyone know what I am doing wrong?  As you scroll the mouse across the
> face of the button, it lights up and responds to the mouse only at
> certain points on the button, not over the whole rectangle.

You do not show any javascript mouseover code, so how can we help you? 

Try, but follow up in a CSS-NG:

<style type='text/css'>
#nav {border:solid 2px navy;background-color:green;}
#nav:hover {border:solid 2px back;background-color:yellow;}
</style>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#15180

Sorry, I don't really know what I am doing.  Is this the code you need to
see?

            #nav {
            padding:0;
            margin:0;
            position:absolute;
            left:0px;
            top:0px;
            }
            
            #nav li {
            display:inline;
            padding:0;
            margin:0;
            }
            
            #nav a:link,
            #nav a:visited {
            color:#0000ff;
            background:#000000;
            padding:6px 10px 4px 10px;
            position:absolute;
            left:10px;
            top:0px;
            float:left;
            width:auto;
            border:1px solid #000080;
            text-decoration:none;
            font:bold 1em/1em Arial, Helvetica, sans-serif;
            text-transform:uppercase;
            text-shadow: 2px 2px 2px #005;
            }
            #nav a:hover,
            #nav a:focus {
            color:#fff;
            background:#525474;
            }

            #backbutton #nav-featured a    {
            background:#e35a00;
            color:#fff;
            text-shadow:none;
            }




On 7/24/12 3:52 PM, in article XnsA09AE8A77C6BBeejj99@194.109.133.133,
"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote:

> Bint wrote on 24 jul 2012 in comp.lang.javascript:
> 
>>  Boy this newsgroup sure is spammed out!
> 
> 
> 
>  
>> I have not much experience in javascript (or html, really) and am
>> coming back to work on a little project I started last year.
>> 
>> I've got a couple of buttons onscreen, they are supposed to be
>> rollover buttons that light up. But the mouse detection only works on
>> about half the button.
>> 
>> Here's the code I used to make the button:
>>             function insert_linkbutton(container) {
>>                 var linkbutton = document.createElement( 'div' );
>>                 linkbutton.style.position = 'absolute';
>>                 linkbutton.style.top = '10px';
>>                 linkbutton.style.margin = 0;
>>                 linkbutton.style.padding = 0;
>>                 linkbutton.style.textAlign = 'left';
>>                 
>>                 linkbutton.innerHTML = '<ul id="nav"><li
>>                 id="linkbutton"><a
>> href="javascript:showlink(container)">Show Link to Model</a></ul>';
>>                 container.appendChild( linkbutton );
>>                 container.showinglink = 0;
>>                 return linkbutton;
>>                 
>>             }
>> 
>> Anyone know what I am doing wrong?  As you scroll the mouse across the
>> face of the button, it lights up and responds to the mouse only at
>> certain points on the button, not over the whole rectangle.
> 
> You do not show any javascript mouseover code, so how can we help you?
> 
> Try, but follow up in a CSS-NG:
> 
> <style type='text/css'>
> #nav {border:solid 2px navy;background-color:green;}
> #nav:hover {border:solid 2px back;background-color:yellow;}
> </style>
> 

[toc] | [prev] | [next] | [standalone]

#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

[toc] | [prev] | [next] | [standalone]

#15248

On Jul 25, 7:03 am, Bint <b...@ign.com> wrote:
> 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:
[...]

> 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!");

I suspect that you are only seeing this issue in some browsers, like
IE. The reason is that there is no console, so at the point of
attempting to call console.log you get an error (which you haven't
reported) like "Error: 'console' is undefined"

So the above is throwing an error that you aren't seeing. Replace
with:

  if (typeof console != 'undefined' && console.log) {
    console.log("cancel Bubble!");
  }

Now it "works". Some other points:

>  var evt = e ? e:window.event;

Your other code supposes support for addEventListener so the above is
redundant.

I don't know why you think you need to stop bubbling, but:

>  linktext.addEventListener("touchstart", cancelBubble, true);

will be set for the capturing phase.

As a tip, you should indent your code using two or four spaces and
manually wrap it at about 70 characters to avoid automatic wrapping.
Posted code should be the minimum required to show the relevant
behaviour, and be able to be copied and pasted, then run without
modification.

--
Rob

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web