• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 18982
  • Last Modified:

Firefox problem

This is the third time I ask this question. I got valuable input from Cd& in my last one, but unfortunately it didn't quite work as we thought.

The problem can be seen at this url(Just an example for this question):

http://www.kalleland.no/users/0115/frametest2.html

If you open that page in IE, you will se how it's suppose to work. Press down your left mouse button in the right frame, and then move it to one of the bullets in the left frame while the mouse button is down. As you can see, the nodes gets highlighted when the mouse moves over them.

Now, do the same in Firefox.

The problem seem to be that Firefox won't stop focusing on the right frame as long as the mouse button is pressed down(See the negative x coordinate). What makes it work in IE is this body event in the right frame:

<body onselectstart="return false">

The reason why I ask this question a third time is that it's very important to me, and I refuse to believe that this couldn't be done in Firefox. So if you have any ideas on how to move focus to the left frame, please let me know.

btw: the solution we came up with last time that didn't work was to blur() the right frame and then focus() the left.

Batalf
0
Batalf
Asked:
Batalf
1 Solution
 
SnowFlakeCommented:
Hi Batalf,
I have never used FF, however :
1) maybe instead of <body onselectstart="return false">
     you can use <body unselectable="on">,
     if I am not mistaken, this attribute is not inherited through some elements (Tables if I remember corectly)
     So you will have to use it on other elements in you HTMl as well.
     maybe It will fork for you in FF ??

2) not related to what you are asking but your left fram has the code:
     function setEvents(){
         var els = document.getElementsByTagName('LI');
         for(var no=0;no<els.length;no++){
             els[no].className='normal';
             els[no].onmouseover = function(){
                 if(allowedOver)this.className='highlighted';
                 allowedOver=false;
                 setTimeout('allowedOver=true',10)
             }
             els[no].onmouseout = function(){
                 this.className='normal'
             }
         }
     }

     this creates a 2 new anonymous functions for each loop
     it would be better of if you did :

     function LIonmouseover= function (){
                 if(allowedOver)this.className='highlighted';
                 allowedOver=false;
                 setTimeout('allowedOver=true',10);
     }
     function LIonmouseout= function (){
          this.className='normal';
     }

     function setEvents(){
         var els = document.getElementsByTagName('LI');
         for(var no=0;no<els.length;no++){
             els[no].className='normal';
             els[no].onmouseover = LIonmouseover;
             els[no].onmouseout = LIonmouseout;
         }
     }

     which has to my understanding only 2 function as many pointers to those 2 functions.

another alternative would be give all those LI's ID="LIID" and save the entire loop
by using (ASSUMING IT WORKS FOR YOUR TARGET BROWSERS)

<script for="LIID" event="onmouseover>
                 if(allowedOver)event.srcElement.className='highlighted';
                 allowedOver=false;
                 setTimeout('allowedOver=true',10);
</script>

<script for="LIID" event="onmouseout>
          event.srcElement.className='normal';
</script>



SnowFlake
0
 
Michel PlungjanIT ExpertCommented:
script for=""
is IE
0
 
SnowFlakeCommented:
thanks michel,
That is what I get for 5 years of IE only programming :)

what about unselectable ?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
BatalfAuthor Commented:
Thank you for you input, Snowflake. But unfortunately <body unselectable="on"> doesn't work.

btw: The left part of the script is just example code for this question. I need this for a script where users drag images from a thumbnail list in the right frame into folders(tree) in the left frame(Almost identical to the file explorer in Windows - start->run->explore).

Do you or any other experts have any other ideas?

Batalf
0
 
SnowFlakeCommented:
Batalf
I don't know how far this will take you but I have decided that its time for me to install FF,
so I did and I played a bit with your code.

have a look at how the following code behaves:

remove the background-color:#DDD; from the stylesheet and change the body to be:

<body onselectstart="return false" style="background-color:red;">
<div id="mydiv" style="width:100%;height:400px;background-color:cyan;">
<h4 style="background-color:blue;">Press down your left mouse button - Then move the mouse pointer to the left frame while the button is down</h4>
<div style="background-color:green;" id="debugDiv"></div>
</div>
</body>

two things as interesting to me here:

1) no matter what I did I could not get rid of the top red strip
2) the different colored stipes behave differently with respect to what happens when you drag from them to the left frame.
    In perticular when dragging from the lower cyan area it behaves as you requested.
    but when dragging from the top cyan area (which IMHO is the belongs to the same DIV) it behaves badly.

maybe you or someone else can push this a few steps forward ??

SnowFlake
0
 
BatalfAuthor Commented:
Thanks alot SnowFlake!

What you mention here is very, very interesting. The fact that it was working from some areas of the screen and not from others got me thinking. Especially: Why didn't it work from the bottom red area where there's "nothing" ?

Then, just for testing, I put this into the CSS:
            
body,html{
      width:100%;
      height:100%;
      padding:0px;
      margin:0px;
}
body,html,div,h4,span
{
-moz-user-focus: ignore;
-moz-user-input: disabled;
-moz-user-select: none;
}  

and suddenly, everything works like charm. I haven't done any big testing yet, but this looks very, very promising.

Thank you SnowFlake, You have really saved my day:-)

btw: the red area above the <h4> tag could be removed by h4{ margin-top: 0px; } in the css.

Batalf
0
 
SnowFlakeCommented:
Glad I could help.

where did you get those style names from ?
0
 
BatalfAuthor Commented:
The most important part of the solution was to set the width and height of the <HTML> tag to 100%. I'm not quite sure why that solved it, but it did.

these rules

-moz-user-focus: ignore;
-moz-user-input: disabled;
-moz-user-select: none;

was a result of a google search. I think it does about the same as unselectable="on"

Batalf
0
 
ameertCommented:
Batalf, thank you so much for your answer...the -moz css properties fixed a similar problem that I was having.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now